Map Empty State

The empty state is the message or panel that appears automatically on your map when the current filter combination returns no results. Instead of leaving the map visually empty and the user confused, the empty state communicates clearly that no locations match the selected filters, and optionally offers a one-click way to reset and start fresh.

The empty state is added to your Webflow project automatically when you set up Dynamic Map. It’s a native Webflow element you can style freely in the Style Guide. It only appears when filters are active and no map items match. On pages without filters, or when items are visible, the element stays hidden.

Style Empty State

The empty state wrapper is the element with the class cru-ncf-empty-state. You can find it in the Webflow Navigator inside the main Dynamic Map structure and style it in the Style Guide. Look for the Filter Reset / Empty State section. All child elements (message text, button, icons) can be freely modified.

The filter reset button inside the empty state uses the attribute ncf="mapfilterreset". Keep this attribute intact. It’s what makes the button clear all active filters when clicked. The button text, appearance, and position can all be changed freely in Webflow Designer.

💡 For styling all Dynamic Map elements including the empty state, see Style Map Elements and State Types.

Troubleshooting

If the empty state element has been accidentally deleted, you can restore it without rebuilding your map. Open Dynamic Map App in Webflow Designer, scroll to the Extra Elements section, and click Add Empty State.

💡 To avoid this, treat the cru-ncf-empty-state element like all other structural Dynamic Map elements. Style its children, but never delete or move the wrapper itself outside its expected location in the Webflow Navigator.

If the empty state appears when filters are not active, or doesn’t appear when it should, check that Category Filters are correctly configured and synced in Dynamic Map App.

Practical Tips

• Always include both a message and a reset button. Empty states work best when they explain what happened ("No locations match your filters") and give the user a clear next action (the filter reset button). A blank white area with no explanation is worse than no empty state at all.
• Style the empty state to match your map’s visual design. It should feel like a natural part of your page, not a fallback. Match the fonts, colors, and spacing to the rest of your map interface for a polished, on-brand experience.
• Test with a real filter combination that returns zero results. The empty state only appears when no items match the active filters on the live site. It won’t appear in Webflow Designer preview mode. Use your published staging site to confirm it looks and behaves correctly.

Use Cases

• A store locator where a user filters for a store type that doesn’t exist in their area. The empty state tells them there are no results and offers a Reset Filter button.
• A job board map where a combination of location and department filters returns zero openings. The empty state prevents the map from looking broken.
• A restaurant guide where a very narrow filter combination returns nothing, the empty state gives users a clear next action rather than a blank screen.
• Any filtered map where communicating "no results" clearly is important for usability and trust.