diff --git a/public/js/measure.js b/public/js/measure.js
index ed7dd72..40086b8 100644
--- a/public/js/measure.js
+++ b/public/js/measure.js
@@ -105,21 +105,28 @@ export class MeasureControl {
       id: FILL_LAYER_ID,
       type: "fill",
       source: SOURCE_ID,
-      filter: ["==", "$type", "Polygon"],
+      filter: ["==", ["geometry-type"], "Polygon"],
       paint: { "fill-color": "#1e5fbf", "fill-opacity": 0.15 },
     });
     this._map.addLayer({
       id: LINE_LAYER_ID,
       type: "line",
       source: SOURCE_ID,
-      filter: ["!=", "$type", "Point"],
+      filter: ["!=", ["geometry-type"], "Point"],
       paint: { "line-color": "#1e5fbf", "line-width": 2 },
     });
+    // "role" alone (not also a geometry-type check) — it's only ever set on
+    // Point features to begin with (the line/polygon shape feature has no
+    // "role" property at all), so it already implies the geometry type.
+    // Mixing the legacy "$type" filter syntax with an expression like
+    // ["get", "role"] in the same filter logs as unsupported in newer
+    // MapLibre — this sidesteps that rather than fixing it by switching
+    // "$type" to ["geometry-type"] and keeping both checks.
     this._map.addLayer({
       id: POINT_LAYER_ID,
       type: "circle",
       source: SOURCE_ID,
-      filter: ["all", ["==", "$type", "Point"], ["==", ["get", "role"], "vertex"]],
+      filter: ["==", ["get", "role"], "vertex"],
       paint: { "circle-radius": 4, "circle-color": "#fff", "circle-stroke-color": "#1e5fbf", "circle-stroke-width": 2 },
     });
     // Distance mode only (see _render) — each segment's own length, not