Load a Mappinest style in Mapbox GL JS

Overview

This guide shows how to load an available Mappinest map style in Mapbox 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.
Mapbox GL JS also needs your own Mapbox access token for the library runtime.

Mappinest Styles in Mapbox 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 Mapbox GL JS</title>
  <link href="https://api.mapbox.com/mapbox-gl-js/v3.16.0/mapbox-gl.css" rel="stylesheet" />
  <style>
    body { margin: 0; }
    #map { height: 100vh; width: 100vw; }
  </style>
</head>
<body>
  <div id="map"></div>
  <script src="https://api.mapbox.com/mapbox-gl-js/v3.16.0/mapbox-gl.js"></script>
  <script>

    // Mapbox GL JS needs its own runtime token. Mappinest API requests use apiKey.
    mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
    const apiKey = 'YOUR_MAPPINEST_KEY';

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

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

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

// Mapbox GL JS needs its own runtime token. Mappinest API requests use apiKey.
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
const apiKey = 'YOUR_MAPPINEST_KEY';

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

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

    mapRef.current = new mapboxgl.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 mapboxgl.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