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 hosted vector basemap directly from StyleJSON, and the second uses the Tiles API with a raw MVT 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 dataset

This example demonstrates the Tiles API in OpenLayers using a vector tile source, the MVT format reader, and a simple fill + stroke style for the returned features.

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';

const layer = new VectorTileLayer({
  source: new VectorTileSource({
    format: new MVT(),
    url: 'https://api.mappinest.com/tiles/{DATASET_ID}/{z}/{x}/{y}.pbf?key=YOUR_KEY'
  }),
  style: new Style({
    fill: new Fill({ color: 'rgba(59, 130, 246, 0.18)' }),
    stroke: new Stroke({ color: '#1d4ed8', width: 1 })
  })
});

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