Get Started

Initialize a map in an HTML element with MapLibre GL JS.

Add <div> tag into your page. The map will be loaded in the tag.

<div id="map"></div>

The tag must have non-zero height.

#map {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}

Finally, load the map

var map = new maplibregl.Map({
    container: 'map', // container id
    style: 'https://api.maptiler.com/maps/streets/style.json?key=<your access token here>', // style URL
    center: [-74.5, 40], // starting position [lng, lat]
    zoom: 9 // starting zoom
});