Load a Mappinest style in Leaflet

Overview

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

Leaflet does not render StyleJSON by itself. This example uses @maplibre/maplibre-gl-leaflet to mount a MapLibre renderer inside a Leaflet 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 Leaflet

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Mappinest StyleJSON with Leaflet</title>
  <link href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" rel="stylesheet" />
  <link href="https://unpkg.com/maplibre-gl@5/dist/maplibre-gl.css" rel="stylesheet" />
  <style>
    body { margin: 0; }
    #map { height: 100vh; width: 100vw; }
  </style>
</head>
<body>
  <div id="map"></div>
  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
  <script src="https://unpkg.com/maplibre-gl@5/dist/maplibre-gl.js"></script>
  <script src="https://unpkg.com/@maplibre/maplibre-gl-leaflet@0.1.3/leaflet-maplibre-gl.js"></script>
  <script>

    const apiKey = 'YOUR_MAPPINEST_KEY';
    const map = L.map('map').setView([48, 12], 4);

    // Leaflet needs the MapLibre bridge to render Mappinest StyleJSON.
    L.maplibreGL({
      style: `https://api.mappinest.com/v1/styles/streets/style.json?key=${apiKey}`,
      interactive: false
    }).addTo(map);
  </script>
</body>
</html>

import { useEffect, useRef } from 'react';
import L from 'leaflet';
import '@maplibre/maplibre-gl-leaflet';
import 'leaflet/dist/leaflet.css';
import 'maplibre-gl/dist/maplibre-gl.css';

const apiKey = 'YOUR_MAPPINEST_KEY';

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

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

    const map = L.map(containerRef.current).setView([48, 12], 4);
    mapRef.current = map;

    // Leaflet needs the MapLibre bridge to render Mappinest StyleJSON.
    (L as any).maplibreGL({
      style: `https://api.mappinest.com/v1/styles/streets/style.json?key=${apiKey}`,
      interactive: false
    }).addTo(map);

    return () => {
      map.remove();
      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