How Dynamic Map Works

Dynamic Map works by reading ncf= attributes that are set to elements containing classes like cru-ncf- and ncf- in Webflow elements, then turning them into an interactive, CMS-driven map.

Compared to other solutions where you manually have to set all attributes and create the whole structure on your own, Dynamic Map App takes care of creating and syncing all these elements and attributes in Webflow. You simply have to restyle the elements Dynamic Map inserts to create your custom on brand experience

This article shows the complete DOM tree and every attribute used by Dynamic Map, for your to get an overview of how your map works.

Dynamic Map DOM and Attribute Structure

The entire map lives inside one root element carrying the attribute ncf="map". Every feature — filters, the map canvas, the item list, the style guide — is a child of that root. Elements marked AUTO are generated by Dynamic Map App.

cru-ncf-dynamic-map [ncf="map"]                                   ← Root wrapper for everything
├─ cru-ncf-map-settings [ncf="mapsettings"]  ← Injected map settings
├─ cru-ncf-map-filter [ncf=“mapfilterwrapper”]      ← Map filter wrapper
│   └── ncf-form      ← Webflow required form element
│       └── div [ncf="mapfilterreset"]                       ← Filter reset button
│       └── Other filter and search elements that you might add
├─ ncf-map-wrapper          ← Container that sets layout for map list + map, can be ungrouped
├── cru-ncf-map-items                           ← CMS item list container
│   └── cru-ncf-map-item-list [ncf="mapitemwrapper"]
│       └── cru-ncf-map-list-item [ncf="mapitem”, ncf-mapcollection=“collection list”]
│           └── cru-ncf-list-item-embed [ncf="mapembed"]
│               └── ncf-item-wrapper
│                     └── cru-ncf-list-item-embed [ncf=“mapembed”]  ← Links list item to map
│                     └── Text Block   ← Placeholder
├── ncf-map-inner-wrapper ← Container that sets layout for map + controls
│   ├── cru-ncf-map [ncf="mapcontainer"]           ← The interactive map canvas
│       └── ncf-map-loading-state ← Loading State wrapper
│           └── img  ← Spinner Illustration
│   └── div .cru-ncf-zoom-controls-wrapper
│       ├── ncf-zoomin-button [ncf="mapzoomin"]
│       ├── ncf-zoomout-button [ncf="mapzoomout"]
├─ div .cru-ncf-map-styleguide [ncf="mapstyleguide"]  ← Style guide (hidden on live site)
├── cru-ncf-error-message [ncf="mapcsswarning"] ← Configuration error display
├── ncf-list-item-style-wrapper               ← List item style states
│   └── ncf-tooltip-popup-wrapper                
│           └── ncf-tooltip-popup-list
│               └── ncf-popup-tooltip [ncf="mapoverlays"]
│                     └── ncf-tooltip-popup-inner-wrapper
│                           └── cru-ncf-pop-up [ncf="mappopupcontent”] ← Pop-Up Wrapper
│                                  └── ncf-pop-up-close [ncf="mappopupclose”] ← Pop-Up
│                                  └── Text Block ← Content placeholder
│                           └── ncf-seperator
│                           └── cru-ncf-tooltip [ncf="maptooltipcontent”] ← Tooltip Wrapper
│                                  └── Text Block ← Content placeholder
│           └── ncf-custom-code-embed ← Code Embed
├─ ncf-empty-state-wrapper                    ← Empty state shown when 0 results
│   └── cru-ncf-empty-state [ncf=“mapempty”]          
│           └── ncf-filter-reset [ncf=“mapfilterreset”]      
├─ cru-ncf-pin-wrapper [ncf="mappinstylewrapper"]
│├── cru-ncf-pin [ncf="mapicon”, ncf-pinstyle=“default”]            ← Default pin state
│├── cru-ncf-pin.hover [ncf="mapicon”, ncf-pinstyle=“hover”]      ← Hover state
│├── cru-ncf-pin.active [ncf="mapicon", ncf-pinstyle=“active”]     ← Active state

├─ Other style wrappers for elements that you might have added

💡 Whenever you change the DOM structure, make sure not to ungroup elements that are nested within an attribute structure, as this might cause issues. Adding new elements is no problem, but ungrouping or deleting existing ones might be.

Elements using cru-ncf- prefix

Every element that Dynamic Map generates automatically carries a class starting with cru-ncf-. Do not delete or ungroup any element with a cru-ncf- class as the map will stop working. You can add your own classes alongside cru-ncf- classes for styling; but you can't change the structure since these elements carry the important attributes that make Dynamic Map work.