Open Street Map

OpenStreetMap gives you free, community-maintained map data with no API key, custom tile styling, and full control over what appears on the map. Connect it to your site to embed static maps or build multi-marker interactive maps with Leaflet.js, driven directly by CMS collections with no per-request bill.

That makes it a fit for multi-location businesses, real estate teams, event organizers, and agencies. Marketing teams update pins through the CMS without touching code, and engineering teams sidestep Google Maps' freemium billing limits.

How to integrate Open Street Map with Webflow

What is Open Street Map? OpenStreetMap is a free, editable map of the world built by a community of contributors who add data about roads, trails, cafés, railway stations, and more. It's open data licensed under the Open Database License (ODbL), so you can use it for any purpose as long as you credit OpenStreetMap and its contributors. The OpenStreetMap Foundation operates the project on behalf of the community.

Reach for OpenStreetMap when you need store locators and property search maps without Google Maps billing. Event organizers can use it for venue guides. The data is free, and the standard tile server requires no API key. That combination works well for CMS-driven maps where non-developers add locations and the map updates automatically.

Start the OpenStreetMap integration with the Dynamic Map app, which turns CMS collections into interactive maps with custom pins and filters with no code required. For native features such as direct embeds or widgets, paste an OSM iframe or load Leaflet.js through custom code in head and body tags for multi-marker maps. For server-side builds, pair the Data API with OpenStreetMap APIs to get full control over geocoding and CMS sync, including POI queries where needed.

Most implementations combine two or more of these methods depending on the complexity of the setup.

Use the Dynamic Map app

The Dynamic Map app by No Code Flow converts CMS collections into interactive maps without any code. It supports OpenStreetMap alongside Google Maps, Mapbox, and MapLibre. Since MapLibre and OpenStreetMap are open source and need no API key, you can launch without watching billing limits. The app is approved—meaning it passed a quality review—though it isn't endorsed or certified. Install it free and test on any .webflow.io staging site, then apply a license when you publish to a live domain.

Set up the integration by installing the Dynamic Map app from the Marketplace and opening it in Designer. Connect it to a CMS collection that holds your location data with latitude and longitude fields, then choose OpenStreetMap as the tile provider, configure pins and popups, and publish.

The app handles the following without custom code:

• CMS-connected location pins with custom markers per item or category
• Popups, tooltips, category filters, and live text search
• Range slider filtering, list sorting, auto-zoom, and shareable filtered URLs
• Favorites with Memberstack sync and native styling

For no-code CMS-connected maps, use the Dynamic Map app. For a single location, use an iframe embed.

Add Open Street Map with Code Embed and Leaflet.js

When you don't need a full app, add OpenStreetMap directly through custom code. The simplest path uses an iframe from OpenStreetMap's built-in Share feature. For multiple markers or CMS-driven data, load Leaflet.js through the custom code sections. You need a Core, Growth, Agency, or Freelancer Workspace, or an active Site plan, to use the Code Embed element.

Embed a single-location iframe

The fastest way to show one location uses OpenStreetMap's Share feature. It generates an iframe with a slippy map interface and requires no API key or code knowledge. This method works well for an event landing page or a contact page with a single office.

On openstreetmap.org, pan and zoom to your location, then click Share in the sidebar. Select HTML, check Include marker if you want a pin, and copy the <iframe> snippet. In Designer, open the Add panel, drag a Code Embed element onto the canvas, paste the iframe, then save and close.

Use Leaflet.js for multiple markers.

Build a multi-marker map with Leaflet.js

For custom styling and multiple pins, Leaflet.js renders an interactive map using OSM tiles. It's the JavaScript library that www.openstreetmap.org itself uses. Load it through custom code in head and body tags, then initialize the map in a Code Embed. Loop through Collection List data to place markers from your CMS.

To build the map:

1. Go to Site settings > Custom code, add the Leaflet <link> CSS tag in the Head code section and the Leaflet <script> tag in the Footer code section, then click Save changes.
2. Drag a Div Block onto the canvas, set its ID to mapid, and give it a defined height such as 400px.
3. Add a Code Embed that runs L.map('mapid') and adds a tile layer with L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {...}).
4. Loop through CMS-provided latitude and longitude values in the same script to place L.marker() instances.

Every tile request must send a valid Referer header, and the public tile server isn't built for heavy traffic. If your production site sees meaningful volume, budget for a commercial tile provider. The official Leaflet quick-start guide covers the base setup.

Build with Webflow and Open Street Map APIs

Combine OpenStreetMap's read APIs with the Data API for geocoding and POI discovery. Use the same API path to sync OSM changes into your CMS. This path needs server-side development. You handle authentication and rate compliance yourself, with caching built into your server-side implementation. It fits agency developers and engineering teams building custom location features beyond what the app or embeds cover.

The available APIs handle different jobs:

• Nominatim geocoding API converts addresses to coordinates through /search and coordinates to addresses through /reverse
• Overpass API runs read-only queries to pull POI subsets by location or tag
• Data API handles CMS collections and item creation
• Webhooks trigger real-time events between systems

Read Nominatim's and Overpass's usage policies carefully before you build. Both enforce strict limits and prohibited uses.

Query POIs with the Overpass API

The Overpass API returns custom OSM data subsets, such as all cafés within a bounding box. Send an Overpass QL query and render the results as Leaflet markers on your page. This works for live POI discovery where you don't want to store every point in the CMS.

Build and test your query in Overpass Turbo, then copy the working OverpassQL. In a Code Embed, send a POST request to https://overpass-api.de/api/interpreter with the body data= plus your URL-encoded query. Parse the returned JSON and pass each result's coordinates to L.marker() on your Leaflet map.

Keep usage under roughly 10,000 queries per day and 1 GB of data per day on the main instance. Declare per-request limits with [timeout:N] and [maxsize:N] prepended to your query.

Sync OSM data into the CMS via webhooks

For sync, poll OpenStreetMap replication diffs published minutely, hourly, and daily. OpenStreetMap doesn't provide push webhooks. To sync OSM data into your CMS, poll a replication feed on your server, then write updates through the Data API. Native webhooks then notify your systems when CMS items change.

Build the sync pipeline by polling the OSM replication state.txt at https://planet.openstreetmap.org/replication/day/state.txt to detect new diffs. On new data, create or update CMS items with POST /v2/collections/{collection_id}/items on the Data API. Register a webhook for collection_item_created or collection_item_changed to trigger downstream actions on updates.

This pipeline runs entirely on your infrastructure. The webhook payload includes fieldData, which carries any latitude and longitude fields you store.

What can you build with the Open Street Map Webflow integration?

Bring OpenStreetMap into your site and you can build interactive, CMS-driven maps without Google Maps billing or a mapping backend.

• Store and dealer locator: Show every franchise location as a filterable pin with hours and service data. The Dynamic Map app renders a Collection List of branches as OSM markers with live text search.
• Real estate property map: Build a listing search where each CMS property appears on the map with neighborhood context. Leaflet.js plots latitude and longitude fields from your listings collection.
• Event venue guide: Design a festival map with vendor stalls, stages, and facilities that update as organizers add CMS entries. New items appear as pins on the next publish.
• Travel and tourism POI map: Present destinations and attractions with images and descriptions. An Overpass query pulls nearby points of interest and renders them alongside your curated locations.

If you need more control over geocoding or live OSM data sync, the API integration path covers those cases with full flexibility.