ol-maplibre-layer

MapLibre as an OpenLayers layer

Maintained by Geoblocks

Renders a MapLibre GL JS map as a layer of an OpenLayers map, so OpenLayers apps can show MapLibre vector styles alongside their own layers and interactions.

Live demo

ol-maplibre-layer running on MapLibre GL JS in your browser

Loading the map…

Demo code

import OLMap from "ol/Map";
import View from "ol/View";
import { fromLonLat } from "ol/proj";
import "ol/ol.css";
import { MapLibreLayer } from "@geoblocks/ol-maplibre-layer";
import type { PluginDemo } from "../types";

export default {
  center: [8.5417, 47.3769], // Zurich
  zoom: 13,
  run({ map, container }) {
    // This plugin runs MapLibre as a layer of an OpenLayers map, so swap the demo's map for OpenLayers.
    const { lng, lat } = map.getCenter();
    const zoom = map.getZoom() + 1; // OpenLayers zoom levels are for 256 px tiles
    map.remove();

    new OLMap({
      target: container,
      view: new View({ center: fromLonLat([lng, lat]), zoom }),
      layers: [
        new MapLibreLayer({
          mapLibreOptions: { style: "https://tiles.openfreemap.org/styles/liberty" },
        }),
      ],
    });
  },
} satisfies PluginDemo;