MapLibre GL JS Example for Styles and Tiles

This page shows two vector-first integrations in MapLibre GL JS. The first example demonstrates the Styles API with a ready-to-use map style, and the second demonstrates the Tiles API with a custom vector dataset.

Styles API basemap

This example demonstrates the Styles API by loading a StyleJSON URL in MapLibre GL JS. It uses style ID streets from Mappinest Styles.

• Use light, dark, or satellite with the same map setup by changing the style ID.
• This is the most direct open-source client path for StyleJSON rendering.

const map = new maplibregl.Map({
  container: 'map',
  style: 'https://api.mappinest.com/styles/streets/style.json?key=YOUR_KEY',
  center: [15, 45],
  zoom: 5
});

Tiles API dataset

This example demonstrates the Tiles API by adding a custom vector tileset as a source and layer on top of a hosted vector basemap. Replace SOURCE_LAYER with the layer name returned by the TileJSON endpoint for your dataset before adding the fill layer.

const map = new maplibregl.Map({
  container: 'map',
  style: 'https://api.mappinest.com/styles/light/style.json?key=YOUR_KEY',
  center: [15, 45],
  zoom: 5
});

map.on('load', () => {
  map.addSource('mappinest', {
    type: 'vector',
    tiles: ['https://api.mappinest.com/tiles/{DATASET_ID}/{z}/{x}/{y}.pbf?key=YOUR_KEY'],
    minzoom: 0,
    maxzoom: 14
  });

  map.addLayer({
    id: 'mappinest-fill',
    type: 'fill',
    source: 'mappinest',
    'source-layer': '{SOURCE_LAYER}',
    paint: { 'fill-color': '#0f172a', 'fill-opacity': 0.4 }
  });
});