The MapLibre project's binding that renders a MapLibre GL JS map as a Leaflet layer, so Leaflet apps get vector basemaps while keeping their Leaflet markers, popups and plugins.
Live demo
MapLibre GL Leaflet running on MapLibre GL JS in your browser
Loading the map…
Demo code
import * as L from "leaflet";
import "leaflet/dist/leaflet.css";
import { maplibreGL } from "@maplibre/maplibre-gl-leaflet";
import type { PluginDemo } from "../types";
export default {
center: [-77.0322, 38.9128], // Washington, DC
zoom: 14,
run({ map, container }) {
// This plugin runs MapLibre inside a Leaflet map, so swap the demo's map for Leaflet.
const { lng, lat } = map.getCenter();
const zoom = map.getZoom() + 1; // Leaflet zoom levels are for 256 px tiles
map.remove();
const leafletMap = L.map(container, { minZoom: 1 }).setView([lat, lng], zoom);
// The vector basemap, drawn by MapLibre as a Leaflet layer.
maplibreGL({ style: "https://tiles.openfreemap.org/styles/liberty" }).addTo(leafletMap);
// Ordinary Leaflet on top of it.
L.circleMarker([lat, lng], { radius: 10, color: "#e4572e" })
.bindPopup("Leaflet marker over a <b>MapLibre</b> basemap")
.addTo(leafletMap)
.openPopup();
},
} satisfies PluginDemo;
