Fix heatmap and cluster layer ordering (#1943)

* Fix heatmap and cluster layer ordering

* Sort GeoJSON layer ID imports

* Order rebuilt heatmap and cluster layers from the Vector control

Bumps maplibre-gl-vector to 0.10.12, which carries
opengeos/maplibre-gl-vector#67.

A point-renderer switch on a layer owned by the Add Vector Layer control
made the control rebuild its map layers, but it emitted `layerupdated`
before the (async) rebuild replaced `layerIds`. GeoLibre mirrors those ids
into `metadata.nativeLayerIds` and restacks from them, so it kept ids for
layers the map no longer had and never saw the replacements:
getBeforeStyleLayerId could not anchor and syncExternalNativeLayer moved
nothing. A layer set to the heatmap renderer therefore kept whatever
stacking the rebuild appended it with, drawing above layers the panel puts
on top of it. 0.10.12 emits once the rebuild lands, so the ids stay live.

The preceding commits fix the same symptom on the core GeoJSON path, where
the heatmap/cluster/text/label style layers were missing from the ordered
candidate list outright. Both paths are now verified in the browser: with
the upper layer clustered and the lower one switched to heatmap last, the
draw order comes out heatmap -> cluster -> cluster-count -> circle,
matching the layer panel.

Re-checked MAX_VECTOR_BYTES against `src/lib/utils/remote.ts` in the bumped
package as CLAUDE.md requires: still `2 ** 31 - 1`, mirror unchanged.

Author: giswqs

apps/geolibre-desktop/package.json

@@ -94,7 +94,7 @@
     "maplibre-gl-swipe": "^0.11.2",
     "maplibre-gl-time-slider": "^1.8.4",
     "maplibre-gl-usgs-lidar": "^0.11.1",
-    "maplibre-gl-vector": "^0.10.11",
+    "maplibre-gl-vector": "^0.10.12",
     "openai": "^7.3.0",
     "qrcode.react": "^4.2.0",
     "react": "^19.2.8",

package-lock.json

@@ -27,16 +27,21 @@ import { LayerControl, type CustomLayerAdapter, type LayerState } from "maplibre
 import { CollapsedAttributionControl } from "./collapsed-attribution-control";
 import {
   circleLayerId,
+  clusterCountLayerId,
+  clusterLayerId,
   fillExtrusionLayerId,
   fillLayerId,
   getLayerBounds,
+  heatmapLayerId,
   highlightCircleLayerId,
   highlightFillLayerId,
   highlightLineLayerId,
   highlightSourceId,
+  labelLayerId,
   lineLayerId,
   markerLayerId,
   sourceId,
+  textLayerId,
 } from "./geojson-loader";
 import {
   mbtilesStyleLayerIds,
@@ -2349,8 +2354,13 @@ export class MapController {
         { id: fillExtrusionLayerId(layer.id), suffix: "Extrusions" },
         { id: fillLayerId(layer.id), suffix: "Polygons" },
         { id: lineLayerId(layer.id), suffix: "Lines" },
+        { id: heatmapLayerId(layer.id), suffix: "Heatmap" },
+        { id: clusterLayerId(layer.id), suffix: "Clusters" },
+        { id: clusterCountLayerId(layer.id), suffix: "Cluster counts" },
         { id: circleLayerId(layer.id), suffix: "Points" },
         { id: markerLayerId(layer.id), suffix: "Markers" },
+        { id: textLayerId(layer.id), suffix: "Text" },
+        { id: labelLayerId(layer.id), suffix: "Labels" },
       ];
     }
 

packages/map/src/map-controller.ts

@@ -68,7 +68,7 @@
     "maplibre-gl-swipe": "^0.11.2",
     "maplibre-gl-time-slider": "^1.8.4",
     "maplibre-gl-usgs-lidar": "^0.11.1",
-    "maplibre-gl-vector": "^0.10.11",
+    "maplibre-gl-vector": "^0.10.12",
     "netcdfjs": "^4.0.0",
     "ngeohash": "^0.6.4",
     "open-location-code-typescript": "^1.5.0",

packages/plugins/package.json

@@ -285,6 +285,9 @@ function controlVectorLayer(id: string, patch: Partial<GeoLibreLayer> = {}): Geo
 }
 
 const circleId = (id: string) => `layer-${id}-circle`;
+const clusterId = (id: string) => `layer-${id}-cluster`;
+const clusterCountId = (id: string) => `layer-${id}-cluster-count`;
+const heatmapId = (id: string) => `layer-${id}-heatmap`;
 const markerId = (id: string) => `layer-${id}-marker`;
 const rasterId = (id: string) => `layer-${id}-raster`;
 const srcId = (id: string) => `source-${id}`;
@@ -419,6 +422,23 @@ describe("MapController.syncLayers reconciliation", () => {
     );
   });
 
+  it("keeps a lower heatmap beneath every companion of an upper clustered layer", () => {
+    const { map, fake } = makeFakeMap();
+    const controller = controllerWith(map);
+
+    controller.syncLayers([
+      pointLayer("heat", {}, { pointRenderer: "heatmap" }),
+      pointLayer("clusters", {}, { pointRenderer: "cluster" }),
+    ]);
+
+    const userOrder = fake.order.filter((id) => id !== "basemap-bg");
+    const heatIndex = userOrder.indexOf(heatmapId("heat"));
+    assert.ok(heatIndex !== -1, "heatmap layer exists");
+    assert.ok(heatIndex < userOrder.indexOf(clusterId("clusters")), "beneath cluster bubbles");
+    assert.ok(heatIndex < userOrder.indexOf(clusterCountId("clusters")), "beneath cluster counts");
+    assert.ok(heatIndex < userOrder.indexOf(circleId("clusters")), "beneath unclustered points");
+  });
+
   it("restacks every layer in one pass when a control adds its style layers late", () => {
     const { map, fake } = makeFakeMap();
     const controller = controllerWith(map);