← Back to Documentation Overview | Search these pages with the button in the top right

Category filters let users narrow down map items by category tags or checkboxes, such as “Sightseeing Spots” or “Nature Parks.” This enhances the user experience and makes it easier to browse your map.

<aside> 💡 Good to Know: Option Field Only

Currently, Dynamic Map’s filter only supports filtering using the Option Field in Webflow’s collection lists. If you need support for Reference or Multi-Reference Fields, please share your feedback with us here.

</aside>

Create Option Field

1. Navigate to your Collections List
2. Create an option field in your collection list. Each option represents one of the filterable categories.

Create in Dynamic Map App

Navigate to Dynamic Map App. Click “Create Category Filter” in Filter and Sorting

Configure Filter

1. Select an option field from your collection list

2. Choose between Filter Chips or Checkbox (this is just a ui decision)

3. Press “Add Category Filter”

4. Press “Save” in Dynamic Map to create the filter

Update Code

Insert updated code into Dynamic Map’s Custom Code

Locate in Webflow Designer

The filter will be placed in the cru-ncf-map-filter div. From there you can style the filter elements in Webflow.

Style Active State

To style the chips active state navigate to the styleguide and add the class “active” to the second filter chip.

<aside> ⚠️ 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.

</aside>

Adding New Category Options / Resync Category Filter Chips

Create new category

To add a new category create a new option in your Collection List’s category option field.

Locate unsynced chip

After that, open the Dynamic Map App, click Refresh, and navigate to the Filter and Sorting section. You’ll see your category chip marked as Unsynced. Click Edit to re-add the missing category tags.

Reconfigure Filter

In the Filter Modal, click Insert Missing Filter Chips and then Apply to add the missing filter chips.

Save Changes

Click Save to add the missing filter chips to your Webflow project.