solid-map-gl 2.0.0 → 2.1.0

package/README.md

@@ -33,6 +33,12 @@ pnpm add solid-map-gl maplibre-gl mapbox-gl@npm:empty-npm-package@1.0.0
 pnpm dev
 ```
 
+> [!NOTE]
+> `npm` enforces peer-dependency version ranges more strictly than `pnpm`/`yarn` — the placeholder
+> above satisfies them on `pnpm`/`yarn`, but `npm install` will fail with an `ERESOLVE` error since
+> the placeholder's version doesn't match `solid-map-gl`'s declared `mapbox-gl` range. Use
+> `pnpm`/`yarn` for this install, or run `npm install --legacy-peer-deps` if you must use `npm`.
+
 #### [Solid Start](https://gis-hub.gitbook.io/solid-map-gl/start#solid-start)
 
 ```shell
@@ -123,6 +129,12 @@ yarn add solid-map-gl maplibre-gl mapbox-gl@npm:empty-npm-package@1.0.0
 npm  i   solid-map-gl maplibre-gl mapbox-gl@npm:empty-npm-package@1.0.0
 ```
 
+> [!NOTE]
+> `npm` enforces peer-dependency version ranges more strictly than `pnpm`/`yarn` — the placeholder
+> above satisfies them on `pnpm`/`yarn`, but `npm install` will fail with an `ERESOLVE` error since
+> the placeholder's version doesn't match `solid-map-gl`'s declared `mapbox-gl` range. Use
+> `pnpm`/`yarn` for this install, or run `npm install --legacy-peer-deps` if you must use `npm`.
+
 ```jsx
 import { render } from "solid-js/web";
 import { Component, createSignal } from "solid-js";

package/dist/index.d.ts

@@ -219,6 +219,12 @@ type Props$b = {
     disableResize?: boolean;
     mapLib?: any;
     apikey?: string;
+    /** Named values (colors, widths, ...), reusable across every `<Layer>` in this map by writing
+     * `"@name"` in a paint/layout style property instead of repeating the literal value. Updating
+     * this prop updates every layer referencing a changed name. Mirrors the `constants`/`@name`
+     * feature the Mapbox GL style spec itself dropped after v7 — resolved here in JS instead, never
+     * touching the style JSON Mapbox itself sees. */
+    constants?: Record<string, string | number>;
     debug?: boolean;
     debugEvents?: boolean;
     ref?: HTMLDivElement;
@@ -233,12 +239,23 @@ type MapContextState = {
     /** The resolved Mapbox/MapLibre module in use — replaces the old `window.MapLib` global */
     mapLib: any;
     isMapLibre: boolean;
+    /** Named values (colors, widths, ...) that Layer style props can reference via `"@name"` */
+    constants: Record<string, any>;
+    /** Bumped by MapGL on every matchMedia/dark-class-mutation firing, unconditionally — not a
+     * light/dark judgment, just "something in the environment that could affect a resolved CSS
+     * value just changed." Layer reads this only to know *when* to re-probe a "bg-x dark:bg-y"
+     * color pair, never to decide which of the two applies (the browser's own cascade decides that,
+     * see resolveColor in src/colors.ts) — so it stays correct even for a dark-mode strategy (e.g. a
+     * `data-theme` attribute) MapGL's own class-based heuristic wouldn't recognize as "dark" */
+    themeVersion: number;
 };
 declare const useMapContext: () => [MapContextState];
 declare const MapProvider: ParentComponent<{
     map?: Map;
     mapLib?: any;
     isMapLibre?: boolean;
+    constants?: Record<string, any>;
+    themeVersion?: number;
 }>;
 
 declare const useSourceId: () => string;

package/dist/index.js

@@ -1,11 +1,11 @@
-import { template, createComponent, use, insert, memo, effect, setAttribute, className, classList, style } from 'solid-js/web';
-import { createContext, useContext, createSignal, onMount, createEffect, on, onCleanup, createUniqueId, createMemo, splitProps, untrack } from 'solid-js';
+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 pe from '@turf/length';
-import jt from '@turf/area';
-import Ut from '@turf/midpoint';
+import we from '@turf/length';
+import oo from '@turf/area';
+import no from '@turf/midpoint';
 import { centerOfMass } from '@turf/center-of-mass';
 
-var q={map:null,mapLib:null,isMapLibre:false},W=createContext([q]),h=()=>useContext(W),R=e=>{let[t,o]=createStore({...q});return e.map&&o("map",e.map),e.mapLib&&o("mapLib",e.mapLib),o("isMapLibre",!!e.isMapLibre),createComponent(W.Provider,{value:[t],get children(){return e.children}})};var H=["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"],J=["onMouseDown","onMouseUp","onMouseOver","onMouseOut","onMouseMove","onMouseEnter","onMouseLeave","onClick","onDblClick","onContextMenu","onTouchStart","onTouchEnd","onTouchCancel"],K=["onCreate","onDelete","onCombine","onUncombine","onUpdate","onSelectionchange","onModechange","onRender","onActionable"];var b="mapbox://styles/mapbox",k="https://raw.githubusercontent.com/",y="https://raw.githubusercontent.com/GIShub4/map-styles/main/",V="https://assets.vector.hereapi.com/styles/",Q={mb:{standard:`${b}/standard`,light:`${b}/light-v11`,dark:`${b}/dark-v11`,street:`${b}/streets-v12`,outdoor:`${b}/outdoors-v12`,sat:`${b}/satellite-v9`,sat_street:`${b}/satellite-streets-v12`,nav_base:`${b}/navigation-guidance-day-v4`,nav_base_night:`${b}/navigation-guidance-night-v4`,nav:`${b}/navigation-day-v1`,nav_night:`${b}/navigation-night-v1`,basic:`${b}/cjf4m44iw0uza2spb3q0a7s41`,monochrome:`${b}/cjv6rzz4j3m4b1fqcchuxclhb`,leshine:`${b}/cjcunv5ae262f2sm9tfwg8i0w`,icecream:`${b}/cj7t3i5yj0unt2rmt3y4b5e32`,cali:`${b}/cjerxnqt3cgvp2rmyuxbeqme7`,northstar:`${b}/cj44mfrt20f082snokim4ungi`,mineral:`${b}/cjtep62gq54l21frr1whf27ak`,moonlight:`${b}/cj3kbeqzo00022smj7akz3o1e`,frank:`${b}-map-design/ckshxkppe0gge18nz20i0nrwq`,minimo:`${b}-map-design/cksjc2nsq1bg117pnekb655h1`,decimal:`${b}-map-design/ck4014y110wt61ctt07egsel6`,stand:`${b}-map-design/ckr0svm3922ki18qntevm857n`,blueprint:`${b}-map-design/cks97e1e37nsd17nzg7p0308g`,bubble:`${b}-map-design/cksysy2nl62zp17quosctdtcc`,pencil:`${b}-map-design/cks9iema71es417mlrft4go2k`,swiss_ski:`${k}mapbox/mapbox-gl-swiss-ski-style/master/cij1zoclj002y8rkkdjl69psd.json`,vintage:`${k}mapbox/mapbox-gl-vintage-style/master/cif5p01n202nisaktvljx9mv3.json`,whaam:`${k}mapbox/mapbox-gl-whaam-style/master/cii8323c8004w0nlvtss3dbm2.json`,neon:`${k}NatEvatt/awesome-mapbox-gl-styles/master/styles/Neon/style.json`,camoflauge:`${k}jingsam/mapbox-gl-styles/master/Camouflage.json`,emerald:`${k}jingsam/mapbox-gl-styles/master/Emerald.json`,runner:`${k}jingsam/mapbox-gl-styles/master/Runner.json`,x_ray:`${k}jingsam/mapbox-gl-styles/master/X-ray.json`},here:{base:`${V}berlin/base/mapbox/tilezen?apikey={apikey}`,day:`${V}berlin/day/mapbox/tilezen?apikey={apikey}`,night:`${V}berlin/night/mapbox/tilezen?apikey={apikey}`},esri:{blueprint:`${y}esri:blueprint.json`,charted_territory:`${y}esri:charted-territory.json`,colored_pencil:`${y}esri:colored-pencil.json`,community:`${y}esri:community.json`,mid_century:`${y}esri:mid-century.json`,modern_antique:`${y}esri:modern-antique.json`,nat_geo:`${y}esri:national-geographic.json`,newspaper:`${y}esri:newspaper.json`,open_street_map:`${y}esri:open-street-map.json`,light_gray_canvas:`${y}esri:light-gray-canvas.json`,dark_gray_canvas:`${y}esri:dark-gray-canvas.json`,human_geo_light:`${y}esri:human-geography-light.json`,human_geo_dark:`${y}esri:human-geography-dark.json`,world_navigation:`${y}esri:world-navigation.json`,world_street:`${y}esri:world-street.json`,world_street_night:`${y}esri:world-street-night.json`,world_terrain:`${y}esri:world-terrain.json`,world_terrain_hybrid:`${y}esri:world-terrain-hybrid.json`,world_topographic:`${y}esri:world-topographic.json`,chromium:`${y}esri:chromium.json`,dreamcatcher:`${y}esri:dreamcatcher.json`,seahaven:`${y}esri:seahaven.json`,sangria:`${y}esri:sangria.json`,mercurial:`${y}esri:mercurial.json`,imagery:`${y}esri:imagery.json`,imagery_hybrid:`${y}esri:imagery-hybrid.json`,firefly:`${y}esri:firefly.json`,firefly_hybrid:`${y}esri:firefly-hybrid.json`,oceans:`${y}esri:oceans.json`}},j="https://{s}.basemaps.cartocdn.com/rastertiles/",D="https://stamen-tiles-{s}.a.ssl.fastly.net/",E="https://{s}.tile.thunderforest.com/",U={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:`${j}voyager_labels_under/{z}/{x}/{y}{r}.png`,positron:`${j}light_all/{z}/{x}/{y}{r}.png`,dark:`${j}dark_all/{z}/{x}/{y}{r}.png`,_copy:'<a href="https://carto.com/attribution" target="_blank">&copy; Carto</a>'},stamen:{toner:`${D}toner/{z}/{x}/{y}{r}.png`,toner_lite:`${D}toner-lite/{z}/{x}/{y}{r}.png`,watercolor:`${D}watercolor/{z}/{x}/{y}.png`,terrain:`${D}terrain/{z}/{x}/{y}{r}.png`,_copy:'<a href="https://stamen.com/privacy-policy" target="_blank">&copy; Stamen Design</a>'},tf:{cycle:`${E}cycle/{z}/{x}/{y}{r}.png?apikey={apikey}`,trans:`${E}transport/{z}/{x}/{y}{r}.png?apikey={apikey}`,trans_dark:`${E}transport-dark/{z}/{x}/{y}{r}.png?apikey={apikey}`,landscape:`${E}landscape/{z}/{x}/{y}{r}.png?apikey={apikey}`,outdoors:`${E}outdoors/{z}/{x}/{y}{r}.png?apikey={apikey}`,neighbourhood:`${E}neighbourhood/{z}/{x}/{y}{r}.png?apikey={apikey}`,spinal:`${E}spinal-map/{z}/{x}/{y}{r}.png?apikey={apikey}`,pioneer:`${E}pioneer/{z}/{x}/{y}{r}.png?apikey={apikey}`,atlas:`${E}atlas/{z}/{x}/{y}{r}.png?apikey={apikey}`,mobile:`${E}mobile-atlas/{z}/{x}/{y}{r}.png?apikey={apikey}`,_copy:'<a href="https://thunderforest.com/privacy" target="_blank">&copy; Thunderforest</a>'}};var Ie=template("<div style=width:100%;height:100%>"),Te=template("<style>.overlay{position:relative;width:100%;height:100%;pointer-events:none}:where(.overlay>*){pointer-events:auto}"),De=template("<div class=overlay>"),Ae=e=>{let t,o,n,r,s,a=false,[i,d]=createSignal(null),[p,f]=createSignal(typeof window<"u"&&window.matchMedia("(prefers-color-scheme: dark)").matches||typeof document<"u"&&document.body.classList.contains("dark")),g=false,x=false,m=(l,c)=>(e.debug||e.debugEvents)&&console.debug("%c[MapGL]","color: #0ea5e9",l,c||""),v=(l,c)=>{let u=p()&&c?c:l;return (typeof u=="string"||u instanceof String)&&u?.split(":").reduce((M,C)=>M&&M[C],Q)?.replace("{apikey}",e.apikey||import.meta.env?.VITE_VECTOR_API_KEY)||u};onMount(async()=>{if(s=e.mapLib||await import('mapbox-gl'),s.Map||(s=window.maplibregl||window.mapboxgl),typeof s.supported=="function"&&!s.supported())throw new Error("Mapbox GL not supported");a=typeof s.Map?.prototype?.setConfigProperty!="function",m(`Map (v${s.version}) loading...`),t=new s.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}}),t.debug=e.debug,t.debugEvents=e.debugEvents,t.sourceIdList=[],t.layerIdList=[],t.isMapLibre=a,H.forEach(l=>{let c=e[l];if(c){let u=l.slice(2).toLowerCase();typeof c=="function"?t.on(u,M=>{setTimeout(()=>{M.clickOnLayer||(c(M),e.debugEvents&&m(`Map '${u}' event:`,M));},0);}):Object.keys(c).forEach(M=>{t.on(u,M,C=>{setTimeout(()=>{C.clickOnLayer||(c[M](C),e.debugEvents&&m(`Map '${u}' event on '${M}':`,C));},0);});});}}),t.once("load",()=>{d(t),m("Map loaded"),["mousedown","touchstart","wheel"].forEach(c=>t.on(c,u=>!u.rotate&&e.onUserInteraction?.(true))),["moveend","mouseup","touchend"].forEach(c=>t.on(c,u=>!u.rotate&&e.onUserInteraction?.(false)));let l=typeof window<"u"&&window?.matchMedia("(prefers-color-scheme: dark)");l?.addEventListener("change",()=>{f(l.matches),m("Set dark theme to:",l.matches?.toString());}),r=new MutationObserver(()=>{let c=document.body.classList.contains("dark");f(c),m("Set theme to:",c);}),r.observe(document.body,{attributes:true}),e.disableResize||(n=new ResizeObserver(()=>{setTimeout(()=>{t?.resize();},0),m("Map resized");}),n.observe(o)),t.on("move",c=>{let u={...e.viewport,id:e.id,point:{x:c.originalEvent?.x,y:c.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};!c.viewport&&e.onViewportChange&&(x=true,e.onViewportChange(u));}),t.on("moveend",c=>{if(g||c.rotate||!e.onViewportChange)return;let u={...e.viewport,inTransit:false};x=true,e.onViewportChange(u);});});}),createEffect(on(()=>e.viewport,l=>{if(e.id!==l?.id)return;if(x){x=false;return}let c={...l,...l.bounds?t.cameraForBounds(l.bounds,{bearing:l?.bearing,pitch:l?.pitch,padding:l?.padding}):null};g=true,t.stop(),g=false,t[e.transitionType||"flyTo"](c),m(`Update Viewport (${e.transitionType||"flyTo"}):`,c);},{defer:true})),createEffect(()=>{let l=i();if(typeof l?.setConfigProperty!="function"){l&&e.config&&Object.keys(e.config).length&&m("Config prop is set but this map library has no setConfigProperty (Mapbox Standard Style only) \u2014 skipping");return}for(let c in e.config){if(!c||c==="id")continue;let u=e.config?.id||"basemap",M=e.config[c];l.setConfigProperty(u,c,M),m(`Set Config (${u}:${c}) to:`,M);}}),createEffect(()=>{let l=e.options?.projection;!t||!l||(t.setProjection(l),m("Set Projection to:",l));}),createEffect(()=>{let l=e.cursorStyle;!t||!l||(t.getCanvas().style.cursor=l,m("Set Cursor to:",l));});let w=(l,c)=>(c.forEach(u=>{let M=l.findIndex(C=>u.metadata.smg.beforeType?C.type===u.metadata.smg.beforeType:C.id===u.metadata.smg.beforeId);l=M===-1?[...l,u]:[...l.slice(0,M),u,...l.slice(M)];}),l);return createEffect(l=>{let c=v(e.options?.style,e.darkStyle);if(t?.isStyleLoaded()&&l!==c){let u=t.getStyle(),M=u.layers.filter(L=>t.layerIdList.includes(L.id)),C=Object.keys(u.sources).filter(L=>t.sourceIdList.includes(L)).reduce((L,Y)=>({...L,[Y]:u.sources[Y]}),{}),A=e.shouldDiffStyle?e.shouldDiffStyle(l,c):true;t.setStyle(c,A?void 0:{diff:false}),t.once("styledata",()=>{if(!M)return;let L=t.getStyle();t.setStyle({...L,sources:{...L.sources,...C},layers:w(L.layers,M),fog:u.fog,terrain:u.terrain,light:u.light}),m("Set Mapstyle to:",c);});}return c},e.options?.style),["showTileBoundaries","showTerrainWireframe","showCollisionBoxes","showPadding","showOverdrawInspector"].forEach(l=>{createEffect(()=>{let c=e[l];!t||!c||(t[l]=c,m(`Set ${l} to:`,c));});}),onCleanup(()=>{n?.disconnect(),r?.disconnect(),t?.remove(),m("Map removed");}),(()=>{var l=Ie(),c=o;return typeof c=="function"?use(c,l):o=l,insert(l,(()=>{var u=memo(()=>!!i());return ()=>u()&&createComponent(R,{get map(){return i()},mapLib:s,isMapLibre:a,get children(){return [Te(),(()=>{var M=De();return insert(M,()=>e.children),M})()]}})})()),effect(u=>{var M=e.id,C=e?.class,A=e?.classList,L={...e.style};return M!==u.e&&setAttribute(l,"id",u.e=M),C!==u.t&&className(l,u.t=C),u.a=classList(l,A,u.a),u.o=style(l,L,u.o),u},{e:void 0,t:void 0,a:void 0,o:void 0}),l})()};var oe=createContext(),$=()=>useContext(oe),Ge=e=>{let[t]=h();e.id??=createUniqueId();let o=(s,a)=>{t.map.debug&&console.debug("%c[MapGL]","color: #ec4899",s,a||"");},n=()=>e.source,r=s=>{let a=s?.split(":").reduce((d,p)=>d&&d[p],U),i=a?{...n(),url:"",tiles:[a.replace("{apikey}",n().apikey||import.meta.env?.VITE_RASTER_API_KEY).replace("{r}",window.devicePixelRatio>1?"@2x":"")],attribution:U[s.split(":")[0]]._copy}:n();return i.tiles&&(i.tiles=["a","b","c"].map(d=>i.tiles[0].replace("{s}",d))),i};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 s=n().data;t.map.getSource(e.id).setData(s||{}),o("Update GeoJSON Data:",e.id);});break;case "image":createEffect(()=>{let s=n().url,a=n().coordinates;t.map.getSource(e.id).updateImage(s,a),o("Update Image Data:",e.id);});break;case "vector":createEffect(()=>{let s=n().url,a=n().tiles,i=t.map.getSource(e.id);s?i.setUrl(s):i.setTiles(a),o("Update Vector Data:",e.id);});break;case "raster":createEffect(()=>{let s=r(n().url),a=t.map.getSource(e.id);s.url?a.setUrl(s.url):a.setTiles(s.tiles),o("Update Raster Data:",e.id);});break}return onCleanup(()=>{t.map?.getStyle().layers.forEach(s=>s.source===e.id&&t.map.removeLayer(s.id)),t.map?.getSource(e.id)&&t.map?.removeSource(e.id),o("Remove Source:",e.id);}),createComponent(oe.Provider,{get value(){return e.id},get children(){return e.children}})};var ne=["id","type","filter","source","source-layer","minzoom","metadata","maxzoom","paint","layout"],re=["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 ae=(e={},t={})=>[...new Set([...Object.keys(e),...Object.keys(t)])].reduce((n,r)=>{let s=e[r];return s!==t[r]&&n.push([r,s]),n},[]),G=(e,t)=>(e.startsWith(t)||e.startsWith("icon")||e.startsWith("text")?"":t+"-")+e.replace(/[A-Z]/g,o=>"-"+o.toLowerCase()),N=e=>{if(!e)return;let t={},o={},n={};return Object.entries(e).forEach(([r,s])=>{if(ne.includes(r))n[r]=s;else {let a=G(r,e.type);re.includes(a)?t[a]=s:o[a]=s;}}),e.paint&&Object.entries(e.paint).forEach(([r,s])=>o[G(r,e.type)]=s),e.layout&&Object.entries(e.layout).forEach(([r,s])=>t[G(r,e.type)]=s),{...n,paint:o,layout:t}},Ye=e=>{let[t]=h(),o=e.sourceId||e.style?.source||$(),n=e.id||e.customLayer?.id||createUniqueId(),r=(a,i)=>{(t.map.debug||t.map.debugEvents)&&console.debug("%c[MapGL]","color: #10b981",a,i||"");},s=createMemo(()=>e.beforeType?t.map.getStyle().layers.find(a=>a.type===e.beforeType)?.id:e.beforeId);return t.map.addLayer(e.customLayer||{...N(e.style),id:n,source:o,...t.isMapLibre?{}:{slot:e.slot||""},metadata:{smg:{beforeType:e.beforeType,beforeId:e.beforeId}}},s()),t.map.layerIdList.push(n),e.customLayer&&t.map.fire("load"),r("Add Layer:",n),J.forEach(a=>{if(e[a]){let i=a.slice(2).toLowerCase();t.map.on(i,n,d=>{d.clickOnLayer=true,e[a](d),t.map.debugEvents&&r(`Layer '${i}' event on '${n}':`,d);});}}),createEffect(a=>{let i=N(e.style);if(i!==a)return i.layout!==a?.layout&&ae(i.layout,a?.layout).forEach(([d,p])=>t.map.setLayoutProperty(n,d,p,{validate:false})),i.paint!==a?.paint&&ae(i.paint,a?.paint).forEach(([d,p])=>t.map.setPaintProperty(n,d,p,{validate:false})),(i.minzoom!==a?.minzoom||i.maxzoom!==a?.maxzoom)&&t.map.setLayerZoomRange(n,i.minzoom,i.maxzoom),i.filter!==a?.filter&&t.map.setFilter(n,i.filter,{validate:false}),r("Update Layer Style:",n),i},N(e.style)),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=>s()===a?a:(t.map.moveLayer(n,s()),r(`Update Layer Z-Index (${n}):`,s()),s()),s()),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 ie=createContext(),ot=()=>useContext(ie),nt=e=>{let[t]=h(),[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),s=r.meterInMercatorCoordinateUnits(),{x:a,y:i,z:d}=r,p=null,f=null,g=null;e.babylon?(f=await import('@babylonjs/core'),p=f.Matrix.Compose(new f.Vector3(s,s,s),f.Quaternion.FromEulerAngles(Math.PI/2,0,0),new f.Vector3(a,i,d))):(g=await import('three'),p={translateX:a,translateY:i,translateZ:d,rotateX:Math.PI/2,rotateY:0,rotateZ:0,scale:s}),t.map.addLayer({id:e.id,type:"custom",renderingMode:"3d",onAdd(x,m){if(e.babylon){let v=new f.Engine(m,true,{useHighPrecisionMatrix:true},true);this.scene=new f.Scene(v),this.scene.autoClear=false,this.scene.preventDefaultOnPointerDown=false,this.scene.preventDefaultOnPointerUp=false;let w=new f.UniversalCamera("Camera",f.Vector3.Zero());w.mode=f.Camera.ORTHOGRAPHIC_CAMERA,w.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:x.getCanvas(),context:m,antialias:true}),this.renderer.autoClear=false;this.map=x,e.onAdd&&e.onAdd(this.scene,this.map,m),n(this.scene);},render(x,m){if(e.babylon){this.scene.activeCamera.freezeProjectionMatrix(p.multiply(f.Matrix.FromArray(m)));this.map.getPitch()*(Math.PI/180);this.map.getBearing()*(Math.PI/180);this.scene.render(false);}else {let v=new g.Matrix4().makeRotationAxis(new g.Vector3(1,0,0),p.rotateX),w=new g.Matrix4().makeRotationAxis(new g.Vector3(0,1,0),p.rotateY),l=new g.Matrix4().makeRotationAxis(new g.Vector3(0,0,1),p.rotateZ),c=new g.Matrix4().fromArray(m),u=new g.Matrix4().makeTranslation(p.translateX,p.translateY,p.translateZ).scale(new g.Vector3(p.scale,-p.scale,p.scale)).multiply(v).multiply(w).multiply(l);this.camera.projectionMatrix=c.multiply(u),this.renderer.resetState(),this.renderer.render(this.scene,this.camera);}e.onRender&&e.onRender(x,m),t.map.triggerRepaint();}},e.beforeId);}),onCleanup(()=>{t.map.getLayer(e.id)&&t.map.removeLayer(e.id);}),createComponent(ie.Provider,{value:o,get children(){return memo(()=>!!o())()&&e.children}})};var it=e=>{let[t]=h();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 ut=e=>{let[t]=h(),o=$();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 z=(e,t)=>{let[o]=h();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 yt=e=>{let[t]=h(),[o,n]=splitProps(e,["position"]),[r,s]=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())),s(n.custom||new(a.get(n.type||"navigation"))(n.options));}),z(r,()=>o.position),null};var bt=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]=h(),s=null,a=null,i=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),s?.setPopup(a));}),createEffect(()=>t.showPopup!==a?.isOpen()&&s?.togglePopup()));}),createEffect(()=>{r.map&&(s?.remove(),s=new r.mapLib.Marker(n.options).on("dragstart",()=>n.onDragStart?.()).on("dragend",()=>n.onDragEnd?.()).on("drag",()=>n.onDrag?.(s?.getLngLat().toArray())).setPopup(a).setLngLat(i).addTo(r.map),createEffect(()=>t.showPopup!==a?.isOpen()&&s?.togglePopup()));}),createEffect(()=>s?.setLngLat(t.lngLat)),createEffect(()=>s?.setDraggable(t.draggable)),onCleanup(()=>s?.remove()),null};var Ct=e=>{if(!e.trackPointer&&!e.lngLat)throw new Error("Popup - lngLat or trackPointer is required");let[t,o]=splitProps(e,["lngLat","children","trackPointer"]),[n]=h(),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 se={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}},Pt=Object.keys(se),_t=e=>{let[t]=h(),[o,n]=createSignal({width:0,height:0}),r=(i,d)=>{t.map.debug&&console.debug("%c[MapGL]","color: #10b981",i,d||"");};onCleanup(()=>{t.map?.hasImage(e.id)&&t.map?.removeImage(e.id),r("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 i=e.pattern?{pixelRatio:2,...e.options}:e.options;s(e.source||a(e.pattern),d=>{let{width:p,height:f}=d;t.map&&!t.map.hasImage(e.id)&&t.map.addImage(e.id,d,i),!e.pattern&&untrack(()=>p===o().width&&f===o().height)?(t.map.updateImage(e.id,d),t.map.triggerRepaint()):(t.map.removeImage(e.id),t.map.addImage(e.id,d,i)),n({width:p,height:f}),r("Add Image:",e.id),t.map.on("style.load",()=>{t.map.hasImage(e.id)||(t.map.addImage(e.id,d,i),r("Re-Add Image:",e.id));});});});let s=(i,d)=>{if(typeof i=="string"&&i?.trimStart().startsWith("<svg")&&(i=new DOMParser().parseFromString(i,"image/svg+xml").childNodes[0]),i instanceof SVGElement&&(e.options?.fill&&i.setAttribute("fill",e.options.fill),e.options?.stroke&&i.setAttribute("stroke",e.options.stroke),i=new XMLSerializer().serializeToString(i)),typeof i!="string")return d(i);t.map.loadImage(i,async(p,f)=>{if(p){typeof i=="string"&&i?.trimEnd().endsWith(".svg")&&(i=await(await fetch(i)).text(),i=new DOMParser().parseFromString(i,"image/svg+xml").childNodes[0],i.setAttribute("fill",e.options.fill),i.setAttribute("stroke",e.options.stroke),i.setAttribute("transform",e.options.transform),i=new XMLSerializer().serializeToString(i));let g=new Image;g.crossOrigin="Anonymous",g.onload=()=>{let x=document.createElement("canvas");x.width=Math.max(g.width,50),x.height=Math.max(g.height,50);let m=x.getContext("2d");return m.imageSmoothingEnabled=true,m.drawImage(g,0,0,x.width,x.height),d(m.getImageData(0,0,x.width,x.height))},g.src=i.trimStart().startsWith("<svg")?"data:image/svg+xml;charset=utf-8,"+i:i;}else return d(f)});},a=i=>{let d=se[i.type];return {width:d.size,height:d.size,data:new Uint8Array(d.size*d.size*4),onAdd:function(){let p=document.createElement("canvas");p.width=p.height=d.size,this.ctx=p.getContext("2d",{willReadFrequently:true});},render:function(){return this.ctx.fillStyle=i.background||"transparent",this.ctx.fillRect(0,0,this.width,this.height),this.ctx.strokeStyle=this.ctx.fillStyle=i.color||"black",this.ctx.lineWidth=i.lineWith||1,this.ctx.stroke(new Path2D(d.path)),d.fill&&this.ctx.fill(new Path2D(d.path)),this.data=this.ctx.getImageData(0,0,this.width,this.height).data,true}}};return null};var Tt=(e,t,o)=>e.map((n,r)=>(1-o)*e[r]+o*t[r]),Dt=(e,t,o)=>{let n=e.map((s,a)=>e[a]*t[a]).reduce((s,a)=>s+a),r=Math.acos(n);return e.map((s,a)=>Math.sin((1-o)*r)/Math.sin(r)*e[a]+Math.sin(o*r)/Math.sin(r)*t[a])},Ot={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},zt=e=>{let[t]=h(),o=.1,n=false,[r,s]=createSignal(false);["mousedown","touchstart","wheel"].forEach(m=>t.map.on(m,v=>!v.rotate&&s(true))),["moveend","mouseup","touchend"].forEach(m=>t.map.on(m,v=>!v.rotate&&s(false)));let a=async([m,v,w],l)=>{let c=t.map.getFreeCameraOptions();c.position=t.mapLib.MercatorCoordinate.fromLngLat([m,v],w),c.lookAtPoint(l),t.map.setFreeCameraOptions(c);},i=()=>{e.translate&&window.requestAnimationFrame(i);let m=[e.translate.start,e.translate.end,e.translate.easing?Ot[e.translate.easing](o):o],v=e.translate.type==="line"?Tt(...m):Dt(...m);a(v,e.translate.target),!e.translate.loop&&(o>1||o<0)&&(n=!n),o=n?o-.001:o+.001;};createEffect(()=>{e.translate&&window.requestAnimationFrame(i);});let d={duration:1e3,easing:m=>m},p=()=>{if(r())return;let{secPerRev:m=120,maxSpinZoom:v=5,slowSpinZoom:w=3}=e.rotateGlobe,l=t.map.getZoom();if(l>v)return;let c=360/m;l>w&&(c*=(v-l)/(v-w));let u=t.map.getCenter();u.lng=e.reverse?u.lng+c:u.lng-c,t.map.easeTo({center:u,...d},{rotate:true});},f=()=>{if(!e.rotateViewport||r()){t.map.stop();return}let m=e.rotateViewport,v=m?.secPerRev||60,w=e.reverse?t.map.getBearing()+360/v:t.map.getBearing()-360/v,l=m?.pitch||60,c=m?.around;t.map.easeTo({bearing:w,pitch:l,around:c,...d},{rotate:true});},g=()=>e.rotateGlobe?p():f();t.map.on("moveend",g).on("dragend",g);let x;return createEffect(()=>{e.rotateGlobe!=null&&(e.rotateGlobe?(x=t.map.getCenter(),p()):e.resetWhenStopped?t.map.stop().easeTo({center:x}):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 Rt=e=>{let[t]=h();return createEffect(()=>t.map.setLight(e.style||{})),onCleanup(()=>t.map?.setLight(null)),null};var T={};T.onSetup=function(e){var t={};return t.count=e.count||0,t};T.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);};T.onKeyUp=function(e,t){if(t.keyCode===27)return this.changeMode("simple_select")};T.toDisplayFeatures=function(e,t,o){o(t);};var le=T;var ce=e=>new Intl.NumberFormat(void 0,{maximumFractionDigits:5}).format(e[0])+"\xB0 "+new Intl.NumberFormat(void 0,{maximumFractionDigits:5}).format(e[1])+"\xB0",S=(e,t)=>{let o=pe({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:Ut(e[0],e[1]).geometry.coordinates}}},F=(e,t)=>{let o=jt({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 ue=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=S(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 de=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=ce([n.lng,n.lat]),o.point.updateCoordinate("",n.lng,n.lat);},toDisplayFeatures:function(o,n,r){let s=n.properties.id===o.point.id;return n.properties.active=s?"":"false",r(n)}}};var me=e=>{let t=e.modes.draw_polygon;return {...t,toDisplayFeatures:function(o,n,r){let s=a=>{if(r(a),this.drawConfig.userProperties.showLength){let i=Array.isArray(a.geometry.coordinates[0][0])?a.geometry.coordinates[0]:a.geometry.coordinates;i.forEach((d,p)=>{!Array.isArray(d)||p==0||r(S([i[p-1],d]));});}this.drawConfig.userProperties.showArea&&a.geometry.coordinates[0].length>=3&&r(F([a.geometry.coordinates[0]]));};t.toDisplayFeatures.call(this,o,n,s);}}};function Gt(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 Nt(e,t,o,n=64){let r=[],s=t/(111.32*Math.cos(e[1]*Math.PI/180)),a=t/110.574;for(let i=0;i<n;i+=1){let d=i/n*(2*Math.PI),p=s*Math.cos(d),f=a*Math.sin(d);r.push([e[0]+p,e[1]+f]);}return r.push(r[0]),{type:"Feature",geometry:{type:"Polygon",coordinates:[r]},properties:{parent:o,active:"true"}}}var Bt={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);}},Xt=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(Bt.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=(pe(o)*1e3).toFixed(1),r=o.geometry.coordinates[0];this.deleteFeature([t.line.id],{silent:true});let s=this.newFeature({type:"Feature",properties:{radius:n},geometry:{type:"Point",coordinates:r}});this.addFeature(s),this.map.fire("draw.create",{features:[s.toGeoJSON()]}),this.changeMode("simple_select",{featureIds:[s.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(Gt(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(S(o.geometry.coordinates,{parent:t.line.id})),n(Nt(o.geometry.coordinates[0],pe(o),t.line.id))),null):n(o)}}),ge=Xt;var Yt=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(S([o.geometry.coordinates[0][0],o.geometry.coordinates[0][1]],{parent:t.rectangle.id,anchor:"bottom"})),n(S([o.geometry.coordinates[0][1],o.geometry.coordinates[0][2]],{parent:t.rectangle.id,anchor:"left"}))),this.drawConfig.userProperties.showArea&&n(F(o.geometry.coordinates,{parent:t.rectangle.id})),null},onTrash:function(t){this.deleteFeature([t.rectangle.id],{silent:true}),this.changeMode("simple_select");}}),fe=Yt;var he={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);}},qt={onSetup:function(e){let t=this.newFeature({type:"Feature",properties:{},geometry:{type:"Polygon",coordinates:[[]]}});return this.addFeature(t),this.clearSelectedFeatures(),he.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),i=a<0?a+360:a;e.angle=parseFloat(i.toFixed(2));},calculatepXY3:function(e,t,o){let n=e.rectangle.getCoordinate("0.0"),r=this.deegrees2meters(n),s=e.rectangle.getCoordinate("0.1"),a=this.deegrees2meters(s),i=this.deegrees2meters([t.lngLat.lng,t.lngLat.lat]),d=this.deegrees2meters([t.lngLat.lng,t.lngLat.lat]);if(r[0]===a[0])i=[d[0],a[1]];else if(r[1]===a[1])i=[a[0],d[1]];else {let v=-1/((a[1]-r[1])/(a[0]-r[0]));Math.abs(v)<1?i[1]=v*(d[0]-a[0])+a[1]:i[0]=a[0]+(i[1]-a[1])/v;}let p=[a[0]-r[0],a[1]-r[1]],f=[i[0]-p[0],i[1]-p[1]],g=this.meters2degress(i),x=this.meters2degress(f);return e.rectangle.updateCoordinate("0.2",g[0],g[1]),e.rectangle.updateCoordinate("0.3",x[0],x[1]),x},onKeyUp:function(e,t){if(t.keyCode===27)return this.changeMode("simple_select")},onStop:function(e){he.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 s=t.geometry.coordinates[0][0],a={type:"Feature",properties:t.properties,angle:e.angle,geometry:{coordinates:t.geometry.coordinates[0][0],type:"Point"}};s&&o(a);return}if(r>=3&&r<=4){let s=[[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:s,type:"LineString"}}),r===3)return}return o(t)},onTrash:function(e){this.deleteFeature([e.rectangle.id],{silent:true}),this.changeMode("simple_select");}},ye=qt;var ve=[{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 Ht=e=>{let[t]=h();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,...ve],modes:{...e.lib.modes,draw_point:de(e.lib),draw_line_string:ue(e.lib),draw_polygon:me(e.lib),multi_point:le,radius:ge(e.lib),rectangle:fe(e.lib),rectangle_assisted:ye},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 K.forEach(r=>{if(e[r]){let s=`draw.${r.slice(2).toLowerCase()}`,a=i=>e[r](i);n[s]=a,t.map.on(s,a);}}),onCleanup(()=>{Object.keys(n).forEach(r=>t.map.off(r,n[r])),t.map?.removeControl(o);}),null};var Kt=e=>{let[t]=h(),o;return z(()=>(o||(o=new e.overlay(e.props||{})),o)),createEffect(()=>o?.setProps(e.props||{})),null};
+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};
 
-export { it as Atmosphere, zt as Camera, yt as Control, Kt as DeckOverlay, Ht as Draw, _t as Image, Ye as Layer, nt as Layer3D, Rt as Light, R as MapProvider, bt as Marker, Ct as Popup, Ge as Source, ut as Terrain, Ae as default, Pt as patternList, h as useMapContext, ot as useScene, $ as useSourceId };
+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 };

package/dist/index.jsx

@@ -1,16 +1,23 @@
 // src/components/MapGL/index.tsx
 import {
   createSignal,
-  createEffect,
+  createEffect as createEffect2,
   onMount,
   onCleanup,
   on
 } from "solid-js";
+import { isServer } from "solid-js/web";
 
 // src/components/MapProvider/index.tsx
-import { createContext, useContext } from "solid-js";
+import { createContext, useContext, createEffect } from "solid-js";
 import { createStore } from "solid-js/store";
-var defaultState = { map: null, mapLib: null, isMapLibre: false };
+var defaultState = {
+  map: null,
+  mapLib: null,
+  isMapLibre: false,
+  constants: {},
+  themeVersion: 0
+};
 var MapContext = createContext([defaultState]);
 var useMapContext = () => useContext(MapContext);
 var MapProvider = (props) => {
@@ -18,6 +25,10 @@ var MapProvider = (props) => {
   props.map && setState("map", props.map);
   props.mapLib && setState("mapLib", props.mapLib);
   setState("isMapLibre", !!props.isMapLibre);
+  setState("constants", props.constants || {});
+  setState("themeVersion", props.themeVersion || 0);
+  createEffect(() => setState("constants", props.constants || {}));
+  createEffect(() => setState("themeVersion", props.themeVersion || 0));
   return <MapContext.Provider value={[state]}>{props.children}</MapContext.Provider>;
 };
 
@@ -227,8 +238,9 @@ var MapGL = (props) => {
   let mapLib;
   let isMapLibre = false;
   const [mapLoaded, setMapLoaded] = createSignal(null);
+  const [themeVersion, setThemeVersion] = createSignal(0);
   const [darkMode, setDarkMode] = createSignal(
-    typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches || typeof document !== "undefined" && document.body.classList.contains("dark")
+    !isServer && (window.matchMedia("(prefers-color-scheme: dark)").matches || document.body.classList.contains("dark"))
   );
   let interruptingEase = false;
   let expectingOwnEcho = false;
@@ -304,16 +316,19 @@ var MapGL = (props) => {
           (evt) => !evt.rotate && props.onUserInteraction?.(false)
         )
       );
-      const darkTheme = typeof window !== "undefined" && window?.matchMedia("(prefers-color-scheme: dark)");
+      const darkTheme = !isServer && window.matchMedia("(prefers-color-scheme: dark)");
       darkTheme?.addEventListener("change", () => {
         setDarkMode(darkTheme.matches);
+        setThemeVersion((v) => v + 1);
         debug("Set dark theme to:", darkTheme.matches?.toString());
       });
       mutationObserver = new MutationObserver(() => {
-        const darkTheme2 = document.body.classList.contains("dark");
+        const darkTheme2 = document.documentElement.classList.contains("dark") || document.body.classList.contains("dark");
         setDarkMode(darkTheme2);
+        setThemeVersion((v) => v + 1);
         debug("Set theme to:", darkTheme2);
       });
+      mutationObserver.observe(document.documentElement, { attributes: true });
       mutationObserver.observe(document.body, { attributes: true });
       if (!props.disableResize) {
         resizeObserver = new ResizeObserver(() => {
@@ -368,7 +383,7 @@ var MapGL = (props) => {
       });
     });
   });
-  createEffect(
+  createEffect2(
     on(
       () => props.viewport,
       (vp) => {
@@ -397,7 +412,7 @@ var MapGL = (props) => {
       { defer: true }
     )
   );
-  createEffect(() => {
+  createEffect2(() => {
     const loadedMap = mapLoaded();
     if (typeof loadedMap?.setConfigProperty !== "function") {
       if (loadedMap && props.config && Object.keys(props.config).length) {
@@ -415,13 +430,13 @@ var MapGL = (props) => {
       debug(`Set Config (${id}:${key}) to:`, value);
     }
   });
-  createEffect(() => {
+  createEffect2(() => {
     const proj = props.options?.projection;
     if (!map || !proj) return;
     map.setProjection(proj);
     debug("Set Projection to:", proj);
   });
-  createEffect(() => {
+  createEffect2(() => {
     const cur = props.cursorStyle;
     if (!map || !cur) return;
     map.getCanvas().style.cursor = cur;
@@ -436,7 +451,7 @@ var MapGL = (props) => {
     });
     return list;
   };
-  createEffect((prev) => {
+  createEffect2((prev) => {
     const style = getStyle(props.options?.style, props.darkStyle);
     if (map?.isStyleLoaded() && prev !== style) {
       const oldStyle = map.getStyle();
@@ -469,7 +484,7 @@ var MapGL = (props) => {
     "showPadding",
     "showOverdrawInspector"
   ].forEach((item) => {
-    createEffect(() => {
+    createEffect2(() => {
       const prop = props[item];
       if (!map || !prop) return;
       map[item] = prop;
@@ -489,7 +504,13 @@ var MapGL = (props) => {
     classList={props?.classList}
     style={{ width: "100%", height: "100%", ...props.style }}
   >
-      {mapLoaded() && <MapProvider map={mapLoaded()} mapLib={mapLib} isMapLibre={isMapLibre}>
+      {mapLoaded() && <MapProvider
+    map={mapLoaded()}
+    mapLib={mapLib}
+    isMapLibre={isMapLibre}
+    constants={props.constants}
+    themeVersion={themeVersion()}
+  >
           <style>{`.overlay{position:relative;width:100%;height:100%;pointer-events:none}:where(.overlay>*){pointer-events:auto}`}</style>
           <div class="overlay">{props.children}</div>
         </MapProvider>}
@@ -499,7 +520,7 @@ var MapGL = (props) => {
 // src/components/Source/index.tsx
 import {
   onCleanup as onCleanup2,
-  createEffect as createEffect2,
+  createEffect as createEffect3,
   createContext as createContext2,
   useContext as useContext2,
   createUniqueId
@@ -537,14 +558,14 @@ var Source = (props) => {
   debug("Add Source:", props.id);
   switch (anySource().type) {
     case "geojson":
-      createEffect2(() => {
+      createEffect3(() => {
         const data = anySource().data;
         ctx.map.getSource(props.id).setData(data || {});
         debug("Update GeoJSON Data:", props.id);
       });
       break;
     case "image":
-      createEffect2(() => {
+      createEffect3(() => {
         const url = anySource().url;
         const coords = anySource().coordinates;
         ctx.map.getSource(props.id).updateImage(url, coords);
@@ -552,7 +573,7 @@ var Source = (props) => {
       });
       break;
     case "vector":
-      createEffect2(() => {
+      createEffect3(() => {
         const url = anySource().url;
         const tiles = anySource().tiles;
         const source = ctx.map.getSource(props.id);
@@ -561,7 +582,7 @@ var Source = (props) => {
       });
       break;
     case "raster":
-      createEffect2(() => {
+      createEffect3(() => {
         const src = lookup(anySource().url);
         const source = ctx.map.getSource(props.id);
         src.url ? source.setUrl(src.url) : source.setTiles(src.tiles);
@@ -584,7 +605,7 @@ var Source = (props) => {
 // src/components/Layer/index.tsx
 import {
   onCleanup as onCleanup3,
-  createEffect as createEffect3,
+  createEffect as createEffect4,
   createMemo,
   createUniqueId as createUniqueId2
 } from "solid-js";
@@ -653,6 +674,40 @@ var layoutStyles = [
   "text-writing-mode"
 ];
 
+// src/colors.ts
+var probe;
+var toRgbString = (cssColor) => {
+  probe ??= document.body.appendChild(document.createElement("div"));
+  probe.style.cssText = "position:absolute;visibility:hidden;pointer-events:none";
+  probe.style.color = "";
+  probe.style.color = cssColor;
+  return probe.style.color ? getComputedStyle(probe).color : void 0;
+};
+var tailwindName = /^[a-z]+-\d{2,3}$/;
+var nativelySupported = /^(rgb|rgba|hsl|hsla)\(/i;
+var cssColorFunction = /^[a-z-]+\(/i;
+var classProbe;
+var bgClassPair = /^bg-[a-z]+-\d{2,3}(?:\s+dark:bg-[a-z]+-\d{2,3})?$/;
+var resolveClassPair = (value) => {
+  classProbe ??= document.body.appendChild(document.createElement("div"));
+  classProbe.style.cssText = "position:absolute;visibility:hidden;pointer-events:none";
+  classProbe.className = value;
+  const bg = getComputedStyle(classProbe).backgroundColor;
+  classProbe.className = "";
+  return bg && bg !== "rgba(0, 0, 0, 0)" ? bg : value;
+};
+var resolveColor = (value) => {
+  if (bgClassPair.test(value)) return resolveClassPair(value);
+  if (tailwindName.test(value)) {
+    const raw = getComputedStyle(document.documentElement).getPropertyValue(`--color-${value}`).trim();
+    return raw && toRgbString(raw) || value;
+  }
+  if (cssColorFunction.test(value) && !nativelySupported.test(value)) {
+    return toRgbString(value) || value;
+  }
+  return value;
+};
+
 // src/components/Layer/index.tsx
 var diff = (newProps = {}, prevProps = {}) => {
   const keys = /* @__PURE__ */ new Set([...Object.keys(newProps), ...Object.keys(prevProps)]);
@@ -665,26 +720,43 @@ var diff = (newProps = {}, prevProps = {}) => {
   }, []);
 };
 var newKey = (key, type) => (key.startsWith(type) || key.startsWith("icon") || key.startsWith("text") ? "" : type + "-") + key.replace(/[A-Z]/g, (s) => "-" + s.toLowerCase());
-var updateStyle = (oldStyle) => {
+var resolveColor2 = (key, value) => key.endsWith("color") && typeof value === "string" ? resolveColor(value) : value;
+var constantRef = /^@(.+)$/;
+var resolveConstant = (key, value, constants, debug) => {
+  if (typeof value !== "string") return value;
+  const match = value.match(constantRef);
+  if (!match) return value;
+  const resolved = constants[match[1]];
+  if (resolved === void 0) {
+    debug(`Unknown constant "@${match[1]}" referenced by "${key}" \u2014 leaving unresolved`);
+    return value;
+  }
+  return resolved;
+};
+var updateStyle = (oldStyle, constants = {}, debug = () => {
+}) => {
   if (!oldStyle) return;
   let layout = {};
   let paint = {};
   let style = {};
+  const resolvePaint = (key, value) => resolveColor2(key, resolveConstant(key, value, constants, debug));
   Object.entries(oldStyle).forEach(([key, value]) => {
     if (baseStyle.includes(key)) style[key] = value;
     else {
       const nk = newKey(key, oldStyle.type);
-      layoutStyles.includes(nk) ? layout[nk] = value : paint[nk] = value;
+      layoutStyles.includes(nk) ? layout[nk] = resolveConstant(nk, value, constants, debug) : paint[nk] = resolvePaint(nk, value);
     }
   });
   if (oldStyle.paint)
-    Object.entries(oldStyle.paint).forEach(
-      ([key, value]) => paint[newKey(key, oldStyle.type)] = value
-    );
+    Object.entries(oldStyle.paint).forEach(([key, value]) => {
+      const nk = newKey(key, oldStyle.type);
+      paint[nk] = resolvePaint(nk, value);
+    });
   if (oldStyle.layout)
-    Object.entries(oldStyle.layout).forEach(
-      ([key, value]) => layout[newKey(key, oldStyle.type)] = value
-    );
+    Object.entries(oldStyle.layout).forEach(([key, value]) => {
+      const nk = newKey(key, oldStyle.type);
+      layout[nk] = resolveConstant(nk, value, constants, debug);
+    });
   return { ...style, paint, layout };
 };
 var Layer = (props) => {
@@ -699,7 +771,7 @@ var Layer = (props) => {
   );
   ctx.map.addLayer(
     props.customLayer || {
-      ...updateStyle(props.style),
+      ...updateStyle(props.style, ctx.constants, debug),
       id: layerId,
       source: sourceId,
       // `slot` is Mapbox Standard-Style-only — MapLibre has no equivalent (see docs/dev-notes.md)
@@ -723,8 +795,9 @@ var Layer = (props) => {
       });
     }
   });
-  createEffect3((prev) => {
-    const style = updateStyle(props.style);
+  createEffect4((prev) => {
+    ctx.themeVersion;
+    const style = updateStyle(props.style, ctx.constants, debug);
     if (style === prev) return;
     if (style.layout !== prev?.layout)
       diff(style.layout, prev?.layout).forEach(
@@ -740,8 +813,8 @@ var Layer = (props) => {
       ctx.map.setFilter(layerId, style.filter, { validate: false });
     debug("Update Layer Style:", layerId);
     return style;
-  }, updateStyle(props.style));
-  createEffect3((prev) => {
+  }, updateStyle(props.style, ctx.constants, debug));
+  createEffect4((prev) => {
     if (props.visible === prev) return;
     ctx.map.setLayoutProperty(
       layerId,
@@ -752,19 +825,19 @@ var Layer = (props) => {
     debug(`Update Visibility (${layerId}):`, props.visible.toString());
     return props.visible;
   }, props.visible);
-  createEffect3((prev) => {
+  createEffect4((prev) => {
     if (getBeforeId() === prev) return prev;
     ctx.map.moveLayer(layerId, getBeforeId());
     debug(`Update Layer Z-Index (${layerId}):`, getBeforeId());
     return getBeforeId();
   }, getBeforeId());
-  createEffect3(async () => {
+  createEffect4(async () => {
     if (!props.filter) return;
     !ctx.map.isStyleLoaded() && await ctx.map.once("styledata");
     ctx.map.setFilter(layerId, props.filter);
     debug(`Update Filter (${layerId}):`, props.filter);
   });
-  createEffect3(async () => {
+  createEffect4(async () => {
     if (!props.featureState || props.featureState.id === null) return;
     !ctx.map.isStyleLoaded() && await ctx.map.once("styledata");
     ctx.map.removeFeatureState({
@@ -934,10 +1007,10 @@ var Layer3D = (props) => {
 };
 
 // src/components/Atmosphere/index.tsx
-import { onCleanup as onCleanup5, createEffect as createEffect4 } from "solid-js";
+import { onCleanup as onCleanup5, createEffect as createEffect5 } from "solid-js";
 var Atmosphere = (props) => {
   const [ctx] = useMapContext();
-  createEffect4(() => {
+  createEffect5(() => {
     if (ctx.isMapLibre) ctx.map.setSky?.(props.style || {});
     else ctx.map.setFog(props.style || {});
   });
@@ -953,7 +1026,7 @@ var Atmosphere = (props) => {
 
 // src/components/Terrain/index.tsx
 import {
-  createEffect as createEffect5,
+  createEffect as createEffect6,
   createUniqueId as createUniqueId4,
   onCleanup as onCleanup6
 } from "solid-js";
@@ -970,7 +1043,7 @@ var Terrain = (props) => {
     });
     ctx.map.sourceIdList.push(sourceId);
   }
-  createEffect5(() => {
+  createEffect6(() => {
     ctx.map.setTerrain({
       exaggeration: props.exaggeration || 1,
       source: props?.source || sourceId
@@ -981,13 +1054,13 @@ var Terrain = (props) => {
 };
 
 // src/components/Control/index.tsx
-import { createSignal as createSignal3, createEffect as createEffect7, splitProps, untrack } from "solid-js";
+import { createSignal as createSignal3, createEffect as createEffect8, splitProps, untrack } from "solid-js";
 
 // src/lib/createMapControl.ts
-import { createEffect as createEffect6, onCleanup as onCleanup7 } from "solid-js";
+import { createEffect as createEffect7, onCleanup as onCleanup7 } from "solid-js";
 var useControlPosition = (control, position) => {
   const [ctx] = useMapContext();
-  createEffect6(() => {
+  createEffect7(() => {
     const c = control();
     const pos = position?.();
     if (!c) return;
@@ -1014,7 +1087,7 @@ var Control = (props) => {
     ["logo", ctx.mapLib.LogoControl],
     ["terrain", ctx.mapLib.TerrainControl]
   ]);
-  createEffect7(() => {
+  createEffect8(() => {
     untrack(
       () => control() && ctx.map.hasControl(control()) && ctx.map.removeControl(control())
     );
@@ -1027,7 +1100,7 @@ var Control = (props) => {
 };
 
 // src/components/Marker/index.tsx
-import { onCleanup as onCleanup8, createEffect as createEffect8, splitProps as splitProps2 } from "solid-js";
+import { onCleanup as onCleanup8, createEffect as createEffect9, splitProps as splitProps2 } from "solid-js";
 var Marker = (props) => {
   if (!props.lngLat) throw new Error("Marker - lngLat is required");
   const [update, create_popup, create_marker] = splitProps2(
@@ -1039,7 +1112,7 @@ var Marker = (props) => {
   let marker = null;
   let popup = null;
   const LNGLAT = update.lngLat;
-  createEffect8(() => {
+  createEffect9(() => {
     if (!ctx.map) return;
     popup?.remove();
     popup = new ctx.mapLib.Popup({
@@ -1047,31 +1120,31 @@ var Marker = (props) => {
       focusAfterOpen: false,
       ...create_popup.popup
     }).on("open", () => create_popup.onOpen?.()).on("close", () => create_popup.onClose?.());
-    createEffect8(() => {
+    createEffect9(() => {
       if (update.children === void 0) return;
       typeof update.children === "string" ? popup?.setHTML(update.children) : popup?.setDOMContent(update.children);
       marker?.setPopup(popup);
     });
-    createEffect8(
+    createEffect9(
       () => update.showPopup !== popup?.isOpen() && marker?.togglePopup()
     );
   });
-  createEffect8(() => {
+  createEffect9(() => {
     if (!ctx.map) return;
     marker?.remove();
     marker = new ctx.mapLib.Marker(create_marker.options).on("dragstart", () => create_marker.onDragStart?.()).on("dragend", () => create_marker.onDragEnd?.()).on("drag", () => create_marker.onDrag?.(marker?.getLngLat().toArray())).setPopup(popup).setLngLat(LNGLAT).addTo(ctx.map);
-    createEffect8(
+    createEffect9(
       () => update.showPopup !== popup?.isOpen() && marker?.togglePopup()
     );
   });
-  createEffect8(() => marker?.setLngLat(update.lngLat));
-  createEffect8(() => marker?.setDraggable(update.draggable));
+  createEffect9(() => marker?.setLngLat(update.lngLat));
+  createEffect9(() => marker?.setDraggable(update.draggable));
   onCleanup8(() => marker?.remove());
   return null;
 };
 
 // src/components/Popup/index.tsx
-import { onCleanup as onCleanup9, createEffect as createEffect9, splitProps as splitProps3 } from "solid-js";
+import { onCleanup as onCleanup9, createEffect as createEffect10, splitProps as splitProps3 } from "solid-js";
 var Popup = (props) => {
   if (!props.trackPointer && !props.lngLat)
     throw new Error("Popup - lngLat or trackPointer is required");
@@ -1082,7 +1155,7 @@ var Popup = (props) => {
   ]);
   const [ctx] = useMapContext();
   let popup;
-  createEffect9(() => {
+  createEffect10(() => {
     if (!ctx.map) return;
     popup?.remove();
     popup = new ctx.mapLib.Popup({
@@ -1090,10 +1163,10 @@ var Popup = (props) => {
       focusAfterOpen: false,
       ...create.options
     }).on("open", () => create.onOpen?.()).on("close", () => create.onClose?.()).addTo(ctx.map);
-    createEffect9(
+    createEffect10(
       () => update.trackPointer ? popup.trackPointer() : popup.setLngLat(update.lngLat)
     );
-    createEffect9(
+    createEffect10(
       () => typeof update.children === "string" ? popup.setHTML(update.children) : popup.setDOMContent(update.children)
     );
   });
@@ -1105,7 +1178,7 @@ var Popup = (props) => {
 import {
   onCleanup as onCleanup10,
   createSignal as createSignal4,
-  createEffect as createEffect10,
+  createEffect as createEffect11,
   untrack as untrack2
 } from "solid-js";
 var PATTERN = {
@@ -1129,36 +1202,42 @@ var patternList = Object.keys(PATTERN);
 var MGL_Image = (props) => {
   const [ctx] = useMapContext();
   const [size, setSize] = createSignal4({ width: 0, height: 0 });
+  let latestImage = null;
   const debug = (text, value) => {
     ctx.map.debug && console.debug("%c[MapGL]", "color: #10b981", text, value || "");
   };
+  const handleStyleLoad = () => {
+    if (!latestImage || !ctx.map || ctx.map.hasImage(props.id)) return;
+    ctx.map.addImage(props.id, latestImage.data, latestImage.ops);
+    debug("Re-Add Image:", props.id);
+  };
+  ctx.map.on("style.load", handleStyleLoad);
   onCleanup10(() => {
+    ctx.map?.off("style.load", handleStyleLoad);
     ctx.map?.hasImage(props.id) && ctx.map?.removeImage(props.id);
     debug("Remove Image:", props.id);
   });
-  createEffect10(() => {
+  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");
-    const ops = props.pattern ? { pixelRatio: 2, ...props.options } : props.options;
-    _loadImage(props.source || _createPattern(props.pattern), (data) => {
+    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 finalOps = autoPixelRatio ? { ...ops, pixelRatio: autoPixelRatio } : ops;
       const { width, height } = data;
       if (ctx.map && !ctx.map.hasImage(props.id))
-        ctx.map.addImage(props.id, data, ops);
+        ctx.map.addImage(props.id, data, finalOps);
       if (!props.pattern && untrack2(() => width === size().width && height === size().height)) {
         ctx.map.updateImage(props.id, data);
         ctx.map.triggerRepaint();
       } else {
         ctx.map.removeImage(props.id);
-        ctx.map.addImage(props.id, data, ops);
+        ctx.map.addImage(props.id, data, finalOps);
       }
       setSize({ width, height });
+      latestImage = { data, ops: finalOps };
       debug("Add Image:", props.id);
-      ctx.map.on("style.load", () => {
-        if (ctx.map.hasImage(props.id)) return;
-        ctx.map.addImage(props.id, data, ops);
-        debug("Re-Add Image:", props.id);
-      });
     });
   });
   const _loadImage = (image, callback) => {
@@ -1184,34 +1263,43 @@ var MGL_Image = (props) => {
         const img = new Image();
         img.crossOrigin = "Anonymous";
         img.onload = () => {
+          const floorScale = Math.max(1, 50 / Math.min(img.width, img.height));
+          const pixelRatio = props.options?.pixelRatio ?? Math.max(1, Math.round(window.devicePixelRatio || 1));
+          const scale = floorScale * pixelRatio;
           const canvas = document.createElement("canvas");
-          canvas.width = Math.max(img.width, 50);
-          canvas.height = Math.max(img.height, 50);
+          canvas.width = Math.round(img.width * scale);
+          canvas.height = Math.round(img.height * scale);
           const ctx2 = canvas.getContext("2d");
           ctx2.imageSmoothingEnabled = true;
           ctx2.drawImage(img, 0, 0, canvas.width, canvas.height);
-          return callback(ctx2.getImageData(0, 0, canvas.width, canvas.height));
+          return callback(
+            ctx2.getImageData(0, 0, canvas.width, canvas.height),
+            pixelRatio
+          );
         };
-        img.src = image.trimStart().startsWith("<svg") ? "data:image/svg+xml;charset=utf-8," + image : image;
+        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);
       }
     });
   };
-  const _createPattern = (pattern) => {
+  const _createPattern = (pattern, pixelRatio = 2) => {
     const p = PATTERN[pattern.type];
+    const size2 = p.size * pixelRatio;
     return {
-      width: p.size,
-      height: p.size,
-      data: new Uint8Array(p.size * p.size * 4),
+      width: size2,
+      height: size2,
+      data: new Uint8Array(size2 * size2 * 4),
       onAdd: function() {
-        let canvas = document.createElement("canvas");
-        canvas.width = canvas.height = p.size;
+        const canvas = document.createElement("canvas");
+        canvas.width = canvas.height = size2;
         this.ctx = canvas.getContext("2d", { willReadFrequently: true });
+        this.ctx.scale(pixelRatio, pixelRatio);
       },
       render: function() {
         this.ctx.fillStyle = pattern.background || "transparent";
-        this.ctx.fillRect(0, 0, this.width, this.height);
+        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.stroke(new Path2D(p.path));
@@ -1225,7 +1313,7 @@ var MGL_Image = (props) => {
 };
 
 // src/components/Camera/index.tsx
-import { createEffect as createEffect11, onCleanup as onCleanup11, createSignal as createSignal5 } from "solid-js";
+import { createEffect as createEffect12, onCleanup as onCleanup11, createSignal as createSignal5 } from "solid-js";
 var lerp = (a, b, t) => a.map((_, idx) => (1 - t) * a[idx] + t * b[idx]);
 var slerp = (a, b, t) => {
   const dotProduct = a.map((_, idx) => a[idx] * b[idx]).reduce((m, n) => m + n);
@@ -1272,7 +1360,7 @@ var Camera = (props) => {
       isReverse = !isReverse;
     animationTime = isReverse ? animationTime - 1e-3 : animationTime + 1e-3;
   };
-  createEffect11(() => {
+  createEffect12(() => {
     props.translate && window.requestAnimationFrame(frame);
   });
   const options = { duration: 1e3, easing: (n) => n };
@@ -1307,7 +1395,7 @@ var Camera = (props) => {
   const onEnd = () => props.rotateGlobe ? rotateGlobe() : rotateViewport();
   ctx.map.on("moveend", onEnd).on("dragend", onEnd);
   let originalCenter;
-  createEffect11(() => {
+  createEffect12(() => {
     if (props.rotateGlobe == void 0) return;
     if (props.rotateGlobe) {
       originalCenter = ctx.map.getCenter();
@@ -1316,7 +1404,7 @@ var Camera = (props) => {
       props.resetWhenStopped ? ctx.map.stop().easeTo({ center: originalCenter }) : ctx.map.stop();
     }
   });
-  createEffect11(() => {
+  createEffect12(() => {
     if (props.rotateViewport == void 0) return;
     props.rotateViewport ? rotateViewport() : props.resetWhenStopped ? ctx.map.stop().resetNorthPitch() : ctx.map.stop();
   });
@@ -1325,10 +1413,10 @@ var Camera = (props) => {
 };
 
 // src/components/Light/index.tsx
-import { onCleanup as onCleanup12, createEffect as createEffect12 } from "solid-js";
+import { onCleanup as onCleanup12, createEffect as createEffect13 } from "solid-js";
 var Light = (props) => {
   const [ctx] = useMapContext();
-  createEffect12(() => ctx.map.setLight(props.style || {}));
+  createEffect13(() => ctx.map.setLight(props.style || {}));
   onCleanup12(() => ctx.map?.setLight(null));
   return null;
 };
@@ -2285,7 +2373,7 @@ var Draw = (props) => {
 };
 
 // src/components/DeckOverlay/index.tsx
-import { createEffect as createEffect13 } from "solid-js";
+import { createEffect as createEffect14 } from "solid-js";
 var DeckOverlay = (props) => {
   const [ctx] = useMapContext();
   let overlay;
@@ -2294,7 +2382,7 @@ var DeckOverlay = (props) => {
     return overlay;
   };
   useControlPosition(control);
-  createEffect13(() => overlay?.setProps(props.props || {}));
+  createEffect14(() => overlay?.setProps(props.props || {}));
   return null;
 };
 export {

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.0.0",
+  "version": "2.1.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.",
@@ -31,11 +31,16 @@
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
-    "solid": "./dist/index.jsx",
-    "import": {
+    ".": {
       "types": "./dist/index.d.ts",
+      "solid": "./dist/index.jsx",
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
       "default": "./dist/index.js"
-    }
+    },
+    "./package.json": "./package.json"
   },
   "scripts": {
     "build": "tsup",