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

Styles API basemap

This example demonstrates the Styles API by loading a StyleJSON URL in Mapbox GL JS. The exmple 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 tileset

This example demonstrates the Tiles API by adding a custom vector tileset as a source and layer on top of a hosted vector basemap. It uses the tileset TileJSON URL so Mapbox GL JS can discover the tile template and zoom metadata automatically. Replace SOURCE_LAYER with the layer name returned by the TileJSON endpoint for your tileset before adding the fill layer.

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

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',
    url: TILEJSON_URL
  });

  // First vector layer reported by TileJSON.
  map.addLayer({
    id: 'mappinest-fill',
    type: 'fill',
    source: 'mappinest',
    'source-layer': '{SOURCE_LAYER}',
    paint: { 
          'fill-color': '#2563eb', 
          'fill-opacity': 0.35
    };
  });
});