How to use MapLibre GL JS

This tutorial shows how to create a MapLibre GL JS map and display it on a web page using MapTiler. For a better developer experience and easier integration with MapTiler maps and API services, it is best to use the MapTiler SDK JS. MapTiler SDK JS is an extension of MapLibre.

The SDK includes many modules with pre-built functions, so you can quickly implement search and other geocoding features, display 3D models on maps, build weather applications, and more. Check out all modules.


npm install --save maplibre-gl

main.js

import { Map } from 'maplibre-gl';
import 'maplibre-gl/dist/maplibre-gl.css';

const key = 'YOUR_MAPTILER_API_KEY_HERE';
  
const map = new Map({
  container: 'map', // container id
  style: `https://api.maptiler.com/maps/streets-v4/style.json?key=${key}`, // style URL
  center: [0, 0], // starting position [lng, lat]
  zoom: 1 // starting zoom
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="robots" content="noindex">
  <title>How to use MapLibre GL JS | NPM example</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div id="map"></div>
  <script type="module" src="./main.js"></script>
</body>
</html>

style.css

body {
  margin: 0;
  padding: 0;
}

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

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Display a map</title>
  <script src="https://unpkg.com/maplibre-gl@v5.24.0/dist/maplibre-gl.js"></script>
  <link href="https://unpkg.com/maplibre-gl@v5.24.0/dist/maplibre-gl.css" rel="stylesheet" />
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
  </style>
</head>

<body>
  <div id="map"></div>
</body>
<script>
  const key = 'YOUR_MAPTILER_API_KEY_HERE';

  const map = new maplibregl.Map({
    container: 'map', // container id
    style: `https://api.maptiler.com/maps/streets-v4/style.json?key=${key}`, // style URL
    center: [0, 0], // starting position [lng, lat]
    zoom: 1 // starting zoom
  });
</script>

</html>

Learn more

Check out the How to migrate/switch from MapLibre to MapTiler tutorial.

How to use MapLibre GL JS

NPM module setup

main.js

index.html

style.css

Basic JavaScript setup

Learn more