setup
COMPONENTS
INTEGRATIONS
FAQ
Filter Map - Superfields for Framer
Filter Map plots your CMS collection as pins on an interactive map, and can filter the collection to whatever's inside the current map view. Perfect for rentals, store locators, events and travel guides.
Before you start: Filter Map is powered by MapFrame, a paid add-on - unlock it once in the plugin. Like every input, it attaches to your Superfields Collection, so set that up first (see Getting Started with Superfields).
Where to use it
Airbnb-style rentals: a map of listings that narrows as guests pan and zoom.
Store locator: nearby stores, studios or stockists.
City guide: restaurants and attractions by neighbourhood.
The pieces of a map
When you drag in Filter Map, the Map marker popup component comes with it - move it somewhere handy on your canvas. A map is made of four parts:
The map itself.
Markers - a pin, or a label pulled from the CMS (like a price).
The marker popup - the card shown when someone clicks a marker.
Marker clusters - when pins sit close together at the current zoom, they collapse into a count bubble.
📸 [IMAGE] Filter Map on canvas with pins and a marker popup, next to the property panel.
Connect your data
Collection - connect the same CMS collection your Superfields uses (e.g. Bnbs).
Setup → ID Filter Group - match your collection, same as any input.
Coordinates (CMS Lat / Lng) - choose the latitude and longitude fields from your CMS.
Need coordinates first? Each item needs a latitude and longitude stored in its own CMS field. If you haven't added those yet, see Adding Coordinates to Your Framer CMS before this step.
Map Setup
Theme - pick a map tile style.
Initial View - set Center Lat, Center Lng and Zoom. It defaults to London (51.505, -0.09, zoom 8), so change it to your area.
Marker - choose Icon or Label. Icon lets you upload a custom icon and set icon and shadow size. Label shows a CMS value on the pin - for example Price with a
$prefix - and you can style the font, colours and border.Cluster Marker - nearby pins group into a count bubble. Style it, or turn clustering off. There's a zoom level where clusters stop and individual markers appear (for example clustered at zoom 11, individual pins at 12).
📸 [IMAGE] Map Setup showing the Theme list, Initial View, and the Marker (Icon/Label) and Cluster options.
Set up the marker popup
The popup is a normal Framer component, so style it however you like. Two settings make it work:
Field Mappings - the important one. Map each CMS field to a popup variable (image, title, subtitle, link). For example, map your CMS Title to the Title variable, a thumbnail to Image, and price or description to Subtitle. They don't have to share the same name - you're mapping them here.
Collection Route - set this to your item's collection (e.g. Bnbs) so clicking a marker popup opens that CMS page. Without it, clicking does nothing.
📸 [IMAGE] A Field Mappings Item mapping a CMS field to a popup property, plus the Collection Route.
The map wraps the popup in its own container, so set the popup's radius here (not just on the component). A close button is added automatically - you can style its size and background too.
One last thing: Preview
While you're building, keep Preview on so you can see the map. When you're done, switch it off. A live map does a few round trips to load, so leaving one running on the canvas can slow the editor down. With Preview off you get a lightweight placeholder on the canvas, and your published site always renders the full map.
And that's it - your CMS, on the map, filtering as people explore.
