Map Category Filter

Category filters let users narrow map items by CMS option field values. Create an Option field in your Webflow CMS, create a Category Filter in Dynamic Map App, update the code embed, and style the filter elements in Webflow. Currently supports Option Fields and nested Option Fields only. See the Multi-Reference Fields workaround for other field types. Rename CMS options carefully; doing so requires recreating the filter chip.

Webflow Interactions in Map Item List (Experimental)

Map Text Search

Category filters let users narrow down map items by category tags or checkboxes, such as “Sightseeing Spots” or “Nature Parks.” This improves the browsing experience and makes large maps far easier to navigate.

💡 Good to Know: Currently, Dynamic Map’s category filter only supports the Option Field in Webflow CMS. Need multi-reference field support? Share your feedback here, or see the Multi-Reference Fields workaround guide.

Create Option Field

Navigate to your CMS Collection List.
Create an Option field. Each option represents one filterable category.

Webflow CMS Collection List showing an Option field being created to define filterable categories for Dynamic Map.

Create a Filter in Dynamic Map App

In Dynamic Map App, navigate to Filter and Sorting and click Create Category Filter.

Dynamic Map App showing the Filter and Sorting section with the Create Category Filter button highlighted.

Configure Filter

Select the Option field from your collection list.
Choose between Filter Chips or Checkbox (UI preference only).
Press Add Category Filter.
Press Save in Dynamic Map.

Dynamic Map App filter configuration modal showing an Option field selected, filter chip UI type chosen, and the Add Category Filter button.

Update Code

Insert the updated code snippet into Dynamic Map’s Custom Code embed.

Animated GIF showing how to copy the updated Dynamic Map code snippet and paste it into the Custom Code embed inside Webflow.

Locate in Webflow Designer

The filter will appear inside the cru-ncf-map-filter div. Style the filter elements directly in Webflow from there.

Webflow Designer showing the created filter chips with the ncf-filter-option placed inside the cru-ncf-map-filter

Style the Active State

To style the active (selected) chip state, go to the Style Guide, add the class active to the second filter chip, and style it.

Webflow Designer showing the cru-ncf-map-filter div with the added active class to style the filter chips' active state

⚠️ Be Aware: Renaming your option fields might cause issues: If you rename an option field in your collection list, you’ll need to recreate the filter chip. Open the Dynamic Map App and follow the resync process. Be sure to delete the old category filter chip linked to the renamed option, as it will no longer work.

Adding New Categories and Resyncing

Create a New Category

Add a new option to your collection’s category Option field in Webflow CMS.

Webflow CMS collection editor showing a new option being added to the category Option field.

Locate the Unsynced Chip

Open Dynamic Map App, click Refresh, then navigate to Filter and Sorting. The new category chip will be marked as Unsynced. Click Edit to add the missing tag.

Dynamic Map App Filter and Sorting panel showing a category filter chip marked as Unsynced after a new CMS option was added.

Reconfigure the Filter

In the Filter Modal, click Insert Missing Filter Chips, then Apply.

Dynamic Map filter modal showing the Insert Missing Filter Chips button used to add newly created CMS categories to the existing filter.

Save Changes

Click Save. The new filter chip will appear at the bottom of the cru-ncf-map-filter element in Webflow.

Dynamic Map App save confirmation screen after adding a new category filter chip.

Webflow Designer showing the newly added filter chip placed at the bottom of the cru-ncf-map-filter div. — Webflow Designer showing the newly added filter chip placed at the bottom of the cru-ncf-map-filter wrapper div.

Troubleshooting

For a complete diagnosis guide, see Why is my Category Filter not Working?

Option 1: Filter Out of Sync

Edit the filter and click Insert Missing Filter Chips. Re-insert the code embed to ensure the snippet is current.

Dynamic Map App showing a category filter marked as out of sync, with options to edit and re-insert missing filter chips.

Option 2: Empty Option Fields

If any CMS items have an empty category option field, the entire filter breaks. Fix this by creating a placeholder option (e.g. “empty”) and applying it to all items without a real category, then hide it from the UI.