maplibre-gleo

A MaplibreJS custom layer to render data through the Gleo library.

This plugin fuses together a Leaflet BlanketOverlay (which covers an entire Leaflet map pane, similar to a L.Renderer) with a Gleo Platina (which can render thousands of Gleo symbols using WebGL).

I want to see this working!

There's a few public demos:

• point - a circle and a text label
• arrugator - one reprojected (arrugated) raster

Usage

maplibre-gleo leverages javascript modules. For convenience, the first step would be to have an import map somewhere in your HTML file, like so:

<script type="importmap">
{
	"imports": {
		"gleo/": "https://unpkg.com/gleo@0.10.0/src/",
		"maplibre-gleo": "./maplibre-gleo-layer.mjs"
	}
}
</script>

(If you're using a build/bundling system, like Rollup/Webpack/Parcel/etc, then you most probably won't be using import maps to specify dependencies, but npm instead)

Then, in your javascript module:

• Create a MaplibreJS Map
• Instance the Maplibre-Gleo custom layer
• When the MaplibreJS Map has loaded:
  • Fetch the Gleo Platina
  • Add Gleo Symbols (and/or Gleo Loaders) to the Platina

<script type="module">
	// Create a MaplibreJS map, assuming a <div id='maplibre-map'> somewhere else
	const map = new maplibregl.Map({
		container: 'maplibre-map',
		center: [0, 0],
		zoom: 3,
		style: 'https://demotiles.maplibre.org/style.json',
		/* stuff */
	});

	// Create a maplibre-gleo custom layer
	// Note that this custom layer is dummy before it's bound to the map
	import MaplibreGleoLayer from 'maplibre-gleo';
	let gleo = new MaplibreGleoLayer();

	map.on('load', () => {
		// Once the maplibre map has been initialized, bind the gleo custom layer to
		// the map (and to its WebGL context)
		map.addLayer(gleo);

		// Fetch the Gleo Platina from the custom layer
		let platina = gleo.platina;

		// Add Gleo symbols (or Gleo Loaders) to the Gleo Platina
		import CircleFill from "gleo/symbols/CircleFill.mjs";
		let circle = new CircleFill(
			[20, -3], {colour: "red", radius: 60}
		).addTo(platina);
	});

</script>

Limitations and gotchas

No pitch (no tilt)

maplibre-gleo does not share the affine transformation matrix with the underlaying Maplibre instance; it recalculates its own transformation matrix based on the map's center, zoom level (converted to scale), ignoring the pitch (or tilt) angle.

The reason for this is that the internal Maplibre CRS is web mercator (EPSG:3857) expressed in easting-southing (yes, shouthing!) normalized to (0,+1), whereas Gleo uses EPSG:3857 expressed in easting-northing in the (-20037508,[phone]) pseudo-meter range.

Assumes EPSG:3857

Web mercator only. i.e. no support for the Maplibre globe view, nor any other CRSs.

Legalese

maplibre-gleo is licensed under a GPL-3.0 license. See the LICENSE file for details.