solid-map-gl 2.2.0 → 2.2.2

package/dist/{index.jsx → index/index.jsx}

@@ -1,38 +1,19 @@
+import {
+  MapProvider,
+  useMapContext
+} from "../chunk/N4NHJCAS.jsx";
+
 // src/components/MapGL/index.tsx
 import {
   createSignal,
-  createEffect as createEffect2,
+  createEffect,
   onMount,
   onCleanup,
   on
 } from "solid-js";
 import { isServer } from "solid-js/web";
 
-// src/components/MapProvider/index.tsx
-import { createContext, useContext, createEffect } from "solid-js";
-import { createStore } from "solid-js/store";
-var defaultState = {
-  map: null,
-  mapLib: null,
-  isMapLibre: false,
-  constants: {},
-  themeVersion: 0
-};
-var MapContext = createContext([defaultState]);
-var useMapContext = () => useContext(MapContext);
-var MapProvider = (props) => {
-  const [state, setState] = createStore({ ...defaultState });
-  props.map && setState("map", props.map);
-  props.mapLib && setState("mapLib", props.mapLib);
-  setState("isMapLibre", !!props.isMapLibre);
-  setState("constants", props.constants || {});
-  setState("themeVersion", props.themeVersion || 0);
-  createEffect(() => setState("constants", props.constants || {}));
-  createEffect(() => setState("themeVersion", props.themeVersion || 0));
-  return <MapContext.Provider value={[state]}>{props.children}</MapContext.Provider>;
-};
-
-// src/events.ts
+// src/lib/events.ts
 var mapEvents = [
   "onMouseDown",
   "onMouseUp",
@@ -111,7 +92,7 @@ var drawEvents = [
   "onActionable"
 ];
 
-// src/mapStyles.ts
+// src/lib/mapStyles.ts
 var mapBase = "mapbox://styles/mapbox";
 var gitBase = "https://raw.githubusercontent.com/";
 var gishub = "https://raw.githubusercontent.com/GIShub4/map-styles/main/";
@@ -229,7 +210,7 @@ var rasterStyleList = {
   }
 };
 
-// src/tilesSettled.ts
+// src/components/MapGL/tilesSettled.ts
 var nextFrame = () => new Promise((resolve) => requestAnimationFrame(() => resolve()));
 var hasActiveFadeTransition = (map) => {
   try {
@@ -278,6 +259,7 @@ function waitForIdleAndSettle(map, options = {}) {
     map.once("idle", () => {
       settleAfterIdle(map, options).then(resolve);
     });
+    map.triggerRepaint();
   });
 }
 function disableRasterFade(map) {
@@ -289,7 +271,7 @@ function disableRasterFade(map) {
   }
 }
 
-// src/offscreenCapture.ts
+// src/components/MapGL/offscreenCapture.ts
 function createCapturer(map, settleOptions) {
   return {
     map,
@@ -328,6 +310,14 @@ var MapGL = (props) => {
     ) || style : style;
   };
   onMount(async () => {
+    try {
+      await setupMap();
+    } catch (error) {
+      console.error("[MapGL] Failed to initialize map:", error);
+      props.onError?.(error);
+    }
+  });
+  const setupMap = async () => {
     mapLib = props.mapLib || await import("mapbox-gl");
     if (!mapLib.Map) mapLib = window["maplibregl"] || window["mapboxgl"];
     if (typeof mapLib.supported === "function" && !mapLib.supported())
@@ -361,7 +351,7 @@ var MapGL = (props) => {
         if (typeof prop === "function") {
           map.on(event, (evt) => {
             setTimeout(() => {
-              if (evt.clickOnLayer) return;
+              if (event === "click" && evt.clickOnLayer) return;
               prop(evt);
               props.debugEvents && debug(`Map '${event}' event:`, evt);
             }, 0);
@@ -370,7 +360,7 @@ var MapGL = (props) => {
           Object.keys(prop).forEach((layerId) => {
             map.on(event, layerId, (evt) => {
               setTimeout(() => {
-                if (evt.clickOnLayer) return;
+                if (event === "click" && evt.clickOnLayer) return;
                 prop[layerId](evt);
                 props.debugEvents && debug(`Map '${event}' event on '${layerId}':`, evt);
               }, 0);
@@ -394,9 +384,9 @@ var MapGL = (props) => {
     map.once("load", () => {
       setMapLoaded(map);
       debug("Map loaded");
-      if (props.offscreen) {
-        if (props.offscreen.disableRasterFade !== false) disableRasterFade(map);
-        props.onCapturerReady?.(
+      if (props.offscreen && props.offscreen.disableRasterFade !== false) disableRasterFade(map);
+      if (props.onCapturerReady) {
+        props.onCapturerReady(
           createCapturer(map, {
             timeout: props.tilesLoadedTimeout ?? 1e4,
             fadeMargin: props.tilesLoadedFadeMargin ?? 400
@@ -481,12 +471,12 @@ var MapGL = (props) => {
         props.onViewportChange(viewport);
       });
     });
-  });
-  createEffect2(
+  };
+  createEffect(
     on(
       () => props.viewport,
       (vp) => {
-        if (props.id !== vp?.id) return;
+        if (!map || props.id !== vp?.id) return;
         if (expectingOwnEcho) {
           expectingOwnEcho = false;
           return;
@@ -511,7 +501,7 @@ var MapGL = (props) => {
       { defer: true }
     )
   );
-  createEffect2(() => {
+  createEffect(() => {
     const loadedMap = mapLoaded();
     if (typeof loadedMap?.setConfigProperty !== "function") {
       if (loadedMap && props.config && Object.keys(props.config).length) {
@@ -529,13 +519,13 @@ var MapGL = (props) => {
       debug(`Set Config (${id}:${key}) to:`, value);
     }
   });
-  createEffect2(() => {
+  createEffect(() => {
     const proj = props.options?.projection;
     if (!map || !proj) return;
     map.setProjection(proj);
     debug("Set Projection to:", proj);
   });
-  createEffect2(() => {
+  createEffect(() => {
     const cur = props.cursorStyle;
     if (!map || !cur) return;
     map.getCanvas().style.cursor = cur;
@@ -550,7 +540,7 @@ var MapGL = (props) => {
     });
     return list;
   };
-  createEffect2((prev) => {
+  createEffect((prev) => {
     const style = getStyle(props.options?.style, props.darkStyle);
     if (map?.isStyleLoaded() && prev !== style) {
       const oldStyle = map.getStyle();
@@ -583,7 +573,7 @@ var MapGL = (props) => {
     "showPadding",
     "showOverdrawInspector"
   ].forEach((item) => {
-    createEffect2(() => {
+    createEffect(() => {
       const prop = props[item];
       if (!map || !prop) return;
       map[item] = prop;
@@ -627,13 +617,13 @@ var MapGL = (props) => {
 // src/components/Source/index.tsx
 import {
   onCleanup as onCleanup2,
-  createEffect as createEffect3,
-  createContext as createContext2,
-  useContext as useContext2,
+  createEffect as createEffect2,
+  createContext,
+  useContext,
   createUniqueId
 } from "solid-js";
-var SourceContext = createContext2();
-var useSourceId = () => useContext2(SourceContext);
+var SourceContext = createContext();
+var useSourceId = () => useContext(SourceContext);
 var Source = (props) => {
   const [ctx] = useMapContext();
   props.id ??= createUniqueId();
@@ -665,14 +655,14 @@ var Source = (props) => {
   debug("Add Source:", props.id);
   switch (anySource().type) {
     case "geojson":
-      createEffect3(() => {
+      createEffect2(() => {
         const data = anySource().data;
         ctx.map.getSource(props.id).setData(data || {});
         debug("Update GeoJSON Data:", props.id);
       });
       break;
     case "image":
-      createEffect3(() => {
+      createEffect2(() => {
         const url = anySource().url;
         const coords = anySource().coordinates;
         ctx.map.getSource(props.id).updateImage(url, coords);
@@ -680,7 +670,7 @@ var Source = (props) => {
       });
       break;
     case "vector":
-      createEffect3(() => {
+      createEffect2(() => {
         const url = anySource().url;
         const tiles = anySource().tiles;
         const source = ctx.map.getSource(props.id);
@@ -689,7 +679,7 @@ var Source = (props) => {
       });
       break;
     case "raster":
-      createEffect3(() => {
+      createEffect2(() => {
         const src = lookup(anySource().url);
         const source = ctx.map.getSource(props.id);
         src.url ? source.setUrl(src.url) : source.setTiles(src.tiles);
@@ -712,12 +702,12 @@ var Source = (props) => {
 // src/components/Layer/index.tsx
 import {
   onCleanup as onCleanup3,
-  createEffect as createEffect4,
+  createEffect as createEffect3,
   createMemo,
   createUniqueId as createUniqueId2
 } from "solid-js";
 
-// src/styles.ts
+// src/components/Layer/styles.ts
 var baseStyle = [
   "id",
   "type",
@@ -781,7 +771,7 @@ var layoutStyles = [
   "text-writing-mode"
 ];
 
-// src/colors.ts
+// src/components/Layer/colors.ts
 var probe;
 var toRgbString = (cssColor) => {
   probe ??= document.body.appendChild(document.createElement("div"));
@@ -814,37 +804,8 @@ var resolveColor = (value) => {
   }
   return value;
 };
-var toRgbaComponents = (value) => {
-  const rgb = toRgbString(resolveColor(value)) ?? value;
-  const match = rgb.match(/rgba?\(([^)]+)\)/i);
-  if (!match) return [0, 0, 0, 1];
-  const [r, g, b, a = 1] = match[1].split(",").map(Number);
-  return [r, g, b, a];
-};
 
 // src/components/Layer/index.tsx
-var PULSE_DEFAULTS = {
-  property: "icon-halo-width",
-  from: 0,
-  to: 8,
-  duration: 1500,
-  waveform: "out"
-};
-var PULSE_RAMP_FRACTION = 0.75;
-var easeOutQuad = (t) => 1 - (1 - t) * (1 - t);
-var pulseShape = (elapsed, duration, waveform) => {
-  const phase = elapsed % duration / duration;
-  if (waveform === "in-out") return (1 - Math.cos(phase * Math.PI * 2)) / 2;
-  const ramp = Math.min(phase / PULSE_RAMP_FRACTION, 1);
-  return easeOutQuad(ramp);
-};
-var lerpColor = (from, to, t) => {
-  const r = Math.round(from[0] + (to[0] - from[0]) * t);
-  const g = Math.round(from[1] + (to[1] - from[1]) * t);
-  const b = Math.round(from[2] + (to[2] - from[2]) * t);
-  const a = from[3] + (to[3] - from[3]) * t;
-  return `rgba(${r}, ${g}, ${b}, ${a})`;
-};
 var diff = (newProps = {}, prevProps = {}) => {
   const keys = /* @__PURE__ */ new Set([...Object.keys(newProps), ...Object.keys(prevProps)]);
   return [...keys].reduce((acc, key) => {
@@ -856,9 +817,16 @@ var diff = (newProps = {}, prevProps = {}) => {
   }, []);
 };
 var newKey = (key, type) => (key.startsWith(type) || key.startsWith("icon") || key.startsWith("text") ? "" : type + "-") + key.replace(/[A-Z]/g, (s) => "-" + s.toLowerCase());
-var resolveColor2 = (key, value) => key.endsWith("color") && typeof value === "string" ? resolveColor(value) : value;
+var misplacedTopLevelProps = ["slot", "filter", "visible", "beforeId", "beforeType"];
+var resolveColor2 = (key, value) => {
+  if (!key.endsWith("color")) return value;
+  if (Array.isArray(value)) return value.map((v) => resolveColor2(key, v));
+  return typeof value === "string" ? resolveColor(value) : value;
+};
 var constantRef = /^@(.+)$/;
 var resolveConstant = (key, value, constants, debug) => {
+  if (Array.isArray(value))
+    return value.map((v) => resolveConstant(key, v, constants, debug));
   if (typeof value !== "string") return value;
   const match = value.match(constantRef);
   if (!match) return value;
@@ -879,6 +847,10 @@ var updateStyle = (oldStyle, constants = {}, debug = () => {
   Object.entries(oldStyle).forEach(([key, value]) => {
     if (baseStyle.includes(key)) style[key] = value;
     else {
+      if (misplacedTopLevelProps.includes(key))
+        debug(
+          `"${key}" is a <Layer> prop, not a style property \u2014 belongs outside "style", not inside it. Treating it as a paint/layout property instead.`
+        );
       const nk = newKey(key, oldStyle.type);
       layoutStyles.includes(nk) ? layout[nk] = resolveConstant(nk, value, constants, debug) : paint[nk] = resolvePaint(nk, value);
     }
@@ -910,7 +882,7 @@ var Layer = (props) => {
       ...updateStyle(props.style, ctx.constants, debug),
       id: layerId,
       source: sourceId,
-      // `slot` is Mapbox Standard-Style-only — MapLibre has no equivalent (see docs/dev-notes.md)
+      // `slot` is Mapbox Standard-Style-only — MapLibre has no equivalent (see .claude/dev-notes.md)
       ...ctx.isMapLibre ? {} : { slot: props.slot || "" },
       metadata: {
         smg: { beforeType: props.beforeType, beforeId: props.beforeId }
@@ -925,13 +897,13 @@ var Layer = (props) => {
     if (props[item]) {
       const event = item.slice(2).toLowerCase();
       ctx.map.on(event, layerId, (evt) => {
-        evt.clickOnLayer = true;
+        if (event === "click") evt.clickOnLayer = true;
         props[item](evt);
         ctx.map.debugEvents && debug(`Layer '${event}' event on '${layerId}':`, evt);
       });
     }
   });
-  createEffect4((prev) => {
+  createEffect3((prev) => {
     ctx.themeVersion;
     const style = updateStyle(props.style, ctx.constants, debug);
     if (style === prev) return;
@@ -950,7 +922,7 @@ var Layer = (props) => {
     debug("Update Layer Style:", layerId);
     return style;
   }, updateStyle(props.style, ctx.constants, debug));
-  createEffect4((prev) => {
+  createEffect3((prev) => {
     if (props.visible === prev) return;
     ctx.map.setLayoutProperty(
       layerId,
@@ -961,19 +933,20 @@ var Layer = (props) => {
     debug(`Update Visibility (${layerId}):`, props.visible.toString());
     return props.visible;
   }, props.visible);
-  createEffect4((prev) => {
+  createEffect3((prev) => {
     if (getBeforeId() === prev) return prev;
     ctx.map.moveLayer(layerId, getBeforeId());
     debug(`Update Layer Z-Index (${layerId}):`, getBeforeId());
     return getBeforeId();
   }, getBeforeId());
-  createEffect4(async () => {
-    if (!props.filter) return;
-    !ctx.map.isStyleLoaded() && await ctx.map.once("styledata");
-    ctx.map.setFilter(layerId, props.filter);
+  createEffect3((prev) => {
+    if (props.filter === prev) return prev;
+    if (prev === void 0 && !props.filter) return prev;
+    ctx.map.setFilter(layerId, props.filter ?? null);
     debug(`Update Filter (${layerId}):`, props.filter);
-  });
-  createEffect4(async () => {
+    return props.filter;
+  }, void 0);
+  createEffect3(async () => {
     if (!props.featureState || props.featureState.id === null) return;
     !ctx.map.isStyleLoaded() && await ctx.map.once("styledata");
     ctx.map.removeFeatureState({
@@ -989,43 +962,27 @@ var Layer = (props) => {
       props.featureState.state
     );
   });
-  createEffect4(() => {
+  createEffect3(() => {
     if (!props.pulse) return;
-    const configs = props.pulse === true ? [{}] : Array.isArray(props.pulse) ? props.pulse : [props.pulse];
-    const resolved = configs.map((config) => {
-      const { property, from, to, duration, waveform } = {
-        ...PULSE_DEFAULTS,
-        ...config
-      };
-      const isColor = typeof from === "string" || typeof to === "string";
-      const [a, b] = waveform === "in" ? [to, from] : [from, to];
-      return {
-        property,
-        duration,
-        waveform,
-        isColor,
-        fromNum: isColor ? 0 : a,
-        toNum: isColor ? 0 : b,
-        fromRgba: isColor ? toRgbaComponents(a) : null,
-        toRgba: isColor ? toRgbaComponents(b) : null
+    const configs = Array.isArray(props.pulse) ? props.pulse : [props.pulse];
+    const timers = configs.map((config) => {
+      const { property, duration = 1500, holdFraction = 0.25 } = config;
+      const from = resolveColor2(property, config.from);
+      const to = resolveColor2(property, config.to);
+      const rampMs = duration * (1 - holdFraction);
+      const beat = () => {
+        ctx.map.setPaintProperty(layerId, `${property}-transition`, { duration: 0, delay: 0 }, { validate: false });
+        ctx.map.setPaintProperty(layerId, property, from, { validate: false });
+        requestAnimationFrame(() => {
+          ctx.map.setPaintProperty(layerId, `${property}-transition`, { duration: rampMs, delay: 0 }, { validate: false });
+          ctx.map.setPaintProperty(layerId, property, to, { validate: false });
+        });
       };
+      beat();
+      return window.setInterval(beat, duration);
     });
-    const start = performance.now();
-    let frameId;
-    const loop = (now) => {
-      const elapsed = now - start;
-      resolved.forEach((cfg) => {
-        const t = pulseShape(elapsed, cfg.duration, cfg.waveform);
-        const value = cfg.isColor ? lerpColor(cfg.fromRgba, cfg.toRgba, t) : cfg.fromNum + (cfg.toNum - cfg.fromNum) * t;
-        ctx.map.setPaintProperty(layerId, cfg.property, value, {
-          validate: false
-        });
-      });
-      frameId = window.requestAnimationFrame(loop);
-    };
-    frameId = window.requestAnimationFrame(loop);
     debug(`Start Pulse (${layerId}):`, props.pulse);
-    onCleanup3(() => window.cancelAnimationFrame(frameId));
+    onCleanup3(() => timers.forEach((timer) => window.clearInterval(timer)));
   });
   onCleanup3(() => ctx.map?.getLayer(layerId) && ctx.map?.removeLayer(layerId));
   return props.children;
@@ -1037,11 +994,11 @@ import {
   createUniqueId as createUniqueId3,
   createSignal as createSignal2,
   onMount as onMount2,
-  createContext as createContext3,
-  useContext as useContext3
+  createContext as createContext2,
+  useContext as useContext2
 } from "solid-js";
-var LayerContext = createContext3();
-var useScene = () => useContext3(LayerContext);
+var LayerContext = createContext2();
+var useScene = () => useContext2(LayerContext);
 var Layer3D = (props) => {
   const [ctx] = useMapContext();
   const [scene, setScene] = createSignal2(null);
@@ -1181,10 +1138,10 @@ var Layer3D = (props) => {
 };
 
 // src/components/Atmosphere/index.tsx
-import { onCleanup as onCleanup5, createEffect as createEffect5 } from "solid-js";
+import { onCleanup as onCleanup5, createEffect as createEffect4 } from "solid-js";
 var Atmosphere = (props) => {
   const [ctx] = useMapContext();
-  createEffect5(() => {
+  createEffect4(() => {
     if (ctx.isMapLibre) ctx.map.setSky?.(props.style || {});
     else ctx.map.setFog(props.style || {});
   });
@@ -1200,7 +1157,7 @@ var Atmosphere = (props) => {
 
 // src/components/Terrain/index.tsx
 import {
-  createEffect as createEffect6,
+  createEffect as createEffect5,
   createUniqueId as createUniqueId4,
   onCleanup as onCleanup6
 } from "solid-js";
@@ -1217,7 +1174,7 @@ var Terrain = (props) => {
     });
     ctx.map.sourceIdList.push(sourceId);
   }
-  createEffect6(() => {
+  createEffect5(() => {
     ctx.map.setTerrain({
       exaggeration: props.exaggeration || 1,
       source: props?.source || sourceId
@@ -1228,13 +1185,13 @@ var Terrain = (props) => {
 };
 
 // src/components/Control/index.tsx
-import { createSignal as createSignal3, createEffect as createEffect8, splitProps, untrack } from "solid-js";
+import { createSignal as createSignal3, createEffect as createEffect7, splitProps, untrack } from "solid-js";
 
 // src/lib/createMapControl.ts
-import { createEffect as createEffect7, onCleanup as onCleanup7 } from "solid-js";
+import { createEffect as createEffect6, onCleanup as onCleanup7 } from "solid-js";
 var useControlPosition = (control, position) => {
   const [ctx] = useMapContext();
-  createEffect7(() => {
+  createEffect6(() => {
     const c = control();
     const pos = position?.();
     if (!c) return;
@@ -1261,7 +1218,7 @@ var Control = (props) => {
     ["logo", ctx.mapLib.LogoControl],
     ["terrain", ctx.mapLib.TerrainControl]
   ]);
-  createEffect8(() => {
+  createEffect7(() => {
     untrack(
       () => control() && ctx.map.hasControl(control()) && ctx.map.removeControl(control())
     );
@@ -1274,7 +1231,7 @@ var Control = (props) => {
 };
 
 // src/components/Marker/index.tsx
-import { onCleanup as onCleanup8, createEffect as createEffect9, splitProps as splitProps2 } from "solid-js";
+import { onCleanup as onCleanup8, createEffect as createEffect8, splitProps as splitProps2 } from "solid-js";
 var Marker = (props) => {
   if (!props.lngLat) throw new Error("Marker - lngLat is required");
   const [update, create_popup, create_marker] = splitProps2(
@@ -1286,7 +1243,7 @@ var Marker = (props) => {
   let marker = null;
   let popup = null;
   const LNGLAT = update.lngLat;
-  createEffect9(() => {
+  createEffect8(() => {
     if (!ctx.map) return;
     popup?.remove();
     popup = new ctx.mapLib.Popup({
@@ -1294,31 +1251,31 @@ var Marker = (props) => {
       focusAfterOpen: false,
       ...create_popup.popup
     }).on("open", () => create_popup.onOpen?.()).on("close", () => create_popup.onClose?.());
-    createEffect9(() => {
+    createEffect8(() => {
       if (update.children === void 0) return;
       typeof update.children === "string" ? popup?.setHTML(update.children) : popup?.setDOMContent(update.children);
       marker?.setPopup(popup);
     });
-    createEffect9(
+    createEffect8(
       () => update.showPopup !== popup?.isOpen() && marker?.togglePopup()
     );
   });
-  createEffect9(() => {
+  createEffect8(() => {
     if (!ctx.map) return;
     marker?.remove();
     marker = new ctx.mapLib.Marker(create_marker.options).on("dragstart", () => create_marker.onDragStart?.()).on("dragend", () => create_marker.onDragEnd?.()).on("drag", () => create_marker.onDrag?.(marker?.getLngLat().toArray())).setPopup(popup).setLngLat(LNGLAT).addTo(ctx.map);
-    createEffect9(
+    createEffect8(
       () => update.showPopup !== popup?.isOpen() && marker?.togglePopup()
     );
   });
-  createEffect9(() => marker?.setLngLat(update.lngLat));
-  createEffect9(() => marker?.setDraggable(update.draggable));
+  createEffect8(() => marker?.setLngLat(update.lngLat));
+  createEffect8(() => marker?.setDraggable(update.draggable));
   onCleanup8(() => marker?.remove());
   return null;
 };
 
 // src/components/Popup/index.tsx
-import { onCleanup as onCleanup9, createEffect as createEffect10, splitProps as splitProps3 } from "solid-js";
+import { onCleanup as onCleanup9, createEffect as createEffect9, splitProps as splitProps3 } from "solid-js";
 var Popup = (props) => {
   if (!props.trackPointer && !props.lngLat)
     throw new Error("Popup - lngLat or trackPointer is required");
@@ -1329,7 +1286,7 @@ var Popup = (props) => {
   ]);
   const [ctx] = useMapContext();
   let popup;
-  createEffect10(() => {
+  createEffect9(() => {
     if (!ctx.map) return;
     popup?.remove();
     popup = new ctx.mapLib.Popup({
@@ -1337,10 +1294,10 @@ var Popup = (props) => {
       focusAfterOpen: false,
       ...create.options
     }).on("open", () => create.onOpen?.()).on("close", () => create.onClose?.()).addTo(ctx.map);
-    createEffect10(
+    createEffect9(
       () => update.trackPointer ? popup.trackPointer() : popup.setLngLat(update.lngLat)
     );
-    createEffect10(
+    createEffect9(
       () => typeof update.children === "string" ? popup.setHTML(update.children) : popup.setDOMContent(update.children)
     );
   });
@@ -1352,7 +1309,7 @@ var Popup = (props) => {
 import {
   onCleanup as onCleanup10,
   createSignal as createSignal4,
-  createEffect as createEffect11,
+  createEffect as createEffect10,
   untrack as untrack2
 } from "solid-js";
 
@@ -1364,12 +1321,12 @@ for (let i = 0; i < 256; i++) {
   ALPHA_TABLE[i] = d * Math.abs(d);
 }
 ALPHA_TABLE[255] = -INF;
-function edt1d(grid, offset, stride, length3, f, v, z) {
+function edt1d(grid, offset, stride, length2, f, v, z) {
   v[0] = 0;
   z[0] = -INF;
   z[1] = INF;
   f[0] = grid[offset];
-  for (let q = 1, k = 0, s = 0; q < length3; q++) {
+  for (let q = 1, k = 0, s = 0; q < length2; q++) {
     f[q] = grid[offset + q * stride];
     const q2 = q * q;
     do {
@@ -1381,7 +1338,7 @@ function edt1d(grid, offset, stride, length3, f, v, z) {
     z[k] = s;
     z[k + 1] = INF;
   }
-  for (let q = 0, k = 0; q < length3; q++) {
+  for (let q = 0, k = 0; q < length2; q++) {
     while (z[k + 1] < q) k++;
     const r = v[k];
     const qr = q - r;
@@ -1461,34 +1418,51 @@ var PATTERN = {
   wave: { size: 20, path: "M0 5Q5 0 10 5T20 5M0 15Q5 10 10 15T20 15" }
 };
 var patternList = Object.keys(PATTERN);
-var svg = (body) => `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">${body}</svg>`;
+var svg = (path) => `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" stroke-linecap="round" stroke-linejoin="round">
+    <path d="${path}" fill="#000" stroke="#000" stroke-width="3"/>
+  </svg>`;
 var SYMBOL = {
-  square: svg('<rect x="8" y="8" width="48" height="48" fill="#000"/>'),
-  circle: svg('<circle cx="32" cy="32" r="28" fill="#000"/>'),
-  triangle: svg('<polygon points="32,6 60,56 4,56" fill="#000"/>'),
-  diamond: svg('<polygon points="32,4 60,32 32,60 4,32" fill="#000"/>'),
-  pentagon: svg('<polygon points="32,4 59,23 48,55 16,55 5,23" fill="#000"/>'),
-  hexagon: svg('<polygon points="32,4 56,18 56,46 32,60 8,46 8,18" fill="#000"/>'),
+  square: svg("M3,3 L21,3 L21,21 L3,21 Z"),
+  // Two semicircular arcs sharing one center/radius, traced in the same direction both times
+  // (the standard "circle via two arcs" trick). The requested `1,1` radius is far smaller than
+  // half the 16-unit chord between the two points, so per the SVG spec it's scaled up to the
+  // minimum radius that can still connect them (8, i.e. exactly a semicircle each) — the circle
+  // ends up centered on the chord's midpoint (12,11), not on the literal "1".
+  circle: svg("M 12 4 A 1 1 0 0 0 12 20 A 1 1 0 0 0 12 4 Z"),
+  triangle: svg("M 12 2 L 22 19 H 2 Z"),
+  diamond: svg("M 12 1 L 19 12 L 12 23 L 5 12 Z"),
+  pentagon: svg("M12,3 L21,9 L17,19 L7,19 L3,9 Z"),
+  hexagon: svg("M12,3 L20,7.5 L20,16.5 L12,21 L4,16.5 L4,7.5 Z"),
   // A square with corners cut at 2/7 of its side, the standard construction for a regular
   // octagon (stop-sign proportions) without resorting to trig.
-  octagon: svg(
-    '<polygon points="20,4 44,4 60,20 60,44 44,60 20,60 4,44 4,20" fill="#000"/>'
-  ),
-  cross: svg(
-    '<polygon points="20,4 44,4 44,20 60,20 60,44 44,44 44,60 20,60 20,44 4,44 4,20 20,20" fill="#000"/>'
-  ),
+  octagon: svg("M 8 3 Q 12 3.3 16 3 Q 18.3 5.7 21 8 Q 20.7 12 21 16 Q 18.3 18.3 16 21 Q 12 20.7 8 21 Q 5.8 18.2 3 16 Q 3.3 12 3 8 Q 5.7 5.7 8 3 Z"),
+  cross: svg("M 10.5 3 h 3 v 7.5 h 7.5 v 3 h -7.5 v 7.5 h -3 v -7.5 h -7.5 v -3 h 7.5 Z"),
   // The same 12-point "+" as `cross` above, rotated 45° about the center.
-  x: svg(
-    '<polygon points="43,4 60,21 49,32 60,43 43,60 32,49 21,60 4,43 15,32 4,21 21,4 32,15" fill="#000"/>'
-  ),
-  // A regular 5-pointed star: outer vertices every 72° (radius 30) alternating with inner
-  // vertices every 72° offset by 36° (radius ~11.5, the usual ratio for a balanced star).
-  star: svg(
-    '<polygon points="32,2 39,23 61,23 43,36 50,56 32,44 14,56 21,36 4,23 25,23" fill="#000"/>'
-  )
+  x: svg("M 18 4 L 20 6 L 14 12 L 20 18 L 18 20 L 12 14 L 6 20 L 4 18 L 10 12 L 4 6 L 6 4 L 12 10 Z"),
+  // A regular 5-pointed star: outer vertices every 72° alternating with inner vertices every
+  // 72° offset by 36° (inner radius ~40% of the outer radius, the usual ratio for a balanced star).
+  star: svg("M12,3 L14,9 L20.5,9 L15.5,13 L17.5,19.5 L12,15.5 L6.5,19.5 L8.5,13 L3.5,9 L10,9 Z"),
+  // Two circular lobes (centers 8.5,8 / 15.5,8, radius 4.5 apart enough to overlap) joined by
+  // straight tangent lines down to a bottom point. The notch between the lobes is the two
+  // circles' actual intersection point (computed, not eyeballed), so both arcs land on it
+  // exactly with no seam.
+  heart: svg("M 12 21 L 3 11 A 4.5 4.5 0 1 1 11 8 L 13 8 A 4.5 4.5 0 1 1 21 11 Z"),
+  // A map-pin/teardrop: a circle (center 12,10, r6) with two lines tangent to it converging on a
+  // point below, so the straight edges meet the round top without a kink — the tangent points
+  // and angles come from `acos(r / distance-to-point)`, not eyeballing.
+  pin: svg("M 12 21 L 7 11 A 6 6 0 0 1 12 2 A 6 6 0 0 1 17 11 Z"),
+  // The same tangent-circle construction as `pin`, just with the circle bigger relative to how
+  // far below it the point sits (r6/d11 there vs r7.5/d10.5 here) — a shorter, wider point on a
+  // rounder body: "a circle with one pointy edge" rather than a full elongated marker.
+  drop: svg("M 4 21 V 12 A 7.5 7.5 0 0 1 12 4 A 7.5 7.5 0 0 1 13 21 Z"),
+  // A thick chevron/bracket built as a filled ribbon, not a stroked open line: the outer and
+  // inner edges of a constant-width "V", offset perpendicular to each arm and mitered where the
+  // arms meet (both at the outer point and the inner notch). Has to be a closed silhouette like
+  // every other symbol here, since `sdf` only encodes a filled alpha shape, not a stroke.
+  chevron: svg("M 8 4 L 14 12 L 8 20 H 5 L 11 12 L 5 4 Z")
 };
 var symbolList = Object.keys(SYMBOL);
-var wrapSymbolPath = (d) => svg(`<path d="${d}" fill="#000"/>`);
+var wrapSymbolPath = (d) => svg(d);
 
 // src/components/Image/index.tsx
 var MGL_Image = (props) => {
@@ -1509,7 +1483,7 @@ var MGL_Image = (props) => {
     ctx.map?.hasImage(props.id) && ctx.map?.removeImage(props.id);
     debug("Remove Image:", props.id);
   });
-  createEffect11(() => {
+  createEffect10(() => {
     if (!props.id) throw new Error("Image - ID is required");
     if (!props.source && !props.pattern && !props.symbol)
       throw new Error("Image - Image, Pattern or Symbol is required");
@@ -1557,10 +1531,11 @@ var MGL_Image = (props) => {
         const img = new Image();
         img.crossOrigin = "Anonymous";
         img.onload = () => {
-          const floorScale = Math.max(1, 50 / Math.min(img.width, img.height));
+          const minAxis = Math.min(img.width, img.height);
+          const floorScale = minAxis > 0 ? Math.max(1, 50 / minAxis) : 1;
           const pixelRatio = props.options?.pixelRatio ?? Math.max(1, Math.round(window.devicePixelRatio || 1));
           const scale = floorScale * pixelRatio;
-          const padding = sdfOpts ? sdfPadding(sdfOpts) * pixelRatio : 0;
+          const padding = sdfOpts ? sdfPadding(sdfOpts) * scale : 0;
           const drawWidth = Math.round(img.width * scale);
           const drawHeight = Math.round(img.height * scale);
           const canvas = document.createElement("canvas");
@@ -1572,7 +1547,7 @@ var MGL_Image = (props) => {
           const imageData2 = ctx2.getImageData(0, 0, canvas.width, canvas.height);
           return callback(
             sdfOpts ? toSDF(imageData2, sdfOpts) : imageData2,
-            pixelRatio
+            scale
           );
         };
         img.onerror = (event) => console.error(`[MapGL] Image "${props.id}" failed to load:`, event);
@@ -1625,7 +1600,7 @@ var MGL_Image = (props) => {
 };
 
 // src/components/Camera/index.tsx
-import { createEffect as createEffect12, onCleanup as onCleanup11, createSignal as createSignal5 } from "solid-js";
+import { createEffect as createEffect11, onCleanup as onCleanup11, createSignal as createSignal5 } from "solid-js";
 var lerp = (a, b, t) => a.map((_, idx) => (1 - t) * a[idx] + t * b[idx]);
 var slerp = (a, b, t) => {
   const dotProduct = a.map((_, idx) => a[idx] * b[idx]).reduce((m, n) => m + n);
@@ -1672,7 +1647,7 @@ var Camera = (props) => {
       isReverse = !isReverse;
     animationTime = isReverse ? animationTime - 1e-3 : animationTime + 1e-3;
   };
-  createEffect12(() => {
+  createEffect11(() => {
     props.translate && window.requestAnimationFrame(frame);
   });
   const options = { duration: 1e3, easing: (n) => n };
@@ -1707,7 +1682,7 @@ var Camera = (props) => {
   const onEnd = () => props.rotateGlobe ? rotateGlobe() : rotateViewport();
   ctx.map.on("moveend", onEnd).on("dragend", onEnd);
   let originalCenter;
-  createEffect12(() => {
+  createEffect11(() => {
     if (props.rotateGlobe == void 0) return;
     if (props.rotateGlobe) {
       originalCenter = ctx.map.getCenter();
@@ -1716,7 +1691,7 @@ var Camera = (props) => {
       props.resetWhenStopped ? ctx.map.stop().easeTo({ center: originalCenter }) : ctx.map.stop();
     }
   });
-  createEffect12(() => {
+  createEffect11(() => {
     if (props.rotateViewport == void 0) return;
     props.rotateViewport ? rotateViewport() : props.resetWhenStopped ? ctx.map.stop().resetNorthPitch() : ctx.map.stop();
   });
@@ -1725,10 +1700,10 @@ var Camera = (props) => {
 };
 
 // src/components/Light/index.tsx
-import { onCleanup as onCleanup12, createEffect as createEffect13 } from "solid-js";
+import { onCleanup as onCleanup12, createEffect as createEffect12 } from "solid-js";
 var Light = (props) => {
   const [ctx] = useMapContext();
-  createEffect13(() => ctx.map.setLight(props.style || {}));
+  createEffect12(() => ctx.map.setLight(props.style || {}));
   onCleanup12(() => ctx.map?.setLight(null));
   return null;
 };
@@ -1764,11 +1739,105 @@ MultiPointMode.toDisplayFeatures = function(state, geojson, display) {
 };
 var multi_point_default = MultiPointMode;
 
+// src/components/Draw/modes/geo.ts
+var EARTH_RADIUS_KM = 6371.0088;
+var KM_PER_MILE = 1.609344;
+var EARTH_RADIUS_M = 6378137;
+function toRadians(deg) {
+  return deg * Math.PI / 180;
+}
+function toDegrees(rad) {
+  return rad * 180 / Math.PI;
+}
+function distance(from, to) {
+  const dLat = toRadians(to[1] - from[1]);
+  const dLng = toRadians(to[0] - from[0]);
+  const lat1 = toRadians(from[1]);
+  const lat2 = toRadians(to[1]);
+  const a = Math.sin(dLat / 2) ** 2 + Math.cos(lat1) * Math.cos(lat2) * Math.sin(dLng / 2) ** 2;
+  return EARTH_RADIUS_KM * 2 * Math.asin(Math.sqrt(a));
+}
+function length(coordinates, units = "kilometers") {
+  let total = 0;
+  for (let i = 1; i < coordinates.length; i++) {
+    total += distance(coordinates[i - 1], coordinates[i]);
+  }
+  return units === "miles" ? total / KM_PER_MILE : total;
+}
+function midpoint(from, to) {
+  const lat1 = toRadians(from[1]);
+  const lon1 = toRadians(from[0]);
+  const lat2 = toRadians(to[1]);
+  const dLon = toRadians(to[0] - from[0]);
+  const bx = Math.cos(lat2) * Math.cos(dLon);
+  const by = Math.cos(lat2) * Math.sin(dLon);
+  const lat3 = Math.atan2(
+    Math.sin(lat1) + Math.sin(lat2),
+    Math.sqrt((Math.cos(lat1) + bx) ** 2 + by ** 2)
+  );
+  const lon3 = lon1 + Math.atan2(by, Math.cos(lat1) + bx);
+  return [toDegrees(lon3), toDegrees(lat3)];
+}
+function ringArea(ring) {
+  const n = ring.length;
+  if (n <= 2) return 0;
+  let total = 0;
+  for (let i = 0; i < n; i++) {
+    let lower;
+    let middle;
+    let upper;
+    if (i === n - 2) {
+      lower = n - 2;
+      middle = n - 1;
+      upper = 0;
+    } else if (i === n - 1) {
+      lower = n - 1;
+      middle = 0;
+      upper = 1;
+    } else {
+      lower = i;
+      middle = i + 1;
+      upper = i + 2;
+    }
+    total += (toRadians(ring[upper][0]) - toRadians(ring[lower][0])) * Math.sin(toRadians(ring[middle][1]));
+  }
+  return total * EARTH_RADIUS_M * EARTH_RADIUS_M / 2;
+}
+function area(rings) {
+  return rings.reduce((total, ring, i) => {
+    const ringTotal = Math.abs(ringArea(ring));
+    return i === 0 ? total + ringTotal : total - ringTotal;
+  }, 0);
+}
+function centerOfMass(rings) {
+  const ring = rings[0];
+  let meanX = 0;
+  let meanY = 0;
+  for (const [x, y] of ring) {
+    meanX += x;
+    meanY += y;
+  }
+  meanX /= ring.length;
+  meanY /= ring.length;
+  let xSum = 0;
+  let ySum = 0;
+  let areaSum = 0;
+  for (let i = 0; i < ring.length - 1; i++) {
+    const x1 = ring[i][0] - meanX;
+    const y1 = ring[i][1] - meanY;
+    const x2 = ring[i + 1][0] - meanX;
+    const y2 = ring[i + 1][1] - meanY;
+    const cross = x1 * y2 - x2 * y1;
+    xSum += (x1 + x2) * cross;
+    ySum += (y1 + y2) * cross;
+    areaSum += cross;
+  }
+  if (areaSum === 0) return [meanX, meanY];
+  const factor = 1 / (3 * areaSum);
+  return [meanX + xSum * factor, meanY + ySum * factor];
+}
+
 // src/components/Draw/modes/measurements.ts
-import length from "@turf/length";
-import area from "@turf/area";
-import midpoint from "@turf/midpoint";
-import { centerOfMass } from "@turf/center-of-mass";
 var getCoords = (coords) => {
   return new Intl.NumberFormat(void 0, {
     maximumFractionDigits: 5
@@ -1778,17 +1847,8 @@ var getCoords = (coords) => {
 };
 var getLength = (coordinates, meta) => {
   const lengthValue = length(
-    {
-      type: "Feature",
-      properties: {},
-      geometry: {
-        type: "LineString",
-        coordinates
-      }
-    },
-    {
-      units: window.navigator.language === "en-US" ? "miles" : "kilometers"
-    }
+    coordinates,
+    window.navigator.language === "en-US" ? "miles" : "kilometers"
   );
   const label = window.navigator.language === "en-US" ? new Intl.NumberFormat(void 0, {
     style: "unit",
@@ -1808,19 +1868,12 @@ var getLength = (coordinates, meta) => {
     },
     geometry: {
       type: "Point",
-      coordinates: midpoint(coordinates[0], coordinates[1]).geometry.coordinates
+      coordinates: midpoint(coordinates[0], coordinates[1])
     }
   };
 };
 var getArea = (coordinates, meta) => {
-  const areaValue = area({
-    type: "Feature",
-    properties: {},
-    geometry: {
-      type: "Polygon",
-      coordinates
-    }
-  });
+  const areaValue = area(coordinates);
   const areaLabel = window.navigator.language === "en-US" ? new Intl.NumberFormat(void 0, {
     style: "unit",
     maximumFractionDigits: 2,
@@ -1839,10 +1892,10 @@ var getArea = (coordinates, meta) => {
       value: areaLabel,
       ...meta
     },
-    geometry: centerOfMass({
-      type: "Polygon",
-      coordinates
-    }).geometry
+    geometry: {
+      type: "Point",
+      coordinates: centerOfMass(coordinates)
+    }
   };
 };
 
@@ -1936,7 +1989,6 @@ var polygon_default = (lib) => {
 };
 
 // src/components/Draw/modes/radius.ts
-import length2 from "@turf/length";
 function createVertex(parentId, coordinates, path, selected) {
   return {
     type: "Feature",
@@ -2019,7 +2071,7 @@ var RadiusMode = (lib) => ({
     state.line.removeCoordinate("0");
     if (state.line.isValid()) {
       const lineGeoJson = state.line.toGeoJSON();
-      const radius = (length2(lineGeoJson) * 1e3).toFixed(1);
+      const radius = (length(lineGeoJson.geometry.coordinates) * 1e3).toFixed(1);
       const center = lineGeoJson.geometry.coordinates[0];
       this.deleteFeature([state.line.id], { silent: true });
       const point = this.newFeature({
@@ -2059,7 +2111,7 @@ var RadiusMode = (lib) => ({
     display(
       createGeoJSONCircle(
         geojson.geometry.coordinates[0],
-        length2(geojson),
+        length(geojson.geometry.coordinates),
         state.line.id
       )
     );
@@ -2685,7 +2737,7 @@ var Draw = (props) => {
 };
 
 // src/components/DeckOverlay/index.tsx
-import { createEffect as createEffect14 } from "solid-js";
+import { createEffect as createEffect13 } from "solid-js";
 var DeckOverlay = (props) => {
   const [ctx] = useMapContext();
   let overlay;
@@ -2694,7 +2746,7 @@ var DeckOverlay = (props) => {
     return overlay;
   };
   useControlPosition(control);
-  createEffect14(() => overlay?.setProps(props.props || {}));
+  createEffect13(() => overlay?.setProps(props.props || {}));
   return null;
 };
 export {