geoblocks / ol-maplibre-layer

Use a MapBox map as an OpenLayers layer

MapLibre OpenLayers layer

Render a MapLibre GL JS map as an OpenLayers layer.

Installation

npm i @geoblocks/ol-maplibre-layer

OpenLayers and MapLibre GL JS are peer dependencies, so you need to install them too.

npm i ol maplibre-gl

Code example

import MapLibreLayer from '@geoblocks/ol-maplibre-layer';

const layer = new MapLibreLayer({
  opacity: 0.7,
  maplibreOptions: {
    style: 'https://www.example.com/path/to/style.json',
  },
});

// ...
map.addLayer(layer);

All the properties passed to the construction (except maplibreOptions) are used to create the OpenLayers layer. maplibreOptions is used to create the MapLibre map.

The MapLibreLayer exposes the underlying MapLibre map as public property, so you can use it to interact with the map.

layer.maplibreMap.setStyle('https://www.example.com/path/to/other/style.json');

Live examples

Basic example