solid-map-gl 2.1.0 → 2.2.1

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,6 +210,79 @@ var rasterStyleList = {
   }
 };
 
+// src/components/MapGL/tilesSettled.ts
+var nextFrame = () => new Promise((resolve) => requestAnimationFrame(() => resolve()));
+var hasActiveFadeTransition = (map) => {
+  try {
+    return !!map.style?.hasTransitions?.();
+  } catch {
+    return false;
+  }
+};
+function pollTilesLoaded(map, timeout) {
+  return new Promise((resolve) => {
+    const deadline = Date.now() + timeout;
+    const poll = () => {
+      if (map.areTilesLoaded()) {
+        resolve(true);
+        return;
+      }
+      if (Date.now() >= deadline) {
+        resolve(false);
+        return;
+      }
+      setTimeout(poll, 100);
+    };
+    poll();
+  });
+}
+async function settleAfterIdle(map, options = {}) {
+  const { timeout = 1e4, fadeMargin = 400 } = options;
+  await pollTilesLoaded(map, timeout);
+  map.triggerRepaint();
+  await nextFrame();
+  await nextFrame();
+  if (fadeMargin > 0) {
+    const fadeDeadline = Date.now() + Math.max(fadeMargin, 2e3);
+    while (hasActiveFadeTransition(map) && Date.now() < fadeDeadline) {
+      map.triggerRepaint();
+      await nextFrame();
+    }
+    await new Promise((resolve) => setTimeout(resolve, fadeMargin));
+    map.triggerRepaint();
+    await nextFrame();
+    await nextFrame();
+  }
+}
+function waitForIdleAndSettle(map, options = {}) {
+  return new Promise((resolve) => {
+    map.once("idle", () => {
+      settleAfterIdle(map, options).then(resolve);
+    });
+  });
+}
+function disableRasterFade(map) {
+  for (const layer of map.getStyle()?.layers ?? []) {
+    try {
+      map.setPaintProperty(layer.id, "raster-fade-duration", 0);
+    } catch {
+    }
+  }
+}
+
+// src/components/MapGL/offscreenCapture.ts
+function createCapturer(map, settleOptions) {
+  return {
+    map,
+    waitUntilSettled: () => waitForIdleAndSettle(map, settleOptions),
+    capture: (type = "image/jpeg", quality = 0.92) => map.getCanvas().toDataURL(type, quality),
+    captureWhenSettled: async (type = "image/jpeg", quality = 0.92) => {
+      await waitForIdleAndSettle(map, settleOptions);
+      return map.getCanvas().toDataURL(type, quality);
+    }
+  };
+}
+
 // src/components/MapGL/index.tsx
 var MapGL = (props) => {
   let map;
@@ -237,6 +291,7 @@ var MapGL = (props) => {
   let mutationObserver;
   let mapLib;
   let isMapLibre = false;
+  let tilesLoadedGeneration = 0;
   const [mapLoaded, setMapLoaded] = createSignal(null);
   const [themeVersion, setThemeVersion] = createSignal(0);
   const [darkMode, setDarkMode] = createSignal(
@@ -254,6 +309,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())
@@ -269,7 +332,11 @@ var MapGL = (props) => {
       projection: props.options?.projection,
       container: mapRef,
       style: getStyle(props.options?.style, props.darkStyle),
-      fitBoundsOptions: { padding: props.viewport?.padding }
+      fitBoundsOptions: { padding: props.viewport?.padding },
+      // Required for capture()/toDataURL() to read back anything from the canvas at all — forced
+      // regardless of `options` since getting this wrong doesn't degrade capture, it silently
+      // breaks it (an all-transparent/blank image, no error).
+      ...props.offscreen ? { preserveDrawingBuffer: true } : {}
     });
     map.debug = props.debug;
     map.debugEvents = props.debugEvents;
@@ -283,7 +350,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);
@@ -292,7 +359,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);
@@ -301,9 +368,30 @@ var MapGL = (props) => {
         }
       }
     });
+    if (props.onTilesLoaded) {
+      const timeout = props.tilesLoadedTimeout ?? 1e4;
+      const fadeMargin = props.tilesLoadedFadeMargin ?? 400;
+      map.on("idle", () => {
+        const generation = ++tilesLoadedGeneration;
+        settleAfterIdle(map, { timeout, fadeMargin }).then(() => {
+          if (generation !== tilesLoadedGeneration) return;
+          debug("Tiles settled");
+          props.onTilesLoaded();
+        });
+      });
+    }
     map.once("load", () => {
       setMapLoaded(map);
       debug("Map loaded");
+      if (props.offscreen) {
+        if (props.offscreen.disableRasterFade !== false) disableRasterFade(map);
+        props.onCapturerReady?.(
+          createCapturer(map, {
+            timeout: props.tilesLoadedTimeout ?? 1e4,
+            fadeMargin: props.tilesLoadedFadeMargin ?? 400
+          })
+        );
+      }
       ["mousedown", "touchstart", "wheel"].forEach(
         (event) => map.on(
           event,
@@ -382,12 +470,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;
@@ -412,7 +500,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) {
@@ -430,13 +518,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;
@@ -451,7 +539,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();
@@ -484,7 +572,7 @@ var MapGL = (props) => {
     "showPadding",
     "showOverdrawInspector"
   ].forEach((item) => {
-    createEffect2(() => {
+    createEffect(() => {
       const prop = props[item];
       if (!map || !prop) return;
       map[item] = prop;
@@ -494,6 +582,7 @@ var MapGL = (props) => {
   onCleanup(() => {
     resizeObserver?.disconnect();
     mutationObserver?.disconnect();
+    tilesLoadedGeneration++;
     map?.remove();
     debug("Map removed");
   });
@@ -502,7 +591,14 @@ var MapGL = (props) => {
     id={props.id}
     class={props?.class}
     classList={props?.classList}
-    style={{ width: "100%", height: "100%", ...props.style }}
+    style={props.offscreen ? {
+      position: "fixed",
+      left: "-99999px",
+      top: "-99999px",
+      width: `${props.offscreen.width}px`,
+      height: `${props.offscreen.height}px`,
+      ...props.style
+    } : { width: "100%", height: "100%", ...props.style }}
   >
       {mapLoaded() && <MapProvider
     map={mapLoaded()}
@@ -520,13 +616,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();
@@ -558,14 +654,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);
@@ -573,7 +669,7 @@ var Source = (props) => {
       });
       break;
     case "vector":
-      createEffect3(() => {
+      createEffect2(() => {
         const url = anySource().url;
         const tiles = anySource().tiles;
         const source = ctx.map.getSource(props.id);
@@ -582,7 +678,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);
@@ -605,12 +701,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",
@@ -674,7 +770,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"));
@@ -707,8 +803,37 @@ 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: 4,
+  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) => {
@@ -720,9 +845,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;
@@ -743,6 +875,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);
     }
@@ -774,7 +910,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 }
@@ -789,13 +925,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;
@@ -814,7 +950,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,
@@ -825,19 +961,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({
@@ -853,6 +990,52 @@ var Layer = (props) => {
       props.featureState.state
     );
   });
+  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
+      };
+    });
+    resolved.forEach((cfg) => {
+      ctx.map.setPaintProperty(
+        layerId,
+        `${cfg.property}-transition`,
+        { duration: 0, delay: 0 },
+        { validate: false }
+      );
+    });
+    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(() => ctx.map?.getLayer(layerId) && ctx.map?.removeLayer(layerId));
   return props.children;
 };
@@ -863,11 +1046,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);
@@ -1007,10 +1190,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 || {});
   });
@@ -1026,7 +1209,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";
@@ -1043,7 +1226,7 @@ var Terrain = (props) => {
     });
     ctx.map.sourceIdList.push(sourceId);
   }
-  createEffect6(() => {
+  createEffect5(() => {
     ctx.map.setTerrain({
       exaggeration: props.exaggeration || 1,
       source: props?.source || sourceId
@@ -1054,13 +1237,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;
@@ -1087,7 +1270,7 @@ var Control = (props) => {
     ["logo", ctx.mapLib.LogoControl],
     ["terrain", ctx.mapLib.TerrainControl]
   ]);
-  createEffect8(() => {
+  createEffect7(() => {
     untrack(
       () => control() && ctx.map.hasControl(control()) && ctx.map.removeControl(control())
     );
@@ -1100,7 +1283,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(
@@ -1112,7 +1295,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({
@@ -1120,31 +1303,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");
@@ -1155,7 +1338,7 @@ var Popup = (props) => {
   ]);
   const [ctx] = useMapContext();
   let popup;
-  createEffect10(() => {
+  createEffect9(() => {
     if (!ctx.map) return;
     popup?.remove();
     popup = new ctx.mapLib.Popup({
@@ -1163,10 +1346,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)
     );
   });
@@ -1178,27 +1361,162 @@ var Popup = (props) => {
 import {
   onCleanup as onCleanup10,
   createSignal as createSignal4,
-  createEffect as createEffect11,
+  createEffect as createEffect10,
   untrack as untrack2
 } from "solid-js";
+
+// src/components/Image/sdf.ts
+var INF = 1e20;
+var ALPHA_TABLE = new Float64Array(256);
+for (let i = 0; i < 256; i++) {
+  const d = 0.5 - Math.pow(i / 255, 1 / 2.2);
+  ALPHA_TABLE[i] = d * Math.abs(d);
+}
+ALPHA_TABLE[255] = -INF;
+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 < length2; q++) {
+    f[q] = grid[offset + q * stride];
+    const q2 = q * q;
+    do {
+      const r = v[k];
+      s = (f[q] - f[r] + q2 - r * r) / (q - r) / 2;
+    } while (s <= z[k] && --k > -1);
+    k++;
+    v[k] = q;
+    z[k] = s;
+    z[k + 1] = INF;
+  }
+  for (let q = 0, k = 0; q < length2; q++) {
+    while (z[k + 1] < q) k++;
+    const r = v[k];
+    const qr = q - r;
+    grid[offset + q * stride] = f[r] + qr * qr;
+  }
+}
+function edt(data, width, height, f, v, z) {
+  for (let x = 0; x < width; x++) edt1d(data, x, width, height, f, v, z);
+  for (let y = 0; y < height; y++) edt1d(data, y * width, 1, width, f, v, z);
+}
+var sdfPadding = ({ radius = 8 } = {}) => Math.ceil(radius);
+function toSDF(imageData, { radius = 8, cutoff = 0.25 } = {}) {
+  const { width, height } = imageData;
+  const len = width * height;
+  const gridOuter = new Float64Array(len).fill(INF);
+  const gridInner = new Float64Array(len);
+  const size = Math.max(width, height);
+  const f = new Float64Array(size);
+  const v = new Uint16Array(size);
+  const z = new Float64Array(size + 1);
+  const src = imageData.data;
+  for (let i = 0, j = 3; i < len; i++, j += 4) {
+    const a = src[j];
+    if (a === 0) continue;
+    const t = ALPHA_TABLE[a];
+    gridOuter[i] = Math.max(0, t);
+    gridInner[i] = Math.max(0, -t);
+  }
+  edt(gridOuter, width, height, f, v, z);
+  edt(gridInner, width, height, f, v, z);
+  const scale = 255 / radius;
+  const base = 255 * (1 - cutoff);
+  const out = new Uint8ClampedArray(len * 4);
+  for (let i = 0, j = 0; i < len; i++, j += 4) {
+    const d = Math.sqrt(gridOuter[i]) - Math.sqrt(gridInner[i]);
+    const value = Math.max(0, Math.min(255, Math.round(base - scale * d)));
+    out[j] = out[j + 1] = out[j + 2] = 255;
+    out[j + 3] = value;
+  }
+  return { width, height, data: out };
+}
+
+// src/components/Image/shapes.ts
 var PATTERN = {
   diagonal_l: { size: 20, path: "M20 0 0 20M-10 10 10-10M10 30 30 10" },
   diagonal_r: { size: 20, path: "M0 0 20 20M30 10 10-10M10 30-10 10" },
   horizontal: { size: 14, path: "M7 0V20" },
   vertical: { size: 14, path: "M0 7H20" },
+  // A single centered "+" per tile, tiling into a repeating grid of crosses — not to be
+  // confused with `SYMBOL.cross` (a single bold "+" icon) below.
   cross: { size: 18, path: "M9 0V18M0 9H18" },
   hash: { size: 30, path: "M15 0 30 15 15 30 0 15Z" },
   chevron_h: { size: 20, path: "M-5 5 0 10 10 0 20 10 25 5M0 30 10 20 20 30" },
   chevron_v: { size: 20, path: "M5-5 10 0 0 10 10 20 5 25M25 15 20 10 25 5" },
   square: { size: 20, path: "M8 8H12V12H8Z", fill: true },
   hex: { size: 50, path: "M0 0V50L50 25ZM50 0V50L0 25ZM25 0V50" },
+  // Two arcs swept almost all the way around (`A2.5 2.5 0 1 1 ...` to a point a hair past the
+  // start) rather than a `<circle>`, since this path is later stroked/filled via `Path2D`,
+  // which has no dedicated circle primitive. A single dot per tile — not to be confused with
+  // `SYMBOL.circle` (a single full-bleed circle icon) below.
   circle: {
     size: 25,
     path: "M8 10A2.5 2.5 0 118.01 10M18 15A2.5 2.5 0 1018.01 15",
     fill: true
-  }
+  },
+  // `horizontal` and `vertical` combined into one crossed-line tile.
+  grid: { size: 20, path: "M10 0V20M0 10H20" },
+  // Two rows of offset (running-bond) bricks per tile, so the offset continues correctly
+  // when tiles stack — row two's joints fall at the quarter-points, not centered, to match
+  // a real brick course rather than just checkerboarding.
+  brick: {
+    size: 40,
+    path: "M0 0H40M0 20H40M0 40H40M0 0V20M20 0V20M40 0V20M10 20V40M30 20V40"
+  },
+  // Two wavy horizontal lines per tile (quadratic-bezier "hump" repeated via the `T` shorthand),
+  // for the wave/water fill texture common in geologic and land-cover maps.
+  wave: { size: 20, path: "M0 5Q5 0 10 5T20 5M0 15Q5 10 10 15T20 15" }
 };
 var patternList = Object.keys(PATTERN);
+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("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("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("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(d);
+
+// src/components/Image/index.tsx
 var MGL_Image = (props) => {
   const [ctx] = useMapContext();
   const [size, setSize] = createSignal4({ width: 0, height: 0 });
@@ -1217,13 +1535,14 @@ 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)
-      throw new Error("Image - Image or Pattern is required");
+    if (!props.source && !props.pattern && !props.symbol)
+      throw new Error("Image - Image, Pattern or Symbol is required");
     const pixelRatio = Math.max(1, Math.round(window.devicePixelRatio || 2));
-    const ops = props.pattern ? { pixelRatio, ...props.options } : props.options;
-    _loadImage(props.source || _createPattern(props.pattern, pixelRatio), (data, autoPixelRatio) => {
+    const ops = props.pattern ? { pixelRatio, ...props.options } : props.sdf ? { ...props.options, sdf: true } : props.options;
+    const symbolSource = props.symbol && (SYMBOL[props.symbol] || (props.symbol.trimStart().startsWith("<svg") ? props.symbol : wrapSymbolPath(props.symbol)));
+    _loadImage(props.source || symbolSource || _createPattern(props.pattern, pixelRatio), (data, autoPixelRatio) => {
       const finalOps = autoPixelRatio ? { ...ops, pixelRatio: autoPixelRatio } : ops;
       const { width, height } = data;
       if (ctx.map && !ctx.map.hasImage(props.id))
@@ -1241,6 +1560,7 @@ var MGL_Image = (props) => {
     });
   });
   const _loadImage = (image, callback) => {
+    const sdfOpts = props.sdf ? typeof props.sdf === "object" ? props.sdf : {} : null;
     if (typeof image == "string" && image?.trimStart().startsWith("<svg")) {
       image = new DOMParser().parseFromString(image, "image/svg+xml").childNodes[0];
     }
@@ -1263,24 +1583,43 @@ 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) * scale : 0;
+          const drawWidth = Math.round(img.width * scale);
+          const drawHeight = Math.round(img.height * scale);
           const canvas = document.createElement("canvas");
-          canvas.width = Math.round(img.width * scale);
-          canvas.height = Math.round(img.height * scale);
+          canvas.width = drawWidth + padding * 2;
+          canvas.height = drawHeight + padding * 2;
           const ctx2 = canvas.getContext("2d");
           ctx2.imageSmoothingEnabled = true;
-          ctx2.drawImage(img, 0, 0, canvas.width, canvas.height);
+          ctx2.drawImage(img, padding, padding, drawWidth, drawHeight);
+          const imageData2 = ctx2.getImageData(0, 0, canvas.width, canvas.height);
           return callback(
-            ctx2.getImageData(0, 0, canvas.width, canvas.height),
-            pixelRatio
+            sdfOpts ? toSDF(imageData2, sdfOpts) : imageData2,
+            scale
           );
         };
         img.onerror = (event) => console.error(`[MapGL] Image "${props.id}" failed to load:`, event);
         img.src = image.trimStart().startsWith("<svg") ? "data:image/svg+xml;charset=utf-8," + encodeURIComponent(image) : image;
       } else {
-        return callback(imageData);
+        if (!sdfOpts) return callback(imageData);
+        const { width, height } = imageData;
+        const padding = sdfPadding(sdfOpts);
+        const canvas = document.createElement("canvas");
+        canvas.width = width + padding * 2;
+        canvas.height = height + padding * 2;
+        const c = canvas.getContext("2d");
+        c.imageSmoothingEnabled = true;
+        if ("data" in imageData) {
+          c.putImageData(imageData, padding, padding);
+        } else {
+          c.drawImage(imageData, padding, padding, width, height);
+        }
+        const pixels = c.getImageData(0, 0, canvas.width, canvas.height);
+        return callback(toSDF(pixels, sdfOpts));
       }
     });
   };
@@ -1301,7 +1640,7 @@ var MGL_Image = (props) => {
         this.ctx.fillStyle = pattern.background || "transparent";
         this.ctx.fillRect(0, 0, p.size, p.size);
         this.ctx.strokeStyle = this.ctx.fillStyle = pattern.color || "black";
-        this.ctx.lineWidth = pattern.lineWith || 1;
+        this.ctx.lineWidth = pattern.lineWidth || 1;
         this.ctx.stroke(new Path2D(p.path));
         if (p.fill) this.ctx.fill(new Path2D(p.path));
         this.data = this.ctx.getImageData(0, 0, this.width, this.height).data;
@@ -1313,7 +1652,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);
@@ -1360,7 +1699,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 };
@@ -1395,7 +1734,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();
@@ -1404,7 +1743,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();
   });
@@ -1413,10 +1752,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;
 };
@@ -1452,11 +1791,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
@@ -1466,17 +1899,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",
@@ -1496,19 +1920,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,
@@ -1527,10 +1944,10 @@ var getArea = (coordinates, meta) => {
       value: areaLabel,
       ...meta
     },
-    geometry: centerOfMass({
-      type: "Polygon",
-      coordinates
-    }).geometry
+    geometry: {
+      type: "Point",
+      coordinates: centerOfMass(coordinates)
+    }
   };
 };
 
@@ -1624,7 +2041,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",
@@ -1707,7 +2123,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({
@@ -1747,7 +2163,7 @@ var RadiusMode = (lib) => ({
     display(
       createGeoJSONCircle(
         geojson.geometry.coordinates[0],
-        length2(geojson),
+        length(geojson.geometry.coordinates),
         state.line.id
       )
     );
@@ -2373,7 +2789,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;
@@ -2382,7 +2798,7 @@ var DeckOverlay = (props) => {
     return overlay;
   };
   useControlPosition(control);
-  createEffect14(() => overlay?.setProps(props.props || {}));
+  createEffect13(() => overlay?.setProps(props.props || {}));
   return null;
 };
 export {
@@ -2401,8 +2817,13 @@ export {
   Source,
   Terrain,
   MapGL as default,
+  disableRasterFade,
   patternList,
+  settleAfterIdle,
+  symbolList,
+  toSDF,
   useMapContext,
   useScene,
-  useSourceId
+  useSourceId,
+  waitForIdleAndSettle
 };