How to use MapLibre

MapLibre GL JS (open-source fork of Mapbox GL JS) is a web mapping library based on WebGL. Using MapLibre GL JS with vector tiles from MapTiler Cloud gives you a beautiful and smooth experience while browsing a map. MapLibre GL JS loads vector tiles and style from hosting and draws a map in the browser. This solution requires WebGL support in your web browser. If you want to try MapLibre, just copy the code below and start with your web app.

Additionally, we encourage you to check the MapTiler SDK JS examples.

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <script src="https://unpkg.com/maplibre-gl@^4.7.1/dist/maplibre-gl.js"></script>
  <link href="https://unpkg.com/maplibre-gl@^4.7.1/dist/maplibre-gl.css" rel="stylesheet" />
  <style>
    #map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
  </style>
</head>
<body>
  <div id="map"></div>
  <p><a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a></p>
  <script>
    // You can remove the following line if you don't need support for RTL (right-to-left) labels:
    maplibregl.setRTLTextPlugin('https://cdn.maptiler.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.1.2/mapbox-gl-rtl-text.js');
    var map = new maplibregl.Map({
      container: 'map',
      style: 'https://api.maptiler.com/maps/streets-v2/style.json?key=GET-YOUR-OWN-KEY',
      center: [0, 0],
      zoom: 1.28
    });
  </script>
</body>
</html>