MapLibre GL JS
~210kb gzipped (core) -- up to ~750kb fullWebGL-powered vector maps with 3D pitch, smooth zoom, and runtime styling -- the open-source Mapbox GL fork.
See It in Action
Each demo loads vector tiles from OpenFreeMap (free, no API key) and shows what WebGL maps can do that Leaflet cannot: smooth zoom, 3D buildings, and animated camera tours.
A vector-tile map of Paris with a marker and popup. Scroll to zoom -- the continuous, label-rotating zoom is the WebGL difference vs. Leaflet's stepped raster tiles.
What is MapLibre GL JS?
MapLibre GL JS is a JavaScript library that renders interactive vector-tile maps in the browser using WebGL. Where raster libraries like Leaflet stitch together pre-rendered image tiles, MapLibre downloads vector geometry and draws it on a GPU canvas -- so zoom is continuous, labels stay crisp, and you can tilt and rotate the camera into 3D.
It started in December 2020 as a community fork of Mapbox GL JS v1.13 -- the last version released under the BSD license, before Mapbox switched to a paid proprietary license. Today the project is governed by an elected steering committee and incubated at the Linux Foundation, with sponsors that include Amazon, Meta, Microsoft, Esri, and StadiaMaps.
When to Use MapLibre GL JS
How MapLibre GL JS Compares
Leaflet is the lighter, simpler raster-tile choice -- great for store locators and 'show this on a map' use cases. MapLibre is the modern WebGL choice for vector tiles, smooth zoom, 3D, and runtime styling. Pick Leaflet for basic maps; pick MapLibre when you need vector styling, 3D, or smooth camera animation.
Mapbox GL JS v2+ uses a proprietary license and bills per map load. MapLibre is a BSD-3-Clause hard-fork of Mapbox v1.13 (the last open release) and stays free forever. Same WebGL engine, similar API, no per-load billing.
Google Maps charges per map load after a small free tier and requires an API key on a billing account. MapLibre + free OpenFreeMap tiles costs zero forever. Pick Google Maps only if you specifically need Street View, Places, or branded Google tiles.
OpenLayers is the heavier, GIS-grade option supporting many projections, formats, and analysis features. MapLibre is the modern web-developer-friendly choice with cleaner API, smooth WebGL rendering, and a focused vector-tile pipeline. Pick OpenLayers for enterprise GIS; pick MapLibre for product UIs.
Get Started with MapLibre GL JS
npm install maplibre-glyarn add maplibre-gl<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/maplibre-gl.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/maplibre-gl.js"></script><!-- In your <head> -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/maplibre-gl.css">
<!-- In your <body> -->
<div id="map" style="height: 400px;"></div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/maplibre-gl.js"></script>
<script>
// MapLibre uses [longitude, latitude] -- NOT [lat, lng] like Leaflet.
const map = new maplibregl.Map({
container: "map",
style: "https://tiles.openfreemap.org/styles/positron",
center: [2.3522, 48.8566], // Paris
zoom: 12
});
map.addControl(new maplibregl.NavigationControl());
new maplibregl.Marker()
.setLngLat([2.3522, 48.8566])
.setPopup(new maplibregl.Popup().setHTML("Hello from Paris!"))
.addTo(map);
</script>