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.