Mapbox GL JS Example | Mappinest Docs

Mapbox GL JS can load Mappinest ready-to-use map styles directly from the StyleJSON endpoint. This example uses the streets style ID from Mappinest Styles.

Replace streets with light, dark, or satellite when needed.
Keep the same URL pattern and only change the style ID.

Mapbox GL JS

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