solid-map-gl 1.12.0 → 2.0.0

package/dist/index.jsx

@@ -0,0 +1,2320 @@
+// src/components/MapGL/index.tsx
+import {
+  createSignal,
+  createEffect,
+  onMount,
+  onCleanup,
+  on
+} from "solid-js";
+
+// src/components/MapProvider/index.tsx
+import { createContext, useContext } from "solid-js";
+import { createStore } from "solid-js/store";
+var defaultState = { map: null, mapLib: null, isMapLibre: false };
+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);
+  return <MapContext.Provider value={[state]}>{props.children}</MapContext.Provider>;
+};
+
+// src/events.ts
+var mapEvents = [
+  "onMouseDown",
+  "onMouseUp",
+  "onMouseOver",
+  "onMouseOut",
+  "onMouseMove",
+  "onMouseEnter",
+  "onMouseLeave",
+  "onPreClick",
+  "onClick",
+  "onDblClick",
+  "onContextMenu",
+  "onTouchStart",
+  "onTouchEnd",
+  "onTouchCancel",
+  "onWheel",
+  "onResize",
+  "onRemove",
+  "onTouchMove",
+  "onMoveStart",
+  "onMove",
+  "onMoveEnd",
+  "onDragStart",
+  "onDrag",
+  "onDragEnd",
+  "onZoomStart",
+  "onZoom",
+  "onZoomEnd",
+  "onRotateStart",
+  "onRotate",
+  "onRotatEnd",
+  "onPitchStart",
+  "onPitch",
+  "onPitchEnd",
+  "onBoxZoomStart",
+  "onBoxZoomEnd",
+  "onBoxZoomCancel",
+  "onWebglContextLost",
+  "onWebglContextRestored",
+  "onLoad",
+  "onRender",
+  "onIdle",
+  "onError",
+  "onData",
+  "onStyleData",
+  "onSourceData",
+  "onDataLoading",
+  "onStyleDataLoading",
+  "onSourceDataLoading",
+  "onStyleImageMissing"
+];
+var layerEvents = [
+  "onMouseDown",
+  "onMouseUp",
+  "onMouseOver",
+  "onMouseOut",
+  "onMouseMove",
+  "onMouseEnter",
+  "onMouseLeave",
+  "onClick",
+  "onDblClick",
+  "onContextMenu",
+  "onTouchStart",
+  "onTouchEnd",
+  "onTouchCancel"
+];
+var drawEvents = [
+  "onCreate",
+  "onDelete",
+  "onCombine",
+  "onUncombine",
+  "onUpdate",
+  "onSelectionchange",
+  "onModechange",
+  "onRender",
+  "onActionable"
+];
+
+// src/mapStyles.ts
+var mapBase = "mapbox://styles/mapbox";
+var gitBase = "https://raw.githubusercontent.com/";
+var gishub = "https://raw.githubusercontent.com/GIShub4/map-styles/main/";
+var hereBase = "https://assets.vector.hereapi.com/styles/";
+var vectorStyleList = {
+  mb: {
+    standard: `${mapBase}/standard`,
+    light: `${mapBase}/light-v11`,
+    dark: `${mapBase}/dark-v11`,
+    street: `${mapBase}/streets-v12`,
+    outdoor: `${mapBase}/outdoors-v12`,
+    sat: `${mapBase}/satellite-v9`,
+    sat_street: `${mapBase}/satellite-streets-v12`,
+    nav_base: `${mapBase}/navigation-guidance-day-v4`,
+    nav_base_night: `${mapBase}/navigation-guidance-night-v4`,
+    nav: `${mapBase}/navigation-day-v1`,
+    nav_night: `${mapBase}/navigation-night-v1`,
+    basic: `${mapBase}/cjf4m44iw0uza2spb3q0a7s41`,
+    monochrome: `${mapBase}/cjv6rzz4j3m4b1fqcchuxclhb`,
+    leshine: `${mapBase}/cjcunv5ae262f2sm9tfwg8i0w`,
+    icecream: `${mapBase}/cj7t3i5yj0unt2rmt3y4b5e32`,
+    cali: `${mapBase}/cjerxnqt3cgvp2rmyuxbeqme7`,
+    northstar: `${mapBase}/cj44mfrt20f082snokim4ungi`,
+    mineral: `${mapBase}/cjtep62gq54l21frr1whf27ak`,
+    moonlight: `${mapBase}/cj3kbeqzo00022smj7akz3o1e`,
+    frank: `${mapBase}-map-design/ckshxkppe0gge18nz20i0nrwq`,
+    minimo: `${mapBase}-map-design/cksjc2nsq1bg117pnekb655h1`,
+    decimal: `${mapBase}-map-design/ck4014y110wt61ctt07egsel6`,
+    stand: `${mapBase}-map-design/ckr0svm3922ki18qntevm857n`,
+    blueprint: `${mapBase}-map-design/cks97e1e37nsd17nzg7p0308g`,
+    bubble: `${mapBase}-map-design/cksysy2nl62zp17quosctdtcc`,
+    pencil: `${mapBase}-map-design/cks9iema71es417mlrft4go2k`,
+    swiss_ski: `${gitBase}mapbox/mapbox-gl-swiss-ski-style/master/cij1zoclj002y8rkkdjl69psd.json`,
+    vintage: `${gitBase}mapbox/mapbox-gl-vintage-style/master/cif5p01n202nisaktvljx9mv3.json`,
+    whaam: `${gitBase}mapbox/mapbox-gl-whaam-style/master/cii8323c8004w0nlvtss3dbm2.json`,
+    neon: `${gitBase}NatEvatt/awesome-mapbox-gl-styles/master/styles/Neon/style.json`,
+    camoflauge: `${gitBase}jingsam/mapbox-gl-styles/master/Camouflage.json`,
+    emerald: `${gitBase}jingsam/mapbox-gl-styles/master/Emerald.json`,
+    runner: `${gitBase}jingsam/mapbox-gl-styles/master/Runner.json`,
+    x_ray: `${gitBase}jingsam/mapbox-gl-styles/master/X-ray.json`
+  },
+  here: {
+    base: `${hereBase}berlin/base/mapbox/tilezen?apikey={apikey}`,
+    day: `${hereBase}berlin/day/mapbox/tilezen?apikey={apikey}`,
+    night: `${hereBase}berlin/night/mapbox/tilezen?apikey={apikey}`
+  },
+  esri: {
+    blueprint: `${gishub}esri:blueprint.json`,
+    charted_territory: `${gishub}esri:charted-territory.json`,
+    colored_pencil: `${gishub}esri:colored-pencil.json`,
+    community: `${gishub}esri:community.json`,
+    mid_century: `${gishub}esri:mid-century.json`,
+    modern_antique: `${gishub}esri:modern-antique.json`,
+    nat_geo: `${gishub}esri:national-geographic.json`,
+    newspaper: `${gishub}esri:newspaper.json`,
+    open_street_map: `${gishub}esri:open-street-map.json`,
+    light_gray_canvas: `${gishub}esri:light-gray-canvas.json`,
+    dark_gray_canvas: `${gishub}esri:dark-gray-canvas.json`,
+    human_geo_light: `${gishub}esri:human-geography-light.json`,
+    human_geo_dark: `${gishub}esri:human-geography-dark.json`,
+    world_navigation: `${gishub}esri:world-navigation.json`,
+    world_street: `${gishub}esri:world-street.json`,
+    world_street_night: `${gishub}esri:world-street-night.json`,
+    world_terrain: `${gishub}esri:world-terrain.json`,
+    world_terrain_hybrid: `${gishub}esri:world-terrain-hybrid.json`,
+    world_topographic: `${gishub}esri:world-topographic.json`,
+    chromium: `${gishub}esri:chromium.json`,
+    dreamcatcher: `${gishub}esri:dreamcatcher.json`,
+    seahaven: `${gishub}esri:seahaven.json`,
+    sangria: `${gishub}esri:sangria.json`,
+    mercurial: `${gishub}esri:mercurial.json`,
+    imagery: `${gishub}esri:imagery.json`,
+    imagery_hybrid: `${gishub}esri:imagery-hybrid.json`,
+    firefly: `${gishub}esri:firefly.json`,
+    firefly_hybrid: `${gishub}esri:firefly-hybrid.json`,
+    oceans: `${gishub}esri:oceans.json`
+  }
+};
+var carto = "https://{s}.basemaps.cartocdn.com/rastertiles/";
+var stamen = "https://stamen-tiles-{s}.a.ssl.fastly.net/";
+var tf = "https://{s}.tile.thunderforest.com/";
+var rasterStyleList = {
+  osm: {
+    org: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+    human: "https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png",
+    cycle: "https://{s}.tile-cyclosm.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png",
+    topo: "https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png",
+    _copy: '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap</a>'
+  },
+  carto: {
+    voyager: `${carto}voyager_labels_under/{z}/{x}/{y}{r}.png`,
+    positron: `${carto}light_all/{z}/{x}/{y}{r}.png`,
+    dark: `${carto}dark_all/{z}/{x}/{y}{r}.png`,
+    _copy: '<a href="https://carto.com/attribution" target="_blank">&copy; Carto</a>'
+  },
+  stamen: {
+    toner: `${stamen}toner/{z}/{x}/{y}{r}.png`,
+    toner_lite: `${stamen}toner-lite/{z}/{x}/{y}{r}.png`,
+    watercolor: `${stamen}watercolor/{z}/{x}/{y}.png`,
+    terrain: `${stamen}terrain/{z}/{x}/{y}{r}.png`,
+    _copy: '<a href="https://stamen.com/privacy-policy" target="_blank">&copy; Stamen Design</a>'
+  },
+  tf: {
+    cycle: `${tf}cycle/{z}/{x}/{y}{r}.png?apikey={apikey}`,
+    trans: `${tf}transport/{z}/{x}/{y}{r}.png?apikey={apikey}`,
+    trans_dark: `${tf}transport-dark/{z}/{x}/{y}{r}.png?apikey={apikey}`,
+    landscape: `${tf}landscape/{z}/{x}/{y}{r}.png?apikey={apikey}`,
+    outdoors: `${tf}outdoors/{z}/{x}/{y}{r}.png?apikey={apikey}`,
+    neighbourhood: `${tf}neighbourhood/{z}/{x}/{y}{r}.png?apikey={apikey}`,
+    spinal: `${tf}spinal-map/{z}/{x}/{y}{r}.png?apikey={apikey}`,
+    pioneer: `${tf}pioneer/{z}/{x}/{y}{r}.png?apikey={apikey}`,
+    atlas: `${tf}atlas/{z}/{x}/{y}{r}.png?apikey={apikey}`,
+    mobile: `${tf}mobile-atlas/{z}/{x}/{y}{r}.png?apikey={apikey}`,
+    _copy: '<a href="https://thunderforest.com/privacy" target="_blank">&copy; Thunderforest</a>'
+  }
+};
+
+// src/components/MapGL/index.tsx
+var MapGL = (props) => {
+  let map;
+  let mapRef;
+  let resizeObserver;
+  let mutationObserver;
+  let mapLib;
+  let isMapLibre = false;
+  const [mapLoaded, setMapLoaded] = createSignal(null);
+  const [darkMode, setDarkMode] = createSignal(
+    typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches || typeof document !== "undefined" && document.body.classList.contains("dark")
+  );
+  let interruptingEase = false;
+  let expectingOwnEcho = false;
+  const debug = (text, value) => (props.debug || props.debugEvents) && console.debug("%c[MapGL]", "color: #0ea5e9", text, value || "");
+  const getStyle = (light, dark) => {
+    const style = darkMode() && dark ? dark : light;
+    return typeof style === "string" || style instanceof String ? style?.split(":").reduce((p, c) => p && p[c], vectorStyleList)?.replace(
+      "{apikey}",
+      //@ts-ignore
+      props.apikey || import.meta.env?.VITE_VECTOR_API_KEY
+    ) || style : style;
+  };
+  onMount(async () => {
+    mapLib = props.mapLib || await import("mapbox-gl");
+    if (!mapLib.Map) mapLib = window["maplibregl"] || window["mapboxgl"];
+    if (typeof mapLib.supported === "function" && !mapLib.supported())
+      throw new Error("Mapbox GL not supported");
+    isMapLibre = typeof mapLib.Map?.prototype?.setConfigProperty !== "function";
+    debug(`Map (v${mapLib.version}) loading...`);
+    map = new mapLib.Map({
+      accessToken: props.options?.accessToken || //@ts-ignore
+      import.meta.env?.VITE_MAPBOX_ACCESS_TOKEN,
+      interactive: props.options?.interactive || !!props.onViewportChange,
+      ...props.options,
+      ...props.viewport,
+      projection: props.options?.projection,
+      container: mapRef,
+      style: getStyle(props.options?.style, props.darkStyle),
+      fitBoundsOptions: { padding: props.viewport?.padding }
+    });
+    map.debug = props.debug;
+    map.debugEvents = props.debugEvents;
+    map.sourceIdList = [];
+    map.layerIdList = [];
+    map.isMapLibre = isMapLibre;
+    mapEvents.forEach((item) => {
+      const prop = props[item];
+      if (prop) {
+        const event = item.slice(2).toLowerCase();
+        if (typeof prop === "function") {
+          map.on(event, (evt) => {
+            setTimeout(() => {
+              if (evt.clickOnLayer) return;
+              prop(evt);
+              props.debugEvents && debug(`Map '${event}' event:`, evt);
+            }, 0);
+          });
+        } else {
+          Object.keys(prop).forEach((layerId) => {
+            map.on(event, layerId, (evt) => {
+              setTimeout(() => {
+                if (evt.clickOnLayer) return;
+                prop[layerId](evt);
+                props.debugEvents && debug(`Map '${event}' event on '${layerId}':`, evt);
+              }, 0);
+            });
+          });
+        }
+      }
+    });
+    map.once("load", () => {
+      setMapLoaded(map);
+      debug("Map loaded");
+      ["mousedown", "touchstart", "wheel"].forEach(
+        (event) => map.on(
+          event,
+          (evt) => !evt.rotate && props.onUserInteraction?.(true)
+        )
+      );
+      ["moveend", "mouseup", "touchend"].forEach(
+        (event) => map.on(
+          event,
+          (evt) => !evt.rotate && props.onUserInteraction?.(false)
+        )
+      );
+      const darkTheme = typeof window !== "undefined" && window?.matchMedia("(prefers-color-scheme: dark)");
+      darkTheme?.addEventListener("change", () => {
+        setDarkMode(darkTheme.matches);
+        debug("Set dark theme to:", darkTheme.matches?.toString());
+      });
+      mutationObserver = new MutationObserver(() => {
+        const darkTheme2 = document.body.classList.contains("dark");
+        setDarkMode(darkTheme2);
+        debug("Set theme to:", darkTheme2);
+      });
+      mutationObserver.observe(document.body, { attributes: true });
+      if (!props.disableResize) {
+        resizeObserver = new ResizeObserver(() => {
+          setTimeout(() => {
+            map?.resize();
+          }, 0);
+          debug("Map resized");
+        });
+        resizeObserver.observe(mapRef);
+      }
+      map.on("move", (event) => {
+        const viewport = {
+          ...props.viewport,
+          id: props.id,
+          point: {
+            x: event.originalEvent?.x,
+            y: event.originalEvent?.y
+          },
+          center: props.viewport?.center?.lat ? map.getCenter() : [map.getCenter().lng, map.getCenter().lat],
+          zoom: map.getZoom(),
+          pitch: map.getPitch(),
+          bearing: map.getBearing(),
+          inTransit: true,
+          bounds: null
+          //   !internal()
+          //     ? props.viewport?.center?.lat
+          //       ? map.getBounds()
+          //       : [
+          //           [
+          //             map.getBounds().getNorthEast().lng,
+          //             map.getBounds().getNorthEast().lat,
+          //           ],
+          //           [
+          //             map.getBounds().getSouthWest().lng,
+          //             map.getBounds().getSouthWest().lat,
+          //           ],
+          //         ]
+          //     : null,
+        };
+        if (!event.viewport && props.onViewportChange) {
+          expectingOwnEcho = true;
+          props.onViewportChange(viewport);
+        }
+      });
+      map.on("moveend", (event) => {
+        if (interruptingEase) return;
+        if (event.rotate) return;
+        if (!props.onViewportChange) return;
+        const viewport = { ...props.viewport, inTransit: false };
+        expectingOwnEcho = true;
+        props.onViewportChange(viewport);
+      });
+    });
+  });
+  createEffect(
+    on(
+      () => props.viewport,
+      (vp) => {
+        if (props.id !== vp?.id) return;
+        if (expectingOwnEcho) {
+          expectingOwnEcho = false;
+          return;
+        }
+        const viewport = {
+          ...vp,
+          ...vp.bounds ? map.cameraForBounds(vp.bounds, {
+            bearing: vp?.bearing,
+            pitch: vp?.pitch,
+            padding: vp?.padding
+          }) : null
+        };
+        interruptingEase = true;
+        map.stop();
+        interruptingEase = false;
+        map[props.transitionType || "flyTo"](viewport);
+        debug(
+          `Update Viewport (${props.transitionType || "flyTo"}):`,
+          viewport
+        );
+      },
+      { defer: true }
+    )
+  );
+  createEffect(() => {
+    const loadedMap = mapLoaded();
+    if (typeof loadedMap?.setConfigProperty !== "function") {
+      if (loadedMap && props.config && Object.keys(props.config).length) {
+        debug(
+          "Config prop is set but this map library has no setConfigProperty (Mapbox Standard Style only) \u2014 skipping"
+        );
+      }
+      return;
+    }
+    for (const key in props.config) {
+      if (!key || key === "id") continue;
+      const id = props.config?.id || "basemap";
+      const value = props.config[key];
+      loadedMap.setConfigProperty(id, key, value);
+      debug(`Set Config (${id}:${key}) to:`, value);
+    }
+  });
+  createEffect(() => {
+    const proj = props.options?.projection;
+    if (!map || !proj) return;
+    map.setProjection(proj);
+    debug("Set Projection to:", proj);
+  });
+  createEffect(() => {
+    const cur = props.cursorStyle;
+    if (!map || !cur) return;
+    map.getCanvas().style.cursor = cur;
+    debug("Set Cursor to:", cur);
+  });
+  const insertLayers = (list, layers) => {
+    layers.forEach((layer) => {
+      const index = list.findIndex(
+        (i) => layer.metadata.smg.beforeType ? i.type === layer.metadata.smg.beforeType : i.id === layer.metadata.smg.beforeId
+      );
+      list = index === -1 ? [...list, layer] : [...list.slice(0, index), layer, ...list.slice(index)];
+    });
+    return list;
+  };
+  createEffect((prev) => {
+    const style = getStyle(props.options?.style, props.darkStyle);
+    if (map?.isStyleLoaded() && prev !== style) {
+      const oldStyle = map.getStyle();
+      const oldLayers = oldStyle.layers.filter(
+        (l) => map.layerIdList.includes(l.id)
+      );
+      const oldSources = Object.keys(oldStyle.sources).filter((s) => map.sourceIdList.includes(s)).reduce((obj, key) => ({ ...obj, [key]: oldStyle.sources[key] }), {});
+      const diff2 = props.shouldDiffStyle ? props.shouldDiffStyle(prev, style) : true;
+      map.setStyle(style, diff2 ? void 0 : { diff: false });
+      map.once("styledata", () => {
+        if (!oldLayers) return;
+        const newStyle = map.getStyle();
+        map.setStyle({
+          ...newStyle,
+          sources: { ...newStyle.sources, ...oldSources },
+          layers: insertLayers(newStyle.layers, oldLayers),
+          fog: oldStyle.fog,
+          terrain: oldStyle.terrain,
+          light: oldStyle.light
+        });
+        debug("Set Mapstyle to:", style);
+      });
+    }
+    return style;
+  }, props.options?.style);
+  [
+    "showTileBoundaries",
+    "showTerrainWireframe",
+    "showCollisionBoxes",
+    "showPadding",
+    "showOverdrawInspector"
+  ].forEach((item) => {
+    createEffect(() => {
+      const prop = props[item];
+      if (!map || !prop) return;
+      map[item] = prop;
+      debug(`Set ${item} to:`, prop);
+    });
+  });
+  onCleanup(() => {
+    resizeObserver?.disconnect();
+    mutationObserver?.disconnect();
+    map?.remove();
+    debug("Map removed");
+  });
+  return <div
+    ref={mapRef}
+    id={props.id}
+    class={props?.class}
+    classList={props?.classList}
+    style={{ width: "100%", height: "100%", ...props.style }}
+  >
+      {mapLoaded() && <MapProvider map={mapLoaded()} mapLib={mapLib} isMapLibre={isMapLibre}>
+          <style>{`.overlay{position:relative;width:100%;height:100%;pointer-events:none}:where(.overlay>*){pointer-events:auto}`}</style>
+          <div class="overlay">{props.children}</div>
+        </MapProvider>}
+    </div>;
+};
+
+// src/components/Source/index.tsx
+import {
+  onCleanup as onCleanup2,
+  createEffect as createEffect2,
+  createContext as createContext2,
+  useContext as useContext2,
+  createUniqueId
+} from "solid-js";
+var SourceContext = createContext2();
+var useSourceId = () => useContext2(SourceContext);
+var Source = (props) => {
+  const [ctx] = useMapContext();
+  props.id ??= createUniqueId();
+  const debug = (text, value) => {
+    ctx.map.debug && console.debug("%c[MapGL]", "color: #ec4899", text, value || "");
+  };
+  const anySource = () => props.source;
+  const lookup = (url) => {
+    const s = url?.split(":").reduce((p, c) => p && p[c], rasterStyleList);
+    const source = s ? {
+      ...anySource(),
+      url: "",
+      tiles: [
+        s.replace(
+          "{apikey}",
+          //@ts-ignore
+          anySource().apikey || import.meta.env?.VITE_RASTER_API_KEY
+        ).replace("{r}", window.devicePixelRatio > 1 ? "@2x" : "")
+      ],
+      attribution: rasterStyleList[url.split(":")[0]]._copy
+    } : anySource();
+    source.tiles && (source.tiles = ["a", "b", "c"].map(
+      (i) => source.tiles[0].replace("{s}", i)
+    ));
+    return source;
+  };
+  ctx.map.addSource(props.id, lookup(anySource().url));
+  ctx.map.sourceIdList.push(props.id);
+  debug("Add Source:", props.id);
+  switch (anySource().type) {
+    case "geojson":
+      createEffect2(() => {
+        const data = anySource().data;
+        ctx.map.getSource(props.id).setData(data || {});
+        debug("Update GeoJSON Data:", props.id);
+      });
+      break;
+    case "image":
+      createEffect2(() => {
+        const url = anySource().url;
+        const coords = anySource().coordinates;
+        ctx.map.getSource(props.id).updateImage(url, coords);
+        debug("Update Image Data:", props.id);
+      });
+      break;
+    case "vector":
+      createEffect2(() => {
+        const url = anySource().url;
+        const tiles = anySource().tiles;
+        const source = ctx.map.getSource(props.id);
+        url ? source.setUrl(url) : source.setTiles(tiles);
+        debug("Update Vector Data:", props.id);
+      });
+      break;
+    case "raster":
+      createEffect2(() => {
+        const src = lookup(anySource().url);
+        const source = ctx.map.getSource(props.id);
+        src.url ? source.setUrl(src.url) : source.setTiles(src.tiles);
+        debug("Update Raster Data:", props.id);
+      });
+      break;
+  }
+  onCleanup2(() => {
+    ctx.map?.getStyle().layers.forEach(
+      (layer) => layer.source === props.id && ctx.map.removeLayer(layer.id)
+    );
+    ctx.map?.getSource(props.id) && ctx.map?.removeSource(props.id);
+    debug("Remove Source:", props.id);
+  });
+  return <SourceContext.Provider value={props.id}>
+      {props.children}
+    </SourceContext.Provider>;
+};
+
+// src/components/Layer/index.tsx
+import {
+  onCleanup as onCleanup3,
+  createEffect as createEffect3,
+  createMemo,
+  createUniqueId as createUniqueId2
+} from "solid-js";
+
+// src/styles.ts
+var baseStyle = [
+  "id",
+  "type",
+  "filter",
+  "source",
+  "source-layer",
+  "minzoom",
+  "metadata",
+  "maxzoom",
+  "paint",
+  "layout"
+];
+var layoutStyles = [
+  "visibility",
+  "line-join",
+  "line-cap",
+  "line-miter-limit",
+  "line-round-limit",
+  "line-sort-key",
+  "circle-sort-key",
+  "symbol-avoid-edges",
+  "symbol-placement",
+  "symbol-sort-key",
+  "symbol-spacing",
+  "symbol-z-order",
+  "icon-allow-overlap",
+  "icon-anchor",
+  "icon-ignore-placement",
+  "icon-image",
+  "icon-keep-upright",
+  "icon-offset",
+  "icon-optional",
+  "icon-padding",
+  "icon-pitch-alignment",
+  "icon-rotate",
+  "icon-rotation-alignment",
+  "icon-size",
+  "icon-text-fit",
+  "icon-text-fit-padding",
+  "text-allow-overlap",
+  "text-anchor",
+  "text-field",
+  "text-font",
+  "text-ignore-placement",
+  "text-justify",
+  "text-keep-upright",
+  "text-letter-spacing",
+  "text-line-height",
+  "text-max-angle",
+  "text-max-width",
+  "text-offset",
+  "text-optional",
+  "text-padding",
+  "text-pitch-alignment",
+  "text-radial-offset",
+  "text-rotate",
+  "text-rotation-alignment",
+  "text-size",
+  "text-transform",
+  "text-variable-anchor",
+  "text-writing-mode"
+];
+
+// src/components/Layer/index.tsx
+var diff = (newProps = {}, prevProps = {}) => {
+  const keys = /* @__PURE__ */ new Set([...Object.keys(newProps), ...Object.keys(prevProps)]);
+  return [...keys].reduce((acc, key) => {
+    const value = newProps[key];
+    if (value !== prevProps[key]) {
+      acc.push([key, value]);
+    }
+    return acc;
+  }, []);
+};
+var newKey = (key, type) => (key.startsWith(type) || key.startsWith("icon") || key.startsWith("text") ? "" : type + "-") + key.replace(/[A-Z]/g, (s) => "-" + s.toLowerCase());
+var updateStyle = (oldStyle) => {
+  if (!oldStyle) return;
+  let layout = {};
+  let paint = {};
+  let style = {};
+  Object.entries(oldStyle).forEach(([key, value]) => {
+    if (baseStyle.includes(key)) style[key] = value;
+    else {
+      const nk = newKey(key, oldStyle.type);
+      layoutStyles.includes(nk) ? layout[nk] = value : paint[nk] = value;
+    }
+  });
+  if (oldStyle.paint)
+    Object.entries(oldStyle.paint).forEach(
+      ([key, value]) => paint[newKey(key, oldStyle.type)] = value
+    );
+  if (oldStyle.layout)
+    Object.entries(oldStyle.layout).forEach(
+      ([key, value]) => layout[newKey(key, oldStyle.type)] = value
+    );
+  return { ...style, paint, layout };
+};
+var Layer = (props) => {
+  const [ctx] = useMapContext();
+  const sourceId = props.sourceId || props.style?.source || useSourceId();
+  const layerId = props.id || props.customLayer?.id || createUniqueId2();
+  const debug = (text, value) => {
+    (ctx.map.debug || ctx.map.debugEvents) && console.debug("%c[MapGL]", "color: #10b981", text, value || "");
+  };
+  const getBeforeId = createMemo(
+    () => props.beforeType ? ctx.map.getStyle().layers.find((l) => l.type === props.beforeType)?.id : props.beforeId
+  );
+  ctx.map.addLayer(
+    props.customLayer || {
+      ...updateStyle(props.style),
+      id: layerId,
+      source: sourceId,
+      // `slot` is Mapbox Standard-Style-only — MapLibre has no equivalent (see docs/dev-notes.md)
+      ...ctx.isMapLibre ? {} : { slot: props.slot || "" },
+      metadata: {
+        smg: { beforeType: props.beforeType, beforeId: props.beforeId }
+      }
+    },
+    getBeforeId()
+  );
+  ctx.map.layerIdList.push(layerId);
+  if (props.customLayer) ctx.map.fire("load");
+  debug("Add Layer:", layerId);
+  layerEvents.forEach((item) => {
+    if (props[item]) {
+      const event = item.slice(2).toLowerCase();
+      ctx.map.on(event, layerId, (evt) => {
+        evt.clickOnLayer = true;
+        props[item](evt);
+        ctx.map.debugEvents && debug(`Layer '${event}' event on '${layerId}':`, evt);
+      });
+    }
+  });
+  createEffect3((prev) => {
+    const style = updateStyle(props.style);
+    if (style === prev) return;
+    if (style.layout !== prev?.layout)
+      diff(style.layout, prev?.layout).forEach(
+        ([key, value]) => ctx.map.setLayoutProperty(layerId, key, value, { validate: false })
+      );
+    if (style.paint !== prev?.paint)
+      diff(style.paint, prev?.paint).forEach(
+        ([key, value]) => ctx.map.setPaintProperty(layerId, key, value, { validate: false })
+      );
+    if (style.minzoom !== prev?.minzoom || style.maxzoom !== prev?.maxzoom)
+      ctx.map.setLayerZoomRange(layerId, style.minzoom, style.maxzoom);
+    if (style.filter !== prev?.filter)
+      ctx.map.setFilter(layerId, style.filter, { validate: false });
+    debug("Update Layer Style:", layerId);
+    return style;
+  }, updateStyle(props.style));
+  createEffect3((prev) => {
+    if (props.visible === prev) return;
+    ctx.map.setLayoutProperty(
+      layerId,
+      "visibility",
+      props.visible ? "visible" : "none",
+      { validate: false }
+    );
+    debug(`Update Visibility (${layerId}):`, props.visible.toString());
+    return props.visible;
+  }, props.visible);
+  createEffect3((prev) => {
+    if (getBeforeId() === prev) return prev;
+    ctx.map.moveLayer(layerId, getBeforeId());
+    debug(`Update Layer Z-Index (${layerId}):`, getBeforeId());
+    return getBeforeId();
+  }, getBeforeId());
+  createEffect3(async () => {
+    if (!props.filter) return;
+    !ctx.map.isStyleLoaded() && await ctx.map.once("styledata");
+    ctx.map.setFilter(layerId, props.filter);
+    debug(`Update Filter (${layerId}):`, props.filter);
+  });
+  createEffect3(async () => {
+    if (!props.featureState || props.featureState.id === null) return;
+    !ctx.map.isStyleLoaded() && await ctx.map.once("styledata");
+    ctx.map.removeFeatureState({
+      source: sourceId,
+      sourceLayer: props.style["source-layer"]
+    });
+    ctx.map.setFeatureState(
+      {
+        source: sourceId,
+        sourceLayer: props.style["source-layer"],
+        id: props.featureState.id
+      },
+      props.featureState.state
+    );
+  });
+  onCleanup3(() => ctx.map?.getLayer(layerId) && ctx.map?.removeLayer(layerId));
+  return props.children;
+};
+
+// src/components/Layer3D/index.tsx
+import {
+  onCleanup as onCleanup4,
+  createUniqueId as createUniqueId3,
+  createSignal as createSignal2,
+  onMount as onMount2,
+  createContext as createContext3,
+  useContext as useContext3
+} from "solid-js";
+var LayerContext = createContext3();
+var useScene = () => useContext3(LayerContext);
+var Layer3D = (props) => {
+  const [ctx] = useMapContext();
+  const [scene, setScene] = createSignal2(null);
+  onMount2(async () => {
+    props.id = props.id || createUniqueId3();
+    const worldOriginMercator = ctx.mapLib.MercatorCoordinate.fromLngLat(
+      [props.origin[0] || 0, props.origin[1] || 0],
+      props.origin[2] || 0
+    );
+    const worldScale = worldOriginMercator.meterInMercatorCoordinateUnits();
+    const { x, y, z } = worldOriginMercator;
+    let worldMatrix = null;
+    let BABYLON = null;
+    let THREE = null;
+    if (props.babylon) {
+      BABYLON = await import("@babylonjs/core");
+      worldMatrix = BABYLON.Matrix.Compose(
+        new BABYLON.Vector3(worldScale, worldScale, worldScale),
+        BABYLON.Quaternion.FromEulerAngles(Math.PI / 2, 0, 0),
+        new BABYLON.Vector3(x, y, z)
+      );
+    } else {
+      THREE = await import("three");
+      worldMatrix = {
+        translateX: x,
+        translateY: y,
+        translateZ: z,
+        rotateX: Math.PI / 2,
+        rotateY: 0,
+        rotateZ: 0,
+        scale: worldScale
+      };
+    }
+    ctx.map.addLayer(
+      {
+        id: props.id,
+        type: "custom",
+        renderingMode: "3d",
+        onAdd(map, gl) {
+          if (props.babylon) {
+            const engine = new BABYLON.Engine(
+              gl,
+              true,
+              {
+                useHighPrecisionMatrix: true
+              },
+              true
+            );
+            this.scene = new BABYLON.Scene(engine);
+            this.scene.autoClear = false;
+            this.scene.preventDefaultOnPointerDown = false;
+            this.scene.preventDefaultOnPointerUp = false;
+            const camera = new BABYLON.UniversalCamera(
+              "Camera",
+              BABYLON.Vector3.Zero()
+            );
+            camera.mode = BABYLON.Camera.ORTHOGRAPHIC_CAMERA;
+            camera.inertia = 0;
+            this.scene.ambientColor = new BABYLON.Color3(1, 1, 1);
+            if (props.defaultLight)
+              new BABYLON.HemisphericLight(
+                "Light",
+                new BABYLON.Vector3(100, 10, 0),
+                this.scene
+              );
+          } else {
+            this.camera = new THREE.Camera();
+            this.scene = new THREE.Scene();
+            if (props.defaultLight) {
+              this.light = new THREE.DirectionalLight(16777215);
+              this.light.position.set(100, 0, 0).normalize();
+              this.scene.add(this.light);
+            }
+            this.renderer = new THREE.WebGLRenderer({
+              canvas: map.getCanvas(),
+              context: gl,
+              antialias: true
+            });
+            this.renderer.autoClear = false;
+          }
+          this.map = map;
+          props.onAdd && props.onAdd(this.scene, this.map, gl);
+          setScene(this.scene);
+        },
+        render(gl, matrix) {
+          if (props.babylon) {
+            this.scene.activeCamera.freezeProjectionMatrix(
+              // props.disableProjectionMatrix
+              //   ? BABYLON.Matrix.FromArray(matrix)
+              worldMatrix.multiply(BABYLON.Matrix.FromArray(matrix))
+            );
+            const pitch = this.map.getPitch() * (Math.PI / 180);
+            const bearing = this.map.getBearing() * (Math.PI / 180);
+            this.scene.render(false);
+          } else {
+            const rotationX = new THREE.Matrix4().makeRotationAxis(
+              new THREE.Vector3(1, 0, 0),
+              worldMatrix.rotateX
+            );
+            const rotationY = new THREE.Matrix4().makeRotationAxis(
+              new THREE.Vector3(0, 1, 0),
+              worldMatrix.rotateY
+            );
+            const rotationZ = new THREE.Matrix4().makeRotationAxis(
+              new THREE.Vector3(0, 0, 1),
+              worldMatrix.rotateZ
+            );
+            const m = new THREE.Matrix4().fromArray(matrix);
+            const l = new THREE.Matrix4().makeTranslation(
+              worldMatrix.translateX,
+              worldMatrix.translateY,
+              worldMatrix.translateZ
+            ).scale(
+              new THREE.Vector3(
+                worldMatrix.scale,
+                -worldMatrix.scale,
+                worldMatrix.scale
+              )
+            ).multiply(rotationX).multiply(rotationY).multiply(rotationZ);
+            this.camera.projectionMatrix = m.multiply(l);
+            this.renderer.resetState();
+            this.renderer.render(this.scene, this.camera);
+          }
+          props.onRender && props.onRender(gl, matrix);
+          ctx.map.triggerRepaint();
+        }
+      },
+      props.beforeId
+    );
+  });
+  onCleanup4(() => {
+    ctx.map.getLayer(props.id) && ctx.map.removeLayer(props.id);
+  });
+  return <LayerContext.Provider value={scene}>
+      {scene() && props.children}
+    </LayerContext.Provider>;
+};
+
+// src/components/Atmosphere/index.tsx
+import { onCleanup as onCleanup5, createEffect as createEffect4 } from "solid-js";
+var Atmosphere = (props) => {
+  const [ctx] = useMapContext();
+  createEffect4(() => {
+    if (ctx.isMapLibre) ctx.map.setSky?.(props.style || {});
+    else ctx.map.setFog(props.style || {});
+  });
+  onCleanup5(() => {
+    if (ctx.isMapLibre) {
+      ctx.map.getSky?.() && ctx.map.setSky(null);
+    } else if (ctx.map.getFog()) {
+      ctx.map.setFog(null);
+    }
+  });
+  return null;
+};
+
+// src/components/Terrain/index.tsx
+import {
+  createEffect as createEffect5,
+  createUniqueId as createUniqueId4,
+  onCleanup as onCleanup6
+} from "solid-js";
+var Terrain = (props) => {
+  const [ctx] = useMapContext();
+  let sourceId = useSourceId();
+  if (!sourceId && !props?.source) {
+    sourceId = createUniqueId4();
+    ctx.map.addSource(sourceId, {
+      type: "raster-dem",
+      url: ctx.isMapLibre ? "https://demotiles.maplibre.org/terrain-tiles/tiles.json" : "mapbox://mapbox.terrain-rgb",
+      tileSize: ctx.isMapLibre ? 256 : 512,
+      maxzoom: ctx.isMapLibre ? void 0 : 14
+    });
+    ctx.map.sourceIdList.push(sourceId);
+  }
+  createEffect5(() => {
+    ctx.map.setTerrain({
+      exaggeration: props.exaggeration || 1,
+      source: props?.source || sourceId
+    });
+  });
+  onCleanup6(() => ctx.map?.setTerrain(null));
+  return null;
+};
+
+// src/components/Control/index.tsx
+import { createSignal as createSignal3, createEffect as createEffect7, splitProps, untrack } from "solid-js";
+
+// src/lib/createMapControl.ts
+import { createEffect as createEffect6, onCleanup as onCleanup7 } from "solid-js";
+var useControlPosition = (control, position) => {
+  const [ctx] = useMapContext();
+  createEffect6(() => {
+    const c = control();
+    const pos = position?.();
+    if (!c) return;
+    ctx.map.hasControl(c) && ctx.map.removeControl(c);
+    ctx.map.addControl(c, pos);
+  });
+  onCleanup7(() => {
+    const c = control();
+    c && ctx.map.hasControl(c) && ctx.map.removeControl(c);
+  });
+};
+
+// src/components/Control/index.tsx
+var Control = (props) => {
+  const [ctx] = useMapContext();
+  const [update, create] = splitProps(props, ["position"]);
+  const [control, setControl] = createSignal3(null);
+  const controlClasses = /* @__PURE__ */ new Map([
+    ["navigation", ctx.mapLib.NavigationControl],
+    ["scale", ctx.mapLib.ScaleControl],
+    ["attribution", ctx.mapLib.AttributionControl],
+    ["geolocate", ctx.mapLib.GeolocateControl],
+    ["fullscreen", ctx.mapLib.FullscreenControl],
+    ["logo", ctx.mapLib.LogoControl],
+    ["terrain", ctx.mapLib.TerrainControl]
+  ]);
+  createEffect7(() => {
+    untrack(
+      () => control() && ctx.map.hasControl(control()) && ctx.map.removeControl(control())
+    );
+    setControl(
+      create.custom || new (controlClasses.get(create.type || "navigation"))(create.options)
+    );
+  });
+  useControlPosition(control, () => update.position);
+  return null;
+};
+
+// src/components/Marker/index.tsx
+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(
+    props,
+    ["lngLat", "children", "showPopup", "draggable"],
+    ["popup", "onOpen", "onClose"]
+  );
+  const [ctx] = useMapContext();
+  let marker = null;
+  let popup = null;
+  const LNGLAT = update.lngLat;
+  createEffect8(() => {
+    if (!ctx.map) return;
+    popup?.remove();
+    popup = new ctx.mapLib.Popup({
+      closeOnClick: false,
+      focusAfterOpen: false,
+      ...create_popup.popup
+    }).on("open", () => create_popup.onOpen?.()).on("close", () => create_popup.onClose?.());
+    createEffect8(() => {
+      if (update.children === void 0) return;
+      typeof update.children === "string" ? popup?.setHTML(update.children) : popup?.setDOMContent(update.children);
+      marker?.setPopup(popup);
+    });
+    createEffect8(
+      () => update.showPopup !== popup?.isOpen() && marker?.togglePopup()
+    );
+  });
+  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);
+    createEffect8(
+      () => update.showPopup !== popup?.isOpen() && marker?.togglePopup()
+    );
+  });
+  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 createEffect9, splitProps as splitProps3 } from "solid-js";
+var Popup = (props) => {
+  if (!props.trackPointer && !props.lngLat)
+    throw new Error("Popup - lngLat or trackPointer is required");
+  const [update, create] = splitProps3(props, [
+    "lngLat",
+    "children",
+    "trackPointer"
+  ]);
+  const [ctx] = useMapContext();
+  let popup;
+  createEffect9(() => {
+    if (!ctx.map) return;
+    popup?.remove();
+    popup = new ctx.mapLib.Popup({
+      closeOnClick: false,
+      focusAfterOpen: false,
+      ...create.options
+    }).on("open", () => create.onOpen?.()).on("close", () => create.onClose?.()).addTo(ctx.map);
+    createEffect9(
+      () => update.trackPointer ? popup.trackPointer() : popup.setLngLat(update.lngLat)
+    );
+    createEffect9(
+      () => typeof update.children === "string" ? popup.setHTML(update.children) : popup.setDOMContent(update.children)
+    );
+  });
+  onCleanup9(() => popup?.remove());
+  return null;
+};
+
+// src/components/Image/index.tsx
+import {
+  onCleanup as onCleanup10,
+  createSignal as createSignal4,
+  createEffect as createEffect10,
+  untrack as untrack2
+} from "solid-js";
+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" },
+  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" },
+  circle: {
+    size: 25,
+    path: "M8 10A2.5 2.5 0 118.01 10M18 15A2.5 2.5 0 1018.01 15",
+    fill: true
+  }
+};
+var patternList = Object.keys(PATTERN);
+var MGL_Image = (props) => {
+  const [ctx] = useMapContext();
+  const [size, setSize] = createSignal4({ width: 0, height: 0 });
+  const debug = (text, value) => {
+    ctx.map.debug && console.debug("%c[MapGL]", "color: #10b981", text, value || "");
+  };
+  onCleanup10(() => {
+    ctx.map?.hasImage(props.id) && ctx.map?.removeImage(props.id);
+    debug("Remove Image:", props.id);
+  });
+  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");
+    const ops = props.pattern ? { pixelRatio: 2, ...props.options } : props.options;
+    _loadImage(props.source || _createPattern(props.pattern), (data) => {
+      const { width, height } = data;
+      if (ctx.map && !ctx.map.hasImage(props.id))
+        ctx.map.addImage(props.id, data, ops);
+      if (!props.pattern && untrack2(() => width === size().width && height === size().height)) {
+        ctx.map.updateImage(props.id, data);
+        ctx.map.triggerRepaint();
+      } else {
+        ctx.map.removeImage(props.id);
+        ctx.map.addImage(props.id, data, ops);
+      }
+      setSize({ width, height });
+      debug("Add Image:", props.id);
+      ctx.map.on("style.load", () => {
+        if (ctx.map.hasImage(props.id)) return;
+        ctx.map.addImage(props.id, data, ops);
+        debug("Re-Add Image:", props.id);
+      });
+    });
+  });
+  const _loadImage = (image, callback) => {
+    if (typeof image == "string" && image?.trimStart().startsWith("<svg")) {
+      image = new DOMParser().parseFromString(image, "image/svg+xml").childNodes[0];
+    }
+    if (image instanceof SVGElement) {
+      props.options?.fill && image.setAttribute("fill", props.options.fill);
+      props.options?.stroke && image.setAttribute("stroke", props.options.stroke);
+      image = new XMLSerializer().serializeToString(image);
+    }
+    if (typeof image !== "string") return callback(image);
+    ctx.map.loadImage(image, async (error, imageData) => {
+      if (error) {
+        if (typeof image == "string" && image?.trimEnd().endsWith(".svg")) {
+          image = await (await fetch(image)).text();
+          image = new DOMParser().parseFromString(image, "image/svg+xml").childNodes[0];
+          image.setAttribute("fill", props.options.fill);
+          image.setAttribute("stroke", props.options.stroke);
+          image.setAttribute("transform", props.options.transform);
+          image = new XMLSerializer().serializeToString(image);
+        }
+        const img = new Image();
+        img.crossOrigin = "Anonymous";
+        img.onload = () => {
+          const canvas = document.createElement("canvas");
+          canvas.width = Math.max(img.width, 50);
+          canvas.height = Math.max(img.height, 50);
+          const ctx2 = canvas.getContext("2d");
+          ctx2.imageSmoothingEnabled = true;
+          ctx2.drawImage(img, 0, 0, canvas.width, canvas.height);
+          return callback(ctx2.getImageData(0, 0, canvas.width, canvas.height));
+        };
+        img.src = image.trimStart().startsWith("<svg") ? "data:image/svg+xml;charset=utf-8," + image : image;
+      } else {
+        return callback(imageData);
+      }
+    });
+  };
+  const _createPattern = (pattern) => {
+    const p = PATTERN[pattern.type];
+    return {
+      width: p.size,
+      height: p.size,
+      data: new Uint8Array(p.size * p.size * 4),
+      onAdd: function() {
+        let canvas = document.createElement("canvas");
+        canvas.width = canvas.height = p.size;
+        this.ctx = canvas.getContext("2d", { willReadFrequently: true });
+      },
+      render: function() {
+        this.ctx.fillStyle = pattern.background || "transparent";
+        this.ctx.fillRect(0, 0, this.width, this.height);
+        this.ctx.strokeStyle = this.ctx.fillStyle = pattern.color || "black";
+        this.ctx.lineWidth = pattern.lineWith || 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;
+        return true;
+      }
+    };
+  };
+  return null;
+};
+
+// src/components/Camera/index.tsx
+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);
+  const theta = Math.acos(dotProduct);
+  return a.map(
+    (_, idx) => Math.sin((1 - t) * theta) / Math.sin(theta) * a[idx] + Math.sin(t * theta) / Math.sin(theta) * b[idx]
+  );
+};
+var easeQuad = {
+  in: (x) => x * x,
+  out: (x) => 1 - (1 - x) * (1 - x),
+  inOut: (x) => x < 0.5 ? 2 * x * x : 1 - Math.pow(-2 * x + 2, 2) / 2
+};
+var Camera = (props) => {
+  const [ctx] = useMapContext();
+  let animationTime = 0.1;
+  let isReverse = false;
+  const [userInteraction, setUserInteraction] = createSignal5(false);
+  ["mousedown", "touchstart", "wheel"].forEach(
+    (event) => ctx.map.on(event, (evt) => !evt.rotate && setUserInteraction(true))
+  );
+  ["moveend", "mouseup", "touchend"].forEach(
+    (event) => ctx.map.on(event, (evt) => !evt.rotate && setUserInteraction(false))
+  );
+  const updateCameraPosition = async ([lng, lat, alt], target) => {
+    const camera = ctx.map.getFreeCameraOptions();
+    camera.position = ctx.mapLib.MercatorCoordinate.fromLngLat(
+      [lng, lat],
+      alt
+    );
+    camera.lookAtPoint(target);
+    ctx.map.setFreeCameraOptions(camera);
+  };
+  const frame = () => {
+    props.translate && window.requestAnimationFrame(frame);
+    const params = [
+      props.translate.start,
+      props.translate.end,
+      props.translate.easing ? easeQuad[props.translate.easing](animationTime) : animationTime
+    ];
+    const position = props.translate.type === "line" ? lerp(...params) : slerp(...params);
+    updateCameraPosition(position, props.translate.target);
+    if (!props.translate.loop && (animationTime > 1 || animationTime < 0))
+      isReverse = !isReverse;
+    animationTime = isReverse ? animationTime - 1e-3 : animationTime + 1e-3;
+  };
+  createEffect11(() => {
+    props.translate && window.requestAnimationFrame(frame);
+  });
+  const options = { duration: 1e3, easing: (n) => n };
+  const rotateGlobe = () => {
+    if (userInteraction()) return;
+    const {
+      secPerRev = 120,
+      maxSpinZoom = 5,
+      slowSpinZoom = 3
+    } = props.rotateGlobe;
+    const zoom = ctx.map.getZoom();
+    if (zoom > maxSpinZoom) return;
+    let distancePerSecond = 360 / secPerRev;
+    if (zoom > slowSpinZoom)
+      distancePerSecond *= (maxSpinZoom - zoom) / (maxSpinZoom - slowSpinZoom);
+    const center = ctx.map.getCenter();
+    center.lng = props.reverse ? center.lng + distancePerSecond : center.lng - distancePerSecond;
+    ctx.map.easeTo({ center, ...options }, { rotate: true });
+  };
+  const rotateViewport = () => {
+    if (!props.rotateViewport || userInteraction()) {
+      ctx.map.stop();
+      return;
+    }
+    const rotateViewport2 = props.rotateViewport;
+    const secPerRev = rotateViewport2?.secPerRev || 60;
+    const bearing = props.reverse ? ctx.map.getBearing() + 360 / secPerRev : ctx.map.getBearing() - 360 / secPerRev;
+    const pitch = rotateViewport2?.pitch || 60;
+    const around = rotateViewport2?.around;
+    ctx.map.easeTo({ bearing, pitch, around, ...options }, { rotate: true });
+  };
+  const onEnd = () => props.rotateGlobe ? rotateGlobe() : rotateViewport();
+  ctx.map.on("moveend", onEnd).on("dragend", onEnd);
+  let originalCenter;
+  createEffect11(() => {
+    if (props.rotateGlobe == void 0) return;
+    if (props.rotateGlobe) {
+      originalCenter = ctx.map.getCenter();
+      rotateGlobe();
+    } else {
+      props.resetWhenStopped ? ctx.map.stop().easeTo({ center: originalCenter }) : ctx.map.stop();
+    }
+  });
+  createEffect11(() => {
+    if (props.rotateViewport == void 0) return;
+    props.rotateViewport ? rotateViewport() : props.resetWhenStopped ? ctx.map.stop().resetNorthPitch() : ctx.map.stop();
+  });
+  onCleanup11(() => ctx.map.off("moveend", onEnd).off("dragend", onEnd));
+  return props.children;
+};
+
+// src/components/Light/index.tsx
+import { onCleanup as onCleanup12, createEffect as createEffect12 } from "solid-js";
+var Light = (props) => {
+  const [ctx] = useMapContext();
+  createEffect12(() => ctx.map.setLight(props.style || {}));
+  onCleanup12(() => ctx.map?.setLight(null));
+  return null;
+};
+
+// src/components/Draw/index.tsx
+import { onCleanup as onCleanup13 } from "solid-js";
+
+// src/components/Draw/modes/multi_point.ts
+var MultiPointMode = {};
+MultiPointMode.onSetup = function(opts) {
+  var state = {};
+  state.count = opts.count || 0;
+  return state;
+};
+MultiPointMode.onClick = function(state, e) {
+  var point = this.newFeature({
+    type: "Feature",
+    properties: {
+      count: state.count
+    },
+    geometry: {
+      type: "Point",
+      coordinates: [e.lngLat.lng, e.lngLat.lat]
+    }
+  });
+  this.addFeature(point);
+};
+MultiPointMode.onKeyUp = function(state, e) {
+  if (e.keyCode === 27) return this.changeMode("simple_select");
+};
+MultiPointMode.toDisplayFeatures = function(state, geojson, display) {
+  display(geojson);
+};
+var multi_point_default = MultiPointMode;
+
+// 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
+  }).format(coords[0]) + "\xB0 " + new Intl.NumberFormat(void 0, {
+    maximumFractionDigits: 5
+  }).format(coords[1]) + "\xB0";
+};
+var getLength = (coordinates, meta) => {
+  const lengthValue = length(
+    {
+      type: "Feature",
+      properties: {},
+      geometry: {
+        type: "LineString",
+        coordinates
+      }
+    },
+    {
+      units: window.navigator.language === "en-US" ? "miles" : "kilometers"
+    }
+  );
+  const label = window.navigator.language === "en-US" ? new Intl.NumberFormat(void 0, {
+    style: "unit",
+    maximumFractionDigits: 2,
+    unit: lengthValue <= 1 ? "foot" : "mile"
+  }).format(lengthValue <= 1 ? lengthValue * 5280 : lengthValue) : new Intl.NumberFormat(void 0, {
+    style: "unit",
+    maximumFractionDigits: 2,
+    unit: lengthValue <= 1 ? "meter" : "kilometer"
+  }).format(lengthValue <= 1 ? lengthValue * 1e3 : lengthValue);
+  return {
+    type: "Feature",
+    properties: {
+      type: "measure",
+      value: label,
+      ...meta
+    },
+    geometry: {
+      type: "Point",
+      coordinates: midpoint(coordinates[0], coordinates[1]).geometry.coordinates
+    }
+  };
+};
+var getArea = (coordinates, meta) => {
+  const areaValue = area({
+    type: "Feature",
+    properties: {},
+    geometry: {
+      type: "Polygon",
+      coordinates
+    }
+  });
+  const areaLabel = window.navigator.language === "en-US" ? new Intl.NumberFormat(void 0, {
+    style: "unit",
+    maximumFractionDigits: 2,
+    unit: areaValue <= 10.764 ? "foot" : "mile"
+  }).format(
+    areaValue <= 10.764 ? areaValue * 10.764 : areaValue * 1.0000003861
+  ) + "\xB2" : new Intl.NumberFormat(void 0, {
+    style: "unit",
+    maximumFractionDigits: 2,
+    unit: areaValue <= 1e6 ? "meter" : "kilometer"
+  }).format(areaValue <= 1e6 ? areaValue : areaValue / 1e6) + "\xB2";
+  return {
+    type: "Feature",
+    properties: {
+      type: "measure",
+      value: areaLabel,
+      ...meta
+    },
+    geometry: centerOfMass({
+      type: "Polygon",
+      coordinates
+    }).geometry
+  };
+};
+
+// src/components/Draw/modes/line_string.ts
+var line_string_default = (lib) => {
+  const DrawLineString = lib.modes.draw_line_string;
+  return {
+    ...DrawLineString,
+    onSetup: function() {
+      const draw = DrawLineString.onSetup.call(this);
+      const measure = this.newFeature({
+        type: "Feature",
+        properties: {
+          type: "measure",
+          value: "TTT"
+        },
+        geometry: {
+          type: "Point",
+          coordinates: []
+        }
+      });
+      return { ...draw, measure };
+    },
+    onMouseMove: function(state, e) {
+      DrawLineString.onMouseMove.call(this, state, e);
+      if (state.line.coordinates.length >= 2) {
+        const measure = getLength(state.line.coordinates);
+        state.measure.properties.value = measure.properties.value;
+        state.measure.updateCoordinate(
+          "",
+          measure.geometry.coordinates[0],
+          measure.geometry.coordinates[1]
+        );
+      }
+    },
+    toDisplayFeatures: function(state, geojson, display) {
+      DrawLineString.toDisplayFeatures.call(this, state, geojson, display);
+      if (this.drawConfig.userProperties.showLength) {
+        display(state.measure.toGeoJSON());
+      }
+    }
+  };
+};
+
+// src/components/Draw/modes/point.ts
+var point_default = (lib) => {
+  const DrawPoint = lib.modes.draw_point;
+  return {
+    ...DrawPoint,
+    onSetup: function() {
+      const draw = DrawPoint.onSetup.call(this);
+      draw.point.properties = {
+        ...draw.point.properties,
+        type: "measure",
+        anchor: "bottom"
+      };
+      return draw;
+    },
+    onMouseMove: function(state, { lngLat }) {
+      state.point.properties.value = getCoords([lngLat.lng, lngLat.lat]);
+      state.point.updateCoordinate("", lngLat.lng, lngLat.lat);
+    },
+    toDisplayFeatures: function(state, geojson, display) {
+      const isActivePoint = geojson.properties.id === state.point.id;
+      geojson.properties.active = isActivePoint ? "" : "false";
+      return display(geojson);
+    }
+  };
+};
+
+// src/components/Draw/modes/polygon.ts
+var polygon_default = (lib) => {
+  const DrawPolygon = lib.modes.draw_polygon;
+  return {
+    ...DrawPolygon,
+    toDisplayFeatures: function(state, geojson, display) {
+      const displayMeasure = (geojson2) => {
+        display(geojson2);
+        if (this.drawConfig.userProperties.showLength) {
+          const arr = Array.isArray(geojson2.geometry.coordinates[0][0]) ? geojson2.geometry.coordinates[0] : geojson2.geometry.coordinates;
+          arr.forEach((coords, index) => {
+            if (!Array.isArray(coords) || index == 0) return;
+            display(getLength([arr[index - 1], coords]));
+          });
+        }
+        this.drawConfig.userProperties.showArea && geojson2.geometry.coordinates[0].length >= 3 && display(getArea([geojson2.geometry.coordinates[0]]));
+      };
+      DrawPolygon.toDisplayFeatures.call(this, state, geojson, displayMeasure);
+    }
+  };
+};
+
+// src/components/Draw/modes/radius.ts
+import length2 from "@turf/length";
+function createVertex(parentId, coordinates, path, selected) {
+  return {
+    type: "Feature",
+    properties: {
+      meta: "vertex",
+      parent: parentId,
+      coord_path: path,
+      active: selected ? "true" : "false"
+    },
+    geometry: {
+      type: "Point",
+      coordinates
+    }
+  };
+}
+function createGeoJSONCircle(center, radius, parentId, points = 64) {
+  const ret = [];
+  const distanceX = radius / (111.32 * Math.cos(center[1] * Math.PI / 180));
+  const distanceY = radius / 110.574;
+  for (let i = 0; i < points; i += 1) {
+    let theta = i / points * (2 * Math.PI);
+    let x = distanceX * Math.cos(theta);
+    let y = distanceY * Math.sin(theta);
+    ret.push([center[0] + x, center[1] + y]);
+  }
+  ret.push(ret[0]);
+  return {
+    type: "Feature",
+    geometry: {
+      type: "Polygon",
+      coordinates: [ret]
+    },
+    properties: {
+      parent: parentId,
+      active: "true"
+    }
+  };
+}
+var doubleClickZoom = {
+  enable: (ctx) => {
+    setTimeout(() => {
+      if (!ctx.map || !ctx.map.doubleClickZoom || !ctx._ctx || !ctx._ctx.store || !ctx._ctx.store.getInitialConfigValue)
+        return;
+      if (!ctx._ctx.store.getInitialConfigValue("doubleClickZoom")) return;
+      ctx.map.doubleClickZoom.enable();
+    }, 0);
+  }
+};
+var RadiusMode = (lib) => ({
+  ...lib.modes.draw_line_string,
+  clickAnywhere: function(state, e) {
+    if (state.currentVertexPosition === 1) {
+      state.line.addCoordinate(0, e.lngLat.lng, e.lngLat.lat);
+      return this.changeMode("simple_select", { featureIds: [state.line.id] });
+    }
+    this.updateUIClasses({ mouse: "add" });
+    state.line.updateCoordinate(
+      state.currentVertexPosition,
+      e.lngLat.lng,
+      e.lngLat.lat
+    );
+    if (state.direction === "forward") {
+      state.currentVertexPosition += 1;
+      state.line.updateCoordinate(
+        state.currentVertexPosition,
+        e.lngLat.lng,
+        e.lngLat.lat
+      );
+    } else {
+      state.line.addCoordinate(0, e.lngLat.lng, e.lngLat.lat);
+    }
+    return null;
+  },
+  // creates the final geojson point feature with a radius property
+  // triggers draw.create
+  onStop: function(state) {
+    doubleClickZoom.enable(this);
+    this.activateUIButton();
+    if (this.getFeature(state.line.id) === void 0) return;
+    state.line.removeCoordinate("0");
+    if (state.line.isValid()) {
+      const lineGeoJson = state.line.toGeoJSON();
+      const radius = (length2(lineGeoJson) * 1e3).toFixed(1);
+      const center = lineGeoJson.geometry.coordinates[0];
+      this.deleteFeature([state.line.id], { silent: true });
+      const point = this.newFeature({
+        type: "Feature",
+        properties: { radius },
+        geometry: {
+          type: "Point",
+          coordinates: center
+        }
+      });
+      this.addFeature(point);
+      this.map.fire("draw.create", {
+        features: [point.toGeoJSON()]
+      });
+      this.changeMode("simple_select", { featureIds: [point.id] });
+    } else {
+      this.deleteFeature([state.line.id], { silent: true });
+      this.changeMode("simple_select", {}, { silent: true });
+    }
+  },
+  toDisplayFeatures: function(state, geojson, display) {
+    const isActiveLine = geojson.properties.id === state.line.id;
+    geojson.properties.active = isActiveLine ? "true" : "false";
+    if (!isActiveLine) return display(geojson);
+    if (geojson.geometry.coordinates.length < 2) return null;
+    geojson.properties.meta = "feature";
+    display(
+      createVertex(
+        state.line.id,
+        geojson.geometry.coordinates[state.direction === "forward" ? geojson.geometry.coordinates.length - 2 : 1],
+        `${state.direction === "forward" ? geojson.geometry.coordinates.length - 2 : 1}`,
+        false
+      )
+    );
+    display(geojson);
+    display(getLength(geojson.geometry.coordinates, { parent: state.line.id }));
+    display(
+      createGeoJSONCircle(
+        geojson.geometry.coordinates[0],
+        length2(geojson),
+        state.line.id
+      )
+    );
+    return null;
+  }
+});
+var radius_default = RadiusMode;
+
+// src/components/Draw/modes/rectangle.ts
+var RectangleMode = (lib) => ({
+  ...lib.modes.draw_line_string,
+  // When the mode starts this function will be called.
+  onSetup: function(opts) {
+    const props = lib.modes.draw_line_string.onSetup.call(this, opts);
+    const rectangle = this.newFeature({
+      type: "Feature",
+      properties: {},
+      geometry: {
+        type: "Polygon",
+        coordinates: [[]]
+      }
+    });
+    this.addFeature(rectangle);
+    return { ...props, ...opts, rectangle };
+  },
+  // support mobile taps
+  onTap: function(state, e) {
+    if (state.startPoint) this.onMouseMove(state, e);
+    this.onClick(state, e);
+  },
+  // Whenever a user clicks on the map, Draw will call `onClick`
+  onClick: function(state, e) {
+    if (state.startPoint && state.startPoint[0] !== e.lngLat.lng && state.startPoint[1] !== e.lngLat.lat) {
+      this.updateUIClasses({ mouse: "pointer" });
+      state.endPoint = [e.lngLat.lng, e.lngLat.lat];
+      this.changeMode("simple_select", { featuresId: state.rectangle.id });
+    } else {
+      state.startPoint = [e.lngLat.lng, e.lngLat.lat];
+    }
+  },
+  onMouseMove: function(state, e) {
+    if (state.startPoint) {
+      state.rectangle.updateCoordinate(
+        "0.0",
+        state.startPoint[0],
+        state.startPoint[1]
+      );
+      state.rectangle.updateCoordinate(
+        "0.1",
+        e.lngLat.lng,
+        state.startPoint[1]
+      );
+      state.rectangle.updateCoordinate("0.2", e.lngLat.lng, e.lngLat.lat);
+      state.rectangle.updateCoordinate(
+        "0.3",
+        state.startPoint[0],
+        e.lngLat.lat
+      );
+      state.rectangle.updateCoordinate(
+        "0.4",
+        state.startPoint[0],
+        state.startPoint[1]
+      );
+    }
+  },
+  // Whenever a user clicks on a key while focused on the map, it will be sent here
+  onKeyUp: function(state, e) {
+    if (e.keyCode === 27) return this.changeMode("simple_select");
+  },
+  onStop: function(state) {
+    lib.modes.draw_line_string.onStop.call(this, state);
+    if (this.getFeature(state.rectangle.id) === void 0) return;
+    state.rectangle.removeCoordinate("0.4");
+    if (state.rectangle.isValid()) {
+      this.map.fire("draw.create", {
+        features: [state.rectangle.toGeoJSON()]
+      });
+    } else {
+      this.deleteFeature([state.rectangle.id], { silent: true });
+      this.changeMode("simple_select", {}, { silent: true });
+    }
+  },
+  toDisplayFeatures: function(state, geojson, display) {
+    const isActivePolygon = geojson.properties.id === state.rectangle.id;
+    geojson.properties.active = isActivePolygon ? "true" : "false";
+    if (!isActivePolygon) return display(geojson);
+    if (!state.startPoint) return;
+    display(geojson);
+    if (this.drawConfig.userProperties.showLength) {
+      display(
+        getLength(
+          [geojson.geometry.coordinates[0][0], geojson.geometry.coordinates[0][1]],
+          { parent: state.rectangle.id, anchor: "bottom" }
+        )
+      );
+      display(
+        getLength(
+          [geojson.geometry.coordinates[0][1], geojson.geometry.coordinates[0][2]],
+          { parent: state.rectangle.id, anchor: "left" }
+        )
+      );
+    }
+    this.drawConfig.userProperties.showArea && display(getArea(geojson.geometry.coordinates, { parent: state.rectangle.id }));
+    return null;
+  },
+  onTrash: function(state) {
+    this.deleteFeature([state.rectangle.id], { silent: true });
+    this.changeMode("simple_select");
+  }
+});
+var rectangle_default = RectangleMode;
+
+// src/components/Draw/modes/rectangle_assisted.ts
+var doubleClickZoom2 = {
+  enable: (ctx) => {
+    setTimeout(() => {
+      if (!ctx.map || !ctx.map.doubleClickZoom || !ctx._ctx || !ctx._ctx.store || !ctx._ctx.store.getInitialConfigValue)
+        return;
+      if (!ctx._ctx.store.getInitialConfigValue("doubleClickZoom")) return;
+      ctx.map.doubleClickZoom.enable();
+    }, 0);
+  },
+  disable(ctx) {
+    setTimeout(() => {
+      if (!ctx.map || !ctx.map.doubleClickZoom) return;
+      ctx.map.doubleClickZoom.disable();
+    }, 0);
+  }
+};
+var RectangleAssistedMode = {
+  onSetup: function(opts) {
+    const rectangle = this.newFeature({
+      type: "Feature",
+      properties: {},
+      geometry: {
+        type: "Polygon",
+        coordinates: [[]]
+      }
+    });
+    this.addFeature(rectangle);
+    this.clearSelectedFeatures();
+    doubleClickZoom2.disable(this);
+    this.updateUIClasses({
+      mouse: "add"
+    });
+    this.setActionableState({
+      trash: true
+    });
+    return {
+      rectangle,
+      currentVertexPosition: 0
+    };
+  },
+  onTap: function(state, e) {
+    this.onClick(state, e);
+  },
+  onClick: function(state, e) {
+    if (state.currentVertexPosition === 2) {
+      const getpXY3 = this.calculatepXY3(state, e, false);
+      if (getpXY3) {
+        state.rectangle.updateCoordinate(
+          `0.${state.currentVertexPosition + 1}`,
+          getpXY3[0],
+          getpXY3[1]
+        );
+      }
+      this.updateUIClasses({
+        mouse: "pointer"
+      });
+      return this.changeMode("simple_select", {
+        featuresId: state.rectangle.id
+      });
+    } else {
+      state.rectangle.updateCoordinate(
+        `0.${state.currentVertexPosition}`,
+        e.lngLat.lng,
+        e.lngLat.lat
+      );
+      state.currentVertexPosition++;
+      state.rectangle.updateCoordinate(
+        `0.${state.currentVertexPosition}`,
+        e.lngLat.lng,
+        e.lngLat.lat
+      );
+    }
+  },
+  onMouseMove: function(state, e) {
+    state.rectangle.updateCoordinate(
+      "0." + state.currentVertexPosition,
+      e.lngLat.lng,
+      e.lngLat.lat
+    );
+    if (state.currentVertexPosition && state.currentVertexPosition > 0) {
+      this.calculateOrientedAnglePolygon(state);
+    }
+    if (state.currentVertexPosition === 2) {
+      const getpXY3 = this.calculatepXY3(state, e, true);
+      if (getpXY3) {
+        state.rectangle.updateCoordinate(
+          "0." + (state.currentVertexPosition + 1),
+          getpXY3[0],
+          getpXY3[1]
+        );
+      }
+    }
+  },
+  deegrees2meters(px) {
+    const x = px[0] * 2003750834e-2 / 180;
+    let y = Math.log(Math.tan((90 + px[1]) * Math.PI / 360)) / (Math.PI / 180);
+    y = y * 2003750834e-2 / 180;
+    return [x, y];
+  },
+  meters2degress(px) {
+    const lon = px[0] * 180 / 2003750834e-2;
+    const lat = Math.atan(Math.exp(px[1] * Math.PI / 2003750834e-2)) * 360 / Math.PI - 90;
+    return [lon, lat];
+  },
+  calculateOrientedAnglePolygon: function(state) {
+    const pXY0 = state.rectangle.getCoordinate("0.0");
+    const pXY0_3857 = this.deegrees2meters(pXY0);
+    const pXY1 = state.rectangle.getCoordinate("0.1");
+    const pXY1_3857 = this.deegrees2meters(pXY1);
+    const angleStdGraus = Math.atan2(pXY1_3857[1] - pXY0_3857[1], pXY1_3857[0] - pXY0_3857[0]) * 180 / Math.PI;
+    let angleSudGraus = -1 * (angleStdGraus + 90);
+    const angle = angleSudGraus < 0 ? angleSudGraus + 360 : angleSudGraus;
+    state.angle = parseFloat(angle.toFixed(2));
+  },
+  calculatepXY3: function(state, e, tmp) {
+    const pXY0 = state.rectangle.getCoordinate("0.0");
+    const pXY0_3857 = this.deegrees2meters(pXY0);
+    const pXY1 = state.rectangle.getCoordinate("0.1");
+    const pXY1_3857 = this.deegrees2meters(pXY1);
+    let pXY2_3857 = this.deegrees2meters([e.lngLat.lng, e.lngLat.lat]);
+    const mouse_3857 = this.deegrees2meters([e.lngLat.lng, e.lngLat.lat]);
+    if (pXY0_3857[0] === pXY1_3857[0]) {
+      pXY2_3857 = [mouse_3857[0], pXY1_3857[1]];
+    } else if (pXY0_3857[1] === pXY1_3857[1]) {
+      pXY2_3857 = [pXY1_3857[0], mouse_3857[1]];
+    } else {
+      const vector1_3857 = (pXY1_3857[1] - pXY0_3857[1]) / (pXY1_3857[0] - pXY0_3857[0]);
+      const vector2_3857 = -1 / vector1_3857;
+      if (Math.abs(vector2_3857) < 1) {
+        pXY2_3857[1] = vector2_3857 * (mouse_3857[0] - pXY1_3857[0]) + pXY1_3857[1];
+      } else {
+        pXY2_3857[0] = pXY1_3857[0] + (pXY2_3857[1] - pXY1_3857[1]) / vector2_3857;
+      }
+    }
+    const vector_3857 = [
+      pXY1_3857[0] - pXY0_3857[0],
+      pXY1_3857[1] - pXY0_3857[1]
+    ];
+    const pXY3_3857 = [
+      pXY2_3857[0] - vector_3857[0],
+      pXY2_3857[1] - vector_3857[1]
+    ];
+    const pXY2G = this.meters2degress(pXY2_3857);
+    const pXY3G = this.meters2degress(pXY3_3857);
+    state.rectangle.updateCoordinate("0.2", pXY2G[0], pXY2G[1]);
+    state.rectangle.updateCoordinate("0.3", pXY3G[0], pXY3G[1]);
+    return pXY3G;
+  },
+  onKeyUp: function(state, e) {
+    if (e.keyCode === 27) return this.changeMode("simple_select");
+  },
+  onStop: function(state) {
+    doubleClickZoom2.enable(this);
+    this.updateUIClasses({
+      mouse: "none"
+    });
+    this.activateUIButton();
+    if (this.getFeature(state.rectangle.id) === void 0) return;
+    state.rectangle.removeCoordinate("0.4");
+    if (state.rectangle.isValid()) {
+      this.map.fire("draw.create", {
+        features: [state.rectangle.toGeoJSON()]
+      });
+    } else {
+      this.deleteFeature([state.rectangle.id], {
+        silent: true
+      });
+      this.changeMode(
+        "simple_select",
+        {},
+        {
+          silent: true
+        }
+      );
+    }
+  },
+  toDisplayFeatures: function(state, geojson, display) {
+    const isActivePolygon = geojson.properties.id === state.rectangle.id;
+    geojson.properties.active = isActivePolygon ? "true" : "false";
+    geojson.properties.angle = state.angle;
+    geojson.angle = state.angle;
+    if (!isActivePolygon) return display(geojson);
+    const coordinateCount = geojson.geometry.coordinates[0].length;
+    if (coordinateCount < 3) {
+      const coordinates = geojson.geometry.coordinates[0][0];
+      const vertexPoint = {
+        type: "Feature",
+        properties: geojson.properties,
+        angle: state.angle,
+        geometry: {
+          coordinates: geojson.geometry.coordinates[0][0],
+          type: "Point"
+        }
+      };
+      if (coordinates) {
+        display(vertexPoint);
+      }
+      return;
+    }
+    if (coordinateCount >= 3 && coordinateCount <= 4) {
+      const lineCoordinates = [
+        [
+          geojson.geometry.coordinates[0][0][0],
+          geojson.geometry.coordinates[0][0][1]
+        ],
+        [
+          geojson.geometry.coordinates[0][1][0],
+          geojson.geometry.coordinates[0][1][1]
+        ]
+      ];
+      display({
+        type: "Feature",
+        properties: geojson.properties,
+        angle: state.angle,
+        geometry: {
+          coordinates: lineCoordinates,
+          type: "LineString"
+        }
+      });
+      if (coordinateCount === 3) {
+        return;
+      }
+    }
+    return display(geojson);
+  },
+  onTrash: function(state) {
+    this.deleteFeature([state.rectangle.id], {
+      silent: true
+    });
+    this.changeMode("simple_select");
+  }
+};
+var rectangle_assisted_default = RectangleAssistedMode;
+
+// src/components/Draw/drawingStyles.jsx
+var drawingStyles_default = [
+  // point active
+  // {
+  //   id: "points-active-halo",
+  //   type: "circle",
+  //   filter: [
+  //     "all",
+  //     ["==", "$type", "Point"],
+  //     ["==", "meta", "feature"],
+  //     ["==", "active", "true"],
+  //   ],
+  //   paint: {
+  //     "circle-radius": 9,
+  //     "circle-color": "#f7ad3b",
+  //     "circle-opacity": 0.75,
+  //   },
+  // },
+  // {
+  //   id: "highlight-active-points",
+  //   type: "circle",
+  //   filter: [
+  //     "all",
+  //     ["==", "$type", "Point"],
+  //     ["==", "meta", "feature"],
+  //     ["==", "active", "true"],
+  //   ],
+  //   paint: {
+  //     "circle-radius": 5,
+  //     "circle-color": ["get", "user_color"],
+  //   },
+  // },
+  // // point inactive
+  // {
+  //   id: "points-inactive-halo",
+  //   type: "circle",
+  //   filter: [
+  //     "all",
+  //     ["==", "$type", "Point"],
+  //     ["==", "meta", "feature"],
+  //     ["==", "active", "false"],
+  //     ["!has", "user_label"],
+  //   ],
+  //   paint: {
+  //     "circle-radius": 8,
+  //     "circle-color": "#FFFFFF",
+  //     "circle-opacity": 0.75,
+  //   },
+  // },
+  // {
+  //   id: "points-inactive",
+  //   type: "circle",
+  //   filter: [
+  //     "all",
+  //     ["==", "$type", "Point"],
+  //     ["==", "meta", "feature"],
+  //     ["==", "active", "false"],
+  //     ["!has", "user_label"],
+  //   ],
+  //   paint: {
+  //     "circle-radius": 5,
+  //     "circle-color": ["get", "user_color"],
+  //   },
+  // },
+  // {
+  //   id: "points-inactive-label",
+  //   type: "symbol",
+  //   filter: [
+  //     "all",
+  //     ["==", "$type", "Point"],
+  //     ["==", "meta", "feature"],
+  //     ["==", "active", "false"],
+  //     ["has", "user_label"],
+  //   ],
+  //   layout: {
+  //     "text-field": ["get", "user_label"],
+  //     "text-font": ["Arial Regular"],
+  //     "text-anchor": "bottom",
+  //     "text-size": 20,
+  //   },
+  //   paint: {
+  //     "text-halo-color": "rgba(255,255,255,0.75)",
+  //     "text-halo-width": 2,
+  //     "text-halo-blur": 1,
+  //     "text-color": ["get", "user_color"],
+  //   },
+  // },
+  // // line avtive (being drawn)
+  // {
+  //   id: "gl-draw-line-active",
+  //   type: "line",
+  //   filter: ["all", ["==", "$type", "LineString"], ["==", "active", "true"]],
+  //   layout: {
+  //     "line-cap": "round",
+  //     "line-join": "round",
+  //   },
+  //   paint: {
+  //     "line-color": "#f7ad3b",
+  //     "line-dasharray": [0.2, 2],
+  //     "line-width": 3,
+  //   },
+  // },
+  // {
+  //   id: "gl-draw-line-inactive",
+  //   type: "line",
+  //   filter: ["all", ["==", "$type", "LineString"], ["==", "active", "false"]],
+  //   layout: {
+  //     "line-cap": "round",
+  //     "line-join": "round",
+  //   },
+  //   paint: {
+  //     "line-color": [
+  //       "case",
+  //       ["has", "user_color"],
+  //       ["get", "user_color"],
+  //       "#f7ad3b",
+  //     ],
+  //     "line-width": 2,
+  //   },
+  // },
+  // // vertex point halos
+  // {
+  //   id: "gl-draw-polygon-and-line-vertex-halo-active",
+  //   type: "circle",
+  //   filter: [
+  //     "all",
+  //     ["==", "meta", "vertex"],
+  //     ["==", "$type", "Point"],
+  //     ["!=", "mode", "static"],
+  //   ],
+  //   paint: {
+  //     "circle-radius": 5,
+  //     "circle-color": "#FFF",
+  //     "circle-opacity": 0.75,
+  //   },
+  // },
+  // // vertex points
+  // {
+  //   id: "gl-draw-polygon-and-line-vertex-active",
+  //   type: "circle",
+  //   filter: [
+  //     "all",
+  //     ["==", "meta", "vertex"],
+  //     ["==", "$type", "Point"],
+  //     ["!=", "mode", "static"],
+  //   ],
+  //   paint: {
+  //     "circle-radius": 3,
+  //     "circle-color": "#f7ad3b",
+  //   },
+  // },
+  // // polygon fill
+  // {
+  //   id: "gl-draw-polygon-fill-inactive",
+  //   type: "fill",
+  //   filter: ["==", "$type", "Polygon"],
+  //   paint: {
+  //     "fill-color": [
+  //       "case",
+  //       ["has", "user_color"],
+  //       ["get", "user_color"],
+  //       "#f7ad3b",
+  //     ],
+  //     "fill-opacity": 0.1,
+  //   },
+  // },
+  // // polygon outline stroke
+  // // This doesn't style the first edge of the polygon, which uses the line stroke styling instead
+  // {
+  //   id: "gl-draw-polygon-stroke-active",
+  //   type: "line",
+  //   filter: ["all", ["==", "$type", "Polygon"], ["==", "active", "true"]],
+  //   layout: {
+  //     "line-cap": "round",
+  //     "line-join": "round",
+  //   },
+  //   paint: {
+  //     "line-color": "#f7ad3b",
+  //     "line-dasharray": [0.5, 2],
+  //     "line-width": 2,
+  //   },
+  // },
+  // {
+  //   id: "gl-draw-polygon-stroke-inactive",
+  //   type: "line",
+  //   filter: ["all", ["==", "$type", "Polygon"], ["==", "active", "false"]],
+  //   layout: {
+  //     "line-cap": "round",
+  //     "line-join": "round",
+  //   },
+  //   paint: {
+  //     "line-color": [
+  //       "case",
+  //       ["has", "user_color"],
+  //       ["get", "user_color"],
+  //       "#f7ad3b",
+  //     ],
+  //     "line-width": 2,
+  //   },
+  // },
+  {
+    id: "measure-label",
+    type: "symbol",
+    filter: ["all", ["==", "$type", "Point"], ["==", "user_type", "measure"]],
+    layout: {
+      "text-field": ["get", "user_value"],
+      "text-anchor": ["get", "user_anchor"],
+      "text-offset": [
+        "match",
+        ["get", "user_anchor"],
+        "bottom",
+        [0, -0.5],
+        [0, 0]
+      ],
+      "text-size": 12,
+      "text-allow-overlap": true,
+      "text-ignore-placement": true
+    },
+    paint: {
+      "text-halo-color": "rgba(255,255,255,0.75)",
+      "text-halo-width": 2,
+      "text-halo-blur": 1,
+      "text-color": "#000"
+    }
+  }
+];
+
+// src/components/Draw/index.tsx
+var Draw = (props) => {
+  const [ctx] = useMapContext();
+  if (ctx.isMapLibre && props.lib.constants?.classes) {
+    Object.assign(props.lib.constants.classes, {
+      CANVAS: "maplibregl-canvas",
+      CONTROL_BASE: "maplibregl-ctrl",
+      CONTROL_PREFIX: "maplibregl-ctrl-",
+      CONTROL_GROUP: "maplibregl-ctrl-group",
+      ATTRIBUTION: "maplibregl-ctrl-attrib"
+    });
+  }
+  const draw = new props.lib({
+    styles: [...props.lib.lib.theme, ...drawingStyles_default],
+    modes: {
+      ...props.lib.modes,
+      draw_point: point_default(props.lib),
+      draw_line_string: line_string_default(props.lib),
+      draw_polygon: polygon_default(props.lib),
+      multi_point: multi_point_default,
+      radius: radius_default(props.lib),
+      rectangle: rectangle_default(props.lib),
+      rectangle_assisted: rectangle_assisted_default
+    },
+    userProperties: {
+      showLength: props.showLength || false,
+      showArea: props.showArea || false
+    },
+    ...props.options
+  });
+  ctx.map.addControl(draw, props.position || "top-right");
+  props.getInstance && props.getInstance(draw);
+  const eventList = {};
+  drawEvents.forEach((item) => {
+    if (props[item]) {
+      const event = `draw.${item.slice(2).toLowerCase()}`;
+      const fn = (evt) => props[item](evt);
+      eventList[event] = fn;
+      ctx.map.on(event, fn);
+    }
+  });
+  onCleanup13(() => {
+    Object.keys(eventList).forEach(
+      (event) => ctx.map.off(event, eventList[event])
+    );
+    ctx.map?.removeControl(draw);
+  });
+  return null;
+};
+
+// src/components/DeckOverlay/index.tsx
+import { createEffect as createEffect13 } from "solid-js";
+var DeckOverlay = (props) => {
+  const [ctx] = useMapContext();
+  let overlay;
+  const control = () => {
+    if (!overlay) overlay = new props.overlay(props.props || {});
+    return overlay;
+  };
+  useControlPosition(control);
+  createEffect13(() => overlay?.setProps(props.props || {}));
+  return null;
+};
+export {
+  Atmosphere,
+  Camera,
+  Control,
+  DeckOverlay,
+  Draw,
+  MGL_Image as Image,
+  Layer,
+  Layer3D,
+  Light,
+  MapProvider,
+  Marker,
+  Popup,
+  Source,
+  Terrain,
+  MapGL as default,
+  patternList,
+  useMapContext,
+  useScene,
+  useSourceId
+};