OpenLayers Example | Mappinest Docs

OpenLayers can apply Mappinest vector map styles directly from the StyleJSON endpoint with ol-mapbox-style. This example uses the streets style ID from Mappinest Styles.

Swap streets for light, dark, or satellite using the same URL shape.
This is the cleanest OpenLayers path for StyleJSON-based rendering.

OpenLayers

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>OpenLayers Map</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v8.2.0/ol.css" />
  <script src="https://cdn.jsdelivr.net/npm/ol@v8.2.0/dist/ol.js"></script>
  <script src="https://unpkg.com/ol-mapbox-style@latest/dist/olms.js"></script>
  <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 ol.Map({
      target: 'map',
      view: new ol.View({
        center: ol.proj.fromLonLat([15, 45]),
        zoom: 5
      })
    });

    window.olms.apply(
      map,
      'https://api.mappinest.com/styles/streets/style.json?key=YOUR_KEY'
    );
  </script>
</body>
</html>