All integrations OpenLayers React WordPress API docs

ExpressMaps in OpenLayers

OpenLayers renders our vector tiles natively. The ol-mapbox-style package reads the style document and builds the layers for you. This map is live OpenLayers.

1. Include OpenLayers and ol-mapbox-style

From a CDN for a quick start, or npm install ol ol-mapbox-style for a bundled app.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@10.2.1/ol.css">
<script src="https://cdn.jsdelivr.net/npm/ol@10.2.1/dist/ol.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ol-mapbox-style@12.3.5/dist/olms.js"></script>

2. Apply the style

olms.apply creates the map, reads the style, adds the vector tile source and every layer, and resolves with the OpenLayers Map so you can keep working with it as normal.

<div id="map" style="width: 100%; height: 400px;"></div>
<script>
  olms.apply("map", "https://tiles.expressmaps.com/styles/standard.json?key=YOUR_API_KEY")
    .then(function (map) {
      map.getView().setCenter(ol.proj.fromLonLat([-0.1276, 51.5072]));
      map.getView().setZoom(12);
    });
</script>

With a bundler (ES modules)

import "ol/ol.css";
import { apply } from "ol-mapbox-style";
import { fromLonLat } from "ol/proj";

const map = await apply("map", "https://tiles.expressmaps.com/styles/standard.json?key=YOUR_API_KEY");
map.getView().setCenter(fromLonLat([-0.1276, 51.5072]));
map.getView().setZoom(12);

Adding a marker

Everything after apply is plain OpenLayers. Add a vector layer with a point feature and your own icon:

import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import Feature from "ol/Feature";
import Point from "ol/geom/Point";
import { Icon, Style } from "ol/style";

const marker = new Feature(new Point(fromLonLat([-0.1276, 51.5072])));
marker.setStyle(new Style({ image: new Icon({ src: "/pin.png", anchor: [0.5, 1] }) }));
map.addLayer(new VectorLayer({ source: new VectorSource({ features: [marker] }) }));

Switching styles

Call apply again with a different style URL on the same map, or create the map once per style. All ten styles share one tileset, so switching is instant and does not use extra map loads.

Things to know

  • Our styles use name:latin for labels. ol-mapbox-style handles the expressions; you do not need to change anything.
  • Fonts are loaded from our CDN as glyph ranges, the same way MapLibre loads them. If you see labels in a fallback font, check that tiles.expressmaps.com is reachable from the page.
  • Restrict your API key to your domain in the console. The key is visible in the page, which is normal for client-side maps; the domain restriction is what protects it.
  • One map load is counted per style request, not per tile, so panning and zooming are free.

Get a free API key Read the docs