MapLibre GL JS Example | Mappinest Docs

MapLibre GL JS is the simplest open-source client for Mappinest vector map styles. It reads the StyleJSON document directly. This example uses the light style ID from Mappinest Styles.

Use streets, dark, or satellite with the same setup by changing only the style ID.
This keeps labels, sprites, and glyph behavior consistent across clients.

MapLibre GL

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>MapLibre GL Map</title>
  <script src="https://unpkg.com/maplibre-gl@3/dist/maplibre-gl.js"></script>
  <link href="https://unpkg.com/maplibre-gl@3/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>
  <script>
    const map = new maplibregl.Map({
      container: 'map',
      style: 'https://api.mappinest.com/styles/light/style.json?key=YOUR_KEY',
      center: [0, 0],
      zoom: 2
    });
  </script>
</body>
</html>