CMS Locations Map
FRAMER COMPONENT · CMS MAP
Put a Map Pin in each Collection List item and the map shows those items. Filter the list with Framer’s own filters and the map follows. No API key.
Café
Malasaña
Calle del Espíritu Santo 18, 28004 Madrid
Open daily 8:00–20:00
Café
Chamberí
Calle de Santa Engracia 64, 28010 Madrid
Open daily 8:00–20:00
Roastery
Madrid Roastery
Calle de Méndez Álvaro 72, 28045 Madrid
Tastings Sat 11:00
Café
Gràcia
Carrer de Verdi 41, 08012 Barcelona
Open daily 8:00–20:00
Roastery
Poblenou Roastery
Carrer de Pujades 112, 08005 Barcelona
Tastings Fri 18:00
Café
Ruzafa
Carrer de Sueca 22, 46006 València
Open daily 8:30–19:30
Café
Triana
Calle Pureza 40, 41010 Sevilla
Open daily 8:30–19:30
Café
Chiado
Rua Garrett 60, 1200-204 Lisboa
Open daily 8:00–19:00
Café
Bonfim
Rua do Bonfim 120, 4000-140 Porto
Open daily 8:00–19:00
Café
Le Marais
24 Rue de Bretagne, 75003 Paris
Open daily 8:00–19:00
Café
Shoreditch
58 Redchurch Street, London E2 7DJ
Open daily 7:30–18:30
Roastery
Bermondsey Roastery
12 Druid Street, London SE1 2EY
Tastings Sun 10:00
Live component. Pick a region: Framer’s own CMS filter hides those cafés and the map refits. Click a card and the map flies to it; Near me sorts the list by distance.
YOUR BRAND, YOUR MAP
The same pins in any look.
Five map styles, or your own colours for land, water, roads, parks and labels. Pins, dots or your logo as the marker, with a colour for each category.
Dark
Dark style, dots in cream, roasteries in amber and clusters that open as you zoom.
Fiord
The blue-grey style with white pins: calm enough for a corporate site.
Brand colours
Your own palette. Here sage land, soft water and green pins, labels in English.
NATIVE CMS
Three steps, no plugin, no API key.
01
Add the coordinates
Two number fields, Latitude and Longitude. The docs show how to copy them from Google Maps in a few seconds.
02
Drop a Map Pin in the card
Inside your Collection List item. Connect its fields: the pin is invisible, or shows the distance after Near me.
03
Place the Map
Anywhere on the page. Filters, sorting, search and pagination are Framer’s own; the map shows whatever the list shows.
WHAT’S INSIDE
Built for real location pages.
MapLibre ships inside the component; the only outside request is the map tiles, from OpenFreeMap, with no key and no tracking. If they can’t load, visitors get a plain list instead.
Native CMS filters
Click a card, fly to it
Brand colours
Category colours
Clusters
Popups with directions
Near me with distances
Sort by distance
Ctrl + scroll to zoom
Keyboard accessible
No API key