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 map ID streets from Available map styles and loads it through StyleJSON.

Swap streets to light, dark, or satellite using the same URL pattern.
Only the map ID changes. Keep the rest of the map initialization code the same.
No Mapbox access token is required, maps can still render through the Mapbox GL JS engine

Mappinest StyleJSON 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/maps/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/maps/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/maps/{mapId}/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.
Map ID fails	Use one of the supported map 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