Initialize a MapLibre GL JS Map
MapLibre GL JSCreate a maplibregl.Map instance with MapTiler vector tiles, navigation controls, and a marker popup.
const map = new maplibregl.Map({
container: 'map',
style: 'https://api.maptiler.com/maps/streets-v4/style.json?key=YOUR_MAPTILER_KEY',
center: [2.3522, 48.8566],
zoom: 13
});
map.addControl(new maplibregl.NavigationControl());
new maplibregl.Marker({ color: '#2196F3' })
.setLngLat([2.3522, 48.8566])
.setPopup(new maplibregl.Popup().setHTML('<b>Paris</b>'))
.addTo(map);How it works
MapLibre GL JS renders vector tiles using WebGL for smooth 60fps performance. The maplibregl.Map constructor takes a container element, a style URL (which defines sources, layers, fonts, and sprites), initial center, and zoom.
MapLibre uses [lng, lat] coordinate order: the same as GeoJSON, but opposite of Leaflet.
The style URL points to a MapTiler Cloud style.json that configures everything MapLibre needs. NavigationControl adds zoom and rotation buttons. Markers are DOM elements positioned on the map.
Key APIs
| API | Description | Docs |
|---|---|---|
maplibregl.Map |
Create map instance | maplibre.org/maplibre-gl-js/docs/API/classes/Map |
maplibregl.NavigationControl |
Zoom/rotate buttons | maplibre.org docs |
maplibregl.Marker |
Add DOM marker | maplibre.org docs |
FAQ
What is a style.json?
A JSON document that tells MapLibre where to load tiles, how to render layers, what fonts and icons to use. MapTiler provides 16+ ready-made styles.
How is MapLibre different from Mapbox GL JS?
MapLibre is the open-source fork of Mapbox GL JS v1. Fully compatible API, no proprietary restrictions, active community development.
Common mistakes
- Using
[lat, lng]instead of[lng, lat]: MapLibre uses the GeoJSON coordinate order - Adding layers before the map loads: wrap in
map.on('load', () => { ... }) - Forgetting container height: the map needs explicit dimensions
Build maps using MapLibre GL JS with AI
Generate code like this initialize a maplibre gl js map example using the MapLibre GL JS skill in your IDE.
Related Examples
- Switch Vector Styles in MapLibre GL JS
- See how to do this in Leaflet, MapTiler SDK or OpenLayers