Web mapping: Leaflet vs MapLibre vs OpenLayers

Web mapping is GIS delivered in the browser. Three battle-tested open-source libraries dominate the space — Leaflet, MapLibre GL JS, and OpenLayers — each with different strengths and a different "right when" sweet spot. This week you'll build the same map in all three and develop a feel for which one to reach for next time.

Leaflet

Leaflet (leafletjs.com) is the elder statesman — actively maintained since 2011, ~40 KB minified+gzipped, no dependencies. It renders raster tiles using DOM elements (or Canvas in newer versions), which makes it lightweight, predictable, and accessible (interactive markers are real DOM nodes with proper ARIA support out of the box).

Leaflet is the right default when: you need a map quickly, you're working with raster tiles (OpenStreetMap, satellite imagery), you have a few hundred to a few thousand features, and you don't need to style the basemap dynamically. Most non-trivial public GIS sites built before ~2019 use Leaflet, and it's still the right choice for any "just plot some points on a map" task.

const map = L.map('map').setView([28.6, -80.6], 5);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '© OpenStreetMap'
}).addTo(map);
L.marker([28.6, -80.6]).addTo(map).bindPopup('Cape Canaveral');

MapLibre GL JS

MapLibre GL JS is a community-maintained fork of Mapbox GL JS, forked in 2020 when Mapbox changed its license to a proprietary one. It renders vector tiles in WebGL, which means smooth zooming at any level (no pixelation), client-side styling (change colors / fonts without re-fetching tiles), and 60 fps rendering on modern hardware.

MapLibre is the right default when: you need vector tiles, you want to style the map client-side, you need smooth animations, or you're rendering more than ~10k features. It's slightly heavier (~200 KB minified+gzipped) and the learning curve is steeper, but the ceiling is much higher.

const map = new maplibregl.Map({
  container: 'map',
  style: 'https://demotiles.maplibre.org/style.json',
  center: [-80.6, 28.6],
  zoom: 5
});
map.on('load', () => {
  map.addSource('pads', { type: 'geojson', data: 'pads.geojson' });
  map.addLayer({ id: 'pads', type: 'circle', source: 'pads',
    paint: { 'circle-radius': 6, 'circle-color': '#ff6b35' }});
});

OpenLayers

OpenLayers is the heavyweight — comprehensive support for every projection in the EPSG registry, full-featured editing tools, drag-and-drop layer composition, and unmatched depth on raster/vector mixing. It's much larger (~500 KB) and has a steeper learning curve, but for serious enterprise GIS in the browser — and especially anything involving non-standard projections — it's the right tool.

OpenLayers is the right default when: you need non-Web-Mercator projections (e.g. polar stereographic for Arctic shipping), you're building editing tools (digitizing, snapping, geometry validation), or you're porting a desktop GIS workflow to the browser and need every feature.

The vector-tile shift

The web-mapping world has shifted hard toward vector tiles in the past 5 years. Vector tiles are smaller, styleable on the client, sharper at high zoom, and they compose better with overlay data (you can style multiple data sources with the same color scheme client-side). The trade-off: vector tiles need a renderer (MapLibre) that's heavier than Leaflet's DOM-based approach, and serving vector tiles is more complex than serving pre-rendered PNGs.

The lab

You'll build the same map — 20 global launch sites as markers, OpenStreetMap basemap, popup with metadata — three times: once in Leaflet (raster tiles), once in MapLibre GL JS (vector tiles), once in OpenLayers (mixed). Compare: bundle size, time to first render, frame rate during pan/zoom, and lines of code. The output is informed taste, not just code.