solid-map-gl 2.1.0 → 2.2.0

package/README.md

@@ -5,7 +5,7 @@
 [![CI](https://img.shields.io/github/actions/workflow/status/GIShub4/solid-map-gl/ci.yml?branch=main&label=CI)](https://github.com/GIShub4/solid-map-gl/actions/workflows/ci.yml)
 [![codecov](https://img.shields.io/codecov/c/github/GIShub4/solid-map-gl)](https://codecov.io/gh/GIShub4/solid-map-gl)
 [![npm](https://img.shields.io/npm/v/solid-map-gl)](https://www.npmjs.com/package/solid-map-gl)
-[![downloads](https://img.shields.io/npm/dt/solid-map-gl)](https://www.npmjs.com/package/solid-map-gl)
+[![downloads](https://img.shields.io/npm/d18m/solid-map-gl)](https://www.npmjs.com/package/solid-map-gl)
 [![licence](https://img.shields.io/npm/l/solid-map-gl?color=blue)](LICENSE/)
 
 [SolidJS](https://www.solidjs.com/) Component Library for [Mapbox GL JS](https://github.com/mapbox/mapbox-gl-js) and [MapLibre GL.](https://maplibre.org/projects/maplibre-gl-js/) Both libraries render interactive maps from vector tiles and Map styles using WebGL. This project is intended to be as close as possible to the [Mapbox GL JS API.](https://docs.mapbox.com/mapbox-gl-js/api/)

package/dist/index.d.ts

@@ -1,6 +1,76 @@
 import { Component, JSX, ParentComponent, VoidComponent } from 'solid-js';
 import { MapMouseEvent, MapTouchEvent, MapWheelEvent, MapDataEvent, MapBoxZoomEvent, LngLatLike, LngLatBounds, PaddingOptions, MapboxOptions, StyleSpecification, SourceSpecification, CustomLayerInterface, FilterSpecification, FogSpecification, NavigationControlOptions, ScaleControlOptions, AttributionControlOptions, FullscreenControlOptions, GeolocateControlOptions, MarkerOptions, PopupOptions, StyleImageInterface, Map as Map$1, LightSpecification } from 'mapbox-gl';
 
+/** Any object shaped enough like `mapboxgl.Map`/`maplibregl.Map` for the functions in this module —
+ * kept loose (not the real `mapboxgl.Map` type) so this file has no hard dependency on either
+ * library's types. */
+type SettleableMap = {
+    areTilesLoaded(): boolean;
+    triggerRepaint(): void;
+    once(event: "idle", cb: () => void): unknown;
+    style?: {
+        hasTransitions?: () => boolean;
+    };
+};
+type SettleOptions = {
+    /** Max time (ms) to keep polling `areTilesLoaded()` before giving up and moving on anyway.
+     * Default 10000. */
+    timeout?: number;
+    /** Extra flat delay (ms) to outlast a `raster-fade-duration` cross-fade still in flight after
+     * tiles report loaded — there's no public event for "the fade finished", and the internal
+     * tracking (`hasActiveFadeTransition`) doesn't reliably cover imported style fragments (e.g.
+     * Standard/Standard Satellite). Default 400 (mapbox-gl's own `raster-fade-duration` default is
+     * 300). Set to 0 to skip this step entirely. */
+    fadeMargin?: number;
+};
+/** The actual "is this map done, visually" check: polls `areTilesLoaded()`, confirms a real paint
+ * via two animation frames, then (unless `fadeMargin` is 0) waits out any raster-fade cross-fade
+ * still in flight. Call this from inside your own `map.once('idle', ...)` — it doesn't listen for
+ * 'idle' itself, since 'idle' can otherwise fire while raster tiles are still fetching, mid
+ * GPU-upload, or still cross-fading in, none of which 'idle' itself waits out. Use
+ * `waitForIdleAndSettle` for the common case of "wait for the next idle, then this". */
+declare function settleAfterIdle(map: SettleableMap, options?: SettleOptions): Promise<void>;
+/** Waits for the map's next 'idle' event, then `settleAfterIdle`. The convenience entry point for
+ * off-screen/headless capture: call your own `jumpTo`/`fitBounds`/`setData` first, then `await` this
+ * before reading the canvas. */
+declare function waitForIdleAndSettle(map: SettleableMap, options?: SettleOptions): Promise<void>;
+/** Zeros `raster-fade-duration` on every layer that supports it, so newly-loaded raster tiles
+ * appear at full opacity immediately instead of cross-fading in over mapbox-gl's default 300ms —
+ * that fade is a paint-time opacity animation, invisible to `areTilesLoaded()`/`isSourceLoaded()`,
+ * so a capture taken right on load/idle can otherwise catch tiles still visibly fading in. Tries
+ * every layer rather than filtering to `type === "raster"`: some styles (e.g. Mapbox's
+ * Standard/Standard Satellite family) compose their base imagery in ways that don't always surface
+ * as a plain `"raster"`-typed layer in `getStyle().layers`, so filtering by type risked silently
+ * missing the actual imagery layer — `setPaintProperty` throwing for a layer type that doesn't
+ * support this property is caught and ignored instead. */
+declare function disableRasterFade(map: {
+    getStyle(): {
+        layers?: {
+            id: string;
+        }[];
+    } | undefined;
+    setPaintProperty(id: string, name: string, value: unknown): void;
+}): void;
+
+/** Handed to `<MapGL offscreen>`'s `onCapturerReady` callback. */
+type MapCapturer = {
+    /** The raw mapboxgl.Map/maplibregl.Map instance — for anything not already covered by
+     * `<Source>`/`<Layer>` children, e.g. reading back computed values. Camera/data changes are
+     * still made the normal declarative way, via `<MapGL>`'s own `viewport` prop and `<Source>`'s
+     * `data` prop. */
+    map: any;
+    /** Waits for the map's next 'idle', then for every tile to be genuinely loaded, painted, and (if
+     * applicable) done cross-fading in — see `waitForIdleAndSettle`. Call this after changing
+     * `viewport`/`data` props. */
+    waitUntilSettled(): Promise<void>;
+    /** `map.getCanvas().toDataURL(type, quality)`. Call after `waitUntilSettled()`, or use
+     * `captureWhenSettled()` to do both in one call. The result can be handed to any PDF/document
+     * library — this doesn't depend on or assume one. */
+    capture(type?: string, quality?: number): string;
+    /** `await waitUntilSettled()` then `capture()`, in one call. */
+    captureWhenSettled(type?: string, quality?: number): Promise<string>;
+};
+
 type mapEventTypes = {
     onMouseDown?: (event: MapMouseEvent) => void;
     onMouseUp?: (event: MapMouseEvent) => void;
@@ -196,6 +266,40 @@ type Props$b = {
     onViewportChange?: (viewport: Viewport) => void;
     /** Event listener for User Interaction */
     onUserInteraction?: (user: boolean) => void;
+    /** Called once every currently-required tile has actually finished loading *and* rendering after
+     * an 'idle' event — unlike 'onIdle' itself, which can fire while raster tiles are still
+     * fetching, mid GPU-upload, or still cross-fading in via `raster-fade-duration`. Re-fires after
+     * every idle, not just the initial load. */
+    onTilesLoaded?: () => void;
+    /** Max time (ms) to keep polling `areTilesLoaded()` after idle before giving up and moving on
+     * anyway, so a permanently-erroring tile can't block `onTilesLoaded` forever. Default 10000. */
+    tilesLoadedTimeout?: number;
+    /** Extra flat delay (ms) `onTilesLoaded` waits after tiles report loaded, to outlast any
+     * `raster-fade-duration` cross-fade still in flight — mapbox-gl-js exposes no public event for
+     * "the fade finished", and its own internal transition tracking doesn't reliably cover imported
+     * style fragments (e.g. Mapbox's Standard/Standard Satellite styles), so a flat margin is the
+     * only fully reliable option. Default 400 (mapbox-gl's own `raster-fade-duration` default is
+     * 300). Set to 0 to disable and get the old, faster-but-less-certain behavior. */
+    tilesLoadedFadeMargin?: number;
+    /** Renders the map off-screen (`position: fixed`, far outside the viewport) instead of filling
+     * its normal container, for capturing map images (e.g. PDF export) without showing the map to
+     * the user — an off-screen element has no layout to size itself against, so a width/height is
+     * required. `<Source>`/`<Layer>` children work exactly as they do on a normal `<MapGL>`, since
+     * they only ever read the map off context, never the DOM it's rendered into. */
+    offscreen?: {
+        width: number;
+        height: number;
+        /** Zero every layer's `raster-fade-duration` once the map loads — see `disableRasterFade`.
+         * Default `true`. */
+        disableRasterFade?: boolean;
+    };
+    /** Called once, after the map loads, with a capturer for grabbing the canvas as an image — only
+     * meaningful together with `offscreen`. Change `viewport`/`<Source>`'s `data` the normal
+     * declarative way, then call `capturer.captureWhenSettled()`, which waits for the map to fully
+     * settle (see `onTilesLoaded`, reusing this same `tilesLoadedTimeout`/`tilesLoadedFadeMargin`)
+     * before reading the canvas. The result (a data URL) can be handed to any PDF/document library —
+     * this doesn't depend on or assume one. */
+    onCapturerReady?: (capturer: MapCapturer) => void;
     /** Displays Map Tile Borders */
     showTileBoundaries?: boolean;
     /** Displays Wireframe if Terrain is visible */
@@ -270,6 +374,28 @@ type Props$a = {
 declare const Source: Component<Props$a>;
 
 type FlatLayerStyle = Record<string, any>;
+type PulseConfig = {
+    /** The paint property to animate, e.g. `"icon-halo-width"`, `"icon-opacity"`, or a
+     *  `*-color` property (e.g. `"icon-halo-color"`) to fade/shift a color instead of a number.
+     *  Default `"icon-halo-width"` — override for anything other than a symbol layer's halo
+     *  (e.g. `"circle-radius"`/`"circle-opacity"` on a circle layer). */
+    property?: string;
+    /** Start value — a number for a plain paint property, or any CSS color string (hex, named,
+     *  rgb/rgba, a Tailwind name, ...) when animating a `*-color` property. Default `0`. */
+    from?: number | string;
+    /** Default `8`. */
+    to?: number | string;
+    /** Full cycle length, in ms. Default `1500`. */
+    duration?: number;
+    /** - `"out"` (default): a one-directional ease-out ramp from `from` to `to`, holding at `to`
+     *    for the last quarter of the cycle before resetting — Tailwind's `animate-ping` shape
+     *    (e.g. a ring that grows outward and fades, then disappears until the next cycle). The
+     *    most common "pulsing dot" look.
+     *  - `"in"`: the mirror of `"out"` — ramps from `to` down to `from`, holding at `from`.
+     *  - `"in-out"`: smooth back-and-forth between `from` and `to`, forever (sine-eased) — e.g. a
+     *    halo that grows and shrinks continuously, with no reset. */
+    waveform?: "in-out" | "out" | "in";
+};
 type Props$9 = {
     id?: string;
     /** A string that uniquely identifies the layer. If not provided, a unique ID will be generated. */
@@ -294,6 +420,15 @@ type Props$9 = {
         state: Record<string, any>;
     };
     /** An object that specifies the state of a feature in the layer. The object consists of an ID (either a number or a string) and an object containing the state. */
+    /** Continuously animates one paint property via `setPaintProperty` every animation frame —
+     *  e.g. a growing/fading `icon-halo-width`/`icon-halo-color` for a "pulsing dot" marker. Every
+     *  field defaults (see `PulseConfig`), so `pulse` alone or `pulse={{}}` already pulses a
+     *  symbol layer's halo — override only what you need to customize. Pass an array to drive
+     *  several properties at once (one shared `requestAnimationFrame` loop), e.g. `icon-halo-width`
+     *  and `icon-opacity` together for a combined ping. Driven by real paint properties (not a
+     *  swapped-out image), so it composes with any other paint value, including data-driven
+     *  expressions on other properties of the same layer. */
+    pulse?: boolean | PulseConfig | PulseConfig[];
     children?: any;
 } & layerEventTypes;
 declare const Layer: Component<Props$9>;
@@ -393,8 +528,35 @@ type Props$5 = {
 };
 declare const Popup: Component<Props$5>;
 
-type StyleImageMetadata = NonNullable<Parameters<Map$1['addImage']>[2]>;
+type SDFOptions = {
+    /** Pixels of gradient falloff encoded around each edge. Needs matching empty margin
+     *  around the source art (see `sdfPadding`) or the field clips at the bitmap border. */
+    radius?: number;
+    /** Where along the gradient (0-1) the shape's "true" edge sits; matches mapbox's own
+     *  glyph default. */
+    cutoff?: number;
+};
+type PixelData = {
+    width: number;
+    height: number;
+    data: Uint8Array | Uint8ClampedArray;
+};
+declare function toSDF(imageData: PixelData, { radius, cutoff }?: SDFOptions): PixelData;
+
+type Pattern = {
+    size: number;
+    path: string;
+    fill?: boolean;
+};
+declare const PATTERN: Record<string, Pattern>;
 declare const patternList: string[];
+type PatternName = keyof typeof PATTERN;
+declare const SYMBOL: Record<string, string>;
+declare const symbolList: string[];
+type SymbolName = keyof typeof SYMBOL;
+
+type StyleImageMetadata = NonNullable<Parameters<Map$1['addImage']>[2]>;
+
 type Color = `#${string}` | `rgb(${number}, ${number}, ${number})` | `rgba(${number}, ${number}, ${number}, ${number})` | `hsl(${number}, ${number}%, ${number}%)` | `hsla(${number}, ${number}%, ${number}%, ${number})`;
 type Props$4 = {
     id: string;
@@ -412,11 +574,22 @@ type Props$4 = {
     };
     /**  The options for the image */
     pattern?: {
-        type: string;
+        type: PatternName | (string & {});
         color: Color;
         background: Color;
-        lineWith: number;
+        lineWidth: number;
     };
+    /** The pattern to be used for the image component. */
+    /** A predefined icon shape (see `symbolList`, e.g. `"triangle"`, `"hexagon"`), full custom
+     *  SVG markup, or a raw SVG path `d` string. Resolved the same way `source` is — including
+     *  `sdf` and `options.fill`/`options.stroke` — so it's just a convenient way to pick a
+     *  built-in shape instead of writing the markup yourself. Ignored if `source` is set. */
+    symbol?: SymbolName | (string & {});
+    /** Convert the rasterized source into a real signed-distance-field bitmap (not just
+     *  tagged with `sdf: true`), so `icon-color`/`icon-halo-color`/`icon-halo-width`/
+     *  `icon-halo-blur` can recolor and outline it crisply from layer paint properties.
+     *  Only applies to `source`/`symbol`, not `pattern`. */
+    sdf?: boolean | SDFOptions;
 };
 declare const MGL_Image: VoidComponent<Props$4>;
 
@@ -503,4 +676,4 @@ type Props = {
 /** Adds a deck.gl overlay control to the map, forwarding `props` reactively via `setProps`. */
 declare const DeckOverlay: VoidComponent<Props>;
 
-export { Atmosphere, Camera, type Color, Control, DeckOverlay, Draw, MGL_Image as Image, Layer, Layer3D, Light, type MapLibreSky, MapProvider, Marker, Popup, Source, Terrain, type Viewport, MapGL as default, patternList, useMapContext, useScene, useSourceId };
+export { Atmosphere, Camera, type Color, Control, DeckOverlay, Draw, MGL_Image as Image, Layer, Layer3D, Light, type MapCapturer, type MapLibreSky, MapProvider, Marker, type PatternName, type PixelData, Popup, type SDFOptions, type SettleOptions, type SettleableMap, Source, type SymbolName, Terrain, type Viewport, MapGL as default, disableRasterFade, patternList, settleAfterIdle, symbolList, toSDF, useMapContext, useScene, useSourceId, waitForIdleAndSettle };

package/dist/index.js

@@ -1,11 +1,11 @@
 import { template, createComponent, isServer, use, insert, memo, effect, setAttribute, className, classList, style } from 'solid-js/web';
 import { createContext, useContext, createEffect, createSignal, onMount, on, onCleanup, createUniqueId, createMemo, splitProps, untrack } from 'solid-js';
 import { createStore } from 'solid-js/store';
-import we from '@turf/length';
-import oo from '@turf/area';
-import no from '@turf/midpoint';
+import Ue from '@turf/length';
+import Eo from '@turf/area';
+import Po from '@turf/midpoint';
 import { centerOfMass } from '@turf/center-of-mass';
 
-var te={map:null,mapLib:null,isMapLibre:false,constants:{},themeVersion:0},oe=createContext([te]),v=()=>useContext(oe),Z=e=>{let[t,o]=createStore({...te});return e.map&&o("map",e.map),e.mapLib&&o("mapLib",e.mapLib),o("isMapLibre",!!e.isMapLibre),o("constants",e.constants||{}),o("themeVersion",e.themeVersion||0),createEffect(()=>o("constants",e.constants||{})),createEffect(()=>o("themeVersion",e.themeVersion||0)),createComponent(oe.Provider,{value:[t],get children(){return e.children}})};var ne=["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"],re=["onMouseDown","onMouseUp","onMouseOver","onMouseOut","onMouseMove","onMouseEnter","onMouseLeave","onClick","onDblClick","onContextMenu","onTouchStart","onTouchEnd","onTouchCancel"],ae=["onCreate","onDelete","onCombine","onUncombine","onUpdate","onSelectionchange","onModechange","onRender","onActionable"];var x="mapbox://styles/mapbox",_="https://raw.githubusercontent.com/",M="https://raw.githubusercontent.com/GIShub4/map-styles/main/",G="https://assets.vector.hereapi.com/styles/",ie={mb:{standard:`${x}/standard`,light:`${x}/light-v11`,dark:`${x}/dark-v11`,street:`${x}/streets-v12`,outdoor:`${x}/outdoors-v12`,sat:`${x}/satellite-v9`,sat_street:`${x}/satellite-streets-v12`,nav_base:`${x}/navigation-guidance-day-v4`,nav_base_night:`${x}/navigation-guidance-night-v4`,nav:`${x}/navigation-day-v1`,nav_night:`${x}/navigation-night-v1`,basic:`${x}/cjf4m44iw0uza2spb3q0a7s41`,monochrome:`${x}/cjv6rzz4j3m4b1fqcchuxclhb`,leshine:`${x}/cjcunv5ae262f2sm9tfwg8i0w`,icecream:`${x}/cj7t3i5yj0unt2rmt3y4b5e32`,cali:`${x}/cjerxnqt3cgvp2rmyuxbeqme7`,northstar:`${x}/cj44mfrt20f082snokim4ungi`,mineral:`${x}/cjtep62gq54l21frr1whf27ak`,moonlight:`${x}/cj3kbeqzo00022smj7akz3o1e`,frank:`${x}-map-design/ckshxkppe0gge18nz20i0nrwq`,minimo:`${x}-map-design/cksjc2nsq1bg117pnekb655h1`,decimal:`${x}-map-design/ck4014y110wt61ctt07egsel6`,stand:`${x}-map-design/ckr0svm3922ki18qntevm857n`,blueprint:`${x}-map-design/cks97e1e37nsd17nzg7p0308g`,bubble:`${x}-map-design/cksysy2nl62zp17quosctdtcc`,pencil:`${x}-map-design/cks9iema71es417mlrft4go2k`,swiss_ski:`${_}mapbox/mapbox-gl-swiss-ski-style/master/cij1zoclj002y8rkkdjl69psd.json`,vintage:`${_}mapbox/mapbox-gl-vintage-style/master/cif5p01n202nisaktvljx9mv3.json`,whaam:`${_}mapbox/mapbox-gl-whaam-style/master/cii8323c8004w0nlvtss3dbm2.json`,neon:`${_}NatEvatt/awesome-mapbox-gl-styles/master/styles/Neon/style.json`,camoflauge:`${_}jingsam/mapbox-gl-styles/master/Camouflage.json`,emerald:`${_}jingsam/mapbox-gl-styles/master/Emerald.json`,runner:`${_}jingsam/mapbox-gl-styles/master/Runner.json`,x_ray:`${_}jingsam/mapbox-gl-styles/master/X-ray.json`},here:{base:`${G}berlin/base/mapbox/tilezen?apikey={apikey}`,day:`${G}berlin/day/mapbox/tilezen?apikey={apikey}`,night:`${G}berlin/night/mapbox/tilezen?apikey={apikey}`},esri:{blueprint:`${M}esri:blueprint.json`,charted_territory:`${M}esri:charted-territory.json`,colored_pencil:`${M}esri:colored-pencil.json`,community:`${M}esri:community.json`,mid_century:`${M}esri:mid-century.json`,modern_antique:`${M}esri:modern-antique.json`,nat_geo:`${M}esri:national-geographic.json`,newspaper:`${M}esri:newspaper.json`,open_street_map:`${M}esri:open-street-map.json`,light_gray_canvas:`${M}esri:light-gray-canvas.json`,dark_gray_canvas:`${M}esri:dark-gray-canvas.json`,human_geo_light:`${M}esri:human-geography-light.json`,human_geo_dark:`${M}esri:human-geography-dark.json`,world_navigation:`${M}esri:world-navigation.json`,world_street:`${M}esri:world-street.json`,world_street_night:`${M}esri:world-street-night.json`,world_terrain:`${M}esri:world-terrain.json`,world_terrain_hybrid:`${M}esri:world-terrain-hybrid.json`,world_topographic:`${M}esri:world-topographic.json`,chromium:`${M}esri:chromium.json`,dreamcatcher:`${M}esri:dreamcatcher.json`,seahaven:`${M}esri:seahaven.json`,sangria:`${M}esri:sangria.json`,mercurial:`${M}esri:mercurial.json`,imagery:`${M}esri:imagery.json`,imagery_hybrid:`${M}esri:imagery-hybrid.json`,firefly:`${M}esri:firefly.json`,firefly_hybrid:`${M}esri:firefly-hybrid.json`,oceans:`${M}esri:oceans.json`}},N="https://{s}.basemaps.cartocdn.com/rastertiles/",A="https://stamen-tiles-{s}.a.ssl.fastly.net/",k="https://{s}.tile.thunderforest.com/",B={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:`${N}voyager_labels_under/{z}/{x}/{y}{r}.png`,positron:`${N}light_all/{z}/{x}/{y}{r}.png`,dark:`${N}dark_all/{z}/{x}/{y}{r}.png`,_copy:'<a href="https://carto.com/attribution" target="_blank">&copy; Carto</a>'},stamen:{toner:`${A}toner/{z}/{x}/{y}{r}.png`,toner_lite:`${A}toner-lite/{z}/{x}/{y}{r}.png`,watercolor:`${A}watercolor/{z}/{x}/{y}.png`,terrain:`${A}terrain/{z}/{x}/{y}{r}.png`,_copy:'<a href="https://stamen.com/privacy-policy" target="_blank">&copy; Stamen Design</a>'},tf:{cycle:`${k}cycle/{z}/{x}/{y}{r}.png?apikey={apikey}`,trans:`${k}transport/{z}/{x}/{y}{r}.png?apikey={apikey}`,trans_dark:`${k}transport-dark/{z}/{x}/{y}{r}.png?apikey={apikey}`,landscape:`${k}landscape/{z}/{x}/{y}{r}.png?apikey={apikey}`,outdoors:`${k}outdoors/{z}/{x}/{y}{r}.png?apikey={apikey}`,neighbourhood:`${k}neighbourhood/{z}/{x}/{y}{r}.png?apikey={apikey}`,spinal:`${k}spinal-map/{z}/{x}/{y}{r}.png?apikey={apikey}`,pioneer:`${k}pioneer/{z}/{x}/{y}{r}.png?apikey={apikey}`,atlas:`${k}atlas/{z}/{x}/{y}{r}.png?apikey={apikey}`,mobile:`${k}mobile-atlas/{z}/{x}/{y}{r}.png?apikey={apikey}`,_copy:'<a href="https://thunderforest.com/privacy" target="_blank">&copy; Thunderforest</a>'}};var je=template("<div style=width:100%;height:100%>"),Ue=template("<style>.overlay{position:relative;width:100%;height:100%;pointer-events:none}:where(.overlay>*){pointer-events:auto}"),Ze=template("<div class=overlay>"),Xe=e=>{let t,o,n,r,i,a=false,[c,p]=createSignal(null),[s,f]=createSignal(0),[g,w]=createSignal(!isServer&&(window.matchMedia("(prefers-color-scheme: dark)").matches||document.body.classList.contains("dark"))),m=false,h=false,y=(l,d)=>(e.debug||e.debugEvents)&&console.debug("%c[MapGL]","color: #0ea5e9",l,d||""),L=(l,d)=>{let u=g()&&d?d:l;return (typeof u=="string"||u instanceof String)&&u?.split(":").reduce((b,E)=>b&&b[E],ie)?.replace("{apikey}",e.apikey||import.meta.env?.VITE_VECTOR_API_KEY)||u};onMount(async()=>{if(i=e.mapLib||await import('mapbox-gl'),i.Map||(i=window.maplibregl||window.mapboxgl),typeof i.supported=="function"&&!i.supported())throw new Error("Mapbox GL not supported");a=typeof i.Map?.prototype?.setConfigProperty!="function",y(`Map (v${i.version}) loading...`),t=new i.Map({accessToken:e.options?.accessToken||import.meta.env?.VITE_MAPBOX_ACCESS_TOKEN,interactive:e.options?.interactive||!!e.onViewportChange,...e.options,...e.viewport,projection:e.options?.projection,container:o,style:L(e.options?.style,e.darkStyle),fitBoundsOptions:{padding:e.viewport?.padding}}),t.debug=e.debug,t.debugEvents=e.debugEvents,t.sourceIdList=[],t.layerIdList=[],t.isMapLibre=a,ne.forEach(l=>{let d=e[l];if(d){let u=l.slice(2).toLowerCase();typeof d=="function"?t.on(u,b=>{setTimeout(()=>{b.clickOnLayer||(d(b),e.debugEvents&&y(`Map '${u}' event:`,b));},0);}):Object.keys(d).forEach(b=>{t.on(u,b,E=>{setTimeout(()=>{E.clickOnLayer||(d[b](E),e.debugEvents&&y(`Map '${u}' event on '${b}':`,E));},0);});});}}),t.once("load",()=>{p(t),y("Map loaded"),["mousedown","touchstart","wheel"].forEach(d=>t.on(d,u=>!u.rotate&&e.onUserInteraction?.(true))),["moveend","mouseup","touchend"].forEach(d=>t.on(d,u=>!u.rotate&&e.onUserInteraction?.(false)));let l=!isServer&&window.matchMedia("(prefers-color-scheme: dark)");l?.addEventListener("change",()=>{w(l.matches),f(d=>d+1),y("Set dark theme to:",l.matches?.toString());}),r=new MutationObserver(()=>{let d=document.documentElement.classList.contains("dark")||document.body.classList.contains("dark");w(d),f(u=>u+1),y("Set theme to:",d);}),r.observe(document.documentElement,{attributes:true}),r.observe(document.body,{attributes:true}),e.disableResize||(n=new ResizeObserver(()=>{setTimeout(()=>{t?.resize();},0),y("Map resized");}),n.observe(o)),t.on("move",d=>{let u={...e.viewport,id:e.id,point:{x:d.originalEvent?.x,y:d.originalEvent?.y},center:e.viewport?.center?.lat?t.getCenter():[t.getCenter().lng,t.getCenter().lat],zoom:t.getZoom(),pitch:t.getPitch(),bearing:t.getBearing(),inTransit:true,bounds:null};!d.viewport&&e.onViewportChange&&(h=true,e.onViewportChange(u));}),t.on("moveend",d=>{if(m||d.rotate||!e.onViewportChange)return;let u={...e.viewport,inTransit:false};h=true,e.onViewportChange(u);});});}),createEffect(on(()=>e.viewport,l=>{if(e.id!==l?.id)return;if(h){h=false;return}let d={...l,...l.bounds?t.cameraForBounds(l.bounds,{bearing:l?.bearing,pitch:l?.pitch,padding:l?.padding}):null};m=true,t.stop(),m=false,t[e.transitionType||"flyTo"](d),y(`Update Viewport (${e.transitionType||"flyTo"}):`,d);},{defer:true})),createEffect(()=>{let l=c();if(typeof l?.setConfigProperty!="function"){l&&e.config&&Object.keys(e.config).length&&y("Config prop is set but this map library has no setConfigProperty (Mapbox Standard Style only) \u2014 skipping");return}for(let d in e.config){if(!d||d==="id")continue;let u=e.config?.id||"basemap",b=e.config[d];l.setConfigProperty(u,d,b),y(`Set Config (${u}:${d}) to:`,b);}}),createEffect(()=>{let l=e.options?.projection;!t||!l||(t.setProjection(l),y("Set Projection to:",l));}),createEffect(()=>{let l=e.cursorStyle;!t||!l||(t.getCanvas().style.cursor=l,y("Set Cursor to:",l));});let C=(l,d)=>(d.forEach(u=>{let b=l.findIndex(E=>u.metadata.smg.beforeType?E.type===u.metadata.smg.beforeType:E.id===u.metadata.smg.beforeId);l=b===-1?[...l,u]:[...l.slice(0,b),u,...l.slice(b)];}),l);return createEffect(l=>{let d=L(e.options?.style,e.darkStyle);if(t?.isStyleLoaded()&&l!==d){let u=t.getStyle(),b=u.layers.filter(S=>t.layerIdList.includes(S.id)),E=Object.keys(u.sources).filter(S=>t.sourceIdList.includes(S)).reduce((S,Q)=>({...S,[Q]:u.sources[Q]}),{}),U=e.shouldDiffStyle?e.shouldDiffStyle(l,d):true;t.setStyle(d,U?void 0:{diff:false}),t.once("styledata",()=>{if(!b)return;let S=t.getStyle();t.setStyle({...S,sources:{...S.sources,...E},layers:C(S.layers,b),fog:u.fog,terrain:u.terrain,light:u.light}),y("Set Mapstyle to:",d);});}return d},e.options?.style),["showTileBoundaries","showTerrainWireframe","showCollisionBoxes","showPadding","showOverdrawInspector"].forEach(l=>{createEffect(()=>{let d=e[l];!t||!d||(t[l]=d,y(`Set ${l} to:`,d));});}),onCleanup(()=>{n?.disconnect(),r?.disconnect(),t?.remove(),y("Map removed");}),(()=>{var l=je(),d=o;return typeof d=="function"?use(d,l):o=l,insert(l,(()=>{var u=memo(()=>!!c());return ()=>u()&&createComponent(Z,{get map(){return c()},mapLib:i,isMapLibre:a,get constants(){return e.constants},get themeVersion(){return s()},get children(){return [Ue(),(()=>{var b=Ze();return insert(b,()=>e.children),b})()]}})})()),effect(u=>{var b=e.id,E=e?.class,U=e?.classList,S={...e.style};return b!==u.e&&setAttribute(l,"id",u.e=b),E!==u.t&&className(l,u.t=E),u.a=classList(l,U,u.a),u.o=style(l,S,u.o),u},{e:void 0,t:void 0,a:void 0,o:void 0}),l})()};var le=createContext(),D=()=>useContext(le),Ke=e=>{let[t]=v();e.id??=createUniqueId();let o=(i,a)=>{t.map.debug&&console.debug("%c[MapGL]","color: #ec4899",i,a||"");},n=()=>e.source,r=i=>{let a=i?.split(":").reduce((p,s)=>p&&p[s],B),c=a?{...n(),url:"",tiles:[a.replace("{apikey}",n().apikey||import.meta.env?.VITE_RASTER_API_KEY).replace("{r}",window.devicePixelRatio>1?"@2x":"")],attribution:B[i.split(":")[0]]._copy}:n();return c.tiles&&(c.tiles=["a","b","c"].map(p=>c.tiles[0].replace("{s}",p))),c};switch(t.map.addSource(e.id,r(n().url)),t.map.sourceIdList.push(e.id),o("Add Source:",e.id),n().type){case "geojson":createEffect(()=>{let i=n().data;t.map.getSource(e.id).setData(i||{}),o("Update GeoJSON Data:",e.id);});break;case "image":createEffect(()=>{let i=n().url,a=n().coordinates;t.map.getSource(e.id).updateImage(i,a),o("Update Image Data:",e.id);});break;case "vector":createEffect(()=>{let i=n().url,a=n().tiles,c=t.map.getSource(e.id);i?c.setUrl(i):c.setTiles(a),o("Update Vector Data:",e.id);});break;case "raster":createEffect(()=>{let i=r(n().url),a=t.map.getSource(e.id);i.url?a.setUrl(i.url):a.setTiles(i.tiles),o("Update Raster Data:",e.id);});break}return onCleanup(()=>{t.map?.getStyle().layers.forEach(i=>i.source===e.id&&t.map.removeLayer(i.id)),t.map?.getSource(e.id)&&t.map?.removeSource(e.id),o("Remove Source:",e.id);}),createComponent(le.Provider,{get value(){return e.id},get children(){return e.children}})};var de=["id","type","filter","source","source-layer","minzoom","metadata","maxzoom","paint","layout"],ue=["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"];var T,me=e=>(T??=document.body.appendChild(document.createElement("div")),T.style.cssText="position:absolute;visibility:hidden;pointer-events:none",T.style.color="",T.style.color=e,T.style.color?getComputedStyle(T).color:void 0),Qe=/^[a-z]+-\d{2,3}$/,et=/^(rgb|rgba|hsl|hsla)\(/i,tt=/^[a-z-]+\(/i,z,ot=/^bg-[a-z]+-\d{2,3}(?:\s+dark:bg-[a-z]+-\d{2,3})?$/,nt=e=>{z??=document.body.appendChild(document.createElement("div")),z.style.cssText="position:absolute;visibility:hidden;pointer-events:none",z.className=e;let t=getComputedStyle(z).backgroundColor;return z.className="",t&&t!=="rgba(0, 0, 0, 0)"?t:e},pe=e=>{if(ot.test(e))return nt(e);if(Qe.test(e)){let t=getComputedStyle(document.documentElement).getPropertyValue(`--color-${e}`).trim();return t&&me(t)||e}return tt.test(e)&&!et.test(e)&&me(e)||e};var ge=(e={},t={})=>[...new Set([...Object.keys(e),...Object.keys(t)])].reduce((n,r)=>{let i=e[r];return i!==t[r]&&n.push([r,i]),n},[]),q=(e,t)=>(e.startsWith(t)||e.startsWith("icon")||e.startsWith("text")?"":t+"-")+e.replace(/[A-Z]/g,o=>"-"+o.toLowerCase()),st=(e,t)=>e.endsWith("color")&&typeof t=="string"?pe(t):t,ct=/^@(.+)$/,W=(e,t,o,n)=>{if(typeof t!="string")return t;let r=t.match(ct);if(!r)return t;let i=o[r[1]];return i===void 0?(n(`Unknown constant "@${r[1]}" referenced by "${e}" \u2014 leaving unresolved`),t):i},H=(e,t={},o=()=>{})=>{if(!e)return;let n={},r={},i={},a=(c,p)=>st(c,W(c,p,t,o));return Object.entries(e).forEach(([c,p])=>{if(de.includes(c))i[c]=p;else {let s=q(c,e.type);ue.includes(s)?n[s]=W(s,p,t,o):r[s]=a(s,p);}}),e.paint&&Object.entries(e.paint).forEach(([c,p])=>{let s=q(c,e.type);r[s]=a(s,p);}),e.layout&&Object.entries(e.layout).forEach(([c,p])=>{let s=q(c,e.type);n[s]=W(s,p,t,o);}),{...i,paint:r,layout:n}},lt=e=>{let[t]=v(),o=e.sourceId||e.style?.source||D(),n=e.id||e.customLayer?.id||createUniqueId(),r=(a,c)=>{(t.map.debug||t.map.debugEvents)&&console.debug("%c[MapGL]","color: #10b981",a,c||"");},i=createMemo(()=>e.beforeType?t.map.getStyle().layers.find(a=>a.type===e.beforeType)?.id:e.beforeId);return t.map.addLayer(e.customLayer||{...H(e.style,t.constants,r),id:n,source:o,...t.isMapLibre?{}:{slot:e.slot||""},metadata:{smg:{beforeType:e.beforeType,beforeId:e.beforeId}}},i()),t.map.layerIdList.push(n),e.customLayer&&t.map.fire("load"),r("Add Layer:",n),re.forEach(a=>{if(e[a]){let c=a.slice(2).toLowerCase();t.map.on(c,n,p=>{p.clickOnLayer=true,e[a](p),t.map.debugEvents&&r(`Layer '${c}' event on '${n}':`,p);});}}),createEffect(a=>{t.themeVersion;let c=H(e.style,t.constants,r);if(c!==a)return c.layout!==a?.layout&&ge(c.layout,a?.layout).forEach(([p,s])=>t.map.setLayoutProperty(n,p,s,{validate:false})),c.paint!==a?.paint&&ge(c.paint,a?.paint).forEach(([p,s])=>t.map.setPaintProperty(n,p,s,{validate:false})),(c.minzoom!==a?.minzoom||c.maxzoom!==a?.maxzoom)&&t.map.setLayerZoomRange(n,c.minzoom,c.maxzoom),c.filter!==a?.filter&&t.map.setFilter(n,c.filter,{validate:false}),r("Update Layer Style:",n),c},H(e.style,t.constants,r)),createEffect(a=>{if(e.visible!==a)return t.map.setLayoutProperty(n,"visibility",e.visible?"visible":"none",{validate:false}),r(`Update Visibility (${n}):`,e.visible.toString()),e.visible},e.visible),createEffect(a=>i()===a?a:(t.map.moveLayer(n,i()),r(`Update Layer Z-Index (${n}):`,i()),i()),i()),createEffect(async()=>{e.filter&&(!t.map.isStyleLoaded()&&await t.map.once("styledata"),t.map.setFilter(n,e.filter),r(`Update Filter (${n}):`,e.filter));}),createEffect(async()=>{!e.featureState||e.featureState.id===null||(!t.map.isStyleLoaded()&&await t.map.once("styledata"),t.map.removeFeatureState({source:o,sourceLayer:e.style["source-layer"]}),t.map.setFeatureState({source:o,sourceLayer:e.style["source-layer"],id:e.featureState.id},e.featureState.state));}),onCleanup(()=>t.map?.getLayer(n)&&t.map?.removeLayer(n)),e.children};var fe=createContext(),vt=()=>useContext(fe),Mt=e=>{let[t]=v(),[o,n]=createSignal(null);return onMount(async()=>{e.id=e.id||createUniqueId();let r=t.mapLib.MercatorCoordinate.fromLngLat([e.origin[0]||0,e.origin[1]||0],e.origin[2]||0),i=r.meterInMercatorCoordinateUnits(),{x:a,y:c,z:p}=r,s=null,f=null,g=null;e.babylon?(f=await import('@babylonjs/core'),s=f.Matrix.Compose(new f.Vector3(i,i,i),f.Quaternion.FromEulerAngles(Math.PI/2,0,0),new f.Vector3(a,c,p))):(g=await import('three'),s={translateX:a,translateY:c,translateZ:p,rotateX:Math.PI/2,rotateY:0,rotateZ:0,scale:i}),t.map.addLayer({id:e.id,type:"custom",renderingMode:"3d",onAdd(w,m){if(e.babylon){let h=new f.Engine(m,true,{useHighPrecisionMatrix:true},true);this.scene=new f.Scene(h),this.scene.autoClear=false,this.scene.preventDefaultOnPointerDown=false,this.scene.preventDefaultOnPointerUp=false;let y=new f.UniversalCamera("Camera",f.Vector3.Zero());y.mode=f.Camera.ORTHOGRAPHIC_CAMERA,y.inertia=0,this.scene.ambientColor=new f.Color3(1,1,1),e.defaultLight&&new f.HemisphericLight("Light",new f.Vector3(100,10,0),this.scene);}else this.camera=new g.Camera,this.scene=new g.Scene,e.defaultLight&&(this.light=new g.DirectionalLight(16777215),this.light.position.set(100,0,0).normalize(),this.scene.add(this.light)),this.renderer=new g.WebGLRenderer({canvas:w.getCanvas(),context:m,antialias:true}),this.renderer.autoClear=false;this.map=w,e.onAdd&&e.onAdd(this.scene,this.map,m),n(this.scene);},render(w,m){if(e.babylon){this.scene.activeCamera.freezeProjectionMatrix(s.multiply(f.Matrix.FromArray(m)));this.map.getPitch()*(Math.PI/180);this.map.getBearing()*(Math.PI/180);this.scene.render(false);}else {let h=new g.Matrix4().makeRotationAxis(new g.Vector3(1,0,0),s.rotateX),y=new g.Matrix4().makeRotationAxis(new g.Vector3(0,1,0),s.rotateY),L=new g.Matrix4().makeRotationAxis(new g.Vector3(0,0,1),s.rotateZ),C=new g.Matrix4().fromArray(m),l=new g.Matrix4().makeTranslation(s.translateX,s.translateY,s.translateZ).scale(new g.Vector3(s.scale,-s.scale,s.scale)).multiply(h).multiply(y).multiply(L);this.camera.projectionMatrix=C.multiply(l),this.renderer.resetState(),this.renderer.render(this.scene,this.camera);}e.onRender&&e.onRender(w,m),t.map.triggerRepaint();}},e.beforeId);}),onCleanup(()=>{t.map.getLayer(e.id)&&t.map.removeLayer(e.id);}),createComponent(fe.Provider,{value:o,get children(){return memo(()=>!!o())()&&e.children}})};var wt=e=>{let[t]=v();return createEffect(()=>{t.isMapLibre?t.map.setSky?.(e.style||{}):t.map.setFog(e.style||{});}),onCleanup(()=>{t.isMapLibre?t.map.getSky?.()&&t.map.setSky(null):t.map.getFog()&&t.map.setFog(null);}),null};var St=e=>{let[t]=v(),o=D();return !o&&!e?.source&&(o=createUniqueId(),t.map.addSource(o,{type:"raster-dem",url:t.isMapLibre?"https://demotiles.maplibre.org/terrain-tiles/tiles.json":"mapbox://mapbox.terrain-rgb",tileSize:t.isMapLibre?256:512,maxzoom:t.isMapLibre?void 0:14}),t.map.sourceIdList.push(o)),createEffect(()=>{t.map.setTerrain({exaggeration:e.exaggeration||1,source:e?.source||o});}),onCleanup(()=>t.map?.setTerrain(null)),null};var V=(e,t)=>{let[o]=v();createEffect(()=>{let n=e(),r=t?.();n&&(o.map.hasControl(n)&&o.map.removeControl(n),o.map.addControl(n,r));}),onCleanup(()=>{let n=e();n&&o.map.hasControl(n)&&o.map.removeControl(n);});};var Dt=e=>{let[t]=v(),[o,n]=splitProps(e,["position"]),[r,i]=createSignal(null),a=new Map([["navigation",t.mapLib.NavigationControl],["scale",t.mapLib.ScaleControl],["attribution",t.mapLib.AttributionControl],["geolocate",t.mapLib.GeolocateControl],["fullscreen",t.mapLib.FullscreenControl],["logo",t.mapLib.LogoControl],["terrain",t.mapLib.TerrainControl]]);return createEffect(()=>{untrack(()=>r()&&t.map.hasControl(r())&&t.map.removeControl(r())),i(n.custom||new(a.get(n.type||"navigation"))(n.options));}),V(r,()=>o.position),null};var Ft=e=>{if(!e.lngLat)throw new Error("Marker - lngLat is required");let[t,o,n]=splitProps(e,["lngLat","children","showPopup","draggable"],["popup","onOpen","onClose"]),[r]=v(),i=null,a=null,c=t.lngLat;return createEffect(()=>{r.map&&(a?.remove(),a=new r.mapLib.Popup({closeOnClick:false,focusAfterOpen:false,...o.popup}).on("open",()=>o.onOpen?.()).on("close",()=>o.onClose?.()),createEffect(()=>{t.children!==void 0&&(typeof t.children=="string"?a?.setHTML(t.children):a?.setDOMContent(t.children),i?.setPopup(a));}),createEffect(()=>t.showPopup!==a?.isOpen()&&i?.togglePopup()));}),createEffect(()=>{r.map&&(i?.remove(),i=new r.mapLib.Marker(n.options).on("dragstart",()=>n.onDragStart?.()).on("dragend",()=>n.onDragEnd?.()).on("drag",()=>n.onDrag?.(i?.getLngLat().toArray())).setPopup(a).setLngLat(c).addTo(r.map),createEffect(()=>t.showPopup!==a?.isOpen()&&i?.togglePopup()));}),createEffect(()=>i?.setLngLat(t.lngLat)),createEffect(()=>i?.setDraggable(t.draggable)),onCleanup(()=>i?.remove()),null};var Vt=e=>{if(!e.trackPointer&&!e.lngLat)throw new Error("Popup - lngLat or trackPointer is required");let[t,o]=splitProps(e,["lngLat","children","trackPointer"]),[n]=v(),r;return createEffect(()=>{n.map&&(r?.remove(),r=new n.mapLib.Popup({closeOnClick:false,focusAfterOpen:false,...o.options}).on("open",()=>o.onOpen?.()).on("close",()=>o.onClose?.()).addTo(n.map),createEffect(()=>t.trackPointer?r.trackPointer():r.setLngLat(t.lngLat)),createEffect(()=>typeof t.children=="string"?r.setHTML(t.children):r.setDOMContent(t.children)));}),onCleanup(()=>r?.remove()),null};var he={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}},Nt=Object.keys(he),Bt=e=>{let[t]=v(),[o,n]=createSignal({width:0,height:0}),r=null,i=(s,f)=>{t.map.debug&&console.debug("%c[MapGL]","color: #10b981",s,f||"");},a=()=>{!r||!t.map||t.map.hasImage(e.id)||(t.map.addImage(e.id,r.data,r.ops),i("Re-Add Image:",e.id));};t.map.on("style.load",a),onCleanup(()=>{t.map?.off("style.load",a),t.map?.hasImage(e.id)&&t.map?.removeImage(e.id),i("Remove Image:",e.id);}),createEffect(()=>{if(!e.id)throw new Error("Image - ID is required");if(!e.source&&!e.pattern)throw new Error("Image - Image or Pattern is required");let s=Math.max(1,Math.round(window.devicePixelRatio||2)),f=e.pattern?{pixelRatio:s,...e.options}:e.options;c(e.source||p(e.pattern,s),(g,w)=>{let m=w?{...f,pixelRatio:w}:f,{width:h,height:y}=g;t.map&&!t.map.hasImage(e.id)&&t.map.addImage(e.id,g,m),!e.pattern&&untrack(()=>h===o().width&&y===o().height)?(t.map.updateImage(e.id,g),t.map.triggerRepaint()):(t.map.removeImage(e.id),t.map.addImage(e.id,g,m)),n({width:h,height:y}),r={data:g,ops:m},i("Add Image:",e.id);});});let c=(s,f)=>{if(typeof s=="string"&&s?.trimStart().startsWith("<svg")&&(s=new DOMParser().parseFromString(s,"image/svg+xml").childNodes[0]),s instanceof SVGElement&&(e.options?.fill&&s.setAttribute("fill",e.options.fill),e.options?.stroke&&s.setAttribute("stroke",e.options.stroke),s=new XMLSerializer().serializeToString(s)),typeof s!="string")return f(s);t.map.loadImage(s,async(g,w)=>{if(g){typeof s=="string"&&s?.trimEnd().endsWith(".svg")&&(s=await(await fetch(s)).text(),s=new DOMParser().parseFromString(s,"image/svg+xml").childNodes[0],s.setAttribute("fill",e.options.fill),s.setAttribute("stroke",e.options.stroke),s.setAttribute("transform",e.options.transform),s=new XMLSerializer().serializeToString(s));let m=new Image;m.crossOrigin="Anonymous",m.onload=()=>{let h=Math.max(1,50/Math.min(m.width,m.height)),y=e.options?.pixelRatio??Math.max(1,Math.round(window.devicePixelRatio||1)),L=h*y,C=document.createElement("canvas");C.width=Math.round(m.width*L),C.height=Math.round(m.height*L);let l=C.getContext("2d");return l.imageSmoothingEnabled=true,l.drawImage(m,0,0,C.width,C.height),f(l.getImageData(0,0,C.width,C.height),y)},m.onerror=h=>console.error(`[MapGL] Image "${e.id}" failed to load:`,h),m.src=s.trimStart().startsWith("<svg")?"data:image/svg+xml;charset=utf-8,"+encodeURIComponent(s):s;}else return f(w)});},p=(s,f=2)=>{let g=he[s.type],w=g.size*f;return {width:w,height:w,data:new Uint8Array(w*w*4),onAdd:function(){let m=document.createElement("canvas");m.width=m.height=w,this.ctx=m.getContext("2d",{willReadFrequently:true}),this.ctx.scale(f,f);},render:function(){return this.ctx.fillStyle=s.background||"transparent",this.ctx.fillRect(0,0,g.size,g.size),this.ctx.strokeStyle=this.ctx.fillStyle=s.color||"black",this.ctx.lineWidth=s.lineWith||1,this.ctx.stroke(new Path2D(g.path)),g.fill&&this.ctx.fill(new Path2D(g.path)),this.data=this.ctx.getImageData(0,0,this.width,this.height).data,true}}};return null};var qt=(e,t,o)=>e.map((n,r)=>(1-o)*e[r]+o*t[r]),Wt=(e,t,o)=>{let n=e.map((i,a)=>e[a]*t[a]).reduce((i,a)=>i+a),r=Math.acos(n);return e.map((i,a)=>Math.sin((1-o)*r)/Math.sin(r)*e[a]+Math.sin(o*r)/Math.sin(r)*t[a])},Ht={in:e=>e*e,out:e=>1-(1-e)*(1-e),inOut:e=>e<.5?2*e*e:1-Math.pow(-2*e+2,2)/2},Jt=e=>{let[t]=v(),o=.1,n=false,[r,i]=createSignal(false);["mousedown","touchstart","wheel"].forEach(m=>t.map.on(m,h=>!h.rotate&&i(true))),["moveend","mouseup","touchend"].forEach(m=>t.map.on(m,h=>!h.rotate&&i(false)));let a=async([m,h,y],L)=>{let C=t.map.getFreeCameraOptions();C.position=t.mapLib.MercatorCoordinate.fromLngLat([m,h],y),C.lookAtPoint(L),t.map.setFreeCameraOptions(C);},c=()=>{e.translate&&window.requestAnimationFrame(c);let m=[e.translate.start,e.translate.end,e.translate.easing?Ht[e.translate.easing](o):o],h=e.translate.type==="line"?qt(...m):Wt(...m);a(h,e.translate.target),!e.translate.loop&&(o>1||o<0)&&(n=!n),o=n?o-.001:o+.001;};createEffect(()=>{e.translate&&window.requestAnimationFrame(c);});let p={duration:1e3,easing:m=>m},s=()=>{if(r())return;let{secPerRev:m=120,maxSpinZoom:h=5,slowSpinZoom:y=3}=e.rotateGlobe,L=t.map.getZoom();if(L>h)return;let C=360/m;L>y&&(C*=(h-L)/(h-y));let l=t.map.getCenter();l.lng=e.reverse?l.lng+C:l.lng-C,t.map.easeTo({center:l,...p},{rotate:true});},f=()=>{if(!e.rotateViewport||r()){t.map.stop();return}let m=e.rotateViewport,h=m?.secPerRev||60,y=e.reverse?t.map.getBearing()+360/h:t.map.getBearing()-360/h,L=m?.pitch||60,C=m?.around;t.map.easeTo({bearing:y,pitch:L,around:C,...p},{rotate:true});},g=()=>e.rotateGlobe?s():f();t.map.on("moveend",g).on("dragend",g);let w;return createEffect(()=>{e.rotateGlobe!=null&&(e.rotateGlobe?(w=t.map.getCenter(),s()):e.resetWhenStopped?t.map.stop().easeTo({center:w}):t.map.stop());}),createEffect(()=>{e.rotateViewport!=null&&(e.rotateViewport?f():e.resetWhenStopped?t.map.stop().resetNorthPitch():t.map.stop());}),onCleanup(()=>t.map.off("moveend",g).off("dragend",g)),e.children};var eo=e=>{let[t]=v();return createEffect(()=>t.map.setLight(e.style||{})),onCleanup(()=>t.map?.setLight(null)),null};var F={};F.onSetup=function(e){var t={};return t.count=e.count||0,t};F.onClick=function(e,t){var o=this.newFeature({type:"Feature",properties:{count:e.count},geometry:{type:"Point",coordinates:[t.lngLat.lng,t.lngLat.lat]}});this.addFeature(o);};F.onKeyUp=function(e,t){if(t.keyCode===27)return this.changeMode("simple_select")};F.toDisplayFeatures=function(e,t,o){o(t);};var ye=F;var ve=e=>new Intl.NumberFormat(void 0,{maximumFractionDigits:5}).format(e[0])+"\xB0 "+new Intl.NumberFormat(void 0,{maximumFractionDigits:5}).format(e[1])+"\xB0",P=(e,t)=>{let o=we({type:"Feature",properties:{},geometry:{type:"LineString",coordinates:e}},{units:window.navigator.language==="en-US"?"miles":"kilometers"});return {type:"Feature",properties:{type:"measure",value:window.navigator.language==="en-US"?new Intl.NumberFormat(void 0,{style:"unit",maximumFractionDigits:2,unit:o<=1?"foot":"mile"}).format(o<=1?o*5280:o):new Intl.NumberFormat(void 0,{style:"unit",maximumFractionDigits:2,unit:o<=1?"meter":"kilometer"}).format(o<=1?o*1e3:o),...t},geometry:{type:"Point",coordinates:no(e[0],e[1]).geometry.coordinates}}},j=(e,t)=>{let o=oo({type:"Feature",properties:{},geometry:{type:"Polygon",coordinates:e}});return {type:"Feature",properties:{type:"measure",value:window.navigator.language==="en-US"?new Intl.NumberFormat(void 0,{style:"unit",maximumFractionDigits:2,unit:o<=10.764?"foot":"mile"}).format(o<=10.764?o*10.764:o*1.0000003861)+"\xB2":new Intl.NumberFormat(void 0,{style:"unit",maximumFractionDigits:2,unit:o<=1e6?"meter":"kilometer"}).format(o<=1e6?o:o/1e6)+"\xB2",...t},geometry:centerOfMass({type:"Polygon",coordinates:e}).geometry}};var Me=e=>{let t=e.modes.draw_line_string;return {...t,onSetup:function(){let o=t.onSetup.call(this),n=this.newFeature({type:"Feature",properties:{type:"measure",value:"TTT"},geometry:{type:"Point",coordinates:[]}});return {...o,measure:n}},onMouseMove:function(o,n){if(t.onMouseMove.call(this,o,n),o.line.coordinates.length>=2){let r=P(o.line.coordinates);o.measure.properties.value=r.properties.value,o.measure.updateCoordinate("",r.geometry.coordinates[0],r.geometry.coordinates[1]);}},toDisplayFeatures:function(o,n,r){t.toDisplayFeatures.call(this,o,n,r),this.drawConfig.userProperties.showLength&&r(o.measure.toGeoJSON());}}};var be=e=>{let t=e.modes.draw_point;return {...t,onSetup:function(){let o=t.onSetup.call(this);return o.point.properties={...o.point.properties,type:"measure",anchor:"bottom"},o},onMouseMove:function(o,{lngLat:n}){o.point.properties.value=ve([n.lng,n.lat]),o.point.updateCoordinate("",n.lng,n.lat);},toDisplayFeatures:function(o,n,r){let i=n.properties.id===o.point.id;return n.properties.active=i?"":"false",r(n)}}};var xe=e=>{let t=e.modes.draw_polygon;return {...t,toDisplayFeatures:function(o,n,r){let i=a=>{if(r(a),this.drawConfig.userProperties.showLength){let c=Array.isArray(a.geometry.coordinates[0][0])?a.geometry.coordinates[0]:a.geometry.coordinates;c.forEach((p,s)=>{!Array.isArray(p)||s==0||r(P([c[s-1],p]));});}this.drawConfig.userProperties.showArea&&a.geometry.coordinates[0].length>=3&&r(j([a.geometry.coordinates[0]]));};t.toDisplayFeatures.call(this,o,n,i);}}};function ao(e,t,o,n){return {type:"Feature",properties:{meta:"vertex",parent:e,coord_path:o,active:n?"true":"false"},geometry:{type:"Point",coordinates:t}}}function io(e,t,o,n=64){let r=[],i=t/(111.32*Math.cos(e[1]*Math.PI/180)),a=t/110.574;for(let c=0;c<n;c+=1){let p=c/n*(2*Math.PI),s=i*Math.cos(p),f=a*Math.sin(p);r.push([e[0]+s,e[1]+f]);}return r.push(r[0]),{type:"Feature",geometry:{type:"Polygon",coordinates:[r]},properties:{parent:o,active:"true"}}}var so={enable:e=>{setTimeout(()=>{!e.map||!e.map.doubleClickZoom||!e._ctx||!e._ctx.store||!e._ctx.store.getInitialConfigValue||e._ctx.store.getInitialConfigValue("doubleClickZoom")&&e.map.doubleClickZoom.enable();},0);}},co=e=>({...e.modes.draw_line_string,clickAnywhere:function(t,o){return t.currentVertexPosition===1?(t.line.addCoordinate(0,o.lngLat.lng,o.lngLat.lat),this.changeMode("simple_select",{featureIds:[t.line.id]})):(this.updateUIClasses({mouse:"add"}),t.line.updateCoordinate(t.currentVertexPosition,o.lngLat.lng,o.lngLat.lat),t.direction==="forward"?(t.currentVertexPosition+=1,t.line.updateCoordinate(t.currentVertexPosition,o.lngLat.lng,o.lngLat.lat)):t.line.addCoordinate(0,o.lngLat.lng,o.lngLat.lat),null)},onStop:function(t){if(so.enable(this),this.activateUIButton(),this.getFeature(t.line.id)!==void 0)if(t.line.removeCoordinate("0"),t.line.isValid()){let o=t.line.toGeoJSON(),n=(we(o)*1e3).toFixed(1),r=o.geometry.coordinates[0];this.deleteFeature([t.line.id],{silent:true});let i=this.newFeature({type:"Feature",properties:{radius:n},geometry:{type:"Point",coordinates:r}});this.addFeature(i),this.map.fire("draw.create",{features:[i.toGeoJSON()]}),this.changeMode("simple_select",{featureIds:[i.id]});}else this.deleteFeature([t.line.id],{silent:true}),this.changeMode("simple_select",{},{silent:true});},toDisplayFeatures:function(t,o,n){let r=o.properties.id===t.line.id;return o.properties.active=r?"true":"false",r?(o.geometry.coordinates.length<2||(o.properties.meta="feature",n(ao(t.line.id,o.geometry.coordinates[t.direction==="forward"?o.geometry.coordinates.length-2:1],`${t.direction==="forward"?o.geometry.coordinates.length-2:1}`,false)),n(o),n(P(o.geometry.coordinates,{parent:t.line.id})),n(io(o.geometry.coordinates[0],we(o),t.line.id))),null):n(o)}}),Ce=co;var lo=e=>({...e.modes.draw_line_string,onSetup:function(t){let o=e.modes.draw_line_string.onSetup.call(this,t),n=this.newFeature({type:"Feature",properties:{},geometry:{type:"Polygon",coordinates:[[]]}});return this.addFeature(n),{...o,...t,rectangle:n}},onTap:function(t,o){t.startPoint&&this.onMouseMove(t,o),this.onClick(t,o);},onClick:function(t,o){t.startPoint&&t.startPoint[0]!==o.lngLat.lng&&t.startPoint[1]!==o.lngLat.lat?(this.updateUIClasses({mouse:"pointer"}),t.endPoint=[o.lngLat.lng,o.lngLat.lat],this.changeMode("simple_select",{featuresId:t.rectangle.id})):t.startPoint=[o.lngLat.lng,o.lngLat.lat];},onMouseMove:function(t,o){t.startPoint&&(t.rectangle.updateCoordinate("0.0",t.startPoint[0],t.startPoint[1]),t.rectangle.updateCoordinate("0.1",o.lngLat.lng,t.startPoint[1]),t.rectangle.updateCoordinate("0.2",o.lngLat.lng,o.lngLat.lat),t.rectangle.updateCoordinate("0.3",t.startPoint[0],o.lngLat.lat),t.rectangle.updateCoordinate("0.4",t.startPoint[0],t.startPoint[1]));},onKeyUp:function(t,o){if(o.keyCode===27)return this.changeMode("simple_select")},onStop:function(t){e.modes.draw_line_string.onStop.call(this,t),this.getFeature(t.rectangle.id)!==void 0&&(t.rectangle.removeCoordinate("0.4"),t.rectangle.isValid()?this.map.fire("draw.create",{features:[t.rectangle.toGeoJSON()]}):(this.deleteFeature([t.rectangle.id],{silent:true}),this.changeMode("simple_select",{},{silent:true})));},toDisplayFeatures:function(t,o,n){let r=o.properties.id===t.rectangle.id;if(o.properties.active=r?"true":"false",!r)return n(o);if(t.startPoint)return n(o),this.drawConfig.userProperties.showLength&&(n(P([o.geometry.coordinates[0][0],o.geometry.coordinates[0][1]],{parent:t.rectangle.id,anchor:"bottom"})),n(P([o.geometry.coordinates[0][1],o.geometry.coordinates[0][2]],{parent:t.rectangle.id,anchor:"left"}))),this.drawConfig.userProperties.showArea&&n(j(o.geometry.coordinates,{parent:t.rectangle.id})),null},onTrash:function(t){this.deleteFeature([t.rectangle.id],{silent:true}),this.changeMode("simple_select");}}),Le=lo;var Ee={enable:e=>{setTimeout(()=>{!e.map||!e.map.doubleClickZoom||!e._ctx||!e._ctx.store||!e._ctx.store.getInitialConfigValue||e._ctx.store.getInitialConfigValue("doubleClickZoom")&&e.map.doubleClickZoom.enable();},0);},disable(e){setTimeout(()=>{!e.map||!e.map.doubleClickZoom||e.map.doubleClickZoom.disable();},0);}},uo={onSetup:function(e){let t=this.newFeature({type:"Feature",properties:{},geometry:{type:"Polygon",coordinates:[[]]}});return this.addFeature(t),this.clearSelectedFeatures(),Ee.disable(this),this.updateUIClasses({mouse:"add"}),this.setActionableState({trash:true}),{rectangle:t,currentVertexPosition:0}},onTap:function(e,t){this.onClick(e,t);},onClick:function(e,t){if(e.currentVertexPosition===2){let o=this.calculatepXY3(e,t,false);return o&&e.rectangle.updateCoordinate(`0.${e.currentVertexPosition+1}`,o[0],o[1]),this.updateUIClasses({mouse:"pointer"}),this.changeMode("simple_select",{featuresId:e.rectangle.id})}else e.rectangle.updateCoordinate(`0.${e.currentVertexPosition}`,t.lngLat.lng,t.lngLat.lat),e.currentVertexPosition++,e.rectangle.updateCoordinate(`0.${e.currentVertexPosition}`,t.lngLat.lng,t.lngLat.lat);},onMouseMove:function(e,t){if(e.rectangle.updateCoordinate("0."+e.currentVertexPosition,t.lngLat.lng,t.lngLat.lat),e.currentVertexPosition&&e.currentVertexPosition>0&&this.calculateOrientedAnglePolygon(e),e.currentVertexPosition===2){let o=this.calculatepXY3(e,t,true);o&&e.rectangle.updateCoordinate("0."+(e.currentVertexPosition+1),o[0],o[1]);}},deegrees2meters(e){let t=e[0]*2003750834e-2/180,o=Math.log(Math.tan((90+e[1])*Math.PI/360))/(Math.PI/180);return o=o*2003750834e-2/180,[t,o]},meters2degress(e){let t=e[0]*180/2003750834e-2,o=Math.atan(Math.exp(e[1]*Math.PI/2003750834e-2))*360/Math.PI-90;return [t,o]},calculateOrientedAnglePolygon:function(e){let t=e.rectangle.getCoordinate("0.0"),o=this.deegrees2meters(t),n=e.rectangle.getCoordinate("0.1"),r=this.deegrees2meters(n),a=-1*(Math.atan2(r[1]-o[1],r[0]-o[0])*180/Math.PI+90),c=a<0?a+360:a;e.angle=parseFloat(c.toFixed(2));},calculatepXY3:function(e,t,o){let n=e.rectangle.getCoordinate("0.0"),r=this.deegrees2meters(n),i=e.rectangle.getCoordinate("0.1"),a=this.deegrees2meters(i),c=this.deegrees2meters([t.lngLat.lng,t.lngLat.lat]),p=this.deegrees2meters([t.lngLat.lng,t.lngLat.lat]);if(r[0]===a[0])c=[p[0],a[1]];else if(r[1]===a[1])c=[a[0],p[1]];else {let h=-1/((a[1]-r[1])/(a[0]-r[0]));Math.abs(h)<1?c[1]=h*(p[0]-a[0])+a[1]:c[0]=a[0]+(c[1]-a[1])/h;}let s=[a[0]-r[0],a[1]-r[1]],f=[c[0]-s[0],c[1]-s[1]],g=this.meters2degress(c),w=this.meters2degress(f);return e.rectangle.updateCoordinate("0.2",g[0],g[1]),e.rectangle.updateCoordinate("0.3",w[0],w[1]),w},onKeyUp:function(e,t){if(t.keyCode===27)return this.changeMode("simple_select")},onStop:function(e){Ee.enable(this),this.updateUIClasses({mouse:"none"}),this.activateUIButton(),this.getFeature(e.rectangle.id)!==void 0&&(e.rectangle.removeCoordinate("0.4"),e.rectangle.isValid()?this.map.fire("draw.create",{features:[e.rectangle.toGeoJSON()]}):(this.deleteFeature([e.rectangle.id],{silent:true}),this.changeMode("simple_select",{},{silent:true})));},toDisplayFeatures:function(e,t,o){let n=t.properties.id===e.rectangle.id;if(t.properties.active=n?"true":"false",t.properties.angle=e.angle,t.angle=e.angle,!n)return o(t);let r=t.geometry.coordinates[0].length;if(r<3){let i=t.geometry.coordinates[0][0],a={type:"Feature",properties:t.properties,angle:e.angle,geometry:{coordinates:t.geometry.coordinates[0][0],type:"Point"}};i&&o(a);return}if(r>=3&&r<=4){let i=[[t.geometry.coordinates[0][0][0],t.geometry.coordinates[0][0][1]],[t.geometry.coordinates[0][1][0],t.geometry.coordinates[0][1][1]]];if(o({type:"Feature",properties:t.properties,angle:e.angle,geometry:{coordinates:i,type:"LineString"}}),r===3)return}return o(t)},onTrash:function(e){this.deleteFeature([e.rectangle.id],{silent:true}),this.changeMode("simple_select");}},Se=uo;var ke=[{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"}}];var po=e=>{let[t]=v();t.isMapLibre&&e.lib.constants?.classes&&Object.assign(e.lib.constants.classes,{CANVAS:"maplibregl-canvas",CONTROL_BASE:"maplibregl-ctrl",CONTROL_PREFIX:"maplibregl-ctrl-",CONTROL_GROUP:"maplibregl-ctrl-group",ATTRIBUTION:"maplibregl-ctrl-attrib"});let o=new e.lib({styles:[...e.lib.lib.theme,...ke],modes:{...e.lib.modes,draw_point:be(e.lib),draw_line_string:Me(e.lib),draw_polygon:xe(e.lib),multi_point:ye,radius:Ce(e.lib),rectangle:Le(e.lib),rectangle_assisted:Se},userProperties:{showLength:e.showLength||false,showArea:e.showArea||false},...e.options});t.map.addControl(o,e.position||"top-right"),e.getInstance&&e.getInstance(o);let n={};return ae.forEach(r=>{if(e[r]){let i=`draw.${r.slice(2).toLowerCase()}`,a=c=>e[r](c);n[i]=a,t.map.on(i,a);}}),onCleanup(()=>{Object.keys(n).forEach(r=>t.map.off(r,n[r])),t.map?.removeControl(o);}),null};var fo=e=>{let[t]=v(),o;return V(()=>(o||(o=new e.overlay(e.props||{})),o)),createEffect(()=>o?.setProps(e.props||{})),null};
+var fe={map:null,mapLib:null,isMapLibre:false,constants:{},themeVersion:0},he=createContext([fe]),w=()=>useContext(he),X=e=>{let[t,o]=createStore({...fe});return e.map&&o("map",e.map),e.mapLib&&o("mapLib",e.mapLib),o("isMapLibre",!!e.isMapLibre),o("constants",e.constants||{}),o("themeVersion",e.themeVersion||0),createEffect(()=>o("constants",e.constants||{})),createEffect(()=>o("themeVersion",e.themeVersion||0)),createComponent(he.Provider,{value:[t],get children(){return e.children}})};var ye=["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"],ve=["onMouseDown","onMouseUp","onMouseOver","onMouseOut","onMouseMove","onMouseEnter","onMouseLeave","onClick","onDblClick","onContextMenu","onTouchStart","onTouchEnd","onTouchCancel"],Me=["onCreate","onDelete","onCombine","onUncombine","onUpdate","onSelectionchange","onModechange","onRender","onActionable"];var S="mapbox://styles/mapbox",I="https://raw.githubusercontent.com/",C="https://raw.githubusercontent.com/GIShub4/map-styles/main/",W="https://assets.vector.hereapi.com/styles/",be={mb:{standard:`${S}/standard`,light:`${S}/light-v11`,dark:`${S}/dark-v11`,street:`${S}/streets-v12`,outdoor:`${S}/outdoors-v12`,sat:`${S}/satellite-v9`,sat_street:`${S}/satellite-streets-v12`,nav_base:`${S}/navigation-guidance-day-v4`,nav_base_night:`${S}/navigation-guidance-night-v4`,nav:`${S}/navigation-day-v1`,nav_night:`${S}/navigation-night-v1`,basic:`${S}/cjf4m44iw0uza2spb3q0a7s41`,monochrome:`${S}/cjv6rzz4j3m4b1fqcchuxclhb`,leshine:`${S}/cjcunv5ae262f2sm9tfwg8i0w`,icecream:`${S}/cj7t3i5yj0unt2rmt3y4b5e32`,cali:`${S}/cjerxnqt3cgvp2rmyuxbeqme7`,northstar:`${S}/cj44mfrt20f082snokim4ungi`,mineral:`${S}/cjtep62gq54l21frr1whf27ak`,moonlight:`${S}/cj3kbeqzo00022smj7akz3o1e`,frank:`${S}-map-design/ckshxkppe0gge18nz20i0nrwq`,minimo:`${S}-map-design/cksjc2nsq1bg117pnekb655h1`,decimal:`${S}-map-design/ck4014y110wt61ctt07egsel6`,stand:`${S}-map-design/ckr0svm3922ki18qntevm857n`,blueprint:`${S}-map-design/cks97e1e37nsd17nzg7p0308g`,bubble:`${S}-map-design/cksysy2nl62zp17quosctdtcc`,pencil:`${S}-map-design/cks9iema71es417mlrft4go2k`,swiss_ski:`${I}mapbox/mapbox-gl-swiss-ski-style/master/cij1zoclj002y8rkkdjl69psd.json`,vintage:`${I}mapbox/mapbox-gl-vintage-style/master/cif5p01n202nisaktvljx9mv3.json`,whaam:`${I}mapbox/mapbox-gl-whaam-style/master/cii8323c8004w0nlvtss3dbm2.json`,neon:`${I}NatEvatt/awesome-mapbox-gl-styles/master/styles/Neon/style.json`,camoflauge:`${I}jingsam/mapbox-gl-styles/master/Camouflage.json`,emerald:`${I}jingsam/mapbox-gl-styles/master/Emerald.json`,runner:`${I}jingsam/mapbox-gl-styles/master/Runner.json`,x_ray:`${I}jingsam/mapbox-gl-styles/master/X-ray.json`},here:{base:`${W}berlin/base/mapbox/tilezen?apikey={apikey}`,day:`${W}berlin/day/mapbox/tilezen?apikey={apikey}`,night:`${W}berlin/night/mapbox/tilezen?apikey={apikey}`},esri:{blueprint:`${C}esri:blueprint.json`,charted_territory:`${C}esri:charted-territory.json`,colored_pencil:`${C}esri:colored-pencil.json`,community:`${C}esri:community.json`,mid_century:`${C}esri:mid-century.json`,modern_antique:`${C}esri:modern-antique.json`,nat_geo:`${C}esri:national-geographic.json`,newspaper:`${C}esri:newspaper.json`,open_street_map:`${C}esri:open-street-map.json`,light_gray_canvas:`${C}esri:light-gray-canvas.json`,dark_gray_canvas:`${C}esri:dark-gray-canvas.json`,human_geo_light:`${C}esri:human-geography-light.json`,human_geo_dark:`${C}esri:human-geography-dark.json`,world_navigation:`${C}esri:world-navigation.json`,world_street:`${C}esri:world-street.json`,world_street_night:`${C}esri:world-street-night.json`,world_terrain:`${C}esri:world-terrain.json`,world_terrain_hybrid:`${C}esri:world-terrain-hybrid.json`,world_topographic:`${C}esri:world-topographic.json`,chromium:`${C}esri:chromium.json`,dreamcatcher:`${C}esri:dreamcatcher.json`,seahaven:`${C}esri:seahaven.json`,sangria:`${C}esri:sangria.json`,mercurial:`${C}esri:mercurial.json`,imagery:`${C}esri:imagery.json`,imagery_hybrid:`${C}esri:imagery-hybrid.json`,firefly:`${C}esri:firefly.json`,firefly_hybrid:`${C}esri:firefly-hybrid.json`,oceans:`${C}esri:oceans.json`}},H="https://{s}.basemaps.cartocdn.com/rastertiles/",U="https://stamen-tiles-{s}.a.ssl.fastly.net/",_="https://{s}.tile.thunderforest.com/",J={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:`${H}voyager_labels_under/{z}/{x}/{y}{r}.png`,positron:`${H}light_all/{z}/{x}/{y}{r}.png`,dark:`${H}dark_all/{z}/{x}/{y}{r}.png`,_copy:'<a href="https://carto.com/attribution" target="_blank">&copy; Carto</a>'},stamen:{toner:`${U}toner/{z}/{x}/{y}{r}.png`,toner_lite:`${U}toner-lite/{z}/{x}/{y}{r}.png`,watercolor:`${U}watercolor/{z}/{x}/{y}.png`,terrain:`${U}terrain/{z}/{x}/{y}{r}.png`,_copy:'<a href="https://stamen.com/privacy-policy" target="_blank">&copy; Stamen Design</a>'},tf:{cycle:`${_}cycle/{z}/{x}/{y}{r}.png?apikey={apikey}`,trans:`${_}transport/{z}/{x}/{y}{r}.png?apikey={apikey}`,trans_dark:`${_}transport-dark/{z}/{x}/{y}{r}.png?apikey={apikey}`,landscape:`${_}landscape/{z}/{x}/{y}{r}.png?apikey={apikey}`,outdoors:`${_}outdoors/{z}/{x}/{y}{r}.png?apikey={apikey}`,neighbourhood:`${_}neighbourhood/{z}/{x}/{y}{r}.png?apikey={apikey}`,spinal:`${_}spinal-map/{z}/{x}/{y}{r}.png?apikey={apikey}`,pioneer:`${_}pioneer/{z}/{x}/{y}{r}.png?apikey={apikey}`,atlas:`${_}atlas/{z}/{x}/{y}{r}.png?apikey={apikey}`,mobile:`${_}mobile-atlas/{z}/{x}/{y}{r}.png?apikey={apikey}`,_copy:'<a href="https://thunderforest.com/privacy" target="_blank">&copy; Thunderforest</a>'}};var O=()=>new Promise(e=>requestAnimationFrame(()=>e())),He=e=>{try{return !!e.style?.hasTransitions?.()}catch{return  false}};function Je(e,t){return new Promise(o=>{let n=Date.now()+t,r=()=>{if(e.areTilesLoaded()){o(true);return}if(Date.now()>=n){o(false);return}setTimeout(r,100);};r();})}async function j(e,t={}){let{timeout:o=1e4,fadeMargin:n=400}=t;if(await Je(e,o),e.triggerRepaint(),await O(),await O(),n>0){let r=Date.now()+Math.max(n,2e3);for(;He(e)&&Date.now()<r;)e.triggerRepaint(),await O();await new Promise(i=>setTimeout(i,n)),e.triggerRepaint(),await O(),await O();}}function N(e,t={}){return new Promise(o=>{e.once("idle",()=>{j(e,t).then(o);});})}function K(e){for(let t of e.getStyle()?.layers??[])try{e.setPaintProperty(t.id,"raster-fade-duration",0);}catch{}}function xe(e,t){return {map:e,waitUntilSettled:()=>N(e,t),capture:(o="image/jpeg",n=.92)=>e.getCanvas().toDataURL(o,n),captureWhenSettled:async(o="image/jpeg",n=.92)=>(await N(e,t),e.getCanvas().toDataURL(o,n))}}var it=template("<div>"),st=template("<style>.overlay{position:relative;width:100%;height:100%;pointer-events:none}:where(.overlay>*){pointer-events:auto}"),lt=template("<div class=overlay>"),mt=e=>{let t,o,n,r,i,a=false,l=0,[d,s]=createSignal(null),[y,p]=createSignal(0),[b,u]=createSignal(!isServer&&(window.matchMedia("(prefers-color-scheme: dark)").matches||document.body.classList.contains("dark"))),f=false,M=false,h=(c,g)=>(e.debug||e.debugEvents)&&console.debug("%c[MapGL]","color: #0ea5e9",c,g||""),v=(c,g)=>{let m=b()&&g?g:c;return (typeof m=="string"||m instanceof String)&&m?.split(":").reduce((x,E)=>x&&x[E],be)?.replace("{apikey}",e.apikey||import.meta.env?.VITE_VECTOR_API_KEY)||m};onMount(async()=>{if(i=e.mapLib||await import('mapbox-gl'),i.Map||(i=window.maplibregl||window.mapboxgl),typeof i.supported=="function"&&!i.supported())throw new Error("Mapbox GL not supported");if(a=typeof i.Map?.prototype?.setConfigProperty!="function",h(`Map (v${i.version}) loading...`),t=new i.Map({accessToken:e.options?.accessToken||import.meta.env?.VITE_MAPBOX_ACCESS_TOKEN,interactive:e.options?.interactive||!!e.onViewportChange,...e.options,...e.viewport,projection:e.options?.projection,container:o,style:v(e.options?.style,e.darkStyle),fitBoundsOptions:{padding:e.viewport?.padding},...e.offscreen?{preserveDrawingBuffer:true}:{}}),t.debug=e.debug,t.debugEvents=e.debugEvents,t.sourceIdList=[],t.layerIdList=[],t.isMapLibre=a,ye.forEach(c=>{let g=e[c];if(g){let m=c.slice(2).toLowerCase();typeof g=="function"?t.on(m,x=>{setTimeout(()=>{x.clickOnLayer||(g(x),e.debugEvents&&h(`Map '${m}' event:`,x));},0);}):Object.keys(g).forEach(x=>{t.on(m,x,E=>{setTimeout(()=>{E.clickOnLayer||(g[x](E),e.debugEvents&&h(`Map '${m}' event on '${x}':`,E));},0);});});}}),e.onTilesLoaded){let c=e.tilesLoadedTimeout??1e4,g=e.tilesLoadedFadeMargin??400;t.on("idle",()=>{let m=++l;j(t,{timeout:c,fadeMargin:g}).then(()=>{m===l&&(h("Tiles settled"),e.onTilesLoaded());});});}t.once("load",()=>{s(t),h("Map loaded"),e.offscreen&&(e.offscreen.disableRasterFade!==false&&K(t),e.onCapturerReady?.(xe(t,{timeout:e.tilesLoadedTimeout??1e4,fadeMargin:e.tilesLoadedFadeMargin??400}))),["mousedown","touchstart","wheel"].forEach(g=>t.on(g,m=>!m.rotate&&e.onUserInteraction?.(true))),["moveend","mouseup","touchend"].forEach(g=>t.on(g,m=>!m.rotate&&e.onUserInteraction?.(false)));let c=!isServer&&window.matchMedia("(prefers-color-scheme: dark)");c?.addEventListener("change",()=>{u(c.matches),p(g=>g+1),h("Set dark theme to:",c.matches?.toString());}),r=new MutationObserver(()=>{let g=document.documentElement.classList.contains("dark")||document.body.classList.contains("dark");u(g),p(m=>m+1),h("Set theme to:",g);}),r.observe(document.documentElement,{attributes:true}),r.observe(document.body,{attributes:true}),e.disableResize||(n=new ResizeObserver(()=>{setTimeout(()=>{t?.resize();},0),h("Map resized");}),n.observe(o)),t.on("move",g=>{let m={...e.viewport,id:e.id,point:{x:g.originalEvent?.x,y:g.originalEvent?.y},center:e.viewport?.center?.lat?t.getCenter():[t.getCenter().lng,t.getCenter().lat],zoom:t.getZoom(),pitch:t.getPitch(),bearing:t.getBearing(),inTransit:true,bounds:null};!g.viewport&&e.onViewportChange&&(M=true,e.onViewportChange(m));}),t.on("moveend",g=>{if(f||g.rotate||!e.onViewportChange)return;let m={...e.viewport,inTransit:false};M=true,e.onViewportChange(m);});});}),createEffect(on(()=>e.viewport,c=>{if(e.id!==c?.id)return;if(M){M=false;return}let g={...c,...c.bounds?t.cameraForBounds(c.bounds,{bearing:c?.bearing,pitch:c?.pitch,padding:c?.padding}):null};f=true,t.stop(),f=false,t[e.transitionType||"flyTo"](g),h(`Update Viewport (${e.transitionType||"flyTo"}):`,g);},{defer:true})),createEffect(()=>{let c=d();if(typeof c?.setConfigProperty!="function"){c&&e.config&&Object.keys(e.config).length&&h("Config prop is set but this map library has no setConfigProperty (Mapbox Standard Style only) \u2014 skipping");return}for(let g in e.config){if(!g||g==="id")continue;let m=e.config?.id||"basemap",x=e.config[g];c.setConfigProperty(m,g,x),h(`Set Config (${m}:${g}) to:`,x);}}),createEffect(()=>{let c=e.options?.projection;!t||!c||(t.setProjection(c),h("Set Projection to:",c));}),createEffect(()=>{let c=e.cursorStyle;!t||!c||(t.getCanvas().style.cursor=c,h("Set Cursor to:",c));});let L=(c,g)=>(g.forEach(m=>{let x=c.findIndex(E=>m.metadata.smg.beforeType?E.type===m.metadata.smg.beforeType:E.id===m.metadata.smg.beforeId);c=x===-1?[...c,m]:[...c.slice(0,x),m,...c.slice(x)];}),c);return createEffect(c=>{let g=v(e.options?.style,e.darkStyle);if(t?.isStyleLoaded()&&c!==g){let m=t.getStyle(),x=m.layers.filter(P=>t.layerIdList.includes(P.id)),E=Object.keys(m.sources).filter(P=>t.sourceIdList.includes(P)).reduce((P,pe)=>({...P,[pe]:m.sources[pe]}),{}),Y=e.shouldDiffStyle?e.shouldDiffStyle(c,g):true;t.setStyle(g,Y?void 0:{diff:false}),t.once("styledata",()=>{if(!x)return;let P=t.getStyle();t.setStyle({...P,sources:{...P.sources,...E},layers:L(P.layers,x),fog:m.fog,terrain:m.terrain,light:m.light}),h("Set Mapstyle to:",g);});}return g},e.options?.style),["showTileBoundaries","showTerrainWireframe","showCollisionBoxes","showPadding","showOverdrawInspector"].forEach(c=>{createEffect(()=>{let g=e[c];!t||!g||(t[c]=g,h(`Set ${c} to:`,g));});}),onCleanup(()=>{n?.disconnect(),r?.disconnect(),l++,t?.remove(),h("Map removed");}),(()=>{var c=it(),g=o;return typeof g=="function"?use(g,c):o=c,insert(c,(()=>{var m=memo(()=>!!d());return ()=>m()&&createComponent(X,{get map(){return d()},mapLib:i,isMapLibre:a,get constants(){return e.constants},get themeVersion(){return y()},get children(){return [st(),(()=>{var x=lt();return insert(x,()=>e.children),x})()]}})})()),effect(m=>{var x=e.id,E=e?.class,Y=e?.classList,P=e.offscreen?{position:"fixed",left:"-99999px",top:"-99999px",width:`${e.offscreen.width}px`,height:`${e.offscreen.height}px`,...e.style}:{width:"100%",height:"100%",...e.style};return x!==m.e&&setAttribute(c,"id",m.e=x),E!==m.t&&className(c,m.t=E),m.a=classList(c,Y,m.a),m.o=style(c,P,m.o),m},{e:void 0,t:void 0,a:void 0,o:void 0}),c})()};var Le=createContext(),R=()=>useContext(Le),vt=e=>{let[t]=w();e.id??=createUniqueId();let o=(i,a)=>{t.map.debug&&console.debug("%c[MapGL]","color: #ec4899",i,a||"");},n=()=>e.source,r=i=>{let a=i?.split(":").reduce((d,s)=>d&&d[s],J),l=a?{...n(),url:"",tiles:[a.replace("{apikey}",n().apikey||import.meta.env?.VITE_RASTER_API_KEY).replace("{r}",window.devicePixelRatio>1?"@2x":"")],attribution:J[i.split(":")[0]]._copy}:n();return l.tiles&&(l.tiles=["a","b","c"].map(d=>l.tiles[0].replace("{s}",d))),l};switch(t.map.addSource(e.id,r(n().url)),t.map.sourceIdList.push(e.id),o("Add Source:",e.id),n().type){case "geojson":createEffect(()=>{let i=n().data;t.map.getSource(e.id).setData(i||{}),o("Update GeoJSON Data:",e.id);});break;case "image":createEffect(()=>{let i=n().url,a=n().coordinates;t.map.getSource(e.id).updateImage(i,a),o("Update Image Data:",e.id);});break;case "vector":createEffect(()=>{let i=n().url,a=n().tiles,l=t.map.getSource(e.id);i?l.setUrl(i):l.setTiles(a),o("Update Vector Data:",e.id);});break;case "raster":createEffect(()=>{let i=r(n().url),a=t.map.getSource(e.id);i.url?a.setUrl(i.url):a.setTiles(i.tiles),o("Update Raster Data:",e.id);});break}return onCleanup(()=>{t.map?.getStyle().layers.forEach(i=>i.source===e.id&&t.map.removeLayer(i.id)),t.map?.getSource(e.id)&&t.map?.removeSource(e.id),o("Remove Source:",e.id);}),createComponent(Le.Provider,{get value(){return e.id},get children(){return e.children}})};var Se=["id","type","filter","source","source-layer","minzoom","metadata","maxzoom","paint","layout"],Ee=["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"];var A,te=e=>(A??=document.body.appendChild(document.createElement("div")),A.style.cssText="position:absolute;visibility:hidden;pointer-events:none",A.style.color="",A.style.color=e,A.style.color?getComputedStyle(A).color:void 0),Mt=/^[a-z]+-\d{2,3}$/,bt=/^(rgb|rgba|hsl|hsla)\(/i,xt=/^[a-z-]+\(/i,z,wt=/^bg-[a-z]+-\d{2,3}(?:\s+dark:bg-[a-z]+-\d{2,3})?$/,Ct=e=>{z??=document.body.appendChild(document.createElement("div")),z.style.cssText="position:absolute;visibility:hidden;pointer-events:none",z.className=e;let t=getComputedStyle(z).backgroundColor;return z.className="",t&&t!=="rgba(0, 0, 0, 0)"?t:e},oe=e=>{if(wt.test(e))return Ct(e);if(Mt.test(e)){let t=getComputedStyle(document.documentElement).getPropertyValue(`--color-${e}`).trim();return t&&te(t)||e}return xt.test(e)&&!bt.test(e)&&te(e)||e},ne=e=>{let o=(te(oe(e))??e).match(/rgba?\(([^)]+)\)/i);if(!o)return [0,0,0,1];let[n,r,i,a=1]=o[1].split(",").map(Number);return [n,r,i,a]};var Et={property:"icon-halo-width",from:0,to:8,duration:1500,waveform:"out"},Pt=.75,kt=e=>1-(1-e)*(1-e),_t=(e,t,o)=>{let n=e%t/t;if(o==="in-out")return (1-Math.cos(n*Math.PI*2))/2;let r=Math.min(n/Pt,1);return kt(r)},$t=(e,t,o)=>{let n=Math.round(e[0]+(t[0]-e[0])*o),r=Math.round(e[1]+(t[1]-e[1])*o),i=Math.round(e[2]+(t[2]-e[2])*o),a=e[3]+(t[3]-e[3])*o;return `rgba(${n}, ${r}, ${i}, ${a})`},ke=(e={},t={})=>[...new Set([...Object.keys(e),...Object.keys(t)])].reduce((n,r)=>{let i=e[r];return i!==t[r]&&n.push([r,i]),n},[]),re=(e,t)=>(e.startsWith(t)||e.startsWith("icon")||e.startsWith("text")?"":t+"-")+e.replace(/[A-Z]/g,o=>"-"+o.toLowerCase()),It=(e,t)=>e.endsWith("color")&&typeof t=="string"?oe(t):t,Tt=/^@(.+)$/,ae=(e,t,o,n)=>{if(typeof t!="string")return t;let r=t.match(Tt);if(!r)return t;let i=o[r[1]];return i===void 0?(n(`Unknown constant "@${r[1]}" referenced by "${e}" \u2014 leaving unresolved`),t):i},ie=(e,t={},o=()=>{})=>{if(!e)return;let n={},r={},i={},a=(l,d)=>It(l,ae(l,d,t,o));return Object.entries(e).forEach(([l,d])=>{if(Se.includes(l))i[l]=d;else {let s=re(l,e.type);Ee.includes(s)?n[s]=ae(s,d,t,o):r[s]=a(s,d);}}),e.paint&&Object.entries(e.paint).forEach(([l,d])=>{let s=re(l,e.type);r[s]=a(s,d);}),e.layout&&Object.entries(e.layout).forEach(([l,d])=>{let s=re(l,e.type);n[s]=ae(s,d,t,o);}),{...i,paint:r,layout:n}},Ft=e=>{let[t]=w(),o=e.sourceId||e.style?.source||R(),n=e.id||e.customLayer?.id||createUniqueId(),r=(a,l)=>{(t.map.debug||t.map.debugEvents)&&console.debug("%c[MapGL]","color: #10b981",a,l||"");},i=createMemo(()=>e.beforeType?t.map.getStyle().layers.find(a=>a.type===e.beforeType)?.id:e.beforeId);return t.map.addLayer(e.customLayer||{...ie(e.style,t.constants,r),id:n,source:o,...t.isMapLibre?{}:{slot:e.slot||""},metadata:{smg:{beforeType:e.beforeType,beforeId:e.beforeId}}},i()),t.map.layerIdList.push(n),e.customLayer&&t.map.fire("load"),r("Add Layer:",n),ve.forEach(a=>{if(e[a]){let l=a.slice(2).toLowerCase();t.map.on(l,n,d=>{d.clickOnLayer=true,e[a](d),t.map.debugEvents&&r(`Layer '${l}' event on '${n}':`,d);});}}),createEffect(a=>{t.themeVersion;let l=ie(e.style,t.constants,r);if(l!==a)return l.layout!==a?.layout&&ke(l.layout,a?.layout).forEach(([d,s])=>t.map.setLayoutProperty(n,d,s,{validate:false})),l.paint!==a?.paint&&ke(l.paint,a?.paint).forEach(([d,s])=>t.map.setPaintProperty(n,d,s,{validate:false})),(l.minzoom!==a?.minzoom||l.maxzoom!==a?.maxzoom)&&t.map.setLayerZoomRange(n,l.minzoom,l.maxzoom),l.filter!==a?.filter&&t.map.setFilter(n,l.filter,{validate:false}),r("Update Layer Style:",n),l},ie(e.style,t.constants,r)),createEffect(a=>{if(e.visible!==a)return t.map.setLayoutProperty(n,"visibility",e.visible?"visible":"none",{validate:false}),r(`Update Visibility (${n}):`,e.visible.toString()),e.visible},e.visible),createEffect(a=>i()===a?a:(t.map.moveLayer(n,i()),r(`Update Layer Z-Index (${n}):`,i()),i()),i()),createEffect(async()=>{e.filter&&(!t.map.isStyleLoaded()&&await t.map.once("styledata"),t.map.setFilter(n,e.filter),r(`Update Filter (${n}):`,e.filter));}),createEffect(async()=>{!e.featureState||e.featureState.id===null||(!t.map.isStyleLoaded()&&await t.map.once("styledata"),t.map.removeFeatureState({source:o,sourceLayer:e.style["source-layer"]}),t.map.setFeatureState({source:o,sourceLayer:e.style["source-layer"],id:e.featureState.id},e.featureState.state));}),createEffect(()=>{if(!e.pulse)return;let l=(e.pulse===true?[{}]:Array.isArray(e.pulse)?e.pulse:[e.pulse]).map(p=>{let{property:b,from:u,to:f,duration:M,waveform:h}={...Et,...p},v=typeof u=="string"||typeof f=="string",[L,c]=h==="in"?[f,u]:[u,f];return {property:b,duration:M,waveform:h,isColor:v,fromNum:v?0:L,toNum:v?0:c,fromRgba:v?ne(L):null,toRgba:v?ne(c):null}}),d=performance.now(),s,y=p=>{let b=p-d;l.forEach(u=>{let f=_t(b,u.duration,u.waveform),M=u.isColor?$t(u.fromRgba,u.toRgba,f):u.fromNum+(u.toNum-u.fromNum)*f;t.map.setPaintProperty(n,u.property,M,{validate:false});}),s=window.requestAnimationFrame(y);};s=window.requestAnimationFrame(y),r(`Start Pulse (${n}):`,e.pulse),onCleanup(()=>window.cancelAnimationFrame(s));}),onCleanup(()=>t.map?.getLayer(n)&&t.map?.removeLayer(n)),e.children};var _e=createContext(),Nt=()=>useContext(_e),Zt=e=>{let[t]=w(),[o,n]=createSignal(null);return onMount(async()=>{e.id=e.id||createUniqueId();let r=t.mapLib.MercatorCoordinate.fromLngLat([e.origin[0]||0,e.origin[1]||0],e.origin[2]||0),i=r.meterInMercatorCoordinateUnits(),{x:a,y:l,z:d}=r,s=null,y=null,p=null;e.babylon?(y=await import('@babylonjs/core'),s=y.Matrix.Compose(new y.Vector3(i,i,i),y.Quaternion.FromEulerAngles(Math.PI/2,0,0),new y.Vector3(a,l,d))):(p=await import('three'),s={translateX:a,translateY:l,translateZ:d,rotateX:Math.PI/2,rotateY:0,rotateZ:0,scale:i}),t.map.addLayer({id:e.id,type:"custom",renderingMode:"3d",onAdd(b,u){if(e.babylon){let f=new y.Engine(u,true,{useHighPrecisionMatrix:true},true);this.scene=new y.Scene(f),this.scene.autoClear=false,this.scene.preventDefaultOnPointerDown=false,this.scene.preventDefaultOnPointerUp=false;let M=new y.UniversalCamera("Camera",y.Vector3.Zero());M.mode=y.Camera.ORTHOGRAPHIC_CAMERA,M.inertia=0,this.scene.ambientColor=new y.Color3(1,1,1),e.defaultLight&&new y.HemisphericLight("Light",new y.Vector3(100,10,0),this.scene);}else this.camera=new p.Camera,this.scene=new p.Scene,e.defaultLight&&(this.light=new p.DirectionalLight(16777215),this.light.position.set(100,0,0).normalize(),this.scene.add(this.light)),this.renderer=new p.WebGLRenderer({canvas:b.getCanvas(),context:u,antialias:true}),this.renderer.autoClear=false;this.map=b,e.onAdd&&e.onAdd(this.scene,this.map,u),n(this.scene);},render(b,u){if(e.babylon){this.scene.activeCamera.freezeProjectionMatrix(s.multiply(y.Matrix.FromArray(u)));this.map.getPitch()*(Math.PI/180);this.map.getBearing()*(Math.PI/180);this.scene.render(false);}else {let f=new p.Matrix4().makeRotationAxis(new p.Vector3(1,0,0),s.rotateX),M=new p.Matrix4().makeRotationAxis(new p.Vector3(0,1,0),s.rotateY),h=new p.Matrix4().makeRotationAxis(new p.Vector3(0,0,1),s.rotateZ),v=new p.Matrix4().fromArray(u),L=new p.Matrix4().makeTranslation(s.translateX,s.translateY,s.translateZ).scale(new p.Vector3(s.scale,-s.scale,s.scale)).multiply(f).multiply(M).multiply(h);this.camera.projectionMatrix=v.multiply(L),this.renderer.resetState(),this.renderer.render(this.scene,this.camera);}e.onRender&&e.onRender(b,u),t.map.triggerRepaint();}},e.beforeId);}),onCleanup(()=>{t.map.getLayer(e.id)&&t.map.removeLayer(e.id);}),createComponent(_e.Provider,{value:o,get children(){return memo(()=>!!o())()&&e.children}})};var Bt=e=>{let[t]=w();return createEffect(()=>{t.isMapLibre?t.map.setSky?.(e.style||{}):t.map.setFog(e.style||{});}),onCleanup(()=>{t.isMapLibre?t.map.getSky?.()&&t.map.setSky(null):t.map.getFog()&&t.map.setFog(null);}),null};var Ht=e=>{let[t]=w(),o=R();return !o&&!e?.source&&(o=createUniqueId(),t.map.addSource(o,{type:"raster-dem",url:t.isMapLibre?"https://demotiles.maplibre.org/terrain-tiles/tiles.json":"mapbox://mapbox.terrain-rgb",tileSize:t.isMapLibre?256:512,maxzoom:t.isMapLibre?void 0:14}),t.map.sourceIdList.push(o)),createEffect(()=>{t.map.setTerrain({exaggeration:e.exaggeration||1,source:e?.source||o});}),onCleanup(()=>t.map?.setTerrain(null)),null};var q=(e,t)=>{let[o]=w();createEffect(()=>{let n=e(),r=t?.();n&&(o.map.hasControl(n)&&o.map.removeControl(n),o.map.addControl(n,r));}),onCleanup(()=>{let n=e();n&&o.map.hasControl(n)&&o.map.removeControl(n);});};var no=e=>{let[t]=w(),[o,n]=splitProps(e,["position"]),[r,i]=createSignal(null),a=new Map([["navigation",t.mapLib.NavigationControl],["scale",t.mapLib.ScaleControl],["attribution",t.mapLib.AttributionControl],["geolocate",t.mapLib.GeolocateControl],["fullscreen",t.mapLib.FullscreenControl],["logo",t.mapLib.LogoControl],["terrain",t.mapLib.TerrainControl]]);return createEffect(()=>{untrack(()=>r()&&t.map.hasControl(r())&&t.map.removeControl(r())),i(n.custom||new(a.get(n.type||"navigation"))(n.options));}),q(r,()=>o.position),null};var io=e=>{if(!e.lngLat)throw new Error("Marker - lngLat is required");let[t,o,n]=splitProps(e,["lngLat","children","showPopup","draggable"],["popup","onOpen","onClose"]),[r]=w(),i=null,a=null,l=t.lngLat;return createEffect(()=>{r.map&&(a?.remove(),a=new r.mapLib.Popup({closeOnClick:false,focusAfterOpen:false,...o.popup}).on("open",()=>o.onOpen?.()).on("close",()=>o.onClose?.()),createEffect(()=>{t.children!==void 0&&(typeof t.children=="string"?a?.setHTML(t.children):a?.setDOMContent(t.children),i?.setPopup(a));}),createEffect(()=>t.showPopup!==a?.isOpen()&&i?.togglePopup()));}),createEffect(()=>{r.map&&(i?.remove(),i=new r.mapLib.Marker(n.options).on("dragstart",()=>n.onDragStart?.()).on("dragend",()=>n.onDragEnd?.()).on("drag",()=>n.onDrag?.(i?.getLngLat().toArray())).setPopup(a).setLngLat(l).addTo(r.map),createEffect(()=>t.showPopup!==a?.isOpen()&&i?.togglePopup()));}),createEffect(()=>i?.setLngLat(t.lngLat)),createEffect(()=>i?.setDraggable(t.draggable)),onCleanup(()=>i?.remove()),null};var co=e=>{if(!e.trackPointer&&!e.lngLat)throw new Error("Popup - lngLat or trackPointer is required");let[t,o]=splitProps(e,["lngLat","children","trackPointer"]),[n]=w(),r;return createEffect(()=>{n.map&&(r?.remove(),r=new n.mapLib.Popup({closeOnClick:false,focusAfterOpen:false,...o.options}).on("open",()=>o.onOpen?.()).on("close",()=>o.onClose?.()).addTo(n.map),createEffect(()=>t.trackPointer?r.trackPointer():r.setLngLat(t.lngLat)),createEffect(()=>typeof t.children=="string"?r.setHTML(t.children):r.setDOMContent(t.children)));}),onCleanup(()=>r?.remove()),null};var le=new Float64Array(256);for(let e=0;e<256;e++){let t=.5-Math.pow(e/255,.45454545454545453);le[e]=t*Math.abs(t);}le[255]=-1e20;function $e(e,t,o,n,r,i,a){i[0]=0,a[0]=-1e20,a[1]=1e20,r[0]=e[t];for(let l=1,d=0,s=0;l<n;l++){r[l]=e[t+l*o];let y=l*l;do{let p=i[d];s=(r[l]-r[p]+y-p*p)/(l-p)/2;}while(s<=a[d]&&--d>-1);d++,i[d]=l,a[d]=s,a[d+1]=1e20;}for(let l=0,d=0;l<n;l++){for(;a[d+1]<l;)d++;let s=i[d],y=l-s;e[t+l*o]=r[s]+y*y;}}function Ie(e,t,o,n,r,i){for(let a=0;a<t;a++)$e(e,a,t,o,n,r,i);for(let a=0;a<o;a++)$e(e,a*t,1,t,n,r,i);}var ce=({radius:e=8}={})=>Math.ceil(e);function G(e,{radius:t=8,cutoff:o=.25}={}){let{width:n,height:r}=e,i=n*r,a=new Float64Array(i).fill(1e20),l=new Float64Array(i),d=Math.max(n,r),s=new Float64Array(d),y=new Uint16Array(d),p=new Float64Array(d+1),b=e.data;for(let h=0,v=3;h<i;h++,v+=4){let L=b[v];if(L===0)continue;let c=le[L];a[h]=Math.max(0,c),l[h]=Math.max(0,-c);}Ie(a,n,r,s,y,p),Ie(l,n,r,s,y,p);let u=255/t,f=255*(1-o),M=new Uint8ClampedArray(i*4);for(let h=0,v=0;h<i;h++,v+=4){let L=Math.sqrt(a[h])-Math.sqrt(l[h]),c=Math.max(0,Math.min(255,Math.round(f-u*L)));M[v]=M[v+1]=M[v+2]=255,M[v+3]=c;}return {width:n,height:r,data:M}}var de={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},grid:{size:20,path:"M10 0V20M0 10H20"},brick:{size:40,path:"M0 0H40M0 20H40M0 40H40M0 0V20M20 0V20M40 0V20M10 20V40M30 20V40"},wave:{size:20,path:"M0 5Q5 0 10 5T20 5M0 15Q5 10 10 15T20 15"}},Te=Object.keys(de),k=e=>`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">${e}</svg>`,ue={square:k('<rect x="8" y="8" width="48" height="48" fill="#000"/>'),circle:k('<circle cx="32" cy="32" r="28" fill="#000"/>'),triangle:k('<polygon points="32,6 60,56 4,56" fill="#000"/>'),diamond:k('<polygon points="32,4 60,32 32,60 4,32" fill="#000"/>'),pentagon:k('<polygon points="32,4 59,23 48,55 16,55 5,23" fill="#000"/>'),hexagon:k('<polygon points="32,4 56,18 56,46 32,60 8,46 8,18" fill="#000"/>'),octagon:k('<polygon points="20,4 44,4 60,20 60,44 44,60 20,60 4,44 4,20" fill="#000"/>'),cross:k('<polygon points="20,4 44,4 44,20 60,20 60,44 44,44 44,60 20,60 20,44 4,44 4,20 20,20" fill="#000"/>'),x:k('<polygon points="43,4 60,21 49,32 60,43 43,60 32,49 21,60 4,43 15,32 4,21 21,4 32,15" fill="#000"/>'),star:k('<polygon points="32,2 39,23 61,23 43,36 50,56 32,44 14,56 21,36 4,23 25,23" fill="#000"/>')},Fe=Object.keys(ue),Ae=e=>k(`<path d="${e}" fill="#000"/>`);var fo=e=>{let[t]=w(),[o,n]=createSignal({width:0,height:0}),r=null,i=(s,y)=>{t.map.debug&&console.debug("%c[MapGL]","color: #10b981",s,y||"");},a=()=>{!r||!t.map||t.map.hasImage(e.id)||(t.map.addImage(e.id,r.data,r.ops),i("Re-Add Image:",e.id));};t.map.on("style.load",a),onCleanup(()=>{t.map?.off("style.load",a),t.map?.hasImage(e.id)&&t.map?.removeImage(e.id),i("Remove Image:",e.id);}),createEffect(()=>{if(!e.id)throw new Error("Image - ID is required");if(!e.source&&!e.pattern&&!e.symbol)throw new Error("Image - Image, Pattern or Symbol is required");let s=Math.max(1,Math.round(window.devicePixelRatio||2)),y=e.pattern?{pixelRatio:s,...e.options}:e.sdf?{...e.options,sdf:true}:e.options,p=e.symbol&&(ue[e.symbol]||(e.symbol.trimStart().startsWith("<svg")?e.symbol:Ae(e.symbol)));l(e.source||p||d(e.pattern,s),(b,u)=>{let f=u?{...y,pixelRatio:u}:y,{width:M,height:h}=b;t.map&&!t.map.hasImage(e.id)&&t.map.addImage(e.id,b,f),!e.pattern&&untrack(()=>M===o().width&&h===o().height)?(t.map.updateImage(e.id,b),t.map.triggerRepaint()):(t.map.removeImage(e.id),t.map.addImage(e.id,b,f)),n({width:M,height:h}),r={data:b,ops:f},i("Add Image:",e.id);});});let l=(s,y)=>{let p=e.sdf?typeof e.sdf=="object"?e.sdf:{}:null;if(typeof s=="string"&&s?.trimStart().startsWith("<svg")&&(s=new DOMParser().parseFromString(s,"image/svg+xml").childNodes[0]),s instanceof SVGElement&&(e.options?.fill&&s.setAttribute("fill",e.options.fill),e.options?.stroke&&s.setAttribute("stroke",e.options.stroke),s=new XMLSerializer().serializeToString(s)),typeof s!="string")return y(s);t.map.loadImage(s,async(b,u)=>{if(b){typeof s=="string"&&s?.trimEnd().endsWith(".svg")&&(s=await(await fetch(s)).text(),s=new DOMParser().parseFromString(s,"image/svg+xml").childNodes[0],s.setAttribute("fill",e.options.fill),s.setAttribute("stroke",e.options.stroke),s.setAttribute("transform",e.options.transform),s=new XMLSerializer().serializeToString(s));let f=new Image;f.crossOrigin="Anonymous",f.onload=()=>{let M=Math.max(1,50/Math.min(f.width,f.height)),h=e.options?.pixelRatio??Math.max(1,Math.round(window.devicePixelRatio||1)),v=M*h,L=p?ce(p)*h:0,c=Math.round(f.width*v),g=Math.round(f.height*v),m=document.createElement("canvas");m.width=c+L*2,m.height=g+L*2;let x=m.getContext("2d");x.imageSmoothingEnabled=true,x.drawImage(f,L,L,c,g);let E=x.getImageData(0,0,m.width,m.height);return y(p?G(E,p):E,h)},f.onerror=M=>console.error(`[MapGL] Image "${e.id}" failed to load:`,M),f.src=s.trimStart().startsWith("<svg")?"data:image/svg+xml;charset=utf-8,"+encodeURIComponent(s):s;}else {if(!p)return y(u);let{width:f,height:M}=u,h=ce(p),v=document.createElement("canvas");v.width=f+h*2,v.height=M+h*2;let L=v.getContext("2d");L.imageSmoothingEnabled=true,"data"in u?L.putImageData(u,h,h):L.drawImage(u,h,h,f,M);let c=L.getImageData(0,0,v.width,v.height);return y(G(c,p))}});},d=(s,y=2)=>{let p=de[s.type],b=p.size*y;return {width:b,height:b,data:new Uint8Array(b*b*4),onAdd:function(){let u=document.createElement("canvas");u.width=u.height=b,this.ctx=u.getContext("2d",{willReadFrequently:true}),this.ctx.scale(y,y);},render:function(){return this.ctx.fillStyle=s.background||"transparent",this.ctx.fillRect(0,0,p.size,p.size),this.ctx.strokeStyle=this.ctx.fillStyle=s.color||"black",this.ctx.lineWidth=s.lineWidth||1,this.ctx.stroke(new Path2D(p.path)),p.fill&&this.ctx.fill(new Path2D(p.path)),this.data=this.ctx.getImageData(0,0,this.width,this.height).data,true}}};return null};var vo=(e,t,o)=>e.map((n,r)=>(1-o)*e[r]+o*t[r]),Mo=(e,t,o)=>{let n=e.map((i,a)=>e[a]*t[a]).reduce((i,a)=>i+a),r=Math.acos(n);return e.map((i,a)=>Math.sin((1-o)*r)/Math.sin(r)*e[a]+Math.sin(o*r)/Math.sin(r)*t[a])},bo={in:e=>e*e,out:e=>1-(1-e)*(1-e),inOut:e=>e<.5?2*e*e:1-Math.pow(-2*e+2,2)/2},xo=e=>{let[t]=w(),o=.1,n=false,[r,i]=createSignal(false);["mousedown","touchstart","wheel"].forEach(u=>t.map.on(u,f=>!f.rotate&&i(true))),["moveend","mouseup","touchend"].forEach(u=>t.map.on(u,f=>!f.rotate&&i(false)));let a=async([u,f,M],h)=>{let v=t.map.getFreeCameraOptions();v.position=t.mapLib.MercatorCoordinate.fromLngLat([u,f],M),v.lookAtPoint(h),t.map.setFreeCameraOptions(v);},l=()=>{e.translate&&window.requestAnimationFrame(l);let u=[e.translate.start,e.translate.end,e.translate.easing?bo[e.translate.easing](o):o],f=e.translate.type==="line"?vo(...u):Mo(...u);a(f,e.translate.target),!e.translate.loop&&(o>1||o<0)&&(n=!n),o=n?o-.001:o+.001;};createEffect(()=>{e.translate&&window.requestAnimationFrame(l);});let d={duration:1e3,easing:u=>u},s=()=>{if(r())return;let{secPerRev:u=120,maxSpinZoom:f=5,slowSpinZoom:M=3}=e.rotateGlobe,h=t.map.getZoom();if(h>f)return;let v=360/u;h>M&&(v*=(f-h)/(f-M));let L=t.map.getCenter();L.lng=e.reverse?L.lng+v:L.lng-v,t.map.easeTo({center:L,...d},{rotate:true});},y=()=>{if(!e.rotateViewport||r()){t.map.stop();return}let u=e.rotateViewport,f=u?.secPerRev||60,M=e.reverse?t.map.getBearing()+360/f:t.map.getBearing()-360/f,h=u?.pitch||60,v=u?.around;t.map.easeTo({bearing:M,pitch:h,around:v,...d},{rotate:true});},p=()=>e.rotateGlobe?s():y();t.map.on("moveend",p).on("dragend",p);let b;return createEffect(()=>{e.rotateGlobe!=null&&(e.rotateGlobe?(b=t.map.getCenter(),s()):e.resetWhenStopped?t.map.stop().easeTo({center:b}):t.map.stop());}),createEffect(()=>{e.rotateViewport!=null&&(e.rotateViewport?y():e.resetWhenStopped?t.map.stop().resetNorthPitch():t.map.stop());}),onCleanup(()=>t.map.off("moveend",p).off("dragend",p)),e.children};var Lo=e=>{let[t]=w();return createEffect(()=>t.map.setLight(e.style||{})),onCleanup(()=>t.map?.setLight(null)),null};var V={};V.onSetup=function(e){var t={};return t.count=e.count||0,t};V.onClick=function(e,t){var o=this.newFeature({type:"Feature",properties:{count:e.count},geometry:{type:"Point",coordinates:[t.lngLat.lng,t.lngLat.lat]}});this.addFeature(o);};V.onKeyUp=function(e,t){if(t.keyCode===27)return this.changeMode("simple_select")};V.toDisplayFeatures=function(e,t,o){o(t);};var De=V;var Oe=e=>new Intl.NumberFormat(void 0,{maximumFractionDigits:5}).format(e[0])+"\xB0 "+new Intl.NumberFormat(void 0,{maximumFractionDigits:5}).format(e[1])+"\xB0",$=(e,t)=>{let o=Ue({type:"Feature",properties:{},geometry:{type:"LineString",coordinates:e}},{units:window.navigator.language==="en-US"?"miles":"kilometers"});return {type:"Feature",properties:{type:"measure",value:window.navigator.language==="en-US"?new Intl.NumberFormat(void 0,{style:"unit",maximumFractionDigits:2,unit:o<=1?"foot":"mile"}).format(o<=1?o*5280:o):new Intl.NumberFormat(void 0,{style:"unit",maximumFractionDigits:2,unit:o<=1?"meter":"kilometer"}).format(o<=1?o*1e3:o),...t},geometry:{type:"Point",coordinates:Po(e[0],e[1]).geometry.coordinates}}},B=(e,t)=>{let o=Eo({type:"Feature",properties:{},geometry:{type:"Polygon",coordinates:e}});return {type:"Feature",properties:{type:"measure",value:window.navigator.language==="en-US"?new Intl.NumberFormat(void 0,{style:"unit",maximumFractionDigits:2,unit:o<=10.764?"foot":"mile"}).format(o<=10.764?o*10.764:o*1.0000003861)+"\xB2":new Intl.NumberFormat(void 0,{style:"unit",maximumFractionDigits:2,unit:o<=1e6?"meter":"kilometer"}).format(o<=1e6?o:o/1e6)+"\xB2",...t},geometry:centerOfMass({type:"Polygon",coordinates:e}).geometry}};var Re=e=>{let t=e.modes.draw_line_string;return {...t,onSetup:function(){let o=t.onSetup.call(this),n=this.newFeature({type:"Feature",properties:{type:"measure",value:"TTT"},geometry:{type:"Point",coordinates:[]}});return {...o,measure:n}},onMouseMove:function(o,n){if(t.onMouseMove.call(this,o,n),o.line.coordinates.length>=2){let r=$(o.line.coordinates);o.measure.properties.value=r.properties.value,o.measure.updateCoordinate("",r.geometry.coordinates[0],r.geometry.coordinates[1]);}},toDisplayFeatures:function(o,n,r){t.toDisplayFeatures.call(this,o,n,r),this.drawConfig.userProperties.showLength&&r(o.measure.toGeoJSON());}}};var ze=e=>{let t=e.modes.draw_point;return {...t,onSetup:function(){let o=t.onSetup.call(this);return o.point.properties={...o.point.properties,type:"measure",anchor:"bottom"},o},onMouseMove:function(o,{lngLat:n}){o.point.properties.value=Oe([n.lng,n.lat]),o.point.updateCoordinate("",n.lng,n.lat);},toDisplayFeatures:function(o,n,r){let i=n.properties.id===o.point.id;return n.properties.active=i?"":"false",r(n)}}};var Ve=e=>{let t=e.modes.draw_polygon;return {...t,toDisplayFeatures:function(o,n,r){let i=a=>{if(r(a),this.drawConfig.userProperties.showLength){let l=Array.isArray(a.geometry.coordinates[0][0])?a.geometry.coordinates[0]:a.geometry.coordinates;l.forEach((d,s)=>{!Array.isArray(d)||s==0||r($([l[s-1],d]));});}this.drawConfig.userProperties.showArea&&a.geometry.coordinates[0].length>=3&&r(B([a.geometry.coordinates[0]]));};t.toDisplayFeatures.call(this,o,n,i);}}};function _o(e,t,o,n){return {type:"Feature",properties:{meta:"vertex",parent:e,coord_path:o,active:n?"true":"false"},geometry:{type:"Point",coordinates:t}}}function $o(e,t,o,n=64){let r=[],i=t/(111.32*Math.cos(e[1]*Math.PI/180)),a=t/110.574;for(let l=0;l<n;l+=1){let d=l/n*(2*Math.PI),s=i*Math.cos(d),y=a*Math.sin(d);r.push([e[0]+s,e[1]+y]);}return r.push(r[0]),{type:"Feature",geometry:{type:"Polygon",coordinates:[r]},properties:{parent:o,active:"true"}}}var Io={enable:e=>{setTimeout(()=>{!e.map||!e.map.doubleClickZoom||!e._ctx||!e._ctx.store||!e._ctx.store.getInitialConfigValue||e._ctx.store.getInitialConfigValue("doubleClickZoom")&&e.map.doubleClickZoom.enable();},0);}},To=e=>({...e.modes.draw_line_string,clickAnywhere:function(t,o){return t.currentVertexPosition===1?(t.line.addCoordinate(0,o.lngLat.lng,o.lngLat.lat),this.changeMode("simple_select",{featureIds:[t.line.id]})):(this.updateUIClasses({mouse:"add"}),t.line.updateCoordinate(t.currentVertexPosition,o.lngLat.lng,o.lngLat.lat),t.direction==="forward"?(t.currentVertexPosition+=1,t.line.updateCoordinate(t.currentVertexPosition,o.lngLat.lng,o.lngLat.lat)):t.line.addCoordinate(0,o.lngLat.lng,o.lngLat.lat),null)},onStop:function(t){if(Io.enable(this),this.activateUIButton(),this.getFeature(t.line.id)!==void 0)if(t.line.removeCoordinate("0"),t.line.isValid()){let o=t.line.toGeoJSON(),n=(Ue(o)*1e3).toFixed(1),r=o.geometry.coordinates[0];this.deleteFeature([t.line.id],{silent:true});let i=this.newFeature({type:"Feature",properties:{radius:n},geometry:{type:"Point",coordinates:r}});this.addFeature(i),this.map.fire("draw.create",{features:[i.toGeoJSON()]}),this.changeMode("simple_select",{featureIds:[i.id]});}else this.deleteFeature([t.line.id],{silent:true}),this.changeMode("simple_select",{},{silent:true});},toDisplayFeatures:function(t,o,n){let r=o.properties.id===t.line.id;return o.properties.active=r?"true":"false",r?(o.geometry.coordinates.length<2||(o.properties.meta="feature",n(_o(t.line.id,o.geometry.coordinates[t.direction==="forward"?o.geometry.coordinates.length-2:1],`${t.direction==="forward"?o.geometry.coordinates.length-2:1}`,false)),n(o),n($(o.geometry.coordinates,{parent:t.line.id})),n($o(o.geometry.coordinates[0],Ue(o),t.line.id))),null):n(o)}}),je=To;var Fo=e=>({...e.modes.draw_line_string,onSetup:function(t){let o=e.modes.draw_line_string.onSetup.call(this,t),n=this.newFeature({type:"Feature",properties:{},geometry:{type:"Polygon",coordinates:[[]]}});return this.addFeature(n),{...o,...t,rectangle:n}},onTap:function(t,o){t.startPoint&&this.onMouseMove(t,o),this.onClick(t,o);},onClick:function(t,o){t.startPoint&&t.startPoint[0]!==o.lngLat.lng&&t.startPoint[1]!==o.lngLat.lat?(this.updateUIClasses({mouse:"pointer"}),t.endPoint=[o.lngLat.lng,o.lngLat.lat],this.changeMode("simple_select",{featuresId:t.rectangle.id})):t.startPoint=[o.lngLat.lng,o.lngLat.lat];},onMouseMove:function(t,o){t.startPoint&&(t.rectangle.updateCoordinate("0.0",t.startPoint[0],t.startPoint[1]),t.rectangle.updateCoordinate("0.1",o.lngLat.lng,t.startPoint[1]),t.rectangle.updateCoordinate("0.2",o.lngLat.lng,o.lngLat.lat),t.rectangle.updateCoordinate("0.3",t.startPoint[0],o.lngLat.lat),t.rectangle.updateCoordinate("0.4",t.startPoint[0],t.startPoint[1]));},onKeyUp:function(t,o){if(o.keyCode===27)return this.changeMode("simple_select")},onStop:function(t){e.modes.draw_line_string.onStop.call(this,t),this.getFeature(t.rectangle.id)!==void 0&&(t.rectangle.removeCoordinate("0.4"),t.rectangle.isValid()?this.map.fire("draw.create",{features:[t.rectangle.toGeoJSON()]}):(this.deleteFeature([t.rectangle.id],{silent:true}),this.changeMode("simple_select",{},{silent:true})));},toDisplayFeatures:function(t,o,n){let r=o.properties.id===t.rectangle.id;if(o.properties.active=r?"true":"false",!r)return n(o);if(t.startPoint)return n(o),this.drawConfig.userProperties.showLength&&(n($([o.geometry.coordinates[0][0],o.geometry.coordinates[0][1]],{parent:t.rectangle.id,anchor:"bottom"})),n($([o.geometry.coordinates[0][1],o.geometry.coordinates[0][2]],{parent:t.rectangle.id,anchor:"left"}))),this.drawConfig.userProperties.showArea&&n(B(o.geometry.coordinates,{parent:t.rectangle.id})),null},onTrash:function(t){this.deleteFeature([t.rectangle.id],{silent:true}),this.changeMode("simple_select");}}),Ne=Fo;var Ze={enable:e=>{setTimeout(()=>{!e.map||!e.map.doubleClickZoom||!e._ctx||!e._ctx.store||!e._ctx.store.getInitialConfigValue||e._ctx.store.getInitialConfigValue("doubleClickZoom")&&e.map.doubleClickZoom.enable();},0);},disable(e){setTimeout(()=>{!e.map||!e.map.doubleClickZoom||e.map.doubleClickZoom.disable();},0);}},Ao={onSetup:function(e){let t=this.newFeature({type:"Feature",properties:{},geometry:{type:"Polygon",coordinates:[[]]}});return this.addFeature(t),this.clearSelectedFeatures(),Ze.disable(this),this.updateUIClasses({mouse:"add"}),this.setActionableState({trash:true}),{rectangle:t,currentVertexPosition:0}},onTap:function(e,t){this.onClick(e,t);},onClick:function(e,t){if(e.currentVertexPosition===2){let o=this.calculatepXY3(e,t,false);return o&&e.rectangle.updateCoordinate(`0.${e.currentVertexPosition+1}`,o[0],o[1]),this.updateUIClasses({mouse:"pointer"}),this.changeMode("simple_select",{featuresId:e.rectangle.id})}else e.rectangle.updateCoordinate(`0.${e.currentVertexPosition}`,t.lngLat.lng,t.lngLat.lat),e.currentVertexPosition++,e.rectangle.updateCoordinate(`0.${e.currentVertexPosition}`,t.lngLat.lng,t.lngLat.lat);},onMouseMove:function(e,t){if(e.rectangle.updateCoordinate("0."+e.currentVertexPosition,t.lngLat.lng,t.lngLat.lat),e.currentVertexPosition&&e.currentVertexPosition>0&&this.calculateOrientedAnglePolygon(e),e.currentVertexPosition===2){let o=this.calculatepXY3(e,t,true);o&&e.rectangle.updateCoordinate("0."+(e.currentVertexPosition+1),o[0],o[1]);}},deegrees2meters(e){let t=e[0]*2003750834e-2/180,o=Math.log(Math.tan((90+e[1])*Math.PI/360))/(Math.PI/180);return o=o*2003750834e-2/180,[t,o]},meters2degress(e){let t=e[0]*180/2003750834e-2,o=Math.atan(Math.exp(e[1]*Math.PI/2003750834e-2))*360/Math.PI-90;return [t,o]},calculateOrientedAnglePolygon:function(e){let t=e.rectangle.getCoordinate("0.0"),o=this.deegrees2meters(t),n=e.rectangle.getCoordinate("0.1"),r=this.deegrees2meters(n),a=-1*(Math.atan2(r[1]-o[1],r[0]-o[0])*180/Math.PI+90),l=a<0?a+360:a;e.angle=parseFloat(l.toFixed(2));},calculatepXY3:function(e,t,o){let n=e.rectangle.getCoordinate("0.0"),r=this.deegrees2meters(n),i=e.rectangle.getCoordinate("0.1"),a=this.deegrees2meters(i),l=this.deegrees2meters([t.lngLat.lng,t.lngLat.lat]),d=this.deegrees2meters([t.lngLat.lng,t.lngLat.lat]);if(r[0]===a[0])l=[d[0],a[1]];else if(r[1]===a[1])l=[a[0],d[1]];else {let f=-1/((a[1]-r[1])/(a[0]-r[0]));Math.abs(f)<1?l[1]=f*(d[0]-a[0])+a[1]:l[0]=a[0]+(l[1]-a[1])/f;}let s=[a[0]-r[0],a[1]-r[1]],y=[l[0]-s[0],l[1]-s[1]],p=this.meters2degress(l),b=this.meters2degress(y);return e.rectangle.updateCoordinate("0.2",p[0],p[1]),e.rectangle.updateCoordinate("0.3",b[0],b[1]),b},onKeyUp:function(e,t){if(t.keyCode===27)return this.changeMode("simple_select")},onStop:function(e){Ze.enable(this),this.updateUIClasses({mouse:"none"}),this.activateUIButton(),this.getFeature(e.rectangle.id)!==void 0&&(e.rectangle.removeCoordinate("0.4"),e.rectangle.isValid()?this.map.fire("draw.create",{features:[e.rectangle.toGeoJSON()]}):(this.deleteFeature([e.rectangle.id],{silent:true}),this.changeMode("simple_select",{},{silent:true})));},toDisplayFeatures:function(e,t,o){let n=t.properties.id===e.rectangle.id;if(t.properties.active=n?"true":"false",t.properties.angle=e.angle,t.angle=e.angle,!n)return o(t);let r=t.geometry.coordinates[0].length;if(r<3){let i=t.geometry.coordinates[0][0],a={type:"Feature",properties:t.properties,angle:e.angle,geometry:{coordinates:t.geometry.coordinates[0][0],type:"Point"}};i&&o(a);return}if(r>=3&&r<=4){let i=[[t.geometry.coordinates[0][0][0],t.geometry.coordinates[0][0][1]],[t.geometry.coordinates[0][1][0],t.geometry.coordinates[0][1][1]]];if(o({type:"Feature",properties:t.properties,angle:e.angle,geometry:{coordinates:i,type:"LineString"}}),r===3)return}return o(t)},onTrash:function(e){this.deleteFeature([e.rectangle.id],{silent:true}),this.changeMode("simple_select");}},qe=Ao;var Ge=[{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"}}];var Oo=e=>{let[t]=w();t.isMapLibre&&e.lib.constants?.classes&&Object.assign(e.lib.constants.classes,{CANVAS:"maplibregl-canvas",CONTROL_BASE:"maplibregl-ctrl",CONTROL_PREFIX:"maplibregl-ctrl-",CONTROL_GROUP:"maplibregl-ctrl-group",ATTRIBUTION:"maplibregl-ctrl-attrib"});let o=new e.lib({styles:[...e.lib.lib.theme,...Ge],modes:{...e.lib.modes,draw_point:ze(e.lib),draw_line_string:Re(e.lib),draw_polygon:Ve(e.lib),multi_point:De,radius:je(e.lib),rectangle:Ne(e.lib),rectangle_assisted:qe},userProperties:{showLength:e.showLength||false,showArea:e.showArea||false},...e.options});t.map.addControl(o,e.position||"top-right"),e.getInstance&&e.getInstance(o);let n={};return Me.forEach(r=>{if(e[r]){let i=`draw.${r.slice(2).toLowerCase()}`,a=l=>e[r](l);n[i]=a,t.map.on(i,a);}}),onCleanup(()=>{Object.keys(n).forEach(r=>t.map.off(r,n[r])),t.map?.removeControl(o);}),null};var zo=e=>{let[t]=w(),o;return q(()=>(o||(o=new e.overlay(e.props||{})),o)),createEffect(()=>o?.setProps(e.props||{})),null};
 
-export { wt as Atmosphere, Jt as Camera, Dt as Control, fo as DeckOverlay, po as Draw, Bt as Image, lt as Layer, Mt as Layer3D, eo as Light, Z as MapProvider, Ft as Marker, Vt as Popup, Ke as Source, St as Terrain, Xe as default, Nt as patternList, v as useMapContext, vt as useScene, D as useSourceId };
+export { Bt as Atmosphere, xo as Camera, no as Control, zo as DeckOverlay, Oo as Draw, fo as Image, Ft as Layer, Zt as Layer3D, Lo as Light, X as MapProvider, io as Marker, co as Popup, vt as Source, Ht as Terrain, mt as default, K as disableRasterFade, Te as patternList, j as settleAfterIdle, Fe as symbolList, G as toSDF, w as useMapContext, Nt as useScene, R as useSourceId, N as waitForIdleAndSettle };

package/dist/index.jsx

@@ -229,6 +229,79 @@ var rasterStyleList = {
   }
 };
 
+// src/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/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 +310,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(
@@ -269,7 +343,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;
@@ -301,9 +379,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,
@@ -494,6 +593,7 @@ var MapGL = (props) => {
   onCleanup(() => {
     resizeObserver?.disconnect();
     mutationObserver?.disconnect();
+    tilesLoadedGeneration++;
     map?.remove();
     debug("Map removed");
   });
@@ -502,7 +602,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()}
@@ -707,8 +814,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: 8,
+  duration: 1500,
+  waveform: "out"
+};
+var PULSE_RAMP_FRACTION = 0.75;
+var easeOutQuad = (t) => 1 - (1 - t) * (1 - t);
+var pulseShape = (elapsed, duration, waveform) => {
+  const phase = elapsed % duration / duration;
+  if (waveform === "in-out") return (1 - Math.cos(phase * Math.PI * 2)) / 2;
+  const ramp = Math.min(phase / PULSE_RAMP_FRACTION, 1);
+  return easeOutQuad(ramp);
+};
+var lerpColor = (from, to, t) => {
+  const r = Math.round(from[0] + (to[0] - from[0]) * t);
+  const g = Math.round(from[1] + (to[1] - from[1]) * t);
+  const b = Math.round(from[2] + (to[2] - from[2]) * t);
+  const a = from[3] + (to[3] - from[3]) * t;
+  return `rgba(${r}, ${g}, ${b}, ${a})`;
+};
 var diff = (newProps = {}, prevProps = {}) => {
   const keys = /* @__PURE__ */ new Set([...Object.keys(newProps), ...Object.keys(prevProps)]);
   return [...keys].reduce((acc, key) => {
@@ -853,6 +989,44 @@ var Layer = (props) => {
       props.featureState.state
     );
   });
+  createEffect4(() => {
+    if (!props.pulse) return;
+    const configs = props.pulse === true ? [{}] : Array.isArray(props.pulse) ? props.pulse : [props.pulse];
+    const resolved = configs.map((config) => {
+      const { property, from, to, duration, waveform } = {
+        ...PULSE_DEFAULTS,
+        ...config
+      };
+      const isColor = typeof from === "string" || typeof to === "string";
+      const [a, b] = waveform === "in" ? [to, from] : [from, to];
+      return {
+        property,
+        duration,
+        waveform,
+        isColor,
+        fromNum: isColor ? 0 : a,
+        toNum: isColor ? 0 : b,
+        fromRgba: isColor ? toRgbaComponents(a) : null,
+        toRgba: isColor ? toRgbaComponents(b) : null
+      };
+    });
+    const 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;
 };
@@ -1181,24 +1355,142 @@ import {
   createEffect as createEffect11,
   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, length3, f, v, z) {
+  v[0] = 0;
+  z[0] = -INF;
+  z[1] = INF;
+  f[0] = grid[offset];
+  for (let q = 1, k = 0, s = 0; q < length3; q++) {
+    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 < length3; 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 = (body) => `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">${body}</svg>`;
+var SYMBOL = {
+  square: svg('<rect x="8" y="8" width="48" height="48" fill="#000"/>'),
+  circle: svg('<circle cx="32" cy="32" r="28" fill="#000"/>'),
+  triangle: svg('<polygon points="32,6 60,56 4,56" fill="#000"/>'),
+  diamond: svg('<polygon points="32,4 60,32 32,60 4,32" fill="#000"/>'),
+  pentagon: svg('<polygon points="32,4 59,23 48,55 16,55 5,23" fill="#000"/>'),
+  hexagon: svg('<polygon points="32,4 56,18 56,46 32,60 8,46 8,18" fill="#000"/>'),
+  // A square with corners cut at 2/7 of its side, the standard construction for a regular
+  // octagon (stop-sign proportions) without resorting to trig.
+  octagon: svg(
+    '<polygon points="20,4 44,4 60,20 60,44 44,60 20,60 4,44 4,20" fill="#000"/>'
+  ),
+  cross: svg(
+    '<polygon points="20,4 44,4 44,20 60,20 60,44 44,44 44,60 20,60 20,44 4,44 4,20 20,20" fill="#000"/>'
+  ),
+  // The same 12-point "+" as `cross` above, rotated 45° about the center.
+  x: svg(
+    '<polygon points="43,4 60,21 49,32 60,43 43,60 32,49 21,60 4,43 15,32 4,21 21,4 32,15" fill="#000"/>'
+  ),
+  // A regular 5-pointed star: outer vertices every 72° (radius 30) alternating with inner
+  // vertices every 72° offset by 36° (radius ~11.5, the usual ratio for a balanced star).
+  star: svg(
+    '<polygon points="32,2 39,23 61,23 43,36 50,56 32,44 14,56 21,36 4,23 25,23" fill="#000"/>'
+  )
+};
+var symbolList = Object.keys(SYMBOL);
+var wrapSymbolPath = (d) => svg(`<path d="${d}" fill="#000"/>`);
+
+// src/components/Image/index.tsx
 var MGL_Image = (props) => {
   const [ctx] = useMapContext();
   const [size, setSize] = createSignal4({ width: 0, height: 0 });
@@ -1219,11 +1511,12 @@ var MGL_Image = (props) => {
   });
   createEffect11(() => {
     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 +1534,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];
     }
@@ -1266,21 +1560,39 @@ var MGL_Image = (props) => {
           const floorScale = Math.max(1, 50 / Math.min(img.width, img.height));
           const pixelRatio = props.options?.pixelRatio ?? Math.max(1, Math.round(window.devicePixelRatio || 1));
           const scale = floorScale * pixelRatio;
+          const padding = sdfOpts ? sdfPadding(sdfOpts) * pixelRatio : 0;
+          const 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),
+            sdfOpts ? toSDF(imageData2, sdfOpts) : imageData2,
             pixelRatio
           );
         };
         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 +1613,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;
@@ -2401,8 +2713,13 @@ export {
   Source,
   Terrain,
   MapGL as default,
+  disableRasterFade,
   patternList,
+  settleAfterIdle,
+  symbolList,
+  toSDF,
   useMapContext,
   useScene,
-  useSourceId
+  useSourceId,
+  waitForIdleAndSettle
 };

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.1.0",
+  "version": "2.2.0",
   "name": "solid-map-gl",
   "description": "SolidJS Component Library for Mapbox GL JS & MapLibre GL JS",
   "info": "SolidJS Component Library for Mapbox GL JS & MapLibre GL JS. Mapbox GL JS and MapLibre GL JS are JavaScript libraries that render interactive maps from vector tiles and map styles using WebGL. This project is intended to be as close as possible to the Mapbox GL JS API.",