Embedding a map in your website: MapLibre vs Mapbox vs Leaflet
Three excellent libraries. Three very different bills. Three very different ceilings on what you can build. Here's how to pick the right one for an embedded map on a marketing site, a SaaS dashboard, or a public-sector deliverable.
You need a map on your website. Three libraries you'll inevitably compare: MapLibre GL JS, Mapbox GL JS, and Leaflet.
Pick wrong and you'll either pay £8,000 a year for tiles you didn't need, or ship a slideshow-grade map that can't render your data. Here's how we choose between them in 2026 — informed by twelve production deployments at BozApps and Bozmaps.
- Marketing site with a single "find us" pin: Leaflet. Lightest, simplest, free.
- Branded interactive map (vector tiles, custom styling, 3D terrain): MapLibre GL JS. Free forever, great quality, no Mapbox bill.
- You need Mapbox's specific products (Directions API, geocoder, traffic, isochrones): Mapbox GL JS — and budget for tiles.
- SaaS dashboard with thousands of markers / heatmaps / dense layers: MapLibre GL JS or Mapbox GL JS. Leaflet will struggle.
Quick history (so the comparison makes sense)
Leaflet (2011) is the original lightweight web-map library. Renders raster tiles or simple vector overlays on a Canvas/SVG. ~40 KB. Still the default choice for "drop a map on this page."
Mapbox GL JS (2014) introduced WebGL vector-tile rendering: fast, smooth zooming, custom styling, 3D buildings, hill-shading. Pricing changed in 2020: now you pay per map load above a free tier.
MapLibre GL JS (2020) is a community fork of the last open-source Mapbox GL JS release, made when Mapbox went proprietary. Almost API-compatible with Mapbox, fully open-source, no usage fees. Catching up on features fast.
Cost comparison — the headline
| Library | Library license | Tile cost |
|---|---|---|
| Leaflet | BSD-2 (free) | Whatever tile provider you choose — typically OSM raster (free), Stadia (paid above free tier), or Mapbox tiles (paid). |
| MapLibre GL JS | BSD-3 (free) | Free tiles via Protomaps, OpenFreeMap, MapTiler free tier, or self-hosted. Tile-pricing question goes away. |
| Mapbox GL JS | Proprietary (free below 50,000 map loads / mo; paid above) | Mapbox tiles required — same usage-based pricing. |
Real numbers: a SaaS dashboard with 50 active users, each loading the map twice an hour for an 8-hour workday, generates ~16,000 map loads per day = ~480k per month. On Mapbox, that's in the paid tier; on MapLibre with OpenFreeMap or self-hosted tiles, it's £0.
What you give up by choosing MapLibre over Mapbox
- Mapbox's hosted tiles, which are very good — high-resolution satellite imagery, well-styled basemaps, frequent updates.
- Mapbox Studio (the visual style editor).
- Some Mapbox-specific SDK features that have not landed in MapLibre yet — for most projects, this list is shorter than people think.
- Mapbox's hosted APIs: Directions, Geocoder, Isochrone, Map Matching, Tilesets. These aren't part of GL JS itself — you can still use them with MapLibre by calling the APIs directly (you'll just pay Mapbox for those API calls).
What you give up by choosing Leaflet over the GL libraries
- WebGL rendering. Leaflet uses SVG/Canvas, so it slows down past a few thousand markers.
- Smooth pan + zoom. Leaflet snaps between zoom levels.
- 3D terrain, hillshading, vector-tile styling, runtime style edits.
- Pitched / rotated views.
For half the maps we ship — a single pin, a route, a small set of markers — Leaflet is exactly right. It does less, but what it does is enough.
Performance comparison (real numbers)
We ran the same dataset of 5,000 points through all three libraries on a mid-range laptop:
- Leaflet (Canvas): Smooth pan, ~25 fps at zoom <10, drops below 10 fps when zoomed in to render all markers.
- MapLibre / Mapbox GL JS (WebGL): Steady 60 fps across all zoom levels.
- Leaflet (default SVG): 5,000 SVG nodes — laggy from the start, freezes on the first interaction.
Practical takeaway: above ~1,000 markers on screen at once, default Leaflet is the wrong tool. Either switch to Leaflet's Canvas renderer with clustering, or move to MapLibre/Mapbox.
What we'd choose for specific projects
"Find us" map on a marketing page
Leaflet + OSM raster tiles. 40 KB of JS, one CDN script, done. Don't overthink it.
Race route website (like our Tour of Bosnia or Falcon's Paths builds)
MapLibre GL JS. Need vector styling, 3D terrain, smooth zoom across desktop and mobile, no tile bill.
Branded marketing map with hand-tuned cartography
Mapbox GL JS + Mapbox Studio. The visual style editor is genuinely the easiest way to design a custom map look. Worth the bill.
SaaS dashboard with thousands of data points (like H2 Intel)
MapLibre GL JS. WebGL rendering, no usage-based pricing, full control over basemap tiles via Protomaps or self-hosting.
Public-sector deliverable (council, NHS, government)
MapLibre GL JS with open data. Public-sector procurement now actively favours open-source dependencies. We've watched a procurement officer kill a Mapbox-based bid in a single sentence: "we cannot accept usage-based vendor lock-in."
The accessibility footnote
Maps are difficult to make truly accessible. Leaflet has the most mature keyboard / screen-reader story. The GL libraries are improving but still need careful work to meet WCAG AA. If your project has a hard accessibility requirement, factor 1–2 extra weeks for keyboard navigation, focus management and screen-reader announcements.