Last updated:
May 19, 2026
How to style Dynamic Map elements and states
Elements not listed here can be styled like all default Webflow elements.
1. Set Pin States [Hover + Active]
Add via Extra Elements if deleted. The map location pin can be styled in Webflow Dynamic Map's Style Guide.
Style the pin's default state by styling the pin without additional style elements attached to it.
Style the pin's hover state by adding the class "hover" to create a combo class in Webflow.
List Item States [Hover]
The list item state can be styled in Webflow Dynamic Map's Style Guide. This only affects the element's style, not its content.
Style the list item's default state by styling the list without additional style elements attached. Style the hover state by adding the class "hover" to create a combo class.
Style Pop-Up / Tooltip
Add Pop-Up and Tooltip via Map Interactions.
Style Pop-Up Contents
Every element placed inside the cru-ncf-pop-up will be displayed in the pop-up on click.
Style Pop-Up Close Button
Every element placed inside the cru-ncf-pop-up-close will work as UI for the pop-up close button.
Style Tooltip Contents
Every element placed inside the cru-ncf-tooltip will be displayed in the tooltip on hover.
Style Filter Chips
Add Filter Chips via Filter and Sort.
Style the filter chips' default state by styling the class without additional style elements attached to it.
Style the hover state using Webflow's default hover selector.
Style the active state by adding the combo class "active" to the class.
Address Search [Active State]
Style Address Search States
Style the default state using the ncf-address-search-input class. Style the hover state using Webflow's default hover selector. Style the active state by adding the combo class "active".
Style Address Search Elements
Style the address search interactions using the classes ncf-address-current-location and ncf-address-clear.
Pro Tip: Set ncf-address-range-container to Display: None while designing — Dynamic Map will still display it on the live site. See Map Address Search.
Filter Reset
Add via Extra Elements if deleted. The filter reset replaces the item list when the user's filter combination returns no results.
Style the filter reset by adding or modifying elements inside the cru-ncf-empty-state class. See Map Filter Reset.
Custom / Individual Pin Style
Upload individual pins to your item in the collection list. Individual pins do not adapt their size — upload them using the desired dimensions. See Custom Pins for Individual Items.
Pro Tip: Use Webflow's CSV import feature to upload custom pin image URLs at scale.
Map Loading State
All elements placed inside the ncf-map-loading-state element will be displayed until the map finishes loading.
Pro Tip: Use animated SVG files — upload custom-built animations or use pre-built files from SVG Backgrounds. Just replace the default image.
Custom Map Style [Mapbox Only]
Navigate to your Mapbox Account → Styles → New Style to create a custom styled map. Then insert your Style URL into Dynamic Map App.
