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. The exmple 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.

Styles API in Leaflet

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);

This approach uses the @maplibre/maplibre-gl-leaflet bridge. If you need manual feature styling instead of a map styles, use the Tiles API with Leaflet.VectorGrid instead.

Tiles API tileset (vector overlay)

This example demonstrates the Tiles API in Leaflet by fetching the tileset TileJSON document first, then wiring the returned tile template into Leaflet.VectorGrid. The hosted light basemap stays underneath through the MapLibre bridge.

Tiles API in Leaflet

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

const TILEJSON_URL = 'https://api.mappinest.com/tiles/{TILESET_ID}.json?key=YOUR_KEY';

async function initMap() {
  const tilejson = await fetch(TILEJSON_URL).then((response) => response.json());
  const tilesUrl = tilejson.tiles?.[0];
  // First vector layer reported by TileJSON.
  const sourceLayer = tilejson.vector_layers?.[0]?.id || '{SOURCE_LAYER}';

  if (!tilesUrl) {
    throw new Error('TileJSON did not return a tile URL.');
  }

  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);

  L.vectorGrid.protobuf(tilesUrl, {
    interactive: true,
    vectorTileLayerStyles: {
      [sourceLayer]: {
        color: '#2563eb',
        weight: 1.2,
        fillColor: '#2563eb',
        fillOpacity: 0.35,
        radius: 4
      }
    }
  }).addTo(map);
}

initMap();

Leaflet does not consume a vector TileJSON URL directly as a source. The stable pattern is to fetch the TileJSON document first, then pass the returned tile template into Leaflet.VectorGrid.