MapLibre GL JS with MapTiler maps

MapLibre GL JS is a open-source TypeScript library that uses WebGL to render interactive maps from vector tiles in a browser. Great performance due to GPU-accelerated vector tile rendering.

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 uses MapLibre as its main engine but extends it with more features.

Get started

This is the way to use your MapTiler maps in MapLibre GL JS. Simply use the code below the map.


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.

Unlock your MapLibre mapping potential now! Look at the MapLibre GL JS examples we have prepared.

Check out the more than 250 MapTiler SDK examples