OpenLayers Example for Styles and Vector Tiles

This page shows two stable vector-first integrations in OpenLayers. The first uses the Styles API with ol-mapbox-style to render a map style (basemap) directly from StyleJSON, and the second uses the Tiles API by resolving the tileset TileJSON document first and then wiring the returned tile template into a vector source.

Styles API basemap

This is the recommended OpenLayers path for StyleJSON rendering. The snippet applies style ID streets from Mappinest Styles.

For a different map look, replace streets with light, dark, or satellite.
Keep ol-mapbox-style in place to parse the style into native OpenLayers layers.

Styles API in OpenLayers

import Map from 'ol/Map';
import View from 'ol/View';
import { fromLonLat } from 'ol/proj';
import { apply } from 'ol-mapbox-style';

const map = new Map({
  target: 'map',
  view: new View({
    center: fromLonLat([15, 45]),
    zoom: 5
  })
});

await apply(
  map,
  'https://api.mappinest.com/styles/streets/style.json?key=YOUR_KEY'
);

Tiles API tileset

This example demonstrates the Tiles API in OpenLayers by fetching the tileset TileJSON document first, then using the returned tile URL in a vector tile source. The uploaded tileset is added as an overlay on top of the hosted light basemap.

Vector tiles in OpenLayers

import Map from 'ol/Map';
import View from 'ol/View';
import MVT from 'ol/format/MVT';
import VectorTileSource from 'ol/source/VectorTile';
import VectorTileLayer from 'ol/layer/VectorTile';
import Fill from 'ol/style/Fill';
import Stroke from 'ol/style/Stroke';
import Style from 'ol/style/Style';
import { fromLonLat } from 'ol/proj';
import { apply } from 'ol-mapbox-style';

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());
  // First vector layer reported by TileJSON.
  const tilesUrl = tilejson.tiles?.[0];
  const tileMaxZoom = tilejson.maxzoom ?? 14;

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

  const map = new Map({
    target: 'map',
    view: new View({
      center: fromLonLat([15, 45]),
      zoom: 5
    })
  });

  await apply(
    map,
    'https://api.mappinest.com/styles/light/style.json?key=YOUR_KEY'
  );

  const layer = new VectorTileLayer({
    source: new VectorTileSource({
      format: new MVT(),
      url: tilesUrl,
      maxZoom: tileMaxZoom
    }),
    style: new Style({
      fill: new Fill({ color: 'rgba(59, 130, 246, 0.18)' }),
      stroke: new Stroke({ color: '#1d4ed8', width: 1 })
    })
  });

  map.addLayer(layer);
}

initMap();