Get Started With MapLibre GL JS

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
     });