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

Styles API basemap

This example demonstrates the Styles API by loading a StyleJSON URL in MapLibre GL JS. The exmple 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 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 MapLibre 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 map = new maplibregl.Map({
  container: 'map',
  style: 'https://api.mappinest.com/styles/light/style.json?key=YOUR_KEY',
  center: [15, 45],
  zoom: 5
});

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

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': '#0f172a', 
          'fill-opacity': 0.4
    };
  });
});