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.

1. Create MapTiler account for FREE and obtain the api key.

2. 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>
   

3. The tag must have non-zero height.

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

4. Finally, load the map

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