Leaflet Example for Hosted Vector Basemaps

This page shows the most stable way to use a hosted vector basemap in Leaflet. Leaflet does not render a Styles API StyleJSON document on its own, so the recommended approach is to mount a MapLibre renderer inside Leaflet with the @maplibre/maplibre-gl-leaflet plugin.

Styles API basemap (vector)

This example demonstrates the Styles API in Leaflet by loading a StyleJSON URL through the @maplibre/maplibre-gl-leaflet plugin. It uses style ID light from Mappinest Styles.

• This keeps vector style behavior, labels, sprites, and glyph handling consistent.
• You can switch light to streets, dark, or satellite without changing plugin setup.

import L from 'leaflet';
import maplibregl from 'maplibre-gl';
import '@maplibre/maplibre-gl-leaflet';

const map = L.map('map').setView([45, 15], 5);

L.maplibreGL({
  style: 'https://api.mappinest.com/styles/light/style.json?key=YOUR_KEY',
  interactive: true
}).addTo(map);