Map List Sorting

List Sorting adds a sort dropdown to your map, letting users reorder items by any CMS field. Enable List Sorting in Dynamic Map App, select the sortable fields, update the code embed, and style the ncf-sort element in Webflow. Set a default sort order in both collection lists (main and pop-up/tooltip) — mismatched sorting causes pop-ups to display wrong content.

Custom URL Parameters

Auto Zoom to Filtered Location

List sorting lets users quickly reorder your map item list to find what they're looking for.

Animated GIF showing Dynamic Map list sorting in action — the user selects a sort field and the item list reorders instantly.

Enable in Dynamic Map App

Enable List Sorting in Filter and Sorting.
Select the fields users should be able to sort by.

Dynamic Map App Filter and Sorting panel showing List Sorting enabled with sortable CMS fields selected.

Update Code

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 ncf-sort element is placed inside the cru-ncf-map-filter div.

Webflow Designer showing the ncf-sort dropdown element inside the cru-ncf-map-filter div, ready to be styled.

Set Default Sorting

💡 Pro Tip: By default, Webflow shows items in CMS custom order on first load. To override this, set your desired initial sort order in Webflow's collection list settings. Apply the same sort to both collection lists (the main list and the pop-up/tooltip list) — otherwise tooltips and pop-ups will display data for the wrong item.

Webflow Designer showing the sort order settings on the main map item collection list.

Webflow Designer showing the sort order settings on the Pop-Up and Tooltip collection list — must match the main list.

Rename Dropdown Options

By default, sort options are displayed in lowercase. You can rename them by clicking the option element in Webflow Designer and editing the text directly.