JavaScript Style Specification iOS Android

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. 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' />

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

  4. The div must have non-zero height.

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

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