It’s Christmas, Take a Breath
MapLibre wins as the default for new interactive web maps, and OpenLayers wins the moment you’re stuck with a non-standard projection or WMS/WFS services.
You made it. The family’s asleep, the dishes are done, and you’ve got one quiet hour to yourself. You’re going to spend it reading about JavaScript map libraries, and honestly that’s the most peaceful thing I can imagine.
This one’s a lighter read. No deep Compose stacks, no 6-hour import times. Just three libraries, their vibes, their tradeoffs, and a decision tree that takes about 30 seconds to run through. If you followed along yesterday with Nominatim or PostGIS, you’ve got a geocoder and a spatial database, now you need something to actually put that data on a map.
Let’s settle this quickly so you can get back to your coffee.
Full example: Three minimal HTML pages, one per library, at github.com/KingPin/sumguy-examples/tree/main/self-hosting/leaflet-vs-maplibre-vs-openlayers
So Which JS Map Library Wins For Your Project?
- Pick Leaflet if you just need a marker or two on a content page and want the smallest possible bundle.
- Pick MapLibre if you’re building a new interactive map with vector tiles and want the 2026 default.
- Pick OpenLayers if your data needs custom projections, WMS/WFS services, or serious drawing and editing tools.
Leaflet (2011): The One That Just Works
Leaflet is the library your uncle uses. Not as a dig, your uncle gets things done. It came out in 2011, hit 1.0 in 2016, and has been the “sensible default” for anyone who needs a map on a page without writing a dissertation first.
The philosophy is: small, simple, raster-first. Drop in a CDN link, two lines of JavaScript, and you have a working slippy map in five minutes. The API is clean enough to read without looking at the docs:
<!DOCTYPE html><html><head> <style>#map { height: 400px; }</style></head><body> <div id="map"></div> <script> const map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(map);
L.marker([51.505, -0.09]) .addTo(map) .bindPopup('A marker. That was easy.') .openPopup(); </script></body></html>That’s the whole thing. No build step, no bundler, no framework adapter. It runs in a <script> tag on a static HTML page from 2011 and still will in 2031.
Bundle size: ~140 KB (CSS + JS). Core JS is about 40 KB gzipped. For a landing page or a blog post with a map embed, that’s nothing.
Where Leaflet shines:
- Content sites where a map is decorative or supplemental
- Quick demos and prototypes you need working in an afternoon
- Projects where your team knows CSS better than WebGL
- Satellite tile overlays, heatmaps via plugins, marker clusters: all covered by the plugin ecosystem
Where Leaflet strains:
- Vector tile rendering at scale. Leaflet was built for raster tiles (PNG/JPEG image grids). It can do vector tiles via plugins, but that’s bolted on, not native. At 100,000 features or complex dynamic styling, you’ll feel it.
- Custom layer projections beyond Web Mercator get awkward fast.
- If you need GPU-accelerated rendering, Leaflet doesn’t have it.
Plugin ecosystem: This is actually Leaflet’s secret weapon. A decade of community plugins covers almost every gap, leaflet-markercluster for dense pins, leaflet.heat for heatmaps, leaflet-draw for user editing, leaflet-sidebar-v2 for side panels. If your feature is common, someone’s already built it.
The maintenance story is less rosy. The core library has been relatively quiet since 1.x. There’s active development on Leaflet 2.x (ESM, modern API), but it’s been “in progress” long enough that many teams have moved on rather than waiting.
MapLibre GL (2021): The Default for New Builds
We covered MapLibre in depth yesterday, so I’ll keep this tighter.
MapLibre GL is a WebGL-powered vector tile renderer forked from Mapbox GL JS after Mapbox changed their license in 2021. It renders tiles using the GPU, which means smooth 60fps panning, dynamic style changes at runtime, and 3D terrain if you want it.
The same marker example, MapLibre style:
<!DOCTYPE html><html><head> <style>#map { height: 400px; }</style></head><body> <div id="map"></div> <script> const map = new maplibregl.Map({ container: 'map', style: 'https://tiles.openfreemap.org/styles/liberty', center: [-0.09, 51.505], zoom: 13 });
map.on('load', () => { new maplibregl.Marker() .setLngLat([-0.09, 51.505]) .setPopup(new maplibregl.Popup().setHTML('A marker. Still easy.')) .addTo(map); }); </script></body></html>More setup, but not dramatically more. The main mental shift: MapLibre thinks in styles (a JSON document describing every layer) rather than method calls. That’s more powerful and slightly more upfront.
Bundle size: ~200 KB gzipped. Heavier than Leaflet, lighter than it sounds in practice because it can do in 200 KB what would require Leaflet plus three plugins.
The 2026 default: If you’re starting a new project with vector tiles, WebGL rendering, or a modern design system, MapLibre is where you land. OpenFreeMap provides free hosted vector tiles that work out of the box with MapLibre. Self-hosting tiles with Martin or tileserver-gl gives you full control. The stack is mature and the license is clean (BSD-3).
OpenLayers (2006): The Swiss Army Knife
OpenLayers is older than Leaflet. It came out of MetaCarta in 2006 when Google Maps was barely two years old. It is the library that takes geospatial seriously in a way the other two don’t.
Same demo, OpenLayers style, fair warning, it’s more verbose:
<!DOCTYPE html><html><head> <style>#map { height: 400px; }</style></head><body> <div id="map"></div> <script> const map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }), new ol.layer.Vector({ source: new ol.source.Vector({ features: [ new ol.Feature({ geometry: new ol.geom.Point( ol.proj.fromLonLat([-0.09, 51.505]) ) }) ] }) }) ], view: new ol.View({ center: ol.proj.fromLonLat([-0.09, 51.505]), zoom: 13 }) }); </script></body></html>Yes, there’s a projection transform right there in the marker coordinate. That’s OpenLayers being honest with you, coordinates have a projection, and ignoring that causes subtle bugs in real GIS work. Leaflet hides it (and usually gets away with it). OpenLayers surfaces it (and professionals prefer that).
Bundle size: ~300 KB gzipped. The biggest of the three, and it earns most of that weight.
Where OpenLayers actually wins:
- Projections. OpenLayers handles coordinate reference systems natively via a built-in proj4 integration. If your data is in EPSG:27700 (British National Grid) or any of the hundreds of national grid systems, OpenLayers is the only reasonable choice. Leaflet can do this with a plugin, but it gets messy. MapLibre works in Web Mercator and that’s mostly it.
- WMS/WFS. OGC web services: the kind that government GIS portals and enterprise systems expose, are first-class citizens in OpenLayers.
ol.source.ImageWMS,ol.source.TileWFS, direct GeoServer integration. The other two can hit WMS endpoints but they don’t have the same depth. - GeoJSON/GML/KML at scale. OpenLayers has a full feature model: you can load, edit, style, and query hundreds of thousands of features with proper attribute handling.
- Drawing and editing. The
ol/interaction/Drawandol/interaction/Modifysystem is production-grade. If your app lets users draw polygons or edit geometry, OpenLayers is where you end up.
Where it hurts: The learning curve is real. The API is large, the concepts (sources, layers, views, interactions, controls) are distinct, and the documentation can be dense. First-day productivity is low. Month-two productivity is high. If you’re building a lightweight content map or a demo, this is too much gun.
The Numbers That Actually Matter
| Leaflet | MapLibre GL | OpenLayers | |
|---|---|---|---|
| Gzipped JS | ~40 KB | ~200 KB | ~300 KB |
| Rendering | Raster (DOM/Canvas) | Vector (WebGL) | Raster + Vector (Canvas) |
| Vector tiles | Plugin | Native | Plugin (ol-mapbox-style) |
| WMS/WFS | Basic | Minimal | First-class |
| Projections | Plugin (Proj4js) | Web Mercator only | Native |
| 3D / Terrain | No | Yes | No |
| First commit | 2011 | 2021 (fork) | 2006 |
Bundle size matters on landing pages where you don’t control the user’s connection. It matters less in a full SPA that’s already shipping 1 MB of React. Don’t fetishize the numbers, context them.
Pick One (30 Seconds)
Marker or two on a content page, doesn’t need to be fancy? Leaflet. Done. CDN link, five minutes, ship it.
New interactive web map with vector tiles, custom styling, or anything resembling a modern “map product”? MapLibre. It’s the default in 2026. The ecosystem is solid, the license is clean, OpenFreeMap gives you free hosted tiles to start with.
Your data is in a non-standard projection, you’re hitting WMS/WFS services, you need editing tools, or someone said “GIS” in the requirements meeting? OpenLayers. Accept the learning curve, it’s worth it for this use case.
You’re already using Mapbox GL JS and want to get off the proprietary license? MapLibre is a drop-in fork. Migration is mostly a rename from mapboxgl to maplibregl.
That’s the whole decision tree. Three questions, three exits.
One More Thing
All three of these render well on mobile. All three have React/Vue/Svelte wrappers in various states of maintenance. All three can load your Nominatim geocoder results as markers. None of them requires a cloud account or sends your user coordinates anywhere by default, as long as you pair them with self-hosted or privacy-respecting tile sources.
The one thing I’d push back on: don’t agonize over this. Pick MapLibre as the default, switch to Leaflet if you specifically need the bundle to be tiny, switch to OpenLayers if someone says “GeoServer” or “WMS” or hands you a PBF file that isn’t in Web Mercator. You can migrate between them, they’re all “map div plus coordinates plus layers.” The mental model transfers.
Your map doesn’t care which library drew it. Ship something.
Related posts
- MapLibre GL: Mapbox Replacement, the full MapLibre deep-dive from yesterday
- Nominatim: Self-Hosted Geocoding, own your address lookups
- The Full Self-Hosted Maps Stack: Nominatim + PostGIS + Tiles, putting it all together
- PostGIS for Self-Hosted Mapping: spatial database fundamentals
