Load a Mappinest style in OpenLayers

Overview

This guide shows how to load an available Mappinest map style in OpenLayers. The example uses style ID streets from Mappinest Styles and loads it through StyleJSON.

OpenLayers does not apply StyleJSON by itself. This example uses ol-mapbox-style to apply the Mappinest style to the OpenLayers map.

Swap streets to light, dark, or satellite using the same URL pattern.
Only the style ID changes. Keep the rest of the map initialization code the same.

Mappinest Styles in OpenLayers

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Mappinest StyleJSON with OpenLayers</title>
  <link href="https://unpkg.com/ol@10.9.0/ol.css" rel="stylesheet" />
  <script src="https://unpkg.com/ol@10.9.0/dist/ol.js"></script>
  <script src="https://unpkg.com/ol-mapbox-style@13.4.1/dist/olms.js"></script>
  <style>
    body { margin: 0; }
    #map { height: 100vh; width: 100vw; }
  </style>
</head>
<body>
  <div id="map"></div>
  <script>
  
    const apiKey = 'YOUR_MAPPINEST_KEY';

    const map = new ol.Map({
      target: 'map',
      view: new ol.View({
        center: ol.proj.fromLonLat([12, 48]),
        zoom: 4
      })
    });

    window.olms.apply(
      map,
      `https://api.mappinest.com/v1/styles/streets/style.json?key=${apiKey}`
    );
  </script>
</body>
</html>

import { useEffect, useRef } from 'react';
import Map from 'ol/Map';
import View from 'ol/View';
import { fromLonLat } from 'ol/proj';
import { apply } from 'ol-mapbox-style';
import 'ol/ol.css';

const apiKey = 'YOUR_MAPPINEST_KEY';

export default function MappinestOpenLayersStyleMap() {
  const containerRef = useRef<HTMLDivElement | null>(null);
  const mapRef = useRef<Map | null>(null);

  useEffect(() => {
    if (!containerRef.current || mapRef.current) return;

    const map = new Map({
      target: containerRef.current,
      view: new View({
        center: fromLonLat([12, 48]),
        zoom: 4
      })
    });

    mapRef.current = map;

    void apply(
      map,
      `https://api.mappinest.com/v1/styles/streets/style.json?key=${apiKey}`
    );

    return () => {
      map.setTarget(undefined);
      mapRef.current = null;
    };
  }, []);

  return <div ref={containerRef} style={{ height: 420, width: '100%' }} />;
}

StyleJSON URL pattern

GET

https://api.mappinest.com/v1/styles/{styleId}/style.json?key=YOUR_KEY

Get your free API key in API Keys & Access, then replace YOUR_KEY in the example.

Common errors

Symptom	What to check
Map is blank	Open the StyleJSON URL in the browser and confirm the API key can access the selected style.
Style ID fails	Use one of the supported style IDs from Available map styles.
Requests return 403	Check API key restrictions and allowed domains in API Keys & Access.

Overview

StyleJSON URL pattern

Common errors

What to read next