ExpressMaps in MapLibre GL JS

1. Include MapLibre GL JS

From a CDN, or npm install maplibre-gl and import it.

<link rel="stylesheet" href="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.css">
<script src="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.js"></script>

2. Create the map

The style option takes the ExpressMaps style URL. Tiles, icons and fonts are all referenced from inside the style, so this is the only URL you need. MapLibre uses [lng, lat] order.

<div id="map" style="width: 100%; height: 400px;"></div>
<script>
  var map = new maplibregl.Map({
    container: "map",
    style: "https://tiles.expressmaps.com/styles/standard.json?key=YOUR_API_KEY",
    center: [-0.1276, 51.5072],
    zoom: 12
  });
  map.addControl(new maplibregl.NavigationControl());
</script>

Prefer to click rather than type? The embed generator writes this snippet for you with your style, location and marker.

Style URLs

Every style uses the same pattern, https://tiles.expressmaps.com/styles/STYLE.json?key=YOUR_API_KEY. All ten share one tileset.

Markers and popups

new maplibregl.Marker({ color: "#1d4ed8" })
  .setLngLat([-0.1276, 51.5072])
  .setPopup(new maplibregl.Popup().setHTML("<b>Our office</b><br>Open 9 to 5"))
  .addTo(map);

Your own data as a layer

For more than a handful of points, add a GeoJSON source and draw it with a layer. It renders on the GPU with the rest of the map, so thousands of points stay smooth.

map.on("load", function () {
  map.addSource("stores", { type: "geojson", data: "/stores.geojson" });
  map.addLayer({
    id: "stores",
    type: "circle",
    source: "stores",
    paint: { "circle-radius": 6, "circle-color": "#1d4ed8", "circle-stroke-width": 2, "circle-stroke-color": "#fff" }
  });
});

Switching styles

map.setStyle swaps the style in place, as the buttons above do. It replaces every layer, so re-add your own sources and layers when the new style has loaded:

function addMyLayers() { /* addSource / addLayer as above */ }
map.on("style.load", addMyLayers);   // runs after the first load and after every setStyle

map.setStyle("https://tiles.expressmaps.com/styles/darklands.json?key=YOUR_API_KEY");

Coming from Mapbox GL JS

MapLibre began as a fork of Mapbox GL JS 1.x, so the API is almost identical. In most projects the move is three edits:

1. Load maplibre-gl instead of mapbox-gl (script tags or npm).
2. Rename mapboxgl. to maplibregl. and delete the accessToken line.
3. Replace the mapbox://styles/... URL with an ExpressMaps style URL.

Mapbox GL JS 1.x also works with our styles unchanged. Version 2 and later require a Mapbox token, which is why we recommend MapLibre. See the Mapbox alternative page for pricing differences.

React, Vue and other frameworks

Create the map once in a mount hook and call map.remove() on unmount. The React guide has a ready-made component and a react-map-gl version.

Things to know

• A map load is counted when the style is requested. Panning and zooming are free.
• Restrict your key to your domains in the console. Tile, icon and font requests are authorised from the page's referrer, so only the style URL carries the key.
• Keep the attribution control on; the OpenStreetMap credit is part of the data licence.
• MapLibre Native for iOS and Android takes the same style URL. Native apps send no referrer, so use a separate unrestricted key per app.
• Need Leaflet compatibility for existing code? See ExpressMaps in Leaflet.

Get a free API key MapLibre in the docs