MapLibre GL JS
API Reference
On This Page
Get Started With MapLibre GL JS
View complete source code on GitHub
You will learn the following:
- Obtain the MapTiler api key.
- Initialize map and load the style.
-
Create MapTiler account for FREE and obtain the api key.
-
Include the MapLibre JavaScript and CSS files in the
<head>
of your HTML file.<script src='https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.js'></script> <link href='https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.css' rel='stylesheet' />
-
Initialize a map in an HTML element with MapLibre GL JS.
Add
<div>
tag into your page. This div will be the container where the map will be loaded.<div id="map"></div>
-
The div must have non-zero height.
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
-
Finally, load the map
const key='<your key here>'; const map = new maplibregl.Map({ container: 'map', // container id style: `https://api.maptiler.com/maps/streets/style.json?key=${key}`, // style URL center: [-74.5, 40], // starting position [lng, lat] zoom: 9 // starting zoom });