Reusable cartographic layers built on top of MapLibre GL. Designed to be consumed both by a Preact frontend
(simplestreetmap) and by a Vue/Nuxt frontend (ptitlutins).
Creates and returns an instance that extends maplibre.Map. The full
MapLibre API is therefore available.
import { createMap } from "esquisse";
const map = createMap({
maplibre: window.maplibregl, // required
pmtiles: window.pmtiles, // optional
container: "map", // required (id or element)
baseStyle: BASE_STYLE_URL, // required
center: [lng, lat],
zoom: 13,
syncUrl: true, // optional: sync ?map= in the URL
globe: true, // optional: globe projection on load
});Methods added on the instance:
onLoadOrNow(fn)— runsfn()now if the map is loaded, otherwise on the nextload.changeBaseMap(url)— swaps the base style while preserving custom sources and layers (those whose id starts withcustom-).
Holds a set of layers and the active one.
import { LayerSelection } from "esquisse";
const selection = new LayerSelection({ map, baseStyle });
selection.setActive("bicycle");
selection.subscribe((activeKey) => { /* ... */ });
selection.current.show();
selection.current.legend(); // { groups: [...] } or undefinedAvailable keys: plan, satellite, batiment3d, bicycle.
Each layer takes { map, ... }. Tile URLs are injectable (sourceUrl or
tiles) with a sensible default.
import { Poi, Bicycle, Terrain, Satellite, Batiment3d, Plan } from "esquisse";
const poi = new Poi({ map });
const bike = new Bicycle({ map });
poi.show();
poi.onClick((feature, lngLat) => {
if (!feature) { /* click outside any POI */ return; }
/* ... */
});show()/hide()onClick(callback)— attaches a click + pointer-cursor handler scoped to the layer; callscallback(feature, lngLat), orcallback(null, lngLat)if nothing was hit. Returnsthis.legend()— returns{ groups: [{ category, items: [...] }] }for line layers (e.g. bicycle), otherwise undefined.
import { AbstractLayer, AbstractLineLayer } from "esquisse";
class MyLine extends AbstractLineLayer { /* ... */ }
class MyRaster extends AbstractLayer { /* ... */ }esquisse does not know how to display a panel, a legend or a popup. The host listens for events / reads the data and renders it in its own framework:
// simplestreetmap side (Preact)
poi.onClick((feature) => {
if (!feature) { panel.close(); return; }
const el = document.createElement("div");
render(html`<${PoiViewer} feature=${feature} />`, el);
panel.open(el);
});
// ptitlutins side (Vue)
poi.onClick((feature) => { selectedFeature.value = feature; });