Mapbox GL JS Example for Styles and Tiles

This page shows two vector-first integrations in Mapbox 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 Mapbox GL JS. It uses style ID streets from Mappinest Styles.

• 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.

const map = new mapboxgl.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 mapboxgl.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': '#2563eb', 'fill-opacity': 0.35 }
  });
});