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=''></script>
     <link href='' 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: `${key}`, // style URL
         center: [-74.5, 40], // starting position [lng, lat]
         zoom: 9 // starting zoom