MapLibre
Overview
MapLibre GL JS is an open-source TypeScript library for publishing interactive, customizable vector tile maps on the web. It is a community-maintained fork of Mapbox GL JS v1.13, created after Mapbox changed its license. MapLibre provides WebGL-powered rendering for smooth, responsive maps.
Key Features
| Feature | Description |
|---|---|
| WebGL Rendering | Hardware-accelerated, smooth 60fps |
| Vector Tiles | Style data on the client |
| 3D Terrain | Terrain and sky rendering |
| Custom Styles | Full control over map appearance |
| Open Source | BSD-3-Clause license |
| Cross-platform | Web, iOS, Android, Qt, Flutter |
Ecosystem
| Component | Description | Links |
|---|---|---|
| MapLibre GL JS | Web mapping library | Docs |
| MapLibre Native | iOS/Android SDK | GitHub |
| MapLibre Style Spec | Style specification | Spec |
| Martin | Vector tile server | GitHub |
Basic Usage
HTML Setup
<!DOCTYPE html>
<html>
<head>
<link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet" />
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
</head>
<body>
<div id="map" style="width: 100%; height: 400px;"></div>
<script>
const map = new maplibregl.Map({
container: 'map',
style: 'https://demotiles.maplibre.org/style.json',
center: [-122.4, 37.8],
zoom: 9
});
</script>
</body>
</html>React Integration
import Map from 'react-map-gl/maplibre';
import 'maplibre-gl/dist/maplibre-gl.css';
function App() {
return (
<Map
initialViewState={{
longitude: -122.4,
latitude: 37.8,
zoom: 9
}}
style={{ width: '100%', height: 400 }}
mapStyle="https://demotiles.maplibre.org/style.json"
/>
);
}Style Specification
MapLibre uses a JSON style specification compatible with Mapbox:
{
"version": 8,
"name": "My Style",
"sources": {
"osm": {
"type": "vector",
"url": "https://tiles.example.com/data.json"
}
},
"layers": [
{
"id": "water",
"type": "fill",
"source": "osm",
"source-layer": "water",
"paint": {
"fill-color": "#0077be"
}
}
]
}Free Tile Providers
| Provider | Description | Links |
|---|---|---|
| MapTiler | Free tier available | Website |
| Stadia Maps | Free tier with attribution | Website |
| Protomaps | PMTiles hosting | Website |
| OpenFreeMap | Free OSM tiles | Website |
Comparison with Alternatives
| Library | Rendering | License | Vector Tiles | Best For |
|---|---|---|---|---|
| MapLibre GL | WebGL | BSD-3 | Yes | Modern vector maps |
| Leaflet.js | DOM/Canvas | BSD-2 | Via plugins | Simple maps |
| OpenLayers | Canvas/WebGL | BSD-2 | Yes | Complex GIS |
| Mapbox GL | WebGL | Proprietary | Yes | Premium features |
Appendix
Created: 2024-12-23 | Modified: 2024-12-23
See Also
Backlinks
(c) No Clocks, LLC | 2024