Load a Mappinest style in MapLibre GL JS

Overview

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

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 MapLibre GL JS

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Mappinest StyleJSON with MapLibre GL JS</title>
  <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/maplibre-gl@5/dist/maplibre-gl.js"></script>
  <script>

    const apiKey = 'YOUR_MAPPINEST_KEY';
  
    const map = new maplibregl.Map({
      container: 'map',
      style: `https://api.mappinest.com/v1/styles/streets/style.json?key=${apiKey}`,
      center: [12, 48],
      zoom: 4
    });

    map.addControl(new maplibregl.NavigationControl(), 'top-right');
  </script>
</body>
</html>

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

const apiKey = 'YOUR_MAPPINEST_KEY';

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

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

    mapRef.current = new maplibregl.Map({
      container: containerRef.current,
      style: `https://api.mappinest.com/v1/styles/streets/style.json?key=${apiKey}`,
      center: [12, 48],
      zoom: 4
    });

    mapRef.current.addControl(new maplibregl.NavigationControl(), 'top-right');

    return () => {
      mapRef.current?.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