@prashantgosai11/bisag-sidebar 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +53 -0
- package/dist/AddLayers/DeckGl/AnimatedTripsLayerComponent.d.ts +34 -0
- package/dist/AddLayers/DeckGl/ArcLayerComponent.d.ts +20 -0
- package/dist/AddLayers/DeckGl/BitmapLayerComponent.d.ts +16 -0
- package/dist/AddLayers/DeckGl/ClusterLayerComponent.d.ts +20 -0
- package/dist/AddLayers/DeckGl/ColumnLayerComponent.d.ts +23 -0
- package/dist/AddLayers/DeckGl/ContourLayerComponent.d.ts +20 -0
- package/dist/AddLayers/DeckGl/GeoJsonLayerComponent.d.ts +18 -0
- package/dist/AddLayers/DeckGl/GeohashLayerComponent.d.ts +22 -0
- package/dist/AddLayers/DeckGl/GreatCircleLayerComponent.d.ts +21 -0
- package/dist/AddLayers/DeckGl/GridLayerComponent.d.ts +19 -0
- package/dist/AddLayers/DeckGl/H3ClusterLayerComponent.d.ts +22 -0
- package/dist/AddLayers/DeckGl/H3HexagonLayerComponent.d.ts +20 -0
- package/dist/AddLayers/DeckGl/HeatmapLayerComponent.d.ts +17 -0
- package/dist/AddLayers/DeckGl/HexagonLayer.d.ts +25 -0
- package/dist/AddLayers/DeckGl/HexbinLayerComponent.d.ts +20 -0
- package/dist/AddLayers/DeckGl/IconLayerComponent.d.ts +62 -0
- package/dist/AddLayers/DeckGl/LineLayerComponent.d.ts +19 -0
- package/dist/AddLayers/DeckGl/PathLayerComponent.d.ts +23 -0
- package/dist/AddLayers/DeckGl/PointCloudLayerComponent.d.ts +18 -0
- package/dist/AddLayers/DeckGl/PolygonLayerComponent.d.ts +21 -0
- package/dist/AddLayers/DeckGl/QuadkeyLayerComponent.d.ts +22 -0
- package/dist/AddLayers/DeckGl/S2LayerComponent.d.ts +22 -0
- package/dist/AddLayers/DeckGl/ScatterplotLayerComponent.d.ts +24 -0
- package/dist/AddLayers/DeckGl/ScenegraphLayerComponent.d.ts +29 -0
- package/dist/AddLayers/DeckGl/ScreenGridLayerComponent.d.ts +18 -0
- package/dist/AddLayers/DeckGl/SimpleMeshLayerComponent.d.ts +18 -0
- package/dist/AddLayers/DeckGl/SolidPolygonLayerComponent.d.ts +26 -0
- package/dist/AddLayers/DeckGl/TextLayerComponent.d.ts +25 -0
- package/dist/AddLayers/DeckGl/TileLayerComponent.d.ts +16 -0
- package/dist/AddLayers/DeckGl/TripsLayer.d.ts +44 -0
- package/dist/AddLayers/DeckGl/popupUtils.d.ts +28 -0
- package/dist/AddLayers/DeckGlOverlayManager.d.ts +11 -0
- package/dist/AddLayers/MapboxHeatmapLayer.d.ts +14 -0
- package/dist/App.d.ts +3 -0
- package/dist/BisagSidebar/AddDataModal.d.ts +6 -0
- package/dist/BisagSidebar/AddLayers/DeckGl/ArcLayer.d.ts +120 -0
- package/dist/BisagSidebar/AddLayers/DeckGl/ClusterLayer.d.ts +164 -0
- package/dist/BisagSidebar/AddLayers/DeckGl/ColumnLayer.d.ts +158 -0
- package/dist/BisagSidebar/AddLayers/DeckGl/ContourLayer.d.ts +122 -0
- package/dist/BisagSidebar/AddLayers/DeckGl/GeoJsonLayer.d.ts +239 -0
- package/dist/BisagSidebar/AddLayers/DeckGl/GeohashLayer.d.ts +168 -0
- package/dist/BisagSidebar/AddLayers/DeckGl/GridLayer.d.ts +36 -0
- package/dist/BisagSidebar/AddLayers/DeckGl/H3HexagonLayer.d.ts +145 -0
- package/dist/BisagSidebar/AddLayers/DeckGl/HeatmapLayer.d.ts +119 -0
- package/dist/BisagSidebar/AddLayers/DeckGl/HexagonLayer.d.ts +140 -0
- package/dist/BisagSidebar/AddLayers/DeckGl/IconLayer.d.ts +131 -0
- package/dist/BisagSidebar/AddLayers/DeckGl/LineLayer.d.ts +157 -0
- package/dist/BisagSidebar/AddLayers/DeckGl/PathLayer.d.ts +167 -0
- package/dist/BisagSidebar/AddLayers/DeckGl/PolygonLayer.d.ts +136 -0
- package/dist/BisagSidebar/AddLayers/DeckGl/QuadkeyLayer.d.ts +168 -0
- package/dist/BisagSidebar/AddLayers/DeckGl/S2Layer.d.ts +169 -0
- package/dist/BisagSidebar/AddLayers/DeckGl/ScatterplotLayer.d.ts +139 -0
- package/dist/BisagSidebar/AddLayers/DeckGl/TextLayer.d.ts +140 -0
- package/dist/BisagSidebar/AddLayers/DeckGl/TripsLayer.d.ts +123 -0
- package/dist/BisagSidebar/AddLayers/DeckGl/effects/LightingEffect.d.ts +137 -0
- package/dist/BisagSidebar/AddLayers/DeckGl/effects/index.d.ts +12 -0
- package/dist/BisagSidebar/AddLayers/DeckGl/extensions/BrushingExtension.d.ts +136 -0
- package/dist/BisagSidebar/AddLayers/DeckGl/extensions/CollisionFilterExtension.d.ts +142 -0
- package/dist/BisagSidebar/AddLayers/DeckGl/extensions/DataFilterExtension.d.ts +122 -0
- package/dist/BisagSidebar/AddLayers/DeckGl/extensions/PathStyleExtension.d.ts +151 -0
- package/dist/BisagSidebar/AddLayers/DeckGl/extensions/index.d.ts +21 -0
- package/dist/BisagSidebar/AddLayers/DeckGl/index.d.ts +51 -0
- package/dist/BisagSidebar/AddLayers/LayerTypeSelector.d.ts +16 -0
- package/dist/BisagSidebar/AddLayers/bisag-icons/ ClusterIcon.d.ts +3 -0
- package/dist/BisagSidebar/AddLayers/bisag-icons/ IconLayerIcon.d.ts +3 -0
- package/dist/BisagSidebar/AddLayers/bisag-icons/A5Icon.d.ts +3 -0
- package/dist/BisagSidebar/AddLayers/bisag-icons/AnimatedTripIcon.d.ts +3 -0
- package/dist/BisagSidebar/AddLayers/bisag-icons/ArcIcon.d.ts +3 -0
- package/dist/BisagSidebar/AddLayers/bisag-icons/BitmapIcon.d.ts +3 -0
- package/dist/BisagSidebar/AddLayers/bisag-icons/ColumnIcon.d.ts +3 -0
- package/dist/BisagSidebar/AddLayers/bisag-icons/ContourIcon.d.ts +3 -0
- package/dist/BisagSidebar/AddLayers/bisag-icons/GeoJsonIcon.d.ts +3 -0
- package/dist/BisagSidebar/AddLayers/bisag-icons/GeohashIcon.d.ts +3 -0
- package/dist/BisagSidebar/AddLayers/bisag-icons/GreatCircleIcon.d.ts +3 -0
- package/dist/BisagSidebar/AddLayers/bisag-icons/GridIcon.d.ts +3 -0
- package/dist/BisagSidebar/AddLayers/bisag-icons/H3ClusterIcon.d.ts +3 -0
- package/dist/BisagSidebar/AddLayers/bisag-icons/H3Icon.d.ts +3 -0
- package/dist/BisagSidebar/AddLayers/bisag-icons/HeatmapIcon.d.ts +3 -0
- package/dist/BisagSidebar/AddLayers/bisag-icons/HexbinIcon.d.ts +3 -0
- package/dist/BisagSidebar/AddLayers/bisag-icons/LineIcon.d.ts +3 -0
- package/dist/BisagSidebar/AddLayers/bisag-icons/MeshIcon.d.ts +3 -0
- package/dist/BisagSidebar/AddLayers/bisag-icons/PathIcon.d.ts +3 -0
- package/dist/BisagSidebar/AddLayers/bisag-icons/PointCloudIcon.d.ts +3 -0
- package/dist/BisagSidebar/AddLayers/bisag-icons/PointIcon.d.ts +3 -0
- package/dist/BisagSidebar/AddLayers/bisag-icons/PolygonIcon.d.ts +3 -0
- package/dist/BisagSidebar/AddLayers/bisag-icons/QuadkeyIcon.d.ts +3 -0
- package/dist/BisagSidebar/AddLayers/bisag-icons/S2Icon.d.ts +3 -0
- package/dist/BisagSidebar/AddLayers/bisag-icons/ScatterplotIcon.d.ts +3 -0
- package/dist/BisagSidebar/AddLayers/bisag-icons/Scenegraph3DIcon.d.ts +3 -0
- package/dist/BisagSidebar/AddLayers/bisag-icons/ScenegraphIcon.d.ts +3 -0
- package/dist/BisagSidebar/AddLayers/bisag-icons/ScreenGridIcon.d.ts +3 -0
- package/dist/BisagSidebar/AddLayers/bisag-icons/SolidPolygonIcon.d.ts +7 -0
- package/dist/BisagSidebar/AddLayers/bisag-icons/TerrainIcon.d.ts +3 -0
- package/dist/BisagSidebar/AddLayers/bisag-icons/TextIcon.d.ts +3 -0
- package/dist/BisagSidebar/AddLayers/bisag-icons/Tile3DIcon.d.ts +3 -0
- package/dist/BisagSidebar/AddLayers/bisag-icons/TileIcon.d.ts +3 -0
- package/dist/BisagSidebar/AddLayers/bisag-icons/TripIcon.d.ts +3 -0
- package/dist/BisagSidebar/AddLayers/bisag-icons/VectorTileIcon.d.ts +3 -0
- package/dist/BisagSidebar/AddLayers/bisag-icons/WMSIcon.d.ts +3 -0
- package/dist/BisagSidebar/ExportDataModal.d.ts +6 -0
- package/dist/BisagSidebar/LayerConfigContext.d.ts +49 -0
- package/dist/BisagSidebar/LayerConfigurationPanel.d.ts +34 -0
- package/dist/BisagSidebar/PersistentLayers.d.ts +2 -0
- package/dist/BisagSidebar/index.d.ts +6 -0
- package/dist/BisagSidebar/tabs/BaseMapTab.d.ts +2 -0
- package/dist/BisagSidebar/tabs/FiltersTab.d.ts +2 -0
- package/dist/BisagSidebar/tabs/InteractionsTab.d.ts +2 -0
- package/dist/BisagSidebar/tabs/LayersTab.d.ts +5 -0
- package/dist/BisagSidebar/tabs/MousePointerTab.d.ts +2 -0
- package/dist/BisagSidebar/tabs/index.d.ts +5 -0
- package/dist/BisagSidebar/widgets/AddWidgetModal.d.ts +7 -0
- package/dist/BisagSidebar/widgets/CategoryWidget.d.ts +7 -0
- package/dist/BisagSidebar/widgets/FormulaWidget.d.ts +7 -0
- package/dist/BisagSidebar/widgets/HistogramWidget.d.ts +7 -0
- package/dist/BisagSidebar/widgets/InlineWidgetConfig.d.ts +5 -0
- package/dist/BisagSidebar/widgets/PieWidget.d.ts +7 -0
- package/dist/BisagSidebar/widgets/RangeWidget.d.ts +7 -0
- package/dist/BisagSidebar/widgets/TableWidget.d.ts +7 -0
- package/dist/BisagSidebar/widgets/TimeSeriesWidget.d.ts +7 -0
- package/dist/BisagSidebar/widgets/WidgetRenderer.d.ts +6 -0
- package/dist/BisagSidebar/widgets/WidgetTypeSelector.d.ts +8 -0
- package/dist/BisagSidebar/widgets/WidgetsPanel.d.ts +2 -0
- package/dist/BisagSidebar/widgets/index.d.ts +9 -0
- package/dist/Legends/legendGraphicUrl.d.ts +2 -0
- package/dist/bisag-sidebar.css +1 -0
- package/dist/hooks/useDraw.d.ts +9 -0
- package/dist/hooks/useMultiDraw.d.ts +7 -0
- package/dist/index.cjs +3751 -0
- package/dist/index.d.ts +9 -0
- package/dist/index.mjs +20077 -0
- package/dist/main.d.ts +1 -0
- package/dist/stores/create-selectors.d.ts +10 -0
- package/dist/stores/map-store.d.ts +164 -0
- package/dist/stores/widget-store.d.ts +71 -0
- package/dist/types/layer-types.d.ts +21 -0
- package/dist/utils/export-formats.d.ts +32 -0
- package/dist/utils/fileLoaders.d.ts +78 -0
- package/dist/utils/original-dataset-store.d.ts +2 -0
- package/dist/utils/widget-data-source.d.ts +23 -0
- package/dist/utils/widget-utils.d.ts +68 -0
- package/package.json +78 -0
package/dist/index.cjs
ADDED
|
@@ -0,0 +1,3751 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),g=require("react"),s=require("@mantine/core"),Kn=require("@mantine/hooks"),Ni=require("zustand"),Ns=require("@turf/turf"),Go=require("@terraformer/wkt"),Os=require("jszip");require("@loaders.gl/core");require("@loaders.gl/shapefile");const Ws=require("shpjs"),Vt=require("export-to-csv"),Gs=require("@deck.gl/mapbox"),Oi=require("jspdf"),Bt=require("maplibre-gl"),So=require("@deck.gl/geo-layers"),bo=require("h3-js"),st=require("@deck.gl/layers"),Wi=require("@deck.gl/extensions"),$o=require("@deck.gl/aggregation-layers"),Gi=require("@deck.gl/mesh-layers"),$s=require("@loaders.gl/obj"),Hs=require("write-excel-file"),Vs=require("html2canvas");function _s(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const o in e)if(o!=="default"){const r=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(n,o,r.get?r:{enumerable:!0,get:()=>e[o]})}}return n.default=e,Object.freeze(n)}const et=_s(Ns);var $i={color:void 0,size:void 0,className:void 0,style:void 0,attr:void 0},Qn=g.createContext&&g.createContext($i),Us=["attr","size","title"];function Js(e,n){if(e==null)return{};var o=qs(e,n),r,i;if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(i=0;i<a.length;i++)r=a[i],!(n.indexOf(r)>=0)&&Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}function qs(e,n){if(e==null)return{};var o={};for(var r in e)if(Object.prototype.hasOwnProperty.call(e,r)){if(n.indexOf(r)>=0)continue;o[r]=e[r]}return o}function Co(){return Co=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var o=arguments[n];for(var r in o)Object.prototype.hasOwnProperty.call(o,r)&&(e[r]=o[r])}return e},Co.apply(this,arguments)}function ei(e,n){var o=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter(function(i){return Object.getOwnPropertyDescriptor(e,i).enumerable})),o.push.apply(o,r)}return o}function vo(e){for(var n=1;n<arguments.length;n++){var o=arguments[n]!=null?arguments[n]:{};n%2?ei(Object(o),!0).forEach(function(r){Ys(e,r,o[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(o)):ei(Object(o)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(o,r))})}return e}function Ys(e,n,o){return n=Zs(n),n in e?Object.defineProperty(e,n,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[n]=o,e}function Zs(e){var n=Xs(e,"string");return typeof n=="symbol"?n:n+""}function Xs(e,n){if(typeof e!="object"||!e)return e;var o=e[Symbol.toPrimitive];if(o!==void 0){var r=o.call(e,n);if(typeof r!="object")return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return(n==="string"?String:Number)(e)}function Hi(e){return e&&e.map((n,o)=>g.createElement(n.tag,vo({key:o},n.attr),Hi(n.child)))}function ze(e){return n=>g.createElement(Ks,Co({attr:vo({},e.attr)},n),Hi(e.child))}function Ks(e){var n=o=>{var{attr:r,size:i,title:a}=e,l=Js(e,Us),x=i||o.size||"1em",d;return o.className&&(d=o.className),e.className&&(d=(d?d+" ":"")+e.className),g.createElement("svg",Co({stroke:"currentColor",fill:"currentColor",strokeWidth:"0"},o.attr,r,l,{className:d,style:vo(vo({color:e.color||o.color},o.style),e.style),height:x,width:x,xmlns:"http://www.w3.org/2000/svg"}),a&&g.createElement("title",null,a),e.children)};return Qn!==void 0?g.createElement(Qn.Consumer,null,o=>n(o)):n($i)}function Qs(e){return ze({attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{fill:"none",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"32",d:"M256 112v288m144-144H112"},child:[]}]})(e)}function ea(e){return ze({attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{fill:"none",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"48",d:"m112 268 144 144 144-144M256 392V100"},child:[]}]})(e)}function ta(e){return ze({attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{d:"M480 496H48a32 32 0 0 1-32-32V32a16 16 0 0 1 32 0v432h432a16 16 0 0 1 0 32z"},child:[]},{tag:"path",attr:{d:"M156 432h-40a36 36 0 0 1-36-36V244a36 36 0 0 1 36-36h40a36 36 0 0 1 36 36v152a36 36 0 0 1-36 36zm144 0h-40a36 36 0 0 1-36-36V196a36 36 0 0 1 36-36h40a36 36 0 0 1 36 36v200a36 36 0 0 1-36 36zm143.64 0h-40a36 36 0 0 1-36-36V132a36 36 0 0 1 36-36h40a36 36 0 0 1 36 36v264a36 36 0 0 1-36 36z"},child:[]}]})(e)}function oa(e){return ze({attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{d:"M416 80a48.05 48.05 0 0 0-48-48H144a48.05 48.05 0 0 0-48 48v352a48.05 48.05 0 0 0 48 48h224a48.05 48.05 0 0 0 48-48zM168 432a24 24 0 1 1 24-24 24 24 0 0 1-24 24zm0-80a24 24 0 1 1 24-24 24 24 0 0 1-24 24zm0-80a24 24 0 1 1 24-24 24 24 0 0 1-24 24zm88 160a24 24 0 1 1 24-24 24 24 0 0 1-24 24zm0-80a24 24 0 1 1 24-24 24 24 0 0 1-24 24zm0-80a24 24 0 1 1 24-24 24 24 0 0 1-24 24zm112 136a24 24 0 0 1-48 0v-80a24 24 0 0 1 48 0zm-24-136a24 24 0 1 1 24-24 24 24 0 0 1-24 24zm19.31-100.69A16 16 0 0 1 352 176H160a16 16 0 0 1-16-16V96a16 16 0 0 1 16-16h192a16 16 0 0 1 16 16v64a16 16 0 0 1-4.69 11.31z"},child:[]}]})(e)}function so(e){return ze({attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{fill:"none",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"32",d:"M416 128 192 384l-96-96"},child:[]}]})(e)}function ra(e){return ze({attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{fill:"none",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"48",d:"M328 112 184 256l144 144"},child:[]}]})(e)}function Gt(e){return ze({attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{fill:"none",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"48",d:"m112 184 144 144 144-144"},child:[]}]})(e)}function na(e){return ze({attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{fill:"none",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"48",d:"m184 112 144 144-144 144"},child:[]}]})(e)}function Vi(e){return ze({attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{fill:"none",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"48",d:"m112 328 144-144 144 144"},child:[]}]})(e)}function Do(e){return ze({attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{d:"m289.94 256 95-95A24 24 0 0 0 351 127l-95 95-95-95a24 24 0 0 0-34 34l95 95-95 95a24 24 0 1 0 34 34l95-95 95 95a24 24 0 0 0 34-34z"},child:[]}]})(e)}function ia(e){return ze({attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{fill:"none",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"32",d:"M336 176h40a40 40 0 0 1 40 40v208a40 40 0 0 1-40 40H136a40 40 0 0 1-40-40V216a40 40 0 0 1 40-40h40"},child:[]},{tag:"path",attr:{fill:"none",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"32",d:"m176 272 80 80 80-80M256 48v288"},child:[]}]})(e)}function sa(e){return ze({attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{d:"M376 160H272v153.37l52.69-52.68a16 16 0 0 1 22.62 22.62l-80 80a16 16 0 0 1-22.62 0l-80-80a16 16 0 0 1 22.62-22.62L240 313.37V160H136a56.06 56.06 0 0 0-56 56v208a56.06 56.06 0 0 0 56 56h240a56.06 56.06 0 0 0 56-56V216a56.06 56.06 0 0 0-56-56zM272 48a16 16 0 0 0-32 0v112h32z"},child:[]}]})(e)}function Jt(e){return ze({attr:{viewBox:"0 0 512 512"},child:[{tag:"circle",attr:{cx:"256",cy:"256",r:"48"},child:[]},{tag:"circle",attr:{cx:"256",cy:"416",r:"48"},child:[]},{tag:"circle",attr:{cx:"256",cy:"96",r:"48"},child:[]}]})(e)}function Ho(e){return ze({attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{d:"M432 448a15.92 15.92 0 0 1-11.31-4.69l-352-352a16 16 0 0 1 22.62-22.62l352 352A16 16 0 0 1 432 448zM248 315.85l-51.79-51.79a2 2 0 0 0-3.39 1.69 64.11 64.11 0 0 0 53.49 53.49 2 2 0 0 0 1.69-3.39zm16-119.7L315.87 248a2 2 0 0 0 3.4-1.69 64.13 64.13 0 0 0-53.55-53.55 2 2 0 0 0-1.72 3.39z"},child:[]},{tag:"path",attr:{d:"M491 273.36a32.2 32.2 0 0 0-.1-34.76c-26.46-40.92-60.79-75.68-99.27-100.53C349 110.55 302 96 255.68 96a226.54 226.54 0 0 0-71.82 11.79 4 4 0 0 0-1.56 6.63l47.24 47.24a4 4 0 0 0 3.82 1.05 96 96 0 0 1 116 116 4 4 0 0 0 1.05 3.81l67.95 68a4 4 0 0 0 5.4.24 343.81 343.81 0 0 0 67.24-77.4zM256 352a96 96 0 0 1-93.3-118.63 4 4 0 0 0-1.05-3.81l-66.84-66.87a4 4 0 0 0-5.41-.23c-24.39 20.81-47 46.13-67.67 75.72a31.92 31.92 0 0 0-.64 35.54c26.41 41.33 60.39 76.14 98.28 100.65C162.06 402 207.92 416 255.68 416a238.22 238.22 0 0 0 72.64-11.55 4 4 0 0 0 1.61-6.64l-47.47-47.46a4 4 0 0 0-3.81-1.05A96 96 0 0 1 256 352z"},child:[]}]})(e)}function Vo(e){return ze({attr:{viewBox:"0 0 512 512"},child:[{tag:"circle",attr:{cx:"256",cy:"256",r:"64"},child:[]},{tag:"path",attr:{d:"M490.84 238.6c-26.46-40.92-60.79-75.68-99.27-100.53C349 110.55 302 96 255.66 96c-42.52 0-84.33 12.15-124.27 36.11-40.73 24.43-77.63 60.12-109.68 106.07a31.92 31.92 0 0 0-.64 35.54c26.41 41.33 60.4 76.14 98.28 100.65C162 402 207.9 416 255.66 416c46.71 0 93.81-14.43 136.2-41.72 38.46-24.77 72.72-59.66 99.08-100.92a32.2 32.2 0 0 0-.1-34.76zM256 352a96 96 0 1 1 96-96 96.11 96.11 0 0 1-96 96z"},child:[]}]})(e)}function aa(e){return ze({attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{d:"M472 168H40a24 24 0 0 1 0-48h432a24 24 0 0 1 0 48zm-80 112H120a24 24 0 0 1 0-48h272a24 24 0 0 1 0 48zm-96 112h-80a24 24 0 0 1 0-48h80a24 24 0 0 1 0 48z"},child:[]}]})(e)}function la(e){return ze({attr:{viewBox:"0 0 512 512"},child:[{tag:"rect",attr:{width:"176",height:"176",x:"48",y:"48",fill:"none",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"32",rx:"20",ry:"20"},child:[]},{tag:"rect",attr:{width:"176",height:"176",x:"288",y:"48",fill:"none",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"32",rx:"20",ry:"20"},child:[]},{tag:"rect",attr:{width:"176",height:"176",x:"48",y:"288",fill:"none",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"32",rx:"20",ry:"20"},child:[]},{tag:"rect",attr:{width:"176",height:"176",x:"288",y:"288",fill:"none",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"32",rx:"20",ry:"20"},child:[]}]})(e)}function ca(e){return ze({attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{d:"M204 240H68a36 36 0 0 1-36-36V68a36 36 0 0 1 36-36h136a36 36 0 0 1 36 36v136a36 36 0 0 1-36 36zm240 0H308a36 36 0 0 1-36-36V68a36 36 0 0 1 36-36h136a36 36 0 0 1 36 36v136a36 36 0 0 1-36 36zM204 480H68a36 36 0 0 1-36-36V308a36 36 0 0 1 36-36h136a36 36 0 0 1 36 36v136a36 36 0 0 1-36 36zm240 0H308a36 36 0 0 1-36-36V308a36 36 0 0 1 36-36h136a36 36 0 0 1 36 36v136a36 36 0 0 1-36 36z"},child:[]}]})(e)}function da(e){return ze({attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{d:"M256 256c-13.47 0-26.94-2.39-37.44-7.17l-148-67.49C63.79 178.26 48 169.25 48 152.24s15.79-26 22.58-29.12l149.28-68.07c20.57-9.4 51.61-9.4 72.19 0l149.37 68.07c6.79 3.09 22.58 12.1 22.58 29.12s-15.79 26-22.58 29.11l-148 67.48C282.94 253.61 269.47 256 256 256zm176.76-100.86z"},child:[]},{tag:"path",attr:{d:"M441.36 226.81 426.27 220l-38.77 17.74-94 43c-10.5 4.8-24 7.19-37.44 7.19s-26.93-2.39-37.42-7.19l-94.07-43L85.79 220l-15.22 6.84C63.79 229.93 48 239 48 256s15.79 26.08 22.56 29.17l148 67.63C229 357.6 242.49 360 256 360s26.94-2.4 37.44-7.19l147.87-67.61c6.81-3.09 22.69-12.11 22.69-29.2s-15.77-26.07-22.64-29.19z"},child:[]},{tag:"path",attr:{d:"m441.36 330.8-15.09-6.8-38.77 17.73-94 42.95c-10.5 4.78-24 7.18-37.44 7.18s-26.93-2.39-37.42-7.18l-94.07-43L85.79 324l-15.22 6.84C63.79 333.93 48 343 48 360s15.79 26.07 22.56 29.15l148 67.59C229 461.52 242.54 464 256 464s26.88-2.48 37.38-7.27l147.92-67.57c6.82-3.08 22.7-12.1 22.7-29.16s-15.77-26.07-22.64-29.2z"},child:[]}]})(e)}function ua(e){return ze({attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{fill:"none",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"48",d:"M160 144h288M160 256h288M160 368h288"},child:[]},{tag:"circle",attr:{cx:"80",cy:"144",r:"16",fill:"none",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"32"},child:[]},{tag:"circle",attr:{cx:"80",cy:"256",r:"16",fill:"none",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"32"},child:[]},{tag:"circle",attr:{cx:"80",cy:"368",r:"16",fill:"none",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"32"},child:[]}]})(e)}function pa(e){return ze({attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{d:"M48.17 113.34A32 32 0 0 0 32 141.24V438a32 32 0 0 0 47 28.37c.43-.23.85-.47 1.26-.74l84.14-55.05a8 8 0 0 0 3.63-6.72V46.45a8 8 0 0 0-12.51-6.63zm164.19-74.03A8 8 0 0 0 200 46v357.56a8 8 0 0 0 3.63 6.72l96 62.42A8 8 0 0 0 312 466V108.67a8 8 0 0 0-3.64-6.73zm252.17 7.16a31.64 31.64 0 0 0-31.5-.88 12.07 12.07 0 0 0-1.25.74l-84.15 55a8 8 0 0 0-3.63 6.72v357.46a8 8 0 0 0 12.52 6.63l107.07-73.46a32 32 0 0 0 16.41-28v-296a32.76 32.76 0 0 0-15.47-28.21z"},child:[]}]})(e)}function fa(e){return ze({attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{d:"M208 432h-48a16 16 0 0 1-16-16V96a16 16 0 0 1 16-16h48a16 16 0 0 1 16 16v320a16 16 0 0 1-16 16zm144 0h-48a16 16 0 0 1-16-16V96a16 16 0 0 1 16-16h48a16 16 0 0 1 16 16v320a16 16 0 0 1-16 16z"},child:[]}]})(e)}function ga(e){return ze({attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{d:"M66.1 357a16 16 0 0 1-14.61-9.46A224 224 0 0 1 256 32a16 16 0 0 1 16 16v208a16 16 0 0 1-9.47 14.61l-189.9 84.95A15.93 15.93 0 0 1 66.1 357z"},child:[]},{tag:"path",attr:{d:"M313.59 68.18A8 8 0 0 0 304 76v180a48.07 48.07 0 0 1-28.4 43.82L103.13 377a8 8 0 0 0-3.35 11.81 208.42 208.42 0 0 0 48.46 50.41A206.32 206.32 0 0 0 272 480c114.69 0 208-93.31 208-208 0-100.45-71.58-184.5-166.41-203.82z"},child:[]}]})(e)}function ha(e){return ze({attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{d:"M133 440a35.37 35.37 0 0 1-17.5-4.67c-12-6.8-19.46-20-19.46-34.33V111c0-14.37 7.46-27.53 19.46-34.33a35.13 35.13 0 0 1 35.77.45l247.85 148.36a36 36 0 0 1 0 61l-247.89 148.4A35.5 35.5 0 0 1 133 440z"},child:[]}]})(e)}function ma(e){return ze({attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{d:"M456.69 421.39 362.6 327.3a173.81 173.81 0 0 0 34.84-104.58C397.44 126.38 319.06 48 222.72 48S48 126.38 48 222.72s78.38 174.72 174.72 174.72A173.81 173.81 0 0 0 327.3 362.6l94.09 94.09a25 25 0 0 0 35.3-35.3zM97.92 222.72a124.8 124.8 0 1 1 124.8 124.8 124.95 124.95 0 0 1-124.8-124.8z"},child:[]}]})(e)}function xa(e){return ze({attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{d:"M416 464H96a48.05 48.05 0 0 1-48-48V96a48.05 48.05 0 0 1 48-48h320a48.05 48.05 0 0 1 48 48v320a48.05 48.05 0 0 1-48 48z"},child:[]}]})(e)}function ya(e){return ze({attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{d:"M256 48C141.13 48 48 141.13 48 256s93.13 208 208 208 208-93.13 208-208S370.87 48 256 48zm96 240h-96a16 16 0 0 1-16-16V128a16 16 0 0 1 32 0v128h80a16 16 0 0 1 0 32z"},child:[]}]})(e)}function _i(e){return ze({attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{fill:"none",d:"M296 64h-80a7.91 7.91 0 0 0-8 8v24h96V72a7.91 7.91 0 0 0-8-8z"},child:[]},{tag:"path",attr:{d:"M432 96h-96V72a40 40 0 0 0-40-40h-80a40 40 0 0 0-40 40v24H80a16 16 0 0 0 0 32h17l19 304.92c1.42 26.85 22 47.08 48 47.08h184c26.13 0 46.3-19.78 48-47l19-305h17a16 16 0 0 0 0-32zM192.57 416H192a16 16 0 0 1-16-15.43l-8-224a16 16 0 1 1 32-1.14l8 224A16 16 0 0 1 192.57 416zM272 400a16 16 0 0 1-32 0V176a16 16 0 0 1 32 0zm32-304h-96V72a7.91 7.91 0 0 1 8-8h80a7.91 7.91 0 0 1 8 8zm32 304.57A16 16 0 0 1 320 416h-.58A16 16 0 0 1 304 399.43l8-224a16 16 0 1 1 32 1.14z"},child:[]}]})(e)}function ba(e){return ze({attr:{viewBox:"0 0 24 24"},child:[{tag:"path",attr:{fill:"none",d:"M0 0h24v24H0z"},child:[]},{tag:"path",attr:{d:"M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"},child:[]}]})(e)}function wo(e){return ze({attr:{viewBox:"0 0 24 24"},child:[{tag:"path",attr:{fill:"none",d:"M0 0h24v24H0z"},child:[]},{tag:"path",attr:{d:"M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"},child:[]}]})(e)}function ti(e){return ze({attr:{viewBox:"0 0 24 24"},child:[{tag:"path",attr:{fill:"none",d:"M0 0h24v24H0z"},child:[]},{tag:"path",attr:{d:"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"},child:[]}]})(e)}const Ca="_container_1dl6q_1",va="_collapsedContainer_1dl6q_18",wa="_collapsedRightSidebarContainer_1dl6q_32",ja="_expandRightSidebarButton_1dl6q_46",Sa="_header_1dl6q_79",ka="_logoContainer_1dl6q_85",La="_diamondLeft_1dl6q_94",Ta="_diamondRight_1dl6q_103",Pa="_utilityIcons_1dl6q_125",Ma="_utilityIcon_1dl6q_125",Fa="_collapseButton_1dl6q_140",Ia="_expandButton_1dl6q_155",za="_datasetsScrollArea_1dl6q_169",Ea="_datasetsList_1dl6q_189",Ra="_datasetsTitle_1dl6q_193",Da="_datasetItem_1dl6q_199",Aa="_datasetColorIndicator_1dl6q_207",Ba="_datasetName_1dl6q_214",Na="_datasetRows_1dl6q_220",Oa="_datasetActionIcon_1dl6q_226",Wa="_navIcons_1dl6q_251",Ga="_navIconContainer_1dl6q_262",$a="_navIcon_1dl6q_251",Ha="_activeNavIcon_1dl6q_281",Va="_activeIndicator_1dl6q_285",_a="_addDataButtonSmall_1dl6q_304",Ua="_layersList_1dl6q_320",Ja="_rightSidebarWidgets_1dl6q_339",qa="_rightSidebarHeader_1dl6q_353",Ya="_rightSidebarTitle_1dl6q_358",Za="_rightSidebarCollapse_1dl6q_379",ve={container:Ca,collapsedContainer:va,collapsedRightSidebarContainer:wa,expandRightSidebarButton:ja,header:Sa,logoContainer:ka,diamondLeft:La,diamondRight:Ta,utilityIcons:Pa,utilityIcon:Ma,collapseButton:Fa,expandButton:Ia,datasetsScrollArea:za,datasetsList:Ea,datasetsTitle:Ra,datasetItem:Da,datasetColorIndicator:Aa,datasetName:Ba,datasetRows:Na,datasetActionIcon:Oa,navIcons:Wa,navIconContainer:Ga,navIcon:$a,activeNavIcon:Ha,activeIndicator:Va,addDataButtonSmall:_a,layersList:Ua,rightSidebarWidgets:Ja,rightSidebarHeader:qa,rightSidebarTitle:Ya,rightSidebarCollapse:Za};function Yt(e){return ze({attr:{viewBox:"0 0 384 512"},child:[{tag:"path",attr:{d:"M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm160-14.1v6.1H256V0h6.1c6.4 0 12.5 2.5 17 7l97.9 98c4.5 4.5 7 10.6 7 16.9z"},child:[]}]})(e)}function Xa(e){return ze({attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{d:"M464 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zM224 416H64v-96h160v96zm0-160H64v-96h160v96zm224 160H288v-96h160v96zm0-160H288v-96h160v96z"},child:[]}]})(e)}function Ka(e){return ze({attr:{viewBox:"0 0 448 512"},child:[{tag:"path",attr:{d:"M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z"},child:[]}]})(e)}const Ui=e=>{let n=e;n.use={};for(let o of Object.keys(n.getState()))n.use[o]=()=>n(r=>r[o]);return n},Ao=new Map,ao=e=>Ao.get(e),Qa=(e,n)=>{!Ao.has(e)&&n&&Ao.set(e,JSON.parse(JSON.stringify(n)))},el=Ni.create()((e,n)=>({map:null,setMap:o=>e({map:o}),drawControl:null,setDrawControl:o=>e({drawControl:o}),groups:[],setGroups:o=>e({groups:o}),visibleLayers:[],setVisibleLayers:o=>e({visibleLayers:o}),visibleLayers2:{},setVisibleLayers2:o=>e({visibleLayers2:o}),isMapLoading:!0,setIsMapLoading:o=>e({isMapLoading:o}),mapLoadingProgress:0,setMapLoadingProgress:o=>e({mapLoadingProgress:o}),selectedLayersForTool:[],setSelectedLayersForTool:o=>e({selectedLayersForTool:o}),sourceMarker:null,setSourceMarker:o=>e({sourceMarker:o}),destMarker:null,setDestMarker:o=>e({destMarker:o}),addLocationMarker:null,setAddLocationMarker:o=>e({addLocationMarker:o}),animateMarker:null,setAnimateMarker:o=>e({animateMarker:o}),isLayersSidebarOpened:!1,setIsLayersSidebarOpened:o=>e({isLayersSidebarOpened:o}),uploadedDatasets:[],setUploadedDatasets:o=>e({uploadedDatasets:o}),addUploadedDataset:o=>{o.geojson&&Qa(o.id,o.geojson),e(r=>({uploadedDatasets:[...r.uploadedDatasets,o]}))},removeUploadedDataset:o=>e(r=>({uploadedDatasets:r.uploadedDatasets.filter(i=>i.id!==o)})),tilesets:[],setTilesets:o=>e({tilesets:o}),addTileset:o=>e(r=>({tilesets:[...r.tilesets,o]})),removeTileset:o=>e(r=>({tilesets:r.tilesets.filter(i=>i.id!==o)})),tooltipEnabled:!1,setTooltipEnabled:o=>e({tooltipEnabled:o}),tooltipDatasets:[],setTooltipDatasets:o=>e({tooltipDatasets:o}),tooltipFields:[],setTooltipFields:o=>e({tooltipFields:o}),datasetTooltipEnabled:{},setDatasetTooltipEnabled:(o,r)=>e(i=>({datasetTooltipEnabled:{...i.datasetTooltipEnabled,[o]:r}})),datasetTooltipFields:{},setDatasetTooltipFields:(o,r)=>e(i=>({datasetTooltipFields:{...i.datasetTooltipFields,[o]:r}})),selectedLayerFortool:[],setSelectedLayerFortool:o=>e({selectedLayerFortool:o}),navigationCropFilter:null,setNavigationCropFilter:o=>e({navigationCropFilter:o}),tree:{},setTree:o=>e({tree:o}),layersAddedFromCatalogue:[],setLayersAddedFromCatalogue:o=>e({layersAddedFromCatalogue:o}),drawnCoordinates:[],setDrawnCoordinates:o=>e({drawnCoordinates:o}),attributeTableFilteredFeatures:{},setAttributeTableFilteredFeatures:(o,r)=>e(i=>({attributeTableFilteredFeatures:{...i.attributeTableFilteredFeatures,[o]:r}})),attributeTableOpen:!1,setAttributeTableOpen:o=>e({attributeTableOpen:o}),attributeTableSelectedLayerId:null,setAttributeTableSelectedLayerId:o=>e({attributeTableSelectedLayerId:o})})),de=Ui(el),Ji=g.createContext(void 0),qi=({children:e})=>{const[n,o]=g.useState({}),r=g.useCallback((h,y)=>{o(c=>({...c,[h]:y}))},[]),i=g.useCallback(h=>n[h]||{visualizationType:"geojson",visible:!0},[n]),a=g.useCallback((h,y)=>{o(c=>({...c,[h]:{...c[h]||{visualizationType:"geojson",visible:!0},visible:y}}))},[]),l=g.useCallback((h,y)=>{o(c=>({...c,[h]:{...c[h]||{visible:!0},visualizationType:y}}))},[]),x=g.useCallback((h,y)=>{o(c=>({...c,[h]:{...c[h]||{visualizationType:"geojson",visible:!0},colorConfig:y}}))},[]),d=g.useCallback((h,y)=>{o(c=>({...c,[h]:{...c[h]||{visualizationType:"geojson",visible:!0},styleConfig:y}}))},[]);return t.jsx(Ji.Provider,{value:{layerConfigs:n,setLayerConfig:r,getLayerConfig:i,setLayerVisibility:a,setVisualizationType:l,setColorConfig:x,setStyleConfig:d},children:e})},oo=()=>{const e=g.useContext(Ji);if(!e)throw new Error("useLayerConfig must be used within LayerConfigProvider");return e};function tl(e){return ze({attr:{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"},child:[{tag:"circle",attr:{cx:"12",cy:"12",r:"10"},child:[]},{tag:"line",attr:{x1:"12",y1:"16",x2:"12",y2:"12"},child:[]},{tag:"line",attr:{x1:"12",y1:"8",x2:"12.01",y2:"8"},child:[]}]})(e)}function lo(e){return ze({attr:{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"},child:[{tag:"line",attr:{x1:"12",y1:"5",x2:"12",y2:"19"},child:[]},{tag:"line",attr:{x1:"5",y1:"12",x2:"19",y2:"12"},child:[]}]})(e)}function Pt(e){return ze({attr:{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"},child:[{tag:"circle",attr:{cx:"11",cy:"11",r:"8"},child:[]},{tag:"line",attr:{x1:"21",y1:"21",x2:"16.65",y2:"16.65"},child:[]}]})(e)}function oi(e){return ze({attr:{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"},child:[{tag:"polyline",attr:{points:"3 6 5 6 21 6"},child:[]},{tag:"path",attr:{d:"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"},child:[]},{tag:"line",attr:{x1:"10",y1:"11",x2:"10",y2:"17"},child:[]},{tag:"line",attr:{x1:"14",y1:"11",x2:"14",y2:"17"},child:[]}]})(e)}function Zt(e){return ze({attr:{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"},child:[{tag:"line",attr:{x1:"18",y1:"6",x2:"6",y2:"18"},child:[]},{tag:"line",attr:{x1:"6",y1:"6",x2:"18",y2:"18"},child:[]}]})(e)}function co(e){return ze({attr:{fill:"none",viewBox:"0 0 24 24",strokeWidth:"2",stroke:"currentColor","aria-hidden":"true"},child:[{tag:"path",attr:{strokeLinecap:"round",strokeLinejoin:"round",d:"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"},child:[]}]})(e)}const Yi=e=>t.jsxs("svg",{viewBox:"0 0 64 64",width:"32",height:"32",...e,children:[t.jsx("circle",{cx:"29.4",cy:"31.6",r:"8.4",className:"cr1",fill:"#43bcd6"}),t.jsx("circle",{cx:"48.5",cy:"15.7",r:"6.5",className:"cr2",fill:"#43bcd6"}),t.jsx("circle",{cx:"11",cy:"44.2",r:"3",className:"cr3",fill:"#43bcd6"}),t.jsx("circle",{cx:"50",cy:"44.2",r:"5",className:"cr4",fill:"#43bcd6"}),t.jsx("circle",{cx:"34",cy:"54.2",r:"3",className:"cr5",fill:"#43bcd6"}),t.jsx("circle",{cx:"14",cy:"16.2",r:"4",className:"cr6",fill:"#43bcd6"})]}),Zi=e=>t.jsxs("svg",{viewBox:"0 0 64 64",width:"32",height:"32",...e,children:[t.jsx("path",{d:`M34.5,34.4c-0.6,0-1.2-0.4-1.4-1c-2.7-9.9-8.8-21.7-16.8-22.3c-3.1-0.2-5.6,1.5-7,4.8c-0.3,0.7-1.1,1.1-1.9,0.7
|
|
2
|
+
c-0.7-0.3-1.1-1.1-0.7-1.9c1.9-4.3,5.6-6.8,9.8-6.5c9.5,0.7,16.3,13,19.4,24.4c0.2,0.8-0.2,1.5-1,1.7C34.8,34.3,34.6,34.4,34.5,34.4
|
|
3
|
+
z`,fill:"#43bcd6"}),t.jsx("path",{d:`M6.7,57c0,0-0.1,0-0.1,0c-0.5-0.1-0.9-0.6-0.8-1.1c2.4-17.3,9.6-30.3,17.5-31.8c3.1-0.6,7.8,0.4,12.1,8.3
|
|
4
|
+
c0.3,0.5,0.1,1-0.4,1.3c-0.5,0.3-1,0.1-1.3-0.4c-2.1-3.8-5.6-8.2-10.1-7.4C16.6,27.3,9.9,40,7.6,56.2C7.6,56.7,7.2,57,6.7,57z`,fill:"#43bcd6"}),t.jsx("path",{d:`M56.8,56.4c-0.8,0-1.4-0.6-1.4-1.4c0-13.5-6.8-24.4-12.9-25.8c-3.5-0.8-5.6,2-6.7,4.4c-0.3,0.7-1.2,1-1.9,0.7
|
|
5
|
+
c-0.7-0.3-1-1.2-0.7-1.9c2.2-4.7,5.8-6.9,9.9-6c9,2,15.1,16.4,15.1,28.6C58.3,55.7,57.6,56.4,56.8,56.4z`,fill:"#43bcd6"}),t.jsx("path",{d:`M34.5,32.7c-0.2,0-0.3,0-0.5,0c-1.3-0.3-2.1-1.5-1.8-2.8c3.5-17.4,10.3-20.7,14-21.2c4.4-0.5,8.6,2.3,11,7.4
|
|
6
|
+
c0.6,1.2,0,2.6-1.1,3.1c-1.2,0.6-2.6,0-3.1-1.1c-1.5-3.2-3.8-5-6.1-4.7c-1.5,0.2-6.8,2-9.9,17.4C36.6,32,35.6,32.7,34.5,32.7z`,fill:"#43bcd6"})]}),Xi=e=>t.jsxs("svg",{viewBox:"0 0 64 64",width:"32",height:"32",...e,children:[t.jsx("path",{d:`M57.8,58.3c-0.4,0-0.8-0.2-1.1-0.5L33.1,32.1c-0.6-0.6-0.5-1.6,0.1-2.1c0.6-0.6,1.6-0.5,2.1,0.1l23.7,25.8
|
|
7
|
+
c0.6,0.6,0.5,1.6-0.1,2.1C58.5,58.2,58.2,58.3,57.8,58.3z`,fill:"#43bcd6"}),t.jsx("path",{d:`M34.2,33.6c-0.6,0-1.2-0.2-1.7-0.6c-1-0.9-1.1-2.5-0.2-3.5l18.5-21c0.9-1,2.5-1.1,3.5-0.2c1,0.9,1.1,2.5,0.2,3.5L36,32.7
|
|
8
|
+
C35.5,33.3,34.9,33.6,34.2,33.6z`,fill:"#43bcd6"}),t.jsx("path",{d:`M34.2,32.6c-0.5,0-1-0.3-1.3-0.8L20.7,10.2c-0.4-0.7-0.1-1.6,0.6-2c0.7-0.4,1.6-0.1,2,0.6l12.1,21.6c0.4,0.7,0.1,1.6-0.6,2
|
|
9
|
+
C34.7,32.5,34.4,32.6,34.2,32.6z`,fill:"#43bcd6"}),t.jsx("path",{d:`M15.8,58.4c-0.3,0-0.6-0.1-0.9-0.3c-0.7-0.5-0.8-1.4-0.4-2.1l18.3-25.8c0.5-0.7,1.4-0.8,2.1-0.4s0.8,1.4,0.4,2.1L17.1,57.7
|
|
10
|
+
C16.8,58.2,16.3,58.4,15.8,58.4z`,fill:"#43bcd6"}),t.jsx("path",{d:`M34.2,32.1c-0.1,0-0.3,0-0.4-0.1l-28.5-14c-0.5-0.2-0.7-0.8-0.5-1.3c0.2-0.5,0.8-0.7,1.3-0.5l28.5,14
|
|
11
|
+
c0.5,0.2,0.7,0.8,0.5,1.3C34.9,31.9,34.5,32.1,34.2,32.1z`,fill:"#43bcd6"})]}),Ki=e=>t.jsxs("svg",{viewBox:"0 0 64 64",width:"32",height:"32",...e,children:[t.jsx("rect",{x:"11.2",y:"11.2",width:"13.1",height:"13.1",fill:"#43bcd6",opacity:"0.8"}),t.jsx("rect",{x:"25.4",y:"11.2",width:"13.1",height:"13.1",fill:"#43bcd6",opacity:"0.8"}),t.jsx("rect",{x:"39.6",y:"11.2",width:"13.1",height:"13.1",fill:"#43bcd6"}),t.jsx("rect",{x:"11.2",y:"25.4",width:"13.1",height:"13.1",fill:"#43bcd6",opacity:"0.4"}),t.jsx("rect",{x:"25.4",y:"25.4",width:"13.1",height:"13.1",fill:"#43bcd6"}),t.jsx("rect",{x:"39.6",y:"25.4",width:"13.1",height:"13.1",fill:"#43bcd6",opacity:"0.8"}),t.jsx("rect",{x:"11.2",y:"39.6",width:"13.1",height:"13.1",fill:"#43bcd6"}),t.jsx("rect",{x:"25.4",y:"39.6",width:"13.1",height:"13.1",fill:"#43bcd6",opacity:"0.4"}),t.jsx("rect",{x:"39.6",y:"39.6",width:"13.1",height:"13.1",fill:"#43bcd6",opacity:"0.4"})]}),Qi=e=>t.jsxs("svg",{viewBox:"0 0 64 64",width:"32",height:"32",...e,children:[t.jsx("polygon",{points:"23.9,10 30.9,14 30.9,22.1 23.9,26.2 16.8,22.1 16.8,14",fill:"#43bcd6",opacity:"0.6"}),t.jsx("polygon",{points:"23.9,37.8 30.9,41.9 30.9,50 23.9,54 16.8,50 16.8,41.9",fill:"#43bcd6",opacity:"0.4"}),t.jsx("polygon",{points:"40.1,10 47.2,14 47.2,22.1 40.1,26.2 33.1,22.1 33.1,14",fill:"#43bcd6"}),t.jsx("polygon",{points:"40.1,37.8 47.2,41.9 47.2,50 40.1,54 33.1,50 33.1,41.9",fill:"#43bcd6",opacity:"0.8"}),t.jsx("polygon",{points:"15.8,23.9 22.8,27.9 22.8,36.1 15.8,40.1 8.7,36.1 8.7,27.9",fill:"#43bcd6"}),t.jsx("polygon",{points:"32,23.9 39,27.9 39,36.1 32,40.1 25,36.1 25,27.9",fill:"#43bcd6",opacity:"0.8"}),t.jsx("polygon",{points:"48.2,23.9 55.3,27.9 55.3,36.1 48.2,40.1 41.2,36.1 41.2,27.9",fill:"#43bcd6",opacity:"0.4"})]}),es=e=>t.jsxs("svg",{viewBox:"0 0 64 64",width:"32",height:"32",...e,children:[t.jsx("polygon",{points:"25.04 23.08 9.72 31.79 8.19 43.2 19.57 53.83 28.79 53.83 35.6 46.57 39.45 30.08 25.04 23.08",fill:"#43bcd6"}),t.jsx("polygon",{points:"52.8 26.3 41.74 30.32 37.9 46.75 45.26 53.83 51.45 53.83 55.07 43.51 52.8 26.3",fill:"#43bcd6",opacity:"0.8"}),t.jsx("polygon",{points:"36.69 48.75 31.93 53.83 41.96 53.83 36.69 48.75",fill:"#43bcd6",opacity:"0.4"}),t.jsx("polygon",{points:"25.95 20.98 40.84 28.22 52.57 24.06 50.89 11.5 23.24 11.5 25.95 20.98",fill:"#43bcd6",opacity:"0.4"}),t.jsx("polygon",{points:"20.79 11.9 11.73 15.72 10.08 28.96 23.64 21.25 20.79 11.9",fill:"#43bcd6",opacity:"0.8"})]}),ts=e=>t.jsxs("svg",{viewBox:"0 0 64 64",width:"32",height:"32",...e,children:[t.jsx("path",{d:`M13.6,22.7c2.9-3.6,4.4-6.3,4.4-8c0-2.7-2.2-4.9-4.9-4.9S8.2,12,8.2,14.7c0,1.7,1.5,4.4,4.4,8l0,0
|
|
12
|
+
C12.8,23,13.2,23,13.6,22.7C13.5,22.8,13.6,22.7,13.6,22.7z`,fill:"#43bcd6"}),t.jsx("path",{d:`M22.9,57.4c2.5-3.1,3.8-5.5,3.8-7c0-2.4-2-4.4-4.4-4.4S18,48,18,50.4c0,1.5,1.3,3.8,3.8,7l0,0
|
|
13
|
+
c0.3,0.3,0.7,0.4,1,0.1C22.9,57.4,22.9,57.4,22.9,57.4z`,fill:"#43bcd6"}),t.jsx("path",{d:`M51.4,22.5c2.8-3.4,4.2-6,4.2-7.6c0-2.6-2.1-4.8-4.8-4.8c-2.6,0-4.8,2.1-4.8,4.8c0,1.6,1.4,4.2,4.2,7.6
|
|
14
|
+
l0,0c0.3,0.3,0.8,0.4,1.1,0.1C51.3,22.5,51.4,22.5,51.4,22.5z`,fill:"#43bcd6"}),t.jsx("path",{d:`M49.2,53.8c3.7-4.5,5.5-7.8,5.5-9.9c0-3.3-2.7-6.1-6.1-6.1c-3.3,0-6.1,2.7-6.1,6.1
|
|
15
|
+
c0,2.1,1.8,5.4,5.5,9.9l0,0c0.3,0.3,0.7,0.4,1.1,0.1C49.1,53.8,49.1,53.8,49.2,53.8z`,fill:"#43bcd6"}),t.jsx("path",{d:`M31.4,39.6C36.5,33.5,39,29,39,26.1c0-4.4-3.6-8-8-8s-8,3.6-8,8c0,2.9,2.5,7.4,7.6,13.5l0,0
|
|
16
|
+
C30.8,39.8,31.1,39.9,31.4,39.6C31.3,39.7,31.4,39.6,31.4,39.6z`,fill:"#43bcd6"})]}),os=e=>t.jsxs("svg",{viewBox:"0 0 64 64",width:"32",height:"32",...e,children:[t.jsx("path",{d:"M42.27,33.59l-4.34,4.34-4.34-4.34a13.25,13.25,0,0,1-8.9-12.52h0A13.24,13.24,0,0,1,37.93,7.83h0A13.24,13.24,0,0,1,51.17,21.07h0A13.25,13.25,0,0,1,42.27,33.59ZM37.93,28.3a7.22,7.22,0,1,0-7.22-7.22A7.22,7.22,0,0,0,37.93,28.3Z",fill:"#43bcd6"}),t.jsx("path",{d:"M18.68,48.79l-2.44,2.44L13.8,48.79a7.44,7.44,0,0,1-5-7h0a7.44,7.44,0,0,1,7.44-7.44h0a7.44,7.44,0,0,1,7.44,7.44h0A7.44,7.44,0,0,1,18.68,48.79Zm-2.44-3a4.06,4.06,0,1,0-4.06-4.06A4.06,4.06,0,0,0,16.24,45.81Z",fill:"#43bcd6"}),t.jsx("path",{d:"M48.85,55.52l-2.2,2.2-2.2-2.2a6.73,6.73,0,0,1-4.52-6.36h0a6.72,6.72,0,0,1,6.72-6.72h0a6.72,6.72,0,0,1,6.72,6.72h0A6.73,6.73,0,0,1,48.85,55.52Zm-2.2-2.69A3.67,3.67,0,1,0,43,49.17,3.67,3.67,0,0,0,46.65,52.83Z",fill:"#43bcd6"})]}),rs=e=>t.jsxs("svg",{viewBox:"0 0 64 64",width:"32",height:"32",...e,children:[t.jsx("path",{d:"M51.87,21C49.55,16.67,43.77,15.29,39,18a11.42,11.42,0,0,0-1.65,1.13c-2.73,2.14-2.12,3-6,4.89-2.27,1.07-3.42,1.08-6.88,1.4l-2.24.21a14,14,0,0,0-2.86.84c-6.64,2.73-10.11,9.86-7.76,15.94s9.63,8.79,16.27,6.07A14,14,0,0,0,31.77,46l0,0,.06-.07c.43-.4.8-.78,1.14-1.14a2.66,2.66,0,0,0,.32-.36l.17-.19c3-3.53,2-5,4.9-7.39,2.38-1.93,5.41-.95,9-3C52.19,31.15,54.19,25.43,51.87,21ZM26,44.59a8.7,8.7,0,0,1-2.26.59A7.16,7.16,0,0,1,16,40.85c-1.44-3.72.68-8.08,4.73-9.74A8.33,8.33,0,0,1,23,30.53a7.15,7.15,0,0,1,7.71,4.32C32.19,38.57,30.06,42.93,26,44.59Z",fill:"#43bcd6",opacity:"0.8"}),t.jsx("path",{d:"M57,18.18A14.56,14.56,0,0,0,42.25,10.7a16.62,16.62,0,0,0-6.12,2,17.35,17.35,0,0,0-2.39,1.65,20.15,20.15,0,0,0-2.83,2.73,4.52,4.52,0,0,1-2,1.45,5.88,5.88,0,0,1-2.26.63l-1.45.14-1.27.12-2.33.22-.2,0-.18,0a18.88,18.88,0,0,0-4,1.18c-9.6,3.93-14.51,14.57-11,23.71A17.59,17.59,0,0,0,24.81,55.4,20.19,20.19,0,0,0,30,54.05a20,20,0,0,0,5.26-3.19l.82-.71.05-.08,1-1c.21-.22.41-.45.59-.66l.13-.15a20,20,0,0,0,3.39-5.48c.36-.87.36-.87.68-1.14a9.09,9.09,0,0,1,1.56-.32,18.79,18.79,0,0,0,6.69-2.19,16.56,16.56,0,0,0,7.88-9.9A14.93,14.93,0,0,0,57,18.18ZM47.63,34.27a13.93,13.93,0,0,1-5.06,1.61,7.75,7.75,0,0,0-3.86,1.36,7.06,7.06,0,0,0-2.33,3.24,14.17,14.17,0,0,1-2.51,4.09l-.1.11a5.11,5.11,0,0,1-.43.47c-.31.35-.7.73-1.14,1.14l-.09.09-.12.09a14.4,14.4,0,0,1-4,2.44,14.73,14.73,0,0,1-3.84,1c-5.87.69-11.13-2.27-13.08-7.35-2.45-6.32,1.16-13.76,8-16.59a15,15,0,0,1,3-.87l2.29-.22.9-.07,2-.2a10.88,10.88,0,0,0,3.85-1.08,9.43,9.43,0,0,0,3.77-2.76A14.75,14.75,0,0,1,37,18.71a11.5,11.5,0,0,1,1.71-1.17,11.08,11.08,0,0,1,4.16-1.36,9.26,9.26,0,0,1,9.42,4.64C54.75,25.42,52.65,31.47,47.63,34.27Z",fill:"#43bcd6",opacity:"0.36"}),t.jsx("path",{d:"M33,44.79a9.53,9.53,0,0,1-1.13,1.14C32.3,45.53,32.67,45.15,33,44.79Z",fill:"#43bcd6",opacity:"0.36"}),t.jsx("path",{d:"M25.83,44.13c-3.82,1.55-8,0-9.33-3.46s.65-7.55,4.45-9.1,8,0,9.33,3.46S29.63,42.57,25.83,44.13Z",fill:"#43bcd6"}),t.jsx("path",{d:"M31.81,46a.09.09,0,0,1,0,0h0Z",fill:"#43bcd6"})]}),ns=e=>t.jsxs("svg",{viewBox:"0 0 64 64",width:"32",height:"32",...e,children:[t.jsx("path",{d:"M10,32 L20,20 L30,35 L40,15 L50,30 L54,32",stroke:"#43bcd6",strokeWidth:"3",fill:"none",strokeLinecap:"round",strokeLinejoin:"round"}),t.jsx("circle",{cx:"10",cy:"32",r:"3",fill:"#43bcd6"}),t.jsx("circle",{cx:"20",cy:"20",r:"3",fill:"#43bcd6"}),t.jsx("circle",{cx:"30",cy:"35",r:"3",fill:"#43bcd6"}),t.jsx("circle",{cx:"40",cy:"15",r:"3",fill:"#43bcd6"}),t.jsx("circle",{cx:"50",cy:"30",r:"3",fill:"#43bcd6"}),t.jsx("circle",{cx:"54",cy:"32",r:"3",fill:"#43bcd6"})]}),is=e=>t.jsxs("svg",{viewBox:"0 0 64 64",width:"32",height:"32",...e,children:[t.jsx("ellipse",{cx:"32",cy:"60",rx:"18",ry:"4",fill:"#43bcd6",opacity:"0.2"}),t.jsx("rect",{x:"24",y:"16",width:"16",height:"36",rx:"4",fill:"#43bcd6"}),t.jsx("rect",{x:"20",y:"12",width:"24",height:"8",rx:"4",fill:"#43bcd6",opacity:"0.7"})]}),ss=e=>t.jsxs("svg",{viewBox:"0 0 64 64",width:"32",height:"32",...e,children:[t.jsx("ellipse",{cx:"32",cy:"32",rx:"20",ry:"15",stroke:"#43bcd6",strokeWidth:"2",fill:"none"}),t.jsx("ellipse",{cx:"32",cy:"32",rx:"15",ry:"10",stroke:"#43bcd6",strokeWidth:"2",fill:"none"}),t.jsx("ellipse",{cx:"32",cy:"32",rx:"10",ry:"6",stroke:"#43bcd6",strokeWidth:"2",fill:"none"}),t.jsx("circle",{cx:"32",cy:"32",r:"2",fill:"#43bcd6"})]}),as=e=>t.jsxs("svg",{viewBox:"0 0 64 64",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e,children:[t.jsx("path",{d:"M8 48C16 48 20 32 32 32C44 32 48 16 56 16",stroke:"currentColor",strokeWidth:"4",strokeLinecap:"round",strokeLinejoin:"round",fill:"none"}),t.jsx("circle",{cx:"14",cy:"44",r:"2",fill:"currentColor",fillOpacity:"0.3"}),t.jsx("circle",{cx:"23",cy:"36",r:"2.5",fill:"currentColor",fillOpacity:"0.5"}),t.jsx("circle",{cx:"32",cy:"32",r:"3",fill:"currentColor",fillOpacity:"0.7"}),t.jsx("circle",{cx:"41",cy:"26",r:"3.5",fill:"currentColor",fillOpacity:"0.85"}),t.jsx("circle",{cx:"50",cy:"20",r:"4",fill:"currentColor"}),t.jsx("path",{d:"M52 12L58 16L52 20",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",fill:"none"})]}),ls=e=>t.jsxs("svg",{viewBox:"0 0 64 64",width:"32",height:"32",...e,children:[t.jsx("ellipse",{cx:"32",cy:"60",rx:"18",ry:"4",fill:"#43bcd6",opacity:"0.2"}),t.jsx("rect",{x:"16",y:"16",width:"32",height:"8",rx:"2",fill:"#43bcd6"}),t.jsx("rect",{x:"28",y:"24",width:"8",height:"24",rx:"2",fill:"#43bcd6"})]}),cs=e=>t.jsxs("svg",{viewBox:"0 0 64 64",width:"32",height:"32",...e,children:[t.jsx("path",{d:"M44.59,54.5H19.41L6.81,32.68,19.41,10.87H44.59L57.19,32.68Zm-23-3.83H42.38l10.38-18-10.38-18H21.62l-10.38,18Z",fill:"#43bcd6"}),t.jsx("polygon",{points:"24.65 32.86 24.65 37.79 22.53 37.79 22.53 26.3 24.65 26.3 24.65 30.91 29.32 30.91 29.32 26.3 31.43 26.3 31.43 37.79 29.32 37.79 29.32 32.86 24.65 32.86",fill:"#43bcd6"}),t.jsx("path",{d:"M33.79,37.05l.6-1.67a5.86,5.86,0,0,0,1.39.61,5.59,5.59,0,0,0,1.5.19A2.57,2.57,0,0,0,39,35.66a1.81,1.81,0,0,0,.61-1.46A1.29,1.29,0,0,0,38.94,33a4.55,4.55,0,0,0-2.05-.32H35.74V31h1.1A5.4,5.4,0,0,0,38,30.85a2.1,2.1,0,0,0,.77-.29,1.53,1.53,0,0,0,.51-.54,1.58,1.58,0,0,0,.15-.73,1.14,1.14,0,0,0-.51-1,2.67,2.67,0,0,0-1.5-.34,4.56,4.56,0,0,0-1.51.24,5,5,0,0,0-1.34.73l-.7-1.61a4.92,4.92,0,0,1,1.66-.83,6.91,6.91,0,0,1,2-.31,4.41,4.41,0,0,1,2.81.79,2.71,2.71,0,0,1,1,2.24,2.33,2.33,0,0,1-.54,1.62,3.45,3.45,0,0,1-1.46.93v0a3,3,0,0,1,1.67.81,2.3,2.3,0,0,1,.64,1.7A3.27,3.27,0,0,1,40.48,37a5,5,0,0,1-3.16.91A6.77,6.77,0,0,1,33.79,37.05Z",fill:"#43bcd6"})]}),ds=e=>t.jsxs("svg",{viewBox:"0 0 32 32",width:"32",height:"32",fill:"none",...e,children:[t.jsx("rect",{x:4,y:4,width:24,height:24,rx:6,fill:"#7642F4",stroke:"#7642F4",strokeWidth:2}),t.jsx("text",{x:"16",y:"21",textAnchor:"middle",fontSize:"11",fontWeight:"bold",fill:"#fff",fontFamily:"Arial, sans-serif",children:"GH"})]}),us=e=>t.jsxs("svg",{viewBox:"0 0 64 64",width:"32",height:"32",...e,children:[t.jsx("rect",{x:"8",y:"8",width:"20",height:"20",fill:"#43bcd6",opacity:"0.8"}),t.jsx("rect",{x:"28",y:"8",width:"20",height:"20",fill:"#43bcd6",opacity:"0.6"}),t.jsx("rect",{x:"48",y:"8",width:"8",height:"20",fill:"#43bcd6",opacity:"0.4"}),t.jsx("rect",{x:"8",y:"28",width:"20",height:"20",fill:"#43bcd6",opacity:"0.4"}),t.jsx("rect",{x:"28",y:"28",width:"20",height:"20",fill:"#43bcd6"}),t.jsx("rect",{x:"48",y:"28",width:"8",height:"20",fill:"#43bcd6",opacity:"0.8"}),t.jsx("rect",{x:"8",y:"48",width:"20",height:"8",fill:"#43bcd6",opacity:"0.6"}),t.jsx("rect",{x:"28",y:"48",width:"20",height:"8",fill:"#43bcd6",opacity:"0.4"}),t.jsx("rect",{x:"48",y:"48",width:"8",height:"8",fill:"#43bcd6",opacity:"0.8"}),t.jsx("text",{x:"32",y:"38",textAnchor:"middle",fontSize:"10",fontWeight:"bold",fill:"#43bcd6",fontFamily:"Arial, sans-serif",opacity:"0.9",children:"QK"})]}),ps=e=>t.jsxs("svg",{viewBox:"0 0 64 64",width:"32",height:"32",...e,children:[t.jsx("path",{d:"M14.76,58,15,20.54,50.06,6.75V44Zm4-34.86L18.6,52.38l27.66-11V12.33Z",fill:"#43bcd6"}),t.jsx("path",{d:"M27.21,38.58a7.38,7.38,0,0,1-3.62-.9l.3-2a6.49,6.49,0,0,0,3.3.9c1.49,0,2.18-.59,2.18-1.63,0-2.26-5.71-1.28-5.71-5.3,0-2,1.26-3.54,4.16-3.54a8.38,8.38,0,0,1,3.28.64l-.29,1.9a8.41,8.41,0,0,0-2.88-.54c-1.63,0-2.14.66-2.14,1.42,0,2.19,5.71,1.18,5.71,5.27C31.5,37.16,29.93,38.58,27.21,38.58Z",fill:"#43bcd6"}),t.jsx("path",{d:"M36.17,36.36v0h5.06l0,2H33.32V36.9c3-2.88,5.67-5.09,5.67-7,0-1-.64-1.67-2.19-1.67a5,5,0,0,0-3,1.1l-.53-1.79a6.31,6.31,0,0,1,3.91-1.28c2.66,0,4,1.34,4,3.41C41.21,31.94,39.13,33.89,36.17,36.36Z",fill:"#43bcd6"})]}),fs=e=>t.jsxs("svg",{viewBox:"0 0 32 32",width:"32",height:"32",fill:"none",...e,children:[t.jsx("rect",{x:4,y:4,width:24,height:24,rx:6,fill:"#43bcd6",stroke:"#43bcd6",strokeWidth:2}),t.jsx("text",{x:"16",y:"21",textAnchor:"middle",fontSize:"10",fontWeight:"bold",fill:"#fff",fontFamily:"Arial, sans-serif",children:"GJ"})]}),gs=e=>t.jsxs("svg",{viewBox:"0 0 64 64",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e,children:[t.jsx("circle",{cx:"15",cy:"20",r:"5",fill:"#5DBDFF"}),t.jsx("circle",{cx:"32",cy:"15",r:"4",fill:"#5DBDFF"}),t.jsx("circle",{cx:"48",cy:"25",r:"6",fill:"#5DBDFF"}),t.jsx("circle",{cx:"20",cy:"40",r:"4",fill:"#5DBDFF"}),t.jsx("circle",{cx:"40",cy:"45",r:"5",fill:"#5DBDFF"}),t.jsx("circle",{cx:"52",cy:"50",r:"3",fill:"#5DBDFF"}),t.jsx("circle",{cx:"28",cy:"52",r:"4",fill:"#5DBDFF"}),t.jsx("circle",{cx:"12",cy:"55",r:"3",fill:"#5DBDFF"})]}),hs=e=>t.jsxs("svg",{viewBox:"0 0 64 64",width:"32",height:"32",...e,children:[t.jsx("ellipse",{cx:"32",cy:"60",rx:"18",ry:"4",fill:"#43bcd6",opacity:"0.2"}),t.jsx("rect",{x:"14",y:"16",width:"10",height:"10",rx:"2",fill:"#43bcd6"}),t.jsx("rect",{x:"27",y:"16",width:"10",height:"10",rx:"2",fill:"#43bcd6"}),t.jsx("rect",{x:"40",y:"16",width:"10",height:"10",rx:"2",fill:"#43bcd6"}),t.jsx("rect",{x:"14",y:"29",width:"10",height:"10",rx:"2",fill:"#43bcd6"}),t.jsx("rect",{x:"27",y:"29",width:"10",height:"10",rx:"2",fill:"#43bcd6"}),t.jsx("rect",{x:"40",y:"29",width:"10",height:"10",rx:"2",fill:"#43bcd6"}),t.jsx("rect",{x:"14",y:"42",width:"10",height:"10",rx:"2",fill:"#43bcd6"}),t.jsx("rect",{x:"27",y:"42",width:"10",height:"10",rx:"2",fill:"#43bcd6"}),t.jsx("rect",{x:"40",y:"42",width:"10",height:"10",rx:"2",fill:"#43bcd6"})]}),ms=e=>t.jsxs("svg",{viewBox:"0 0 64 64",width:"32",height:"32",...e,children:[t.jsx("circle",{cx:"20",cy:"20",r:"2",fill:"#43bcd6",opacity:"0.8"}),t.jsx("circle",{cx:"30",cy:"15",r:"2",fill:"#43bcd6",opacity:"0.8"}),t.jsx("circle",{cx:"40",cy:"25",r:"2",fill:"#43bcd6",opacity:"0.8"}),t.jsx("circle",{cx:"25",cy:"35",r:"2",fill:"#43bcd6",opacity:"0.8"}),t.jsx("circle",{cx:"35",cy:"40",r:"2",fill:"#43bcd6",opacity:"0.8"}),t.jsx("circle",{cx:"45",cy:"30",r:"2",fill:"#43bcd6",opacity:"0.8"}),t.jsx("circle",{cx:"15",cy:"30",r:"2",fill:"#43bcd6",opacity:"0.8"}),t.jsx("circle",{cx:"50",cy:"20",r:"2",fill:"#43bcd6",opacity:"0.8"}),t.jsx("circle",{cx:"30",cy:"50",r:"2",fill:"#43bcd6",opacity:"0.8"}),t.jsx("circle",{cx:"40",cy:"45",r:"2",fill:"#43bcd6",opacity:"0.8"})]}),xs=e=>t.jsxs("svg",{viewBox:"0 0 64 64",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e,children:[t.jsx("circle",{cx:"32",cy:"32",r:"24",stroke:"#5DBDFF",strokeWidth:"2",fill:"none",opacity:"0.3"}),t.jsx("path",{d:"M12 40 Q32 15 52 40",stroke:"#5DBDFF",strokeWidth:"3",fill:"none",strokeLinecap:"round"}),t.jsx("circle",{cx:"12",cy:"40",r:"4",fill:"#5DBDFF"}),t.jsx("circle",{cx:"52",cy:"40",r:"4",fill:"#EF4444"}),t.jsx("path",{d:"M30 22 L34 20 L32 24 Z",fill:"#5DBDFF"})]}),ys=e=>t.jsxs("svg",{viewBox:"0 0 64 64",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e,children:[t.jsx("circle",{cx:"32",cy:"32",r:"20",fill:"#5DBDFF",opacity:"0.3"}),t.jsx("ellipse",{cx:"32",cy:"32",rx:"20",ry:"8",stroke:"#5DBDFF",strokeWidth:"1.5",fill:"none"}),t.jsx("ellipse",{cx:"32",cy:"26",rx:"16",ry:"5",stroke:"#5DBDFF",strokeWidth:"1",fill:"none"}),t.jsx("ellipse",{cx:"32",cy:"38",rx:"16",ry:"5",stroke:"#5DBDFF",strokeWidth:"1",fill:"none"}),t.jsx("ellipse",{cx:"32",cy:"32",rx:"8",ry:"20",stroke:"#5DBDFF",strokeWidth:"1.5",fill:"none"}),t.jsx("ellipse",{cx:"26",cy:"32",rx:"5",ry:"16",stroke:"#5DBDFF",strokeWidth:"1",fill:"none"}),t.jsx("ellipse",{cx:"38",cy:"32",rx:"5",ry:"16",stroke:"#5DBDFF",strokeWidth:"1",fill:"none"}),t.jsx("circle",{cx:"32",cy:"32",r:"20",stroke:"#5DBDFF",strokeWidth:"2",fill:"none"})]}),bs=e=>t.jsxs("svg",{viewBox:"0 0 64 64",width:"32",height:"32",...e,children:[t.jsx("polygon",{points:"32,12 44,20 44,36 32,44 20,36 20,20",fill:"#43bcd6",stroke:"#2a8ca5",strokeWidth:"2"}),t.jsx("polygon",{points:"20,20 8,28 8,44 20,52 32,44 32,28",fill:"#b2ebf2",stroke:"#2a8ca5",strokeWidth:"1.5"}),t.jsx("polygon",{points:"44,20 56,28 56,44 44,52 32,44 32,28",fill:"#b2ebf2",stroke:"#2a8ca5",strokeWidth:"1.5"}),t.jsx("circle",{cx:"32",cy:"32",r:"5",fill:"#ffb300",stroke:"#2a8ca5",strokeWidth:"1"})]}),Cs=e=>t.jsxs("svg",{viewBox:"0 0 64 64",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e,children:[t.jsx("path",{d:"M32 8L52 20V44L32 56L12 44V20L32 8Z",fill:"currentColor",fillOpacity:"0.3",stroke:"currentColor",strokeWidth:"2"}),t.jsx("path",{d:"M32 8L52 20L32 32L12 20L32 8Z",fill:"currentColor",fillOpacity:"0.5"}),t.jsx("path",{d:"M32 32L52 20V44L32 56V32Z",fill:"currentColor",fillOpacity:"0.2"}),t.jsx("path",{d:"M32 32V56",stroke:"currentColor",strokeWidth:"2"}),t.jsx("path",{d:"M28 24L32 20L36 24L34 24L34 28L30 28L30 24L28 24Z",fill:"currentColor"})]}),vs=e=>t.jsxs("svg",{viewBox:"0 0 64 64",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e,children:[t.jsx("polygon",{points:"12,42 32,52 52,42 52,28 32,18 12,28",fill:"currentColor",fillOpacity:"0.3"}),t.jsx("polygon",{points:"12,34 32,44 52,34 52,20 32,10 12,20",fill:"currentColor",fillOpacity:"0.7"}),t.jsx("polygon",{points:"12,20 12,34 32,44 32,30",fill:"currentColor",fillOpacity:"0.5"}),t.jsx("polygon",{points:"52,20 52,34 32,44 32,30",fill:"currentColor",fillOpacity:"0.4"}),t.jsx("polygon",{points:"12,34 32,44 52,34 52,20 32,10 12,20",fill:"none",stroke:"currentColor",strokeWidth:"1.5"}),t.jsx("line",{x1:"12",y1:"20",x2:"12",y2:"34",stroke:"currentColor",strokeWidth:"1.5",strokeOpacity:"0.6"}),t.jsx("line",{x1:"32",y1:"30",x2:"32",y2:"44",stroke:"currentColor",strokeWidth:"1.5",strokeOpacity:"0.6"}),t.jsx("line",{x1:"52",y1:"20",x2:"52",y2:"34",stroke:"currentColor",strokeWidth:"1.5",strokeOpacity:"0.6"})]}),ol=[{id:"point",name:"Point",icon:Yi,compatibleWith:["Point","MultiPoint"],category:"point",description:"Display individual points (ScatterplotLayer)"},{id:"scatterplot",name:"Scatterplot",icon:gs,compatibleWith:["Point","MultiPoint"],category:"point",description:"Scatter plot visualization for points"},{id:"pointcloud",name:"Point Cloud",icon:ms,compatibleWith:["Point","MultiPoint"],category:"point",description:"3D point cloud visualization (PointCloudLayer)"},{id:"grid",name:"Grid",icon:Ki,compatibleWith:["Point","MultiPoint"],category:"aggregation",description:"Aggregate points into grid cells (GridLayer)"},{id:"screengrid",name:"Screen Grid",icon:hs,compatibleWith:["Point","MultiPoint"],category:"aggregation",description:"Screen-space grid aggregation (ScreenGridLayer)"},{id:"h3",name:"H3",icon:cs,compatibleWith:["Point","Polygon","MultiPoint"],category:"aggregation",description:"Aggregate into H3 hexagonal bins (H3HexagonLayer)"},{id:"hexbin",name:"Hexbin",icon:Qi,compatibleWith:["Point","MultiPoint"],category:"aggregation",description:"Aggregate into regular hexagons (HexagonLayer)"},{id:"heatmap",name:"Heatmap",icon:rs,compatibleWith:["Point","MultiPoint"],category:"aggregation",description:"Density-based heatmap (HeatmapLayer)"},{id:"cluster",name:"Cluster",icon:ts,compatibleWith:["Point","MultiPoint"],category:"aggregation",description:"Cluster nearby points (Supercluster)"},{id:"h3cluster",name:"H3 Cluster",icon:bs,compatibleWith:["Point","MultiPoint","Polygon"],category:"aggregation",description:"H3 hexagon-based clustering (H3ClusterLayer)"},{id:"line",name:"Line",icon:Xi,compatibleWith:["LineString","MultiLineString"],category:"line",description:"Display line geometries (LineLayer)"},{id:"path",name:"Path",icon:ns,compatibleWith:["LineString","MultiLineString"],category:"line",description:"Path visualization with width (PathLayer)"},{id:"arc",name:"Arc",icon:Zi,compatibleWith:["Point","MultiPoint"],category:"line",description:"Curved connections between points (ArcLayer)"},{id:"greatcircle",name:"Great Circle",icon:xs,compatibleWith:["LineString","MultiLineString"],category:"line",description:"Great circle arcs for flight paths (GreatCircleLayer)"},{id:"animatedtrip",name:"Animated Trip",icon:as,compatibleWith:["LineString","MultiLineString"],category:"line",description:"Animated trip visualization with trails (TripsLayer)"},{id:"polygon",name:"Polygon",icon:es,compatibleWith:["Polygon","MultiPolygon"],category:"polygon",description:"Display polygon geometries (PolygonLayer)"},{id:"solidpolygon",name:"Solid Polygon",icon:vs,compatibleWith:["Polygon","MultiPolygon"],category:"polygon",description:"Filled/extruded polygons without strokes (SolidPolygonLayer)"},{id:"column",name:"Column",icon:is,compatibleWith:["Point","MultiPoint"],category:"advanced",description:"3D column visualization (ColumnLayer)"},{id:"contour",name:"Contour",icon:ss,compatibleWith:["Point","MultiPoint"],category:"advanced",description:"Contour lines from points (ContourLayer)"},{id:"icon",name:"Icon",icon:os,compatibleWith:["Point","MultiPoint"],category:"advanced",description:"Custom icon markers (IconLayer)"},{id:"text",name:"Text",icon:ls,compatibleWith:["Point","MultiPoint"],category:"advanced",description:"Text labels (TextLayer)"},{id:"mesh",name:"3D Mesh",icon:ys,compatibleWith:["Point","MultiPoint","Polygon"],category:"advanced",description:"3D mesh/sphere visualization (SimpleMeshLayer)"},{id:"scenegraph",name:"3D Model",icon:Cs,compatibleWith:["Point","MultiPoint","Polygon"],category:"advanced",description:"3D glTF/GLB models (ScenegraphLayer)"},{id:"geohash",name:"Geohash",icon:ds,compatibleWith:["Point","MultiPoint"],category:"geospatial",description:"Geohash indexing (GeohashLayer)"},{id:"quadkey",name:"Quadkey",icon:us,compatibleWith:["Point","MultiPoint"],category:"geospatial",description:"Quadkey indexing (QuadkeyLayer)"},{id:"s2",name:"S2",icon:ps,compatibleWith:["Point","MultiPoint"],category:"geospatial",description:"Google S2 indexing (S2Layer)"},{id:"geojson",name:"GeoJSON",icon:fs,compatibleWith:["Point","LineString","Polygon","MultiPoint","MultiLineString","MultiPolygon"],category:"point",description:"Universal layer for all geometry types (GeoJsonLayer)"}],ri=({selectedType:e,onTypeSelect:n,compatibleTypes:o=[],showSearch:r=!0})=>{const[i,a]=g.useState(""),l=g.useMemo(()=>{let x=ol;if(o&&o.length>0&&(x=x.filter(d=>!d.compatibleWith||d.compatibleWith.length===0?!0:d.compatibleWith.some(h=>!!(o.includes(h)||h==="LineString"&&o.some(y=>y.includes("Line"))||h==="Point"&&o.some(y=>y.includes("Point"))||h==="Polygon"&&o.some(y=>y.includes("Polygon")))))),i){const d=i.toLowerCase();x=x.filter(h=>h.name.toLowerCase().includes(d)||h.id.toLowerCase().includes(d))}return x},[i,o]);return t.jsxs(s.Stack,{gap:"xs",children:[r&&t.jsx(s.TextInput,{placeholder:"Search",value:i,onChange:x=>a(x.target.value),rightSection:t.jsx(Pt,{size:16,style:{color:"#888"}}),size:"sm",styles:{input:{fontSize:"12px",border:"1px solid #e0e0e0",borderRadius:"4px"}}}),t.jsx(s.SimpleGrid,{cols:3,spacing:"xs",children:l.map(x=>{const d=x.icon,h=e===x.id;return t.jsxs(s.Box,{onClick:()=>n(x.id),style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",padding:"12px 8px",borderRadius:"4px",cursor:"pointer",backgroundColor:h?"#f0f7ff":"transparent",border:h?"2px solid #3b82f6":"2px solid transparent",transition:"all 0.2s ease",position:"relative"},onMouseEnter:y=>{h||(y.currentTarget.style.backgroundColor="#f5f5f5")},onMouseLeave:y=>{h||(y.currentTarget.style.backgroundColor="transparent")},children:[t.jsx(s.Box,{style:{display:"flex",alignItems:"center",justifyContent:"center",marginBottom:"4px"},children:t.jsx(d,{width:32,height:32,style:{opacity:h?1:.8}})}),t.jsx(s.Text,{size:"xs",style:{fontSize:"11px",color:h?"#3b82f6":"#202020",fontWeight:h?500:400,textAlign:"center",fontFamily:"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif"},children:x.name})]},x.id)})}),l.length===0&&t.jsx(s.Box,{style:{padding:"16px",textAlign:"center",color:"#888",fontSize:"12px"},children:"No layer types found"})]})},Rt=11102230246251565e-32,ut=134217729,rl=(3+8*Rt)*Rt;function ko(e,n,o,r,i){let a,l,x,d,h=n[0],y=r[0],c=0,f=0;y>h==y>-h?(a=h,h=n[++c]):(a=y,y=r[++f]);let u=0;if(c<e&&f<o)for(y>h==y>-h?(l=h+a,x=a-(l-h),h=n[++c]):(l=y+a,x=a-(l-y),y=r[++f]),a=l,x!==0&&(i[u++]=x);c<e&&f<o;)y>h==y>-h?(l=a+h,d=l-a,x=a-(l-d)+(h-d),h=n[++c]):(l=a+y,d=l-a,x=a-(l-d)+(y-d),y=r[++f]),a=l,x!==0&&(i[u++]=x);for(;c<e;)l=a+h,d=l-a,x=a-(l-d)+(h-d),h=n[++c],a=l,x!==0&&(i[u++]=x);for(;f<o;)l=a+y,d=l-a,x=a-(l-d)+(y-d),y=r[++f],a=l,x!==0&&(i[u++]=x);return(a!==0||u===0)&&(i[u++]=a),u}function nl(e,n){let o=n[0];for(let r=1;r<e;r++)o+=n[r];return o}function ro(e){return new Float64Array(e)}const il=(3+16*Rt)*Rt,sl=(2+12*Rt)*Rt,al=(9+64*Rt)*Rt*Rt,Ht=ro(4),ni=ro(8),ii=ro(12),si=ro(16),mt=ro(4);function ll(e,n,o,r,i,a,l){let x,d,h,y,c,f,u,m,T,S,p,P,M,R,L,F,C,j;const z=e-i,b=o-i,w=n-a,v=r-a;R=z*v,f=ut*z,u=f-(f-z),m=z-u,f=ut*v,T=f-(f-v),S=v-T,L=m*S-(R-u*T-m*T-u*S),F=w*b,f=ut*w,u=f-(f-w),m=w-u,f=ut*b,T=f-(f-b),S=b-T,C=m*S-(F-u*T-m*T-u*S),p=L-C,c=L-p,Ht[0]=L-(p+c)+(c-C),P=R+p,c=P-R,M=R-(P-c)+(p-c),p=M-F,c=M-p,Ht[1]=M-(p+c)+(c-F),j=P+p,c=j-P,Ht[2]=P-(j-c)+(p-c),Ht[3]=j;let k=nl(4,Ht),I=sl*l;if(k>=I||-k>=I||(c=e-z,x=e-(z+c)+(c-i),c=o-b,h=o-(b+c)+(c-i),c=n-w,d=n-(w+c)+(c-a),c=r-v,y=r-(v+c)+(c-a),x===0&&d===0&&h===0&&y===0)||(I=al*l+rl*Math.abs(k),k+=z*y+v*x-(w*h+b*d),k>=I||-k>=I))return k;R=x*v,f=ut*x,u=f-(f-x),m=x-u,f=ut*v,T=f-(f-v),S=v-T,L=m*S-(R-u*T-m*T-u*S),F=d*b,f=ut*d,u=f-(f-d),m=d-u,f=ut*b,T=f-(f-b),S=b-T,C=m*S-(F-u*T-m*T-u*S),p=L-C,c=L-p,mt[0]=L-(p+c)+(c-C),P=R+p,c=P-R,M=R-(P-c)+(p-c),p=M-F,c=M-p,mt[1]=M-(p+c)+(c-F),j=P+p,c=j-P,mt[2]=P-(j-c)+(p-c),mt[3]=j;const D=ko(4,Ht,4,mt,ni);R=z*y,f=ut*z,u=f-(f-z),m=z-u,f=ut*y,T=f-(f-y),S=y-T,L=m*S-(R-u*T-m*T-u*S),F=w*h,f=ut*w,u=f-(f-w),m=w-u,f=ut*h,T=f-(f-h),S=h-T,C=m*S-(F-u*T-m*T-u*S),p=L-C,c=L-p,mt[0]=L-(p+c)+(c-C),P=R+p,c=P-R,M=R-(P-c)+(p-c),p=M-F,c=M-p,mt[1]=M-(p+c)+(c-F),j=P+p,c=j-P,mt[2]=P-(j-c)+(p-c),mt[3]=j;const B=ko(D,ni,4,mt,ii);R=x*y,f=ut*x,u=f-(f-x),m=x-u,f=ut*y,T=f-(f-y),S=y-T,L=m*S-(R-u*T-m*T-u*S),F=d*h,f=ut*d,u=f-(f-d),m=d-u,f=ut*h,T=f-(f-h),S=h-T,C=m*S-(F-u*T-m*T-u*S),p=L-C,c=L-p,mt[0]=L-(p+c)+(c-C),P=R+p,c=P-R,M=R-(P-c)+(p-c),p=M-F,c=M-p,mt[1]=M-(p+c)+(c-F),j=P+p,c=j-P,mt[2]=P-(j-c)+(p-c),mt[3]=j;const O=ko(B,ii,4,mt,si);return si[O-1]}function cl(e,n,o,r,i,a){const l=(n-a)*(o-i),x=(e-i)*(r-a),d=l-x,h=Math.abs(l+x);return Math.abs(d)>=il*h?d:-ll(e,n,o,r,i,a,h)}function dl(e,n){var o,r,i=0,a,l,x,d,h,y,c,f=e[0],u=e[1],m=n.length;for(o=0;o<m;o++){r=0;var T=n[o],S=T.length-1;if(y=T[0],y[0]!==T[S][0]&&y[1]!==T[S][1])throw new Error("First and last coordinates in a ring must be the same");for(l=y[0]-f,x=y[1]-u,r;r<S;r++){if(c=T[r+1],d=c[0]-f,h=c[1]-u,x===0&&h===0){if(d<=0&&l>=0||l<=0&&d>=0)return 0}else if(h>=0&&x<=0||h<=0&&x>=0){if(a=cl(l,d,x,h,0,0),a===0)return 0;(a>0&&h>0&&x<=0||a<0&&h<=0&&x>0)&&i++}y=c,x=h,l=d}}return i%2!==0}function ul(e){if(!e)throw new Error("coord is required");if(!Array.isArray(e)){if(e.type==="Feature"&&e.geometry!==null&&e.geometry.type==="Point")return[...e.geometry.coordinates];if(e.type==="Point")return[...e.coordinates]}if(Array.isArray(e)&&e.length>=2&&!Array.isArray(e[0])&&!Array.isArray(e[1]))return[...e];throw new Error("coord must be GeoJSON Point or an Array of numbers")}function pl(e){return e.type==="Feature"?e.geometry:e}function Ut(e,n,o={}){if(!e)throw new Error("point is required");if(!n)throw new Error("polygon is required");const r=ul(e),i=pl(n),a=i.type,l=n.bbox;let x=i.coordinates;if(l&&fl(r,l)===!1)return!1;a==="Polygon"&&(x=[x]);let d=!1;for(var h=0;h<x.length;++h){const y=dl(r,x[h]);if(y===0)return!o.ignoreBoundary;y&&(d=!0)}return d}function fl(e,n){return n[0]<=e[0]&&n[1]<=e[1]&&n[2]>=e[0]&&n[3]>=e[1]}var ws=Ut;function Bo(e,n,o={}){const r={type:"Feature"};return(o.id===0||o.id)&&(r.id=o.id),o.bbox&&(r.bbox=o.bbox),r.properties={},r.geometry=e,r}function gl(e,n,o={}){if(!e)throw new Error("coordinates is required");if(!Array.isArray(e))throw new Error("coordinates must be an Array");if(e.length<2)throw new Error("coordinates must be at least 2 numbers long");if(!li(e[0])||!li(e[1]))throw new Error("coordinates must contain numbers");return Bo({type:"Point",coordinates:e},n,o)}function ai(e,n={}){const o={type:"FeatureCollection"};return n.id&&(o.id=n.id),n.bbox&&(o.bbox=n.bbox),o.features=e,o}function li(e){return!isNaN(e)&&e!==null&&!Array.isArray(e)}class js{constructor(n=[],o=hl){if(this.data=n,this.length=this.data.length,this.compare=o,this.length>0)for(let r=(this.length>>1)-1;r>=0;r--)this._down(r)}push(n){this.data.push(n),this.length++,this._up(this.length-1)}pop(){if(this.length===0)return;const n=this.data[0],o=this.data.pop();return this.length--,this.length>0&&(this.data[0]=o,this._down(0)),n}peek(){return this.data[0]}_up(n){const{data:o,compare:r}=this,i=o[n];for(;n>0;){const a=n-1>>1,l=o[a];if(r(i,l)>=0)break;o[n]=l,n=a}o[n]=i}_down(n){const{data:o,compare:r}=this,i=this.length>>1,a=o[n];for(;n<i;){let l=(n<<1)+1,x=o[l];const d=l+1;if(d<this.length&&r(o[d],x)<0&&(l=d,x=o[d]),r(x,a)>=0)break;o[n]=x,n=l}o[n]=a}}function hl(e,n){return e<n?-1:e>n?1:0}function Ss(e,n){return e.p.x>n.p.x?1:e.p.x<n.p.x?-1:e.p.y!==n.p.y?e.p.y>n.p.y?1:-1:1}function ml(e,n){return e.rightSweepEvent.p.x>n.rightSweepEvent.p.x?1:e.rightSweepEvent.p.x<n.rightSweepEvent.p.x?-1:e.rightSweepEvent.p.y!==n.rightSweepEvent.p.y?e.rightSweepEvent.p.y<n.rightSweepEvent.p.y?1:-1:1}let ci=class{constructor(n,o,r,i){this.p={x:n[0],y:n[1]},this.featureId=o,this.ringId=r,this.eventId=i,this.otherEvent=null,this.isLeftEndpoint=null}isSamePoint(n){return this.p.x===n.p.x&&this.p.y===n.p.y}};function xl(e,n){if(e.type==="FeatureCollection"){const o=e.features;for(let r=0;r<o.length;r++)di(o[r],n)}else di(e,n)}let uo=0,po=0,fo=0;function di(e,n){const o=e.type==="Feature"?e.geometry:e;let r=o.coordinates;(o.type==="Polygon"||o.type==="MultiLineString")&&(r=[r]),o.type==="LineString"&&(r=[[r]]);for(let i=0;i<r.length;i++)for(let a=0;a<r[i].length;a++){let l=r[i][a][0],x=null;po=po+1;for(let d=0;d<r[i][a].length-1;d++){x=r[i][a][d+1];const h=new ci(l,uo,po,fo),y=new ci(x,uo,po,fo+1);h.otherEvent=y,y.otherEvent=h,Ss(h,y)>0?(y.isLeftEndpoint=!0,h.isLeftEndpoint=!1):(h.isLeftEndpoint=!0,y.isLeftEndpoint=!1),n.push(h),n.push(y),l=x,fo=fo+1}}uo=uo+1}class yl{constructor(n){this.leftSweepEvent=n,this.rightSweepEvent=n.otherEvent}}function bl(e,n){if(e===null||n===null||e.leftSweepEvent.ringId===n.leftSweepEvent.ringId&&(e.rightSweepEvent.isSamePoint(n.leftSweepEvent)||e.rightSweepEvent.isSamePoint(n.leftSweepEvent)||e.rightSweepEvent.isSamePoint(n.rightSweepEvent)||e.leftSweepEvent.isSamePoint(n.leftSweepEvent)||e.leftSweepEvent.isSamePoint(n.rightSweepEvent)))return!1;const o=e.leftSweepEvent.p.x,r=e.leftSweepEvent.p.y,i=e.rightSweepEvent.p.x,a=e.rightSweepEvent.p.y,l=n.leftSweepEvent.p.x,x=n.leftSweepEvent.p.y,d=n.rightSweepEvent.p.x,h=n.rightSweepEvent.p.y,y=(h-x)*(i-o)-(d-l)*(a-r),c=(d-l)*(r-x)-(h-x)*(o-l),f=(i-o)*(r-x)-(a-r)*(o-l);if(y===0)return!1;const u=c/y,m=f/y;if(u>=0&&u<=1&&m>=0&&m<=1){const T=o+u*(i-o),S=r+u*(a-r);return[T,S]}return!1}function Cl(e,n){n=n||!1;const o=[],r=new js([],ml);for(;e.length;){const i=e.pop();if(i.isLeftEndpoint){const a=new yl(i);for(let l=0;l<r.data.length;l++){const x=r.data[l];if(n&&x.leftSweepEvent.featureId===i.featureId)continue;const d=bl(a,x);d!==!1&&o.push(d)}r.push(a)}else i.isLeftEndpoint===!1&&r.pop()}return o}function vl(e,n){const o=new js([],Ss);return xl(e,o),Cl(o,n)}var wl=vl;function _o(e,n,o={}){const{removeDuplicates:r=!0,ignoreSelfIntersections:i=!0}=o;let a=[];e.type==="FeatureCollection"?a=a.concat(e.features):e.type==="Feature"?a.push(e):(e.type==="LineString"||e.type==="Polygon"||e.type==="MultiLineString"||e.type==="MultiPolygon")&&a.push(Bo(e)),n.type==="FeatureCollection"?a=a.concat(n.features):n.type==="Feature"?a.push(n):(n.type==="LineString"||n.type==="Polygon"||n.type==="MultiLineString"||n.type==="MultiPolygon")&&a.push(Bo(n));const l=wl(ai(a),i);let x=[];if(r){const d={};l.forEach(h=>{const y=h.join(",");d[y]||(d[y]=!0,x.push(h))})}else x=l;return ai(x.map(d=>gl(d)))}function ui(e,n,o={}){const r={type:"Feature"};return(o.id===0||o.id)&&(r.id=o.id),o.bbox&&(r.bbox=o.bbox),r.properties=n||{},r.geometry=e,r}function jl(e,n){var o,r,i,a,l,x,d,h,y,c,f=0,u=e.type==="FeatureCollection",m=e.type==="Feature",T=u?e.features.length:1;for(o=0;o<T;o++){for(x=u?e.features[o].geometry:m?e.geometry:e,h=u?e.features[o].properties:m?e.properties:{},y=u?e.features[o].bbox:m?e.bbox:void 0,c=u?e.features[o].id:m?e.id:void 0,d=x?x.type==="GeometryCollection":!1,l=d?x.geometries.length:1,i=0;i<l;i++){if(a=d?x.geometries[i]:x,a===null){if(n(null,f,h,y,c)===!1)return!1;continue}switch(a.type){case"Point":case"LineString":case"MultiPoint":case"Polygon":case"MultiLineString":case"MultiPolygon":{if(n(a,f,h,y,c)===!1)return!1;break}case"GeometryCollection":{for(r=0;r<a.geometries.length;r++)if(n(a.geometries[r],f,h,y,c)===!1)return!1;break}default:throw new Error("Unknown Geometry Type")}}f++}}function pi(e,n){jl(e,function(o,r,i,a,l){var x=o===null?null:o.type;switch(x){case null:case"Point":case"LineString":case"Polygon":return n(ui(o,i,{bbox:a,id:l}),r,0)===!1?!1:void 0}var d;switch(x){case"MultiPoint":d="Point";break;case"MultiLineString":d="LineString";break;case"MultiPolygon":d="Polygon";break}for(var h=0;h<o.coordinates.length;h++){var y=o.coordinates[h],c={type:d,coordinates:y};if(n(ui(c,i),r,h)===!1)return!1}})}function ks(e,n,o={}){const r={type:"Feature"};return(o.id===0||o.id)&&(r.id=o.id),o.bbox&&(r.bbox=o.bbox),r.properties=n||{},r.geometry=e,r}function Sl(e,n,o={}){if(e.length<2)throw new Error("coordinates must be an array of two or more positions");return ks({type:"LineString",coordinates:e},n,o)}function kl(e,n={}){const o={type:"FeatureCollection"};return n.id&&(o.id=n.id),n.bbox&&(o.bbox=n.bbox),o.features=e,o}function Ll(e,n,o={}){return ks({type:"MultiLineString",coordinates:e},n,o)}function Uo(e){return e.type==="Feature"?e.geometry:e}function No(e,n={}){const o=Uo(e);switch(!n.properties&&e.type==="Feature"&&(n.properties=e.properties),o.type){case"Polygon":return Tl(o,n);case"MultiPolygon":return Pl(o,n);default:throw new Error("invalid poly")}}function Tl(e,n={}){const r=Uo(e).coordinates,i=n.properties?n.properties:e.type==="Feature"?e.properties:{};return Ls(r,i)}function Pl(e,n={}){const r=Uo(e).coordinates,i=n.properties?n.properties:e.type==="Feature"?e.properties:{},a=[];return r.forEach(l=>{a.push(Ls(l,i))}),kl(a)}function Ls(e,n){return e.length>1?Ll(e,n):Sl(e[0],n)}function Ml(e,n,{ignoreSelfIntersections:o=!0}={ignoreSelfIntersections:!0}){let r=!0;return pi(e,i=>{pi(n,a=>{if(r===!1)return!1;r=Fl(i.geometry,a.geometry,o)})}),r}function Fl(e,n,o){switch(e.type){case"Point":switch(n.type){case"Point":return!Rl(e.coordinates,n.coordinates);case"LineString":return!fi(n,e);case"Polygon":return!Ut(e,n)}break;case"LineString":switch(n.type){case"Point":return!fi(e,n);case"LineString":return!Il(e,n,o);case"Polygon":return!gi(n,e,o)}break;case"Polygon":switch(n.type){case"Point":return!Ut(n,e);case"LineString":return!gi(e,n,o);case"Polygon":return!zl(n,e,o)}}return!1}function fi(e,n){for(let o=0;o<e.coordinates.length-1;o++)if(El(e.coordinates[o],e.coordinates[o+1],n.coordinates))return!0;return!1}function Il(e,n,o){return _o(e,n,{ignoreSelfIntersections:o}).features.length>0}function gi(e,n,o){for(const i of n.coordinates)if(Ut(i,e))return!0;return _o(n,No(e),{ignoreSelfIntersections:o}).features.length>0}function zl(e,n,o){for(const i of e.coordinates[0])if(Ut(i,n))return!0;for(const i of n.coordinates[0])if(Ut(i,e))return!0;return _o(No(e),No(n),{ignoreSelfIntersections:o}).features.length>0}function El(e,n,o){const r=o[0]-e[0],i=o[1]-e[1],a=n[0]-e[0],l=n[1]-e[1];return r*l-i*a!==0?!1:Math.abs(a)>=Math.abs(l)?a>0?e[0]<=o[0]&&o[0]<=n[0]:n[0]<=o[0]&&o[0]<=e[0]:l>0?e[1]<=o[1]&&o[1]<=n[1]:n[1]<=o[1]&&o[1]<=e[1]}function Rl(e,n){return e[0]===n[0]&&e[1]===n[1]}function hi(e,n,o={}){const r={type:"Feature"};return(o.id===0||o.id)&&(r.id=o.id),o.bbox&&(r.bbox=o.bbox),r.properties=n||{},r.geometry=e,r}function Dl(e,n){var o,r,i,a,l,x,d,h,y,c,f=0,u=e.type==="FeatureCollection",m=e.type==="Feature",T=u?e.features.length:1;for(o=0;o<T;o++){for(x=u?e.features[o].geometry:m?e.geometry:e,h=u?e.features[o].properties:m?e.properties:{},y=u?e.features[o].bbox:m?e.bbox:void 0,c=u?e.features[o].id:m?e.id:void 0,d=x?x.type==="GeometryCollection":!1,l=d?x.geometries.length:1,i=0;i<l;i++){if(a=d?x.geometries[i]:x,a===null){if(n(null,f,h,y,c)===!1)return!1;continue}switch(a.type){case"Point":case"LineString":case"MultiPoint":case"Polygon":case"MultiLineString":case"MultiPolygon":{if(n(a,f,h,y,c)===!1)return!1;break}case"GeometryCollection":{for(r=0;r<a.geometries.length;r++)if(n(a.geometries[r],f,h,y,c)===!1)return!1;break}default:throw new Error("Unknown Geometry Type")}}f++}}function mi(e,n){Dl(e,function(o,r,i,a,l){var x=o===null?null:o.type;switch(x){case null:case"Point":case"LineString":case"Polygon":return n(hi(o,i,{bbox:a,id:l}),r,0)===!1?!1:void 0}var d;switch(x){case"MultiPoint":d="Point";break;case"MultiLineString":d="LineString";break;case"MultiPolygon":d="Polygon";break}for(var h=0;h<o.coordinates.length;h++){var y=o.coordinates[h],c={type:d,coordinates:y};if(n(hi(c,i),r,h)===!1)return!1}})}function Al(e,n,{ignoreSelfIntersections:o=!0}={}){let r=!1;return mi(e,i=>{mi(n,a=>{if(r===!0)return!0;r=!Ml(i.geometry,a.geometry,{ignoreSelfIntersections:o})})}),r}var Ts=Al;const Bl=Ni.create()((e,n)=>({widgets:[],selectedWidgetType:null,setSelectedWidgetType:o=>e({selectedWidgetType:o}),addWidget:o=>{const r=`widget-${Date.now()}-${Math.random().toString(36).substr(2,9)}`,i={id:r,mode:"global",crossFiltering:!0,collapsible:!1,autoCollapse:!1,operation:"COUNT",...o};return e(a=>({widgets:[...a.widgets,i]})),r},updateWidget:(o,r)=>e(i=>({widgets:i.widgets.map(a=>a.id===o?{...a,...r}:a)})),removeWidget:o=>e(r=>({widgets:r.widgets.filter(i=>i.id!==o)})),getWidgetsByDataset:o=>n().widgets.filter(r=>r.datasetId===o),getWidget:o=>n().widgets.find(r=>r.id===o),clearWidgetsByDataset:o=>e(r=>({widgets:r.widgets.filter(i=>i.datasetId!==o)})),resetAllWidgets:()=>e({widgets:[],selectedWidgetType:null})})),pt=Ui(Bl),Nl=()=>{const e=()=>null,n=g.useCallback(()=>{},[]),o=g.useCallback(()=>[],[]);return{DrawIcons:e,clearDraw:n,getFeatures:o,wkt:"",setWkt:r=>{},startDrawing:()=>{}}},xi={point:Yi,scatterplot:gs,pointcloud:ms,arc:Zi,greatcircle:xs,line:Xi,path:ns,grid:Ki,screengrid:hs,hexbin:Qi,polygon:es,solidpolygon:vs,cluster:ts,icon:os,heatmap:rs,column:is,contour:ss,animatedtrip:as,text:ls,h3:cs,h3cluster:bs,geohash:ds,quadkey:us,s2:ps,geojson:fs,mesh:ys,scenegraph:Cs},jt=[{id:"ylorrd",name:"Yellow-Orange-Red",colors:["#ffffcc","#ffeda0","#fed976","#feb24c","#fd8d3c","#fc4e2a","#e31a1c","#bd0026","#800026"]},{id:"ylorbr",name:"Yellow-Orange-Brown",colors:["#ffffe5","#fff7bc","#fee391","#fec44f","#fe9929","#ec7014","#cc4c02","#993404","#662506"]},{id:"ylgnbu",name:"Yellow-Green-Blue",colors:["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"]},{id:"ylgn",name:"Yellow-Green",colors:["#ffffe5","#f7fcb9","#d9f0a3","#addd8e","#78c679","#41ab5d","#238443","#006837","#004529"]},{id:"reds",name:"Reds",colors:["#fff5f0","#fee0d2","#fcbba1","#fc9272","#fb6a4a","#ef3b2c","#cb181d","#a50f15","#67000d"]},{id:"rdpu",name:"Red-Purple",colors:["#fff7f3","#fde0dd","#fcc5c0","#fa9fb5","#f768a1","#dd3497","#ae017e","#7a0177","#49006a"]},{id:"purples",name:"Purples",colors:["#fcfbfd","#efedf5","#dadaeb","#bcbddc","#9e9ac8","#807dba","#6a51a3","#54278f","#3f007d"]},{id:"blues",name:"Blues",colors:["#f7fbff","#deebf7","#c6dbef","#9ecae1","#6baed6","#4292c6","#2171b5","#08519c","#08306b"]},{id:"greens",name:"Greens",colors:["#f7fcf5","#e5f5e0","#c7e9c0","#a1d99b","#74c476","#41ab5d","#238b45","#006d2c","#00441b"]},{id:"oranges",name:"Oranges",colors:["#fff5eb","#fee6ce","#fdd0a2","#fdae6b","#fd8d3c","#f16913","#d94801","#a63603","#7f2704"]},{id:"greys",name:"Greys",colors:["#ffffff","#f0f0f0","#d9d9d9","#bdbdbd","#969696","#737373","#525252","#252525","#000000"]},{id:"rdylbu",name:"Red-Yellow-Blue",colors:["#d73027","#f46d43","#fdae61","#fee090","#ffffbf","#e0f3f8","#abd9e9","#74add1","#4575b4","#313695"]},{id:"rdylgn",name:"Red-Yellow-Green",colors:["#d73027","#f46d43","#fdae61","#fee08b","#ffffbf","#e6f598","#abdda4","#66bd63","#1a9850","#006837"]},{id:"rdgy",name:"Red-Grey",colors:["#67001f","#b2182b","#d6604d","#f4a582","#fddbc7","#ffffff","#e0e0e0","#bababa","#878787","#4d4d4d","#1a1a1a"]},{id:"rdbu",name:"Red-Blue",colors:["#67001f","#b2182b","#d6604d","#f4a582","#fddbc7","#d1e5f0","#92c5de","#4393c3","#2166ac","#053061"]},{id:"puor",name:"Purple-Orange",colors:["#7f3b08","#b35806","#e08214","#fdb863","#fee0b6","#f7f7f7","#d8daeb","#b2abd2","#8073ac","#542788","#2d004b"]},{id:"brbg",name:"Brown-Blue-Green",colors:["#543005","#8c510a","#bf812d","#dfc27d","#f6e8c3","#f5f5f5","#c7eae5","#80cdc1","#35978f","#01665e","#003c30"]},{id:"prgn",name:"Purple-Green",colors:["#40004b","#762a83","#9970ab","#c2a5cf","#e7d4e8","#f7f7f7","#d9f0d3","#a6dba0","#5aae61","#1b7837","#00441b"]},{id:"piyg",name:"Pink-Yellow-Green",colors:["#8e0152","#c51b7d","#de77ae","#f1b6da","#fde0ef","#f7f7f7","#e6f5d0","#b8e186","#7fbc41","#4d9221","#276419"]},{id:"spectral",name:"Spectral",colors:["#9e0142","#d53e4f","#f46d43","#fdae61","#fee08b","#ffffbf","#e6f598","#abdda4","#66c2a5","#3288bd","#5e4fa2"]},{id:"rdbu2",name:"Red-Blue 2",colors:["#b2182b","#d6604d","#f4a582","#fddbc7","#f7f7f7","#d1e5f0","#92c5de","#4393c3","#2166ac"]},{id:"viridis",name:"Viridis",colors:["#440154","#482777","#3f4a8a","#31678e","#26838f","#1f9d8a","#2db27d","#4ac16d","#6fcd57","#9ed93a","#cae11f","#fde725"]},{id:"plasma",name:"Plasma",colors:["#0d0887","#46039f","#7201a8","#9c179e","#bd3786","#d8576b","#ed7953","#fb9f3a","#fdca26","#f0f921"]},{id:"inferno",name:"Inferno",colors:["#000004","#1b0c42","#4a0c6b","#781c6d","#a52c60","#cf4446","#ed6925","#fb9a06","#f7d13d","#fcffa4"]},{id:"magma",name:"Magma",colors:["#000004","#1c1044","#3b0f70","#5c1a88","#7d2482","#9e2f7c","#c03a76","#e25463","#f97c5d","#feae78","#fee5a0","#fcfdbf"]},{id:"cividis",name:"Cividis",colors:["#00204d","#003870","#1e4d72","#3d6174","#5d7376","#7d8578","#9d977a","#bda97c","#ddbb7e","#fdcd80","#fddf82","#fef184"]},{id:"set1",name:"Set1",colors:["#e41a1c","#377eb8","#4daf4a","#984ea3","#ff7f00","#ffff33","#a65628","#f781bf","#999999"]},{id:"set2",name:"Set2",colors:["#66c2a5","#fc8d62","#8da0cb","#e78ac3","#a6d854","#ffd92f","#e5c494","#b3b3b3"]},{id:"set3",name:"Set3",colors:["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5","#d9d9d9","#bc80bd","#ccebc5","#ffed6f"]},{id:"pastel1",name:"Pastel1",colors:["#fbb4ae","#b3cde3","#ccebc5","#decbe4","#fed9a6","#ffffcc","#e5d8bd","#fddaec","#f2f2f2"]},{id:"pastel2",name:"Pastel2",colors:["#b3e2cd","#fdcdac","#cbd5e8","#f4cae4","#e6f5c9","#fff2ae","#f1e2cc","#cccccc"]},{id:"dark2",name:"Dark2",colors:["#1b9e77","#d95f02","#7570b3","#e7298a","#66a61e","#e6ab02","#a6761d","#666666"]},{id:"accent",name:"Accent",colors:["#7fc97f","#beaed4","#fdc086","#ffff99","#386cb0","#f0027f","#bf5b17","#666666"]},{id:"paired",name:"Paired",colors:["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c","#fdbf6f","#ff7f00","#cab2d6","#6a3d9a","#ffff99","#b15928"]},{id:"set1_qual",name:"Set1 Qualitative",colors:["#e41a1c","#377eb8","#4daf4a","#984ea3","#ff7f00","#ffff33","#a65628","#f781bf"]}],Ol=({dataset:e,visualizationType:n,onVisualizationTypeChange:o,compatibleTypes:r,isExpanded:i,onToggleExpanded:a,onColorConfigChange:l,onStyleConfigChange:x})=>{var vt,kt,wt,re,Ae,Ne,se,Ge;const[d,h]=g.useState(e.color),[y,c]=g.useState("#000000"),[f,u]=g.useState(.8),[m,T]=g.useState(1),[S,p]=g.useState(5),[P,M]=g.useState(1),[R,L]=g.useState("marker"),[F,C]=g.useState("solid"),[j,z]=g.useState(""),[b,w]=g.useState(""),[v,k]=g.useState(""),[I,D]=g.useState(!0),[B,O]=g.useState(1),[N,$]=g.useState(""),[_,U]=g.useState(""),[H,q]=g.useState(!1),[ae,xe]=g.useState(!1),[ie,Me]=g.useState(!1),we=g.useRef(!1),[me,Ie]=g.useState(""),[be,je]=g.useState(8),[ue,Xe]=g.useState(!1),[Ve,Qe]=g.useState(!1),[He,xt]=g.useState(!1),[Le,Je]=g.useState(["#4C0033","#76003A","#A1064A","#BC3659","#D25A6A","#E57C7C","#F49F8E","#FFC300"]),[St,bt]=g.useState(null),[Ct,at]=g.useState({}),[A,ee]=g.useState(!1),{DrawIcons:oe,clearDraw:te,getFeatures:le}=Nl(),[Fe,he]=g.useState(!1),[G,fe]=g.useState(null),ne=g.useRef(null),pe=de.use.map(),Ee=de.use.setUploadedDatasets(),ke=de.use.uploadedDatasets();pt.use.widgets();const{layerConfigs:V}=oo(),W=V[e.id],X=g.useRef(null);g.useEffect(()=>{X.current!==e.id&&W!=null&&W.colorConfig&&(W.colorConfig.colorField&&W.colorConfig.colorField!==b&&w(W.colorConfig.colorField),W.colorConfig.heightField&&W.colorConfig.heightField!==v&&k(W.colorConfig.heightField),W.colorConfig.colorMapping&&Object.keys(W.colorConfig.colorMapping).length>0&&at(W.colorConfig.colorMapping),X.current=e.id)},[e.id]);const K=g.useRef(null);g.useEffect(()=>{var E,Y;if(K.current!==e.id&&(K.current=null),K.current!==e.id){if(W!=null&&W.styleConfig&&((E=W.styleConfig)==null?void 0:E.elevationScale)!==void 0){const Q=W.styleConfig.elevationScale;O(Q),K.current=e.id}else if(["grid","hexbin","column","geohash","quadkey","s2","polygon","solidpolygon"].includes(n)){const Q=(Y=W==null?void 0:W.colorConfig)!=null&&Y.heightField?.1:1;O(Q),K.current=e.id}}},[e.id,n,W==null?void 0:W.styleConfig,(vt=W==null?void 0:W.colorConfig)==null?void 0:vt.heightField]);const ge=g.useRef(null),Re=g.useRef(null);g.useEffect(()=>{var E;if(Re.current!==e.id&&((E=W==null?void 0:W.styleConfig)==null?void 0:E.pointRadius)!==void 0){const Y=W.styleConfig.pointRadius;p(n==="icon"?Math.max(5,Math.min(Y,50)):Y),Re.current=e.id;return}ge.current!==n&&(ge.current=n,n==="hexbin"?p(5):n==="heatmap"?(p(50),M(1)):n==="contour"?p(30):n==="pointcloud"?p(10):n==="mesh"?p(200):n==="scenegraph"?p(500):n==="screengrid"?p(20):n==="icon"?p(15):(n==="point"||n==="scatterplot"||n==="cluster"||n==="geojson")&&p(5))},[n,e.id,(kt=W==null?void 0:W.styleConfig)==null?void 0:kt.pointRadius]),g.useMemo(()=>{var Y;if(!((Y=e.geojson)!=null&&Y.features))return[];const E=new Set;return e.geojson.features.slice(0,10).forEach(Q=>{Q.properties&&Object.keys(Q.properties).forEach(J=>{E.add(J)})}),Array.from(E).sort()},[e.geojson]);const ye=g.useMemo(()=>{var Q;if(!((Q=e.geojson)!=null&&Q.features)||!Array.isArray(e.geojson.features))return[];const E=new Map;return e.geojson.features.forEach(J=>{J&&J.properties&&typeof J.properties=="object"&&Object.keys(J.properties).forEach(Z=>{if(Z&&!E.has(Z)){const De=J.properties[Z];let Ce="string";De==null?Ce="string":typeof De=="number"?Ce=Number.isInteger(De)?"int":"float":typeof De=="boolean"?Ce="bool":typeof De=="string"&&(Ce="string"),E.set(Z,{type:Ce,name:String(Z)})}})}),Array.from(E.values()).sort((J,Z)=>!J.name||!Z.name?0:J.name.localeCompare(Z.name))},[e.geojson]),Se=g.useMemo(()=>{if(!N)return ye;const E=N.toLowerCase();return ye.filter(Y=>Y.name.toLowerCase().includes(E))},[ye,N]),$e=g.useMemo(()=>{if(!_)return ye;const E=_.toLowerCase();return ye.filter(Y=>Y.name.toLowerCase().includes(E))},[ye,_]);g.useEffect(()=>{if(!e.geojson)return;const E=ao(e.id);E&&!ne.current?(ne.current=JSON.parse(JSON.stringify(E)),G||fe(JSON.parse(JSON.stringify(E)))):!E&&!ne.current&&(ne.current=JSON.parse(JSON.stringify(e.geojson)),G||fe(JSON.parse(JSON.stringify(e.geojson))))},[e.id,e.geojson,G]);const Te=g.useCallback(()=>{var it;const Y=ao(e.id)||ne.current||G||e.geojson;if(!Y||!Y.features||Y.features.length===0)return;const Q=le();if(!Q||!((it=Q.features)!=null&&it.length))return;const J=Q.features.filter(We=>We.geometry&&We.geometry.type==="Polygon");if(!J.length)return;if(!ne.current&&!G){const We=ao(e.id);We?(ne.current=JSON.parse(JSON.stringify(We)),fe(JSON.parse(JSON.stringify(We)))):(ne.current=JSON.parse(JSON.stringify(e.geojson)),fe(JSON.parse(JSON.stringify(e.geojson))))}const Z=Y.features.filter(We=>{if(!We.geometry)return!1;if(We.geometry.type==="Point"){const ct=We.geometry.coordinates;if(!Array.isArray(ct)||ct.length!==2)return!1;const dt=et.point(ct,We.properties);return J.some(ft=>{if(!ft.geometry||ft.geometry.type!=="Polygon")return!1;const Ft=et.polygon(ft.geometry.coordinates,ft.properties);return ws(dt,Ft)})}return We.geometry.type==="LineString"||We.geometry.type==="MultiLineString"||We.geometry.type==="Polygon"||We.geometry.type==="MultiPolygon"?J.some(ct=>Ts(We,ct)):!1}),De={...Y,features:Z},Ce=ke,Ye=Ce.map(We=>We.id===e.id?{...We,geojson:De}:We);Ee(Ye);const Ze=Ce.find(We=>We.id===e.id);if(pe&&(Ze!=null&&Ze.sourceId)){const We=pe.getSource(Ze.sourceId);We&&We.type==="geojson"&&We.setData(De)}he(!0)},[G,ne,e.geojson,e.id,le,ke,Ee,pe]),_e=()=>{const E=ao(e.id)||ne.current||G;if(!E)return;const Y=ke,Q=Y.map(Z=>Z.id===e.id?{...Z,geojson:E}:Z);Ee(Q);const J=Y.find(Z=>Z.id===e.id);if(pe&&(J!=null&&J.sourceId)){const Z=pe.getSource(J.sourceId);Z&&Z.type==="geojson"&&Z.setData(E)}te(),he(!1),fe(null),ne.current=null};g.useEffect(()=>{if(!pe)return;const E=()=>{var Q;const Y=le();(Q=Y==null?void 0:Y.features)!=null&&Q.some(J=>{var Z,De,Ce,Ye,Ze;return((Z=J.geometry)==null?void 0:Z.type)==="Polygon"&&(((De=J.properties)==null?void 0:De.drawCompleted)===!0||!((Ce=J.properties)!=null&&Ce.isCirclePreview)&&!((Ye=J.properties)!=null&&Ye.isRectanglePreview)&&!((Ze=J.properties)!=null&&Ze.isFreehandPreview))})&&Te()};return pe.on("draw.create",E),pe.on("draw.update",E),()=>{pe.off("draw.create",E),pe.off("draw.update",E)}},[pe,le,Te]);const qe=g.useMemo(()=>{var Y;if(!b||!((Y=e.geojson)!=null&&Y.features))return[];const E=new Set;return e.geojson.features.forEach(Q=>{if(Q.properties&&Q.properties[b]!==void 0&&Q.properties[b]!==null){const J=Q.properties[b];E.add(String(J))}}),Array.from(E).sort((Q,J)=>{const Z=Number(Q),De=Number(J),Ce=!isNaN(Z)&&Q.trim()!=="",Ye=!isNaN(De)&&J.trim()!=="";return Ce&&Ye?Z-De:Ce?-1:Ye?1:Q.localeCompare(J)})},[b,e.geojson]),Be=g.useMemo(()=>{var Q;if(!((Q=e.geojson)!=null&&Q.features)||!Array.isArray(e.geojson.features))return["Point","Polygon","LineString","MultiPoint","MultiPolygon","MultiLineString"];const E=new Set;e.geojson.features.forEach(J=>{if(J&&J.geometry&&J.geometry.type){const Z=J.geometry.type;if(E.add(Z),Z.startsWith("Multi")){const De=Z.replace("Multi","");E.add(De)}}});const Y=Array.from(E);return Y.length>0?Y:["Point","Polygon","LineString","MultiPoint","MultiPolygon","MultiLineString"]},[e.geojson]),Oe=r.find(E=>E.id===n),Pe=g.useMemo(()=>{var E;return b&&((E=ye.find(Y=>Y.name===b))==null?void 0:E.type)||null},[b,ye]);g.useEffect(()=>{const E="dropdown-zindex-fix";if(document.getElementById(E))return;const Y=document.createElement("style");return Y.id=E,Y.textContent=`
|
|
17
|
+
/* ColorInput popover z-index fix */
|
|
18
|
+
.mantine-ColorInput-popover,
|
|
19
|
+
.mantine-Popover-dropdown[data-mantine-color-swatch],
|
|
20
|
+
[data-mantine-color-swatch],
|
|
21
|
+
.mantine-ColorInput-popover .mantine-Popover-dropdown {
|
|
22
|
+
z-index: 10000 !important;
|
|
23
|
+
}
|
|
24
|
+
.mantine-Popover-dropdown[data-mantine-color-swatch] {
|
|
25
|
+
z-index: 10000 !important;
|
|
26
|
+
}
|
|
27
|
+
/* Ensure popover portal container has high z-index */
|
|
28
|
+
[data-portal] .mantine-ColorInput-popover,
|
|
29
|
+
[data-portal] .mantine-Popover-dropdown[data-mantine-color-swatch] {
|
|
30
|
+
z-index: 10000 !important;
|
|
31
|
+
}
|
|
32
|
+
/* Menu dropdown z-index fix */
|
|
33
|
+
.mantine-Menu-dropdown,
|
|
34
|
+
[data-portal] .mantine-Menu-dropdown {
|
|
35
|
+
z-index: 10000 !important;
|
|
36
|
+
}
|
|
37
|
+
/* Ensure Menu dropdowns in portals have high z-index */
|
|
38
|
+
[data-portal] .mantine-Menu-dropdown {
|
|
39
|
+
z-index: 10000 !important;
|
|
40
|
+
}
|
|
41
|
+
`,document.head.appendChild(Y),()=>{const Q=document.getElementById(E);Q&&Q.remove()}},[]);const Ke=g.useMemo(()=>{if(!b||qe.length===0)return{};let E=[];if(He&&Le.length>0)E=[...Le];else if(me){const Z=jt.find(De=>De.id===me);if(!Z)return{};E=[...Z.colors]}else return{};ue&&(E=E.reverse());const Y=[],Q=Math.max(1,Math.floor(E.length/be));for(let Z=0;Z<be;Z++){const De=Math.min(Z*Q,E.length-1);Y.push(E[De])}const J={};return qe.forEach((Z,De)=>{const Ce=Math.min(Math.floor(De/qe.length*Y.length),Y.length-1);J[Z]=Y[Ce]}),J},[b,me,He,Le,be,ue,qe]),rt=g.useRef(""),ot=g.useRef({});g.useEffect(()=>{const E=JSON.stringify(Ke);E!==rt.current&&(Object.keys(Ke).length>0?(at(Ke),ot.current=Ke):Object.keys(ot.current).length>0&&(at({}),ot.current={}),rt.current=E)},[Ke]);const nt=g.useRef({});g.useEffect(()=>{if(!l)return;const E={colorField:b||void 0,colorMapping:Object.keys(Ct).length>0?Ct:void 0,heightField:v||void 0},Y=nt.current;(Y.colorField!==E.colorField||Y.heightField!==E.heightField||JSON.stringify(Y.colorMapping)!==JSON.stringify(E.colorMapping))&&(l(e.id,E),nt.current=E)},[b,Ct,v,e.id,l]);const lt=g.useRef({});return g.useEffect(()=>{if(!x)return;if(n==="h3"){const Ce={fillColor:d,opacity:f,elevationScale:B},Ye=lt.current;(Ye.fillColor!==Ce.fillColor||Ye.opacity!==Ce.opacity||Ye.elevationScale!==Ce.elevationScale)&&(x(e.id,Ce),lt.current=Ce);return}if(n==="grid"){const Ce={fillColor:d,opacity:f,elevationScale:B},Ye=lt.current;(Ye.fillColor!==Ce.fillColor||Ye.opacity!==Ce.opacity||Ye.elevationScale!==Ce.elevationScale)&&(x(e.id,Ce),lt.current=Ce);return}const E=["hexbin","column","geohash","quadkey","s2","mesh","polygon","solidpolygon"].includes(n),Y=["point","scatterplot","icon","cluster","pointcloud","mesh"].includes(n),Q=["hexbin","heatmap","contour","screengrid"].includes(n),J={fillColor:d,strokeColor:y,opacity:f,strokeWidth:m,pointRadius:n==="geojson"||Y||Q?S:void 0,dashPattern:n==="path"||n==="line"?F:void 0,elevationScale:E?B:void 0,intensity:n==="heatmap"?P:void 0,iconType:n==="icon"?R:void 0},Z=lt.current;(Z.fillColor!==J.fillColor||Z.strokeColor!==J.strokeColor||Z.opacity!==J.opacity||Z.strokeWidth!==J.strokeWidth||Z.pointRadius!==J.pointRadius||Z.dashPattern!==J.dashPattern||Z.elevationScale!==J.elevationScale||Z.intensity!==J.intensity||Z.iconType!==J.iconType)&&(x(e.id,J),lt.current=J)},[d,y,f,m,S,B,F,P,R,e.id,n,x]),t.jsxs(s.Box,{style:{borderLeft:`4px solid ${e.color}`,backgroundColor:"#fafafa",borderRadius:4,padding:"12px",marginTop:"8px"},children:[t.jsxs(s.Group,{justify:"space-between",align:"center",mb:i?"md":0,children:[t.jsx(s.Group,{gap:"xs",style:{flex:1,cursor:"pointer"},onClick:()=>a(e.id),children:t.jsxs(s.Stack,{gap:0,style:{flex:1},children:[t.jsx(s.Text,{size:"sm",fw:500,style:{color:"#202020",fontSize:"13px",fontFamily:"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",fontWeight:400,lineHeight:"1.4"},children:e.name.toLowerCase().replace(".geojson","").replace(".json","")}),t.jsx(s.Text,{size:"xs",c:"dimmed",style:{color:"#666",fontSize:"11px",fontFamily:"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",fontWeight:400,lineHeight:"1.4",marginTop:"2px"},children:(Oe==null?void 0:Oe.name)||n})]})}),t.jsx(s.Group,{gap:"xs",onClick:E=>E.stopPropagation(),children:t.jsx(s.ActionIcon,{variant:"subtle",size:"sm",onClick:()=>a(e.id),style:{transform:i?"rotate(90deg)":"rotate(0deg)",transition:"transform 0.2s ease",color:"#000"},children:t.jsx(wo,{size:18})})})]}),t.jsx(s.Collapse,{in:i,children:t.jsxs(s.Box,{mt:"md",pt:"md",style:{borderTop:"1px solid #e0e0e0"},children:[n==="h3"||n==="grid"||n==="hexbin"||n==="column"||n==="geohash"||n==="quadkey"||n==="s2"?t.jsx(s.Stack,{gap:"md",children:t.jsxs(s.Stack,{gap:"xs",mb:"md",children:[t.jsxs(s.Group,{justify:"space-between",align:"center",children:[t.jsxs(s.Group,{gap:"xs",children:[t.jsx(s.Box,{style:{width:3,height:20,backgroundColor:"#f1871c",borderRadius:2}}),t.jsx(s.Text,{size:"sm",fw:500,style:{color:"#202020",fontSize:"13px",fontFamily:"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",fontWeight:500,letterSpacing:"0.1px"},children:"Basic"})]}),t.jsx(s.ActionIcon,{variant:"subtle",size:"sm",style:{color:"#888",cursor:"pointer"},onClick:E=>{E.stopPropagation()},children:t.jsx(ti,{size:18})})]}),t.jsxs(s.Menu,{shadow:"md",width:320,position:"bottom-start",withinPortal:!0,opened:ie,onChange:E=>{we.current||Me(E),we.current=!1},closeOnItemClick:!1,zIndex:1e4,offset:4,styles:{dropdown:{zIndex:1e4,padding:0}},children:[t.jsx(s.Menu.Target,{children:t.jsxs(s.UnstyledButton,{onClick:E=>{E.stopPropagation(),we.current=!0,Me(Y=>!Y)},style:{width:"100%",padding:"12px",border:"1px solid #e0e0e0",borderRadius:"4px",backgroundColor:"white",display:"flex",alignItems:"center",justifyContent:"space-between",cursor:"pointer"},children:[t.jsxs(s.Group,{gap:"xs",children:[(()=>{const E=xi[n];return E?t.jsx(E,{width:20,height:20}):null})(),t.jsx(s.Text,{size:"sm",style:{color:"#202020",fontSize:"13px"},children:(Oe==null?void 0:Oe.name)||n})]}),t.jsx(Gt,{size:16,style:{color:"#888",transform:ie?"rotate(180deg)":"rotate(0deg)",transition:"transform 0.2s ease"}})]})}),t.jsx(s.Menu.Dropdown,{style:{maxHeight:"400px",padding:0,zIndex:1e4},children:t.jsx(s.Box,{style:{padding:"12px",maxHeight:"400px",overflowY:"auto"},children:t.jsx(ri,{selectedType:n,onTypeSelect:E=>{o(e.id,E),Me(!1)},compatibleTypes:Be.length>0?Be:["Point","Polygon","LineString","MultiPoint","MultiPolygon","MultiLineString"],showSearch:!0})})})]}),t.jsxs(s.Box,{mt:"md",children:[t.jsxs(s.Group,{gap:4,mb:8,children:[t.jsx(s.Text,{size:"xs",c:"dimmed",style:{fontSize:"11px"},children:"Color Based On"}),t.jsx(co,{size:14,style:{color:"#888",cursor:"help"}})]}),t.jsx(s.Box,{style:{position:"relative"},children:t.jsxs(s.Group,{gap:"xs",align:"center",children:[t.jsx(s.Box,{style:{flex:1},children:t.jsxs(s.Menu,{shadow:"md",width:280,position:"bottom-start",withinPortal:!0,opened:H,onChange:E=>{q(E)},closeOnItemClick:!0,zIndex:1e4,offset:4,styles:{dropdown:{zIndex:1e4}},children:[t.jsx(s.Menu.Target,{children:t.jsx(s.UnstyledButton,{onClick:E=>{E.stopPropagation(),q(!H)},style:{width:"100%",padding:"8px 12px",border:"1px solid #e0e0e0",borderRadius:"4px",backgroundColor:"white",fontSize:"12px",textAlign:"left",display:"flex",alignItems:"center",justifyContent:"space-between",cursor:"pointer",position:"relative"},children:b?t.jsxs(s.Group,{gap:"xs",wrap:"nowrap",style:{flex:1},children:[t.jsx(s.Badge,{size:"xs",style:{backgroundColor:Pe==="string"?"#06b6d4":Pe==="int"||Pe==="float"?"#f59e0b":"#6b7280",color:"white",fontSize:"10px",padding:"2px 6px",textTransform:"uppercase"},children:Pe}),t.jsx(s.Text,{size:"sm",style:{fontSize:"12px",color:"#202020",flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:b}),t.jsx(Pt,{size:14,style:{color:"#888"}})]}):t.jsxs(t.Fragment,{children:[t.jsx(s.Text,{size:"sm",style:{fontSize:"12px",color:"#888"},children:"Select a field"}),t.jsx(Pt,{size:14,style:{color:"#888"}})]})})}),t.jsxs(s.Menu.Dropdown,{style:{maxHeight:"300px",padding:0,zIndex:1e4},onClick:E=>E.stopPropagation(),children:[t.jsx(s.Box,{style:{padding:"8px",borderBottom:"1px solid #e0e0e0"},children:t.jsx(s.TextInput,{placeholder:"Search",value:N,onChange:E=>$(E.currentTarget.value),size:"sm",rightSection:t.jsx(Pt,{size:14,style:{color:"#888"}}),styles:{input:{fontSize:"12px",border:"1px solid #e0e0e0",borderRadius:"4px"}},onClick:E=>E.stopPropagation(),onKeyDown:E=>E.stopPropagation()})}),t.jsx(s.Box,{style:{maxHeight:"250px",overflowY:"auto",overflowX:"hidden"},children:Se.length===0?t.jsx(s.Menu.Item,{disabled:!0,children:t.jsx(s.Text,{size:"xs",c:"dimmed",style:{textAlign:"center",width:"100%"},children:"No fields found"})}):Se.map(E=>{const Y=E.type==="string"?"#06b6d4":E.type==="int"||E.type==="float"?"#f59e0b":"#6b7280";return t.jsx(s.Menu.Item,{onClick:()=>{w(E.name),$(""),q(!1),!me&&jt.length>0&&Ie(jt[0].id)},style:{padding:"8px 12px",fontSize:"12px"},children:t.jsxs(s.Group,{justify:"space-between",gap:"xs",wrap:"nowrap",children:[t.jsx(s.Text,{size:"sm",style:{fontSize:"12px",flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:E.name||"Unnamed field"}),t.jsx(s.Badge,{size:"xs",style:{backgroundColor:Y,color:"white",fontSize:"10px",padding:"2px 6px",flexShrink:0},children:E.type})]})},E.name)})})]})]})}),b&&t.jsx(s.ActionIcon,{size:"sm",variant:"subtle",onClick:()=>{w(""),Ie(""),at({}),q(!1)},style:{color:"#888",flexShrink:0},children:t.jsx(Zt,{size:16})})]})}),b&&Pe&&t.jsxs(s.Box,{mt:"md",children:[t.jsx(s.UnstyledButton,{onClick:()=>ee(!A),style:{width:"100%",padding:"4px 8px",border:"1px solid #e0e0e0",borderRadius:"4px",backgroundColor:"white",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"space-between"},children:t.jsxs(s.Group,{gap:"xs",style:{flex:1},children:[me||He?t.jsxs(t.Fragment,{children:[t.jsx(s.Box,{style:{height:"16px",flex:1,borderRadius:"2px",display:"flex",overflow:"hidden",border:"1px solid #e0e0e0"},children:(()=>{let E=[];if(He&&Le.length>0)E=[...Le];else if(me){const J=jt.find(Z=>Z.id===me);if(!J)return null;E=[...J.colors]}else return null;ue&&(E=E.reverse());const Y=Math.max(1,Math.floor(E.length/be)),Q=[];for(let J=0;J<be;J++){const Z=Math.min(J*Y,E.length-1);Q.push(E[Z])}return Q.map((J,Z)=>t.jsx(s.Box,{style:{flex:1,backgroundColor:J,height:"100%"}},Z))})()}),t.jsx(s.Text,{size:"xs",style:{fontSize:"11px",color:"#666",minWidth:"60px",textAlign:"right"},children:He?"Custom":((wt=jt.find(E=>E.id===me))==null?void 0:wt.name)||"Palette"})]}):t.jsx(s.Text,{size:"xs",style:{fontSize:"11px",color:"#888"},children:"Click to select color palette"}),t.jsx(Gt,{size:16,style:{color:"#888",transform:A?"rotate(180deg)":"rotate(0deg)",transition:"transform 0.2s ease"}})]})}),t.jsx(s.Collapse,{in:A,children:t.jsxs(s.Box,{mt:"md",children:[(me||He)&&t.jsx(s.Box,{mb:"md",style:{height:"24px",borderRadius:"4px",overflow:"hidden",border:"2px solid white",boxShadow:"0 2px 4px rgba(0,0,0,0.1)"},children:t.jsx(s.Box,{style:{height:"100%",display:"flex",width:"100%"},children:(()=>{let E=[];if(He&&Le.length>0)E=[...Le];else if(me){const J=jt.find(Z=>Z.id===me);if(!J)return null;E=[...J.colors]}else return null;ue&&(E=E.reverse());const Y=Math.max(1,Math.floor(E.length/be)),Q=[];for(let J=0;J<be;J++){const Z=Math.min(J*Y,E.length-1);Q.push(E[Z])}return Q.map((J,Z)=>t.jsx(s.Box,{style:{flex:1,backgroundColor:J,height:"100%"}},Z))})()})}),t.jsxs(s.Stack,{gap:"xs",mb:"md",children:[t.jsxs(s.Group,{justify:"space-between",align:"center",children:[t.jsx(s.Text,{size:"xs",c:"dimmed",style:{fontSize:"11px"},children:"Type"}),t.jsx(s.Button,{size:"xs",variant:"light",style:{fontSize:"11px",height:"24px"},children:"All"})]}),t.jsxs(s.Group,{justify:"space-between",align:"center",children:[t.jsx(s.Text,{size:"xs",c:"dimmed",style:{fontSize:"11px"},children:"Steps"}),t.jsx(s.NumberInput,{value:be,onChange:E=>je(Number(E)||8),min:2,max:20,size:"xs",style:{width:"60px"}})]}),t.jsxs(s.Group,{justify:"space-between",align:"center",children:[t.jsx(s.Text,{size:"xs",c:"dimmed",style:{fontSize:"11px"},children:"Reversed"}),t.jsx(s.Switch,{checked:ue,onChange:E=>Xe(E.currentTarget.checked),size:"sm"})]}),t.jsxs(s.Group,{justify:"space-between",align:"center",children:[t.jsx(s.Text,{size:"xs",c:"dimmed",style:{fontSize:"11px"},children:"Colorblind Safe"}),t.jsx(s.Switch,{checked:Ve,onChange:E=>Qe(E.currentTarget.checked),size:"sm"})]}),t.jsxs(s.Group,{justify:"space-between",align:"center",children:[t.jsx(s.Text,{size:"xs",c:"dimmed",style:{fontSize:"11px"},children:"Custom Palette"}),t.jsx(s.Switch,{checked:He,onChange:E=>{xt(E.currentTarget.checked),E.currentTarget.checked&&!A&&ee(!0)},size:"sm"})]})]}),He&&t.jsxs(s.Box,{mb:"md",children:[t.jsx(s.Text,{size:"xs",c:"dimmed",style:{fontSize:"11px",marginBottom:"8px"},children:"Custom Palette"}),t.jsx(s.Box,{mb:"md",style:{height:"24px",borderRadius:"4px",overflow:"hidden",border:"2px solid white",boxShadow:"0 2px 4px rgba(0,0,0,0.1)",display:"flex",width:"100%"},children:Le.map((E,Y)=>t.jsx(s.Box,{style:{flex:1,backgroundColor:E,height:"100%"}},Y))}),t.jsx(s.Box,{style:{maxHeight:"200px",overflowY:"auto"},children:t.jsx(s.Stack,{gap:"xs",children:Le.map((E,Y)=>t.jsxs(s.Group,{gap:"xs",align:"center",children:[t.jsx(s.Box,{style:{width:"24px",height:"24px",backgroundColor:E,border:"1px solid #e0e0e0",borderRadius:"4px",flexShrink:0}}),t.jsx(s.TextInput,{value:E,onChange:Q=>{const J=[...Le];J[Y]=Q.target.value,Je(J)},size:"xs",style:{flex:1,fontSize:"11px"},styles:{input:{fontSize:"11px",fontFamily:"monospace"}}}),t.jsx(s.ColorInput,{value:E,onChange:Q=>{const J=[...Le];J[Y]=Q,Je(J)},format:"hex",size:"xs",swatches:[],popoverProps:{withinPortal:!0,zIndex:1e4},styles:{input:{width:"40px",height:"24px",padding:"0"}}}),t.jsx(s.ActionIcon,{size:"sm",variant:"subtle",onClick:()=>{const Q=[...Le];Q.splice(Y+1,0,E),Je(Q)},style:{color:"#666"},children:t.jsx(lo,{size:14})}),t.jsx(s.ActionIcon,{size:"sm",variant:"subtle",onClick:()=>{if(Le.length>2){const Q=Le.filter((J,Z)=>Z!==Y);Je(Q)}},style:{color:"#d32f2f"},disabled:Le.length<=2,children:t.jsx(oi,{size:14})})]},Y))})}),t.jsx(s.Button,{size:"xs",variant:"light",leftSection:t.jsx(lo,{size:14}),onClick:()=>{Je([...Le,"#000000"])},style:{marginTop:"8px",width:"100%"},children:"Add Color"}),t.jsx(s.Button,{size:"xs",variant:"filled",onClick:()=>{xt(!0),Ie("")},style:{marginTop:"8px",width:"100%",backgroundColor:"#f1871c",color:"white"},children:"Confirm"})]}),!He&&t.jsx(s.Box,{style:{maxHeight:"300px",overflowY:"auto"},children:t.jsx(s.Box,{style:{display:"grid",gridTemplateColumns:"repeat(1, 1fr)",gap:"4px"},children:jt.map(E=>{const Y=me===E.id,Q=E.colors.slice(0,Math.min(E.colors.length,12));return t.jsx(s.UnstyledButton,{onClick:()=>{Ie(E.id),A||ee(!0)},style:{padding:"2px",border:Y?"2px solid white":"1px solid #e0e0e0",borderRadius:"4px",cursor:"pointer",backgroundColor:Y?"#f0f0f0":"white"},children:t.jsx(s.Box,{style:{height:"16px",borderRadius:"2px",display:"flex",overflow:"hidden"},children:Q.map((J,Z)=>t.jsx(s.Box,{style:{flex:1,backgroundColor:J,height:"100%"}},Z))})},E.id)})})})]})})]}),t.jsxs(s.Box,{mt:"md",children:[t.jsxs(s.Group,{gap:4,mb:8,children:[t.jsx(s.Text,{size:"xs",c:"dimmed",style:{fontSize:"11px"},children:"Height Based On"}),t.jsx(co,{size:14,style:{color:"#888",cursor:"help"}})]}),t.jsx(s.Box,{style:{position:"relative"},children:t.jsxs(s.Group,{gap:"xs",align:"center",children:[t.jsx(s.Box,{style:{flex:1},children:t.jsxs(s.Menu,{shadow:"md",width:280,position:"bottom-start",withinPortal:!0,opened:ae,onChange:E=>{xe(E)},closeOnItemClick:!0,zIndex:1e4,offset:4,styles:{dropdown:{zIndex:1e4}},children:[t.jsx(s.Menu.Target,{children:t.jsx(s.UnstyledButton,{onClick:E=>{E.stopPropagation(),xe(!ae)},style:{width:"100%",padding:"8px 12px",border:"1px solid #e0e0e0",borderRadius:"4px",backgroundColor:"white",fontSize:"12px",textAlign:"left",display:"flex",alignItems:"center",justifyContent:"space-between",cursor:"pointer",position:"relative"},children:v?t.jsxs(s.Group,{gap:"xs",wrap:"nowrap",style:{flex:1},children:[t.jsx(s.Badge,{size:"xs",style:{backgroundColor:((re=ye.find(E=>E.name===v))==null?void 0:re.type)==="string"?"#06b6d4":((Ae=ye.find(E=>E.name===v))==null?void 0:Ae.type)==="int"||((Ne=ye.find(E=>E.name===v))==null?void 0:Ne.type)==="float"?"#f59e0b":"#6b7280",color:"white",fontSize:"10px",padding:"2px 6px",textTransform:"uppercase"},children:((se=ye.find(E=>E.name===v))==null?void 0:se.type)||"string"}),t.jsx(s.Text,{size:"sm",style:{fontSize:"12px",color:"#202020",flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:v}),t.jsx(Pt,{size:14,style:{color:"#888"}})]}):t.jsxs(t.Fragment,{children:[t.jsx(s.Text,{size:"sm",style:{fontSize:"12px",color:"#888"},children:"Select a field"}),t.jsx(Pt,{size:14,style:{color:"#888"}})]})})}),t.jsxs(s.Menu.Dropdown,{style:{maxHeight:"300px",padding:0,zIndex:1e4},onClick:E=>E.stopPropagation(),children:[t.jsx(s.Box,{style:{padding:"8px",borderBottom:"1px solid #e0e0e0"},children:t.jsx(s.TextInput,{placeholder:"Search",value:_,onChange:E=>U(E.currentTarget.value),size:"sm",rightSection:t.jsx(Pt,{size:14,style:{color:"#888"}}),styles:{input:{fontSize:"12px",border:"1px solid #e0e0e0",borderRadius:"4px"}},onClick:E=>E.stopPropagation(),onKeyDown:E=>E.stopPropagation()})}),t.jsx(s.Box,{style:{maxHeight:"250px",overflowY:"auto",overflowX:"hidden"},children:$e.length===0?t.jsx(s.Menu.Item,{disabled:!0,children:t.jsx(s.Text,{size:"xs",c:"dimmed",style:{textAlign:"center",width:"100%"},children:"No fields found"})}):$e.map(E=>{const Y=E.type==="string"?"#06b6d4":E.type==="int"||E.type==="float"?"#f59e0b":"#6b7280";return t.jsx(s.Menu.Item,{onClick:()=>{k(E.name),U(""),xe(!1)},style:{padding:"8px 12px",fontSize:"12px"},children:t.jsxs(s.Group,{justify:"space-between",gap:"xs",wrap:"nowrap",children:[t.jsx(s.Text,{size:"sm",style:{fontSize:"12px",flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:E.name||"Unnamed field"}),t.jsx(s.Badge,{size:"xs",style:{backgroundColor:Y,color:"white",fontSize:"10px",padding:"2px 6px",flexShrink:0},children:E.type})]})},E.name)})})]})]})}),v&&t.jsx(s.ActionIcon,{size:"sm",variant:"subtle",onClick:()=>{k(""),xe(!1)},style:{color:"#888",flexShrink:0},children:t.jsx(Zt,{size:16})})]})})]}),(n==="grid"||n==="hexbin"||n==="column"||n==="geohash"||n==="quadkey"||n==="s2")&&t.jsx(s.Box,{mt:"md",children:t.jsxs(s.Stack,{gap:4,children:[t.jsxs(s.Group,{justify:"space-between",children:[t.jsx(s.Text,{size:"xs",c:"dimmed",children:"Height Scale"}),t.jsx(s.Text,{size:"xs",c:"dimmed",children:B.toFixed(2)})]}),t.jsx(s.Slider,{value:B,onChange:O,min:0,max:10,step:.01,marks:[{value:0,label:"0"},{value:1,label:"1"},{value:5,label:"5"},{value:10,label:"10"}]}),t.jsx(s.Text,{size:"xs",c:"dimmed",style:{fontSize:"10px",marginTop:"-8px"},children:"Adjust the height multiplier for grid columns. Higher values increase column height."})]})}),t.jsx(s.Box,{mt:"md",children:t.jsxs(s.Stack,{gap:4,children:[t.jsxs(s.Group,{justify:"space-between",children:[t.jsx(s.Text,{size:"xs",c:"dimmed",children:"Opacity"}),t.jsxs(s.Text,{size:"xs",c:"dimmed",children:[Math.round(f*100),"%"]})]}),t.jsx(s.Slider,{value:f,onChange:u,min:0,max:1,step:.01,marks:[{value:0,label:"0%"},{value:.5,label:"50%"},{value:1,label:"100%"}]})]})})]})]})}):t.jsxs(s.Stack,{gap:"md",children:[t.jsxs(s.Stack,{gap:"xs",children:[t.jsxs(s.Group,{justify:"space-between",align:"center",children:[t.jsxs(s.Group,{gap:"xs",children:[t.jsx(s.Box,{style:{width:3,height:20,backgroundColor:"#f1871c",borderRadius:2}}),t.jsx(s.Text,{size:"sm",fw:500,style:{color:"#202020",fontSize:"13px",fontFamily:"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",fontWeight:500,letterSpacing:"0.1px"},children:"Basic"})]}),t.jsx(s.ActionIcon,{variant:"subtle",size:"sm",style:{color:"#888",cursor:"pointer"},onClick:E=>{E.stopPropagation()},children:t.jsx(ti,{size:18})})]}),t.jsxs(s.Menu,{shadow:"md",width:320,position:"bottom-start",withinPortal:!0,opened:ie,onChange:E=>{we.current||Me(E),we.current=!1},closeOnItemClick:!1,zIndex:1e4,offset:4,styles:{dropdown:{zIndex:1e4,padding:0}},children:[t.jsx(s.Menu.Target,{children:t.jsxs(s.UnstyledButton,{onClick:E=>{E.stopPropagation(),we.current=!0,Me(Y=>!Y)},style:{width:"100%",padding:"12px",border:"1px solid #e0e0e0",borderRadius:"4px",backgroundColor:"white",display:"flex",alignItems:"center",justifyContent:"space-between",cursor:"pointer"},children:[t.jsxs(s.Group,{gap:"xs",children:[(()=>{const E=xi[n];return E?t.jsx(E,{width:20,height:20}):null})(),t.jsx(s.Text,{size:"sm",style:{color:"#202020",fontSize:"13px"},children:(Oe==null?void 0:Oe.name)||n})]}),t.jsx(Gt,{size:16,style:{color:"#888",transform:ie?"rotate(180deg)":"rotate(0deg)",transition:"transform 0.2s ease"}})]})}),t.jsx(s.Menu.Dropdown,{style:{maxHeight:"400px",padding:0,zIndex:1e4},children:t.jsx(s.Box,{style:{padding:"12px",maxHeight:"400px",overflowY:"auto"},children:t.jsx(ri,{selectedType:n,onTypeSelect:E=>{o(e.id,E),Me(!1)},compatibleTypes:Be.length>0?Be:["Point","Polygon","LineString","MultiPoint","MultiPolygon","MultiLineString"],showSearch:!0})})})]}),t.jsxs(s.Box,{mt:"md",children:[t.jsxs(s.Group,{gap:4,mb:8,children:[t.jsx(s.Text,{size:"xs",c:"dimmed",style:{fontSize:"11px"},children:"Color Based On"}),t.jsx(co,{size:14,style:{color:"#888",cursor:"help"}})]}),t.jsx(s.Box,{style:{position:"relative"},children:t.jsxs(s.Group,{gap:"xs",align:"center",children:[t.jsx(s.Box,{style:{flex:1},children:t.jsxs(s.Menu,{shadow:"md",width:280,position:"bottom-start",withinPortal:!0,opened:H,onChange:E=>{q(E)},closeOnItemClick:!0,zIndex:1e4,offset:4,styles:{dropdown:{zIndex:1e4}},children:[t.jsx(s.Menu.Target,{children:t.jsx(s.UnstyledButton,{onClick:E=>{E.stopPropagation(),q(!H)},style:{width:"100%",padding:"8px 12px",border:"1px solid #e0e0e0",borderRadius:"4px",backgroundColor:"white",fontSize:"12px",textAlign:"left",display:"flex",alignItems:"center",justifyContent:"space-between",cursor:"pointer",position:"relative"},children:b?t.jsxs(s.Group,{gap:"xs",wrap:"nowrap",style:{flex:1},children:[t.jsx(s.Badge,{size:"xs",style:{backgroundColor:Pe==="string"?"#06b6d4":Pe==="int"||Pe==="float"?"#f59e0b":"#6b7280",color:"white",fontSize:"10px",padding:"2px 6px",textTransform:"uppercase"},children:Pe}),t.jsx(s.Text,{size:"sm",style:{fontSize:"12px",color:"#202020",flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:b}),t.jsx(Pt,{size:14,style:{color:"#888"}})]}):t.jsxs(t.Fragment,{children:[t.jsx(s.Text,{size:"sm",style:{fontSize:"12px",color:"#888"},children:"Select a field"}),t.jsx(Pt,{size:14,style:{color:"#888"}})]})})}),t.jsxs(s.Menu.Dropdown,{style:{maxHeight:"300px",padding:0,zIndex:1e4},onClick:E=>E.stopPropagation(),children:[t.jsx(s.Box,{style:{padding:"8px",borderBottom:"1px solid #e0e0e0"},children:t.jsx(s.TextInput,{placeholder:"Search",value:N,onChange:E=>$(E.currentTarget.value),size:"sm",rightSection:t.jsx(Pt,{size:14,style:{color:"#888"}}),styles:{input:{fontSize:"12px",border:"1px solid #e0e0e0",borderRadius:"4px"}},onClick:E=>E.stopPropagation(),onKeyDown:E=>E.stopPropagation()})}),t.jsx(s.Box,{style:{maxHeight:"250px",overflowY:"auto",overflowX:"hidden"},children:Se.length===0?t.jsx(s.Menu.Item,{disabled:!0,children:t.jsx(s.Text,{size:"xs",c:"dimmed",style:{textAlign:"center",width:"100%"},children:"No fields found"})}):Se.map(E=>{const Y=E.type==="string"?"#06b6d4":E.type==="int"||E.type==="float"?"#f59e0b":"#6b7280";return t.jsx(s.Menu.Item,{onClick:()=>{w(E.name),$(""),q(!1),!me&&jt.length>0&&Ie(jt[0].id)},style:{padding:"8px 12px",fontSize:"12px"},children:t.jsxs(s.Group,{justify:"space-between",gap:"xs",wrap:"nowrap",children:[t.jsx(s.Text,{size:"sm",style:{fontSize:"12px",flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:E.name||"Unnamed field"}),t.jsx(s.Badge,{size:"xs",style:{backgroundColor:Y,color:"white",fontSize:"10px",padding:"2px 6px",flexShrink:0},children:E.type})]})},E.name)})})]})]})}),b&&t.jsx(s.ActionIcon,{size:"sm",variant:"subtle",onClick:()=>{w(""),Ie(""),at({}),q(!1)},style:{color:"#888",flexShrink:0},children:t.jsx(Zt,{size:16})})]})}),b&&Pe&&t.jsxs(s.Box,{mt:"md",children:[t.jsx(s.UnstyledButton,{onClick:()=>ee(!A),style:{width:"100%",padding:"4px 8px",border:"1px solid #e0e0e0",borderRadius:"4px",backgroundColor:"white",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"space-between"},children:t.jsxs(s.Group,{gap:"xs",style:{flex:1},children:[me||He?t.jsxs(t.Fragment,{children:[t.jsx(s.Box,{style:{height:"16px",flex:1,borderRadius:"2px",display:"flex",overflow:"hidden",border:"1px solid #e0e0e0"},children:(()=>{let E=[];if(He&&Le.length>0)E=[...Le];else if(me){const J=jt.find(Z=>Z.id===me);if(!J)return null;E=[...J.colors]}else return null;ue&&(E=E.reverse());const Y=Math.max(1,Math.floor(E.length/be)),Q=[];for(let J=0;J<be;J++){const Z=Math.min(J*Y,E.length-1);Q.push(E[Z])}return Q.map((J,Z)=>t.jsx(s.Box,{style:{flex:1,backgroundColor:J,height:"100%"}},Z))})()}),t.jsx(s.Text,{size:"xs",style:{fontSize:"11px",color:"#666",minWidth:"60px",textAlign:"right"},children:He?"Custom":((Ge=jt.find(E=>E.id===me))==null?void 0:Ge.name)||"Palette"})]}):t.jsx(s.Text,{size:"xs",style:{fontSize:"11px",color:"#888"},children:"Click to select color palette"}),t.jsx(Gt,{size:16,style:{color:"#888",transform:A?"rotate(180deg)":"rotate(0deg)",transition:"transform 0.2s ease"}})]})}),t.jsx(s.Collapse,{in:A,children:t.jsxs(s.Box,{mt:"md",children:[(me||He)&&t.jsx(s.Box,{mb:"md",style:{height:"24px",borderRadius:"4px",overflow:"hidden",border:"2px solid white",boxShadow:"0 2px 4px rgba(0,0,0,0.1)"},children:t.jsx(s.Box,{style:{height:"100%",display:"flex",width:"100%"},children:(()=>{let E=[];if(He&&Le.length>0)E=[...Le];else if(me){const J=jt.find(Z=>Z.id===me);if(!J)return null;E=[...J.colors]}else return null;ue&&(E=E.reverse());const Y=Math.max(1,Math.floor(E.length/be)),Q=[];for(let J=0;J<be;J++){const Z=Math.min(J*Y,E.length-1);Q.push(E[Z])}return Q.map((J,Z)=>t.jsx(s.Box,{style:{flex:1,backgroundColor:J,height:"100%"}},Z))})()})}),t.jsxs(s.Stack,{gap:"xs",mb:"md",children:[t.jsxs(s.Group,{justify:"space-between",align:"center",children:[t.jsx(s.Text,{size:"xs",c:"dimmed",style:{fontSize:"11px"},children:"Type"}),t.jsx(s.Button,{size:"xs",variant:"light",style:{fontSize:"11px",height:"24px"},children:"All"})]}),t.jsxs(s.Group,{justify:"space-between",align:"center",children:[t.jsx(s.Text,{size:"xs",c:"dimmed",style:{fontSize:"11px"},children:"Steps"}),t.jsx(s.NumberInput,{value:be,onChange:E=>je(Number(E)||8),min:2,max:20,size:"xs",style:{width:"60px"}})]}),t.jsxs(s.Group,{justify:"space-between",align:"center",children:[t.jsx(s.Text,{size:"xs",c:"dimmed",style:{fontSize:"11px"},children:"Reversed"}),t.jsx(s.Switch,{checked:ue,onChange:E=>Xe(E.currentTarget.checked),size:"sm"})]}),t.jsxs(s.Group,{justify:"space-between",align:"center",children:[t.jsx(s.Text,{size:"xs",c:"dimmed",style:{fontSize:"11px"},children:"Colorblind Safe"}),t.jsx(s.Switch,{checked:Ve,onChange:E=>Qe(E.currentTarget.checked),size:"sm"})]}),t.jsxs(s.Group,{justify:"space-between",align:"center",children:[t.jsx(s.Text,{size:"xs",c:"dimmed",style:{fontSize:"11px"},children:"Custom Palette"}),t.jsx(s.Switch,{checked:He,onChange:E=>{xt(E.currentTarget.checked),E.currentTarget.checked&&!A&&ee(!0)},size:"sm"})]})]}),He&&t.jsxs(s.Box,{mb:"md",children:[t.jsx(s.Text,{size:"xs",c:"dimmed",style:{fontSize:"11px",marginBottom:"8px"},children:"Custom Palette"}),t.jsx(s.Box,{mb:"md",style:{height:"24px",borderRadius:"4px",overflow:"hidden",border:"2px solid white",boxShadow:"0 2px 4px rgba(0,0,0,0.1)",display:"flex",width:"100%"},children:Le.map((E,Y)=>t.jsx(s.Box,{style:{flex:1,backgroundColor:E,height:"100%"}},Y))}),t.jsx(s.Box,{style:{maxHeight:"200px",overflowY:"auto"},children:t.jsx(s.Stack,{gap:"xs",children:Le.map((E,Y)=>t.jsxs(s.Group,{gap:"xs",align:"center",children:[t.jsx(s.Box,{style:{width:"24px",height:"24px",backgroundColor:E,border:"1px solid #e0e0e0",borderRadius:"4px",flexShrink:0}}),t.jsx(s.TextInput,{value:E,onChange:Q=>{const J=[...Le];J[Y]=Q.target.value,Je(J)},size:"xs",style:{flex:1,fontSize:"11px"},styles:{input:{fontSize:"11px",fontFamily:"monospace"}}}),t.jsx(s.ColorInput,{value:E,onChange:Q=>{const J=[...Le];J[Y]=Q,Je(J)},format:"hex",size:"xs",swatches:[],popoverProps:{withinPortal:!0,zIndex:1e4},styles:{input:{width:"40px",height:"24px",padding:"0"}}}),t.jsx(s.ActionIcon,{size:"sm",variant:"subtle",onClick:()=>{const Q=[...Le];Q.splice(Y+1,0,E),Je(Q)},style:{color:"#666"},children:t.jsx(lo,{size:14})}),t.jsx(s.ActionIcon,{size:"sm",variant:"subtle",onClick:()=>{if(Le.length>2){const Q=Le.filter((J,Z)=>Z!==Y);Je(Q)}},style:{color:"#d32f2f"},disabled:Le.length<=2,children:t.jsx(oi,{size:14})})]},Y))})}),t.jsx(s.Button,{size:"xs",variant:"light",leftSection:t.jsx(lo,{size:14}),onClick:()=>{Je([...Le,"#000000"])},style:{marginTop:"8px",width:"100%"},children:"Add Color"}),t.jsx(s.Button,{size:"xs",variant:"filled",onClick:()=>{xt(!0),Ie("")},style:{marginTop:"8px",width:"100%",backgroundColor:"#f1871c",color:"white"},children:"Confirm"})]}),!He&&t.jsx(s.Box,{style:{maxHeight:"300px",overflowY:"auto"},children:t.jsx(s.Box,{style:{display:"grid",gridTemplateColumns:"repeat(1, 1fr)",gap:"4px"},children:jt.map(E=>{const Y=me===E.id,Q=E.colors.slice(0,Math.min(E.colors.length,12));return t.jsx(s.UnstyledButton,{onClick:()=>{Ie(E.id),A||ee(!0)},style:{padding:"2px",border:Y?"2px solid white":"1px solid #e0e0e0",borderRadius:"4px",cursor:"pointer",backgroundColor:Y?"#f0f0f0":"white"},children:t.jsx(s.Box,{style:{height:"16px",borderRadius:"2px",display:"flex",overflow:"hidden"},children:Q.map((J,Z)=>t.jsx(s.Box,{style:{flex:1,backgroundColor:J,height:"100%"}},Z))})},E.id)})})})]})})]})]})]}),(n==="polygon"||n==="solidpolygon")&&t.jsxs(s.Box,{mt:"md",children:[t.jsxs(s.Group,{gap:4,mb:8,children:[t.jsx(s.Text,{size:"xs",c:"dimmed",style:{fontSize:"11px"},children:"Height Based On"}),t.jsx(co,{size:14,style:{color:"#888",cursor:"help"},title:"Select a numeric field to determine polygon extrusion height"})]}),t.jsx(s.Box,{style:{position:"relative"},children:t.jsxs(s.Group,{gap:"xs",align:"center",children:[t.jsx(s.Box,{style:{flex:1},children:t.jsxs(s.Menu,{shadow:"md",width:280,position:"bottom-start",withinPortal:!0,opened:ae,onChange:E=>{xe(E)},closeOnItemClick:!0,zIndex:1e4,offset:4,styles:{dropdown:{zIndex:1e4}},children:[t.jsx(s.Menu.Target,{children:t.jsxs(s.UnstyledButton,{onClick:E=>{E.stopPropagation(),xe(!ae)},style:{width:"100%",padding:"8px 12px",border:"1px solid #e0e0e0",borderRadius:"4px",backgroundColor:"white",fontSize:"12px",textAlign:"left",display:"flex",alignItems:"center",justifyContent:"space-between",cursor:"pointer"},children:[v?t.jsxs(s.Group,{gap:"xs",wrap:"nowrap",style:{flex:1},children:[t.jsx(s.Badge,{size:"xs",style:{backgroundColor:"#f59e0b",color:"white",fontSize:"10px",padding:"2px 6px"},children:"numeric"}),t.jsx(s.Text,{size:"sm",style:{fontSize:"12px",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:v})]}):t.jsx(s.Text,{size:"sm",c:"dimmed",style:{fontSize:"12px"},children:"Select height field..."}),t.jsx(Gt,{size:16,style:{color:"#888",flexShrink:0}})]})}),t.jsxs(s.Menu.Dropdown,{style:{maxHeight:"300px",padding:0,zIndex:1e4},onClick:E=>E.stopPropagation(),children:[t.jsx(s.Box,{style:{padding:"8px",borderBottom:"1px solid #e0e0e0"},children:t.jsx(s.TextInput,{placeholder:"Search",value:_,onChange:E=>U(E.currentTarget.value),size:"sm",rightSection:t.jsx(Pt,{size:14,style:{color:"#888"}}),styles:{input:{fontSize:"12px",border:"1px solid #e0e0e0",borderRadius:"4px"}},onClick:E=>E.stopPropagation(),onKeyDown:E=>E.stopPropagation()})}),t.jsx(s.Box,{style:{maxHeight:"250px",overflowY:"auto",overflowX:"hidden"},children:$e.filter(E=>E.type==="int"||E.type==="float"||E.type==="number").length===0?t.jsx(s.Menu.Item,{disabled:!0,children:t.jsx(s.Text,{size:"xs",c:"dimmed",style:{textAlign:"center",width:"100%"},children:"No numeric fields found"})}):$e.filter(E=>E.type==="int"||E.type==="float"||E.type==="number").map(E=>t.jsx(s.Menu.Item,{onClick:()=>{k(E.name),U(""),xe(!1)},style:{padding:"8px 12px",fontSize:"12px"},children:t.jsxs(s.Group,{justify:"space-between",gap:"xs",wrap:"nowrap",children:[t.jsx(s.Text,{size:"sm",style:{fontSize:"12px",flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:E.name||"Unnamed field"}),t.jsx(s.Badge,{size:"xs",style:{backgroundColor:"#f59e0b",color:"white",fontSize:"10px",padding:"2px 6px",flexShrink:0},children:E.type})]})},E.name))})]})]})}),v&&t.jsx(s.ActionIcon,{size:"sm",variant:"subtle",onClick:()=>{k(""),xe(!1)},style:{color:"#888",flexShrink:0},children:t.jsx(Zt,{size:14})})]})})]}),!b&&t.jsxs(s.Group,{grow:!0,children:[t.jsxs(s.Stack,{gap:4,children:[t.jsx(s.Text,{size:"xs",c:"dimmed",children:"Fill Color"}),t.jsx(s.ColorInput,{value:d,onChange:h,format:"hex",size:"sm",popoverProps:{withinPortal:!0,zIndex:1e4},styles:{input:{position:"relative"},wrapper:{position:"relative"}}})]}),t.jsxs(s.Stack,{gap:4,children:[t.jsx(s.Text,{size:"xs",c:"dimmed",children:"Stroke Color"}),t.jsx(s.ColorInput,{value:y,onChange:c,format:"hex",size:"sm",popoverProps:{withinPortal:!0,zIndex:1e4},styles:{input:{position:"relative"},wrapper:{position:"relative"}}})]})]}),b&&t.jsx(s.Box,{style:{padding:"12px",backgroundColor:"#f0f9ff",borderRadius:"4px",border:"1px solid #bae6fd"},children:t.jsxs(s.Text,{size:"xs",c:"dimmed",style:{fontSize:"11px"},children:['Colors are now based on the "',b,'" property. Clear the color field selection to use static colors.']})}),t.jsxs(s.Stack,{gap:4,children:[t.jsxs(s.Group,{justify:"space-between",children:[t.jsx(s.Text,{size:"xs",c:"dimmed",children:"Opacity"}),t.jsxs(s.Text,{size:"xs",c:"dimmed",children:[Math.round(f*100),"%"]})]}),t.jsx(s.Slider,{value:f,onChange:u,min:0,max:1,step:.01,marks:[{value:0,label:"0%"},{value:.5,label:"50%"},{value:1,label:"100%"}]})]}),t.jsxs(s.Stack,{gap:4,children:[t.jsx(s.Text,{size:"xs",c:"dimmed",children:"Stroke Width"}),t.jsx(s.NumberInput,{value:m,onChange:E=>T(Number(E)||1),min:0,max:20,size:"sm"})]}),(n==="path"||n==="line"||n==="geojson"&&Be.some(E=>E==="LineString"||E==="MultiLineString"))&&t.jsxs(s.Stack,{gap:4,children:[t.jsx(s.Text,{size:"xs",c:"dimmed",children:"Line Style"}),t.jsx(s.Select,{value:F,onChange:E=>C(E||"solid"),data:[{value:"solid",label:"━━━ Solid"},{value:"dashed",label:"╌╌╌ Dashed"},{value:"dotted",label:"┄┄┄ Dotted"},{value:"longDash",label:"─ ─ Long Dash"},{value:"shortDash",label:"- - Short Dash"},{value:"highway",label:"═ ═ Highway"},{value:"boundary",label:"━ ━ Boundary"},{value:"railroad",label:"┼┼┼ Railroad"}],size:"sm",comboboxProps:{withinPortal:!0,zIndex:1e4},styles:{input:{fontSize:"12px"},dropdown:{zIndex:1e4}}})]}),n==="icon"&&t.jsxs(s.Stack,{gap:4,children:[t.jsx(s.Text,{size:"xs",c:"dimmed",children:"Icon Type"}),t.jsx(s.Select,{value:R,onChange:E=>L(E||"marker"),data:[{value:"circle",label:"Circle"},{value:"marker",label:"Marker Pin"},{value:"square",label:"Square"},{value:"diamond",label:"Diamond"},{value:"triangle",label:"Triangle"},{value:"star",label:"Star"},{value:"hospital",label:"Hospital"},{value:"school",label:"School"},{value:"home",label:"Home"},{value:"flag",label:"Flag"}],size:"sm",comboboxProps:{withinPortal:!0,zIndex:1e4}})]}),(n==="scatterplot"||n==="point"||n==="pointcloud"||n==="icon"||n==="cluster"||n==="mesh"||n==="scenegraph"||n==="screengrid"||n==="geojson"&&Be.some(E=>E==="Point"||E==="MultiPoint"))&&t.jsxs(s.Stack,{gap:4,children:[t.jsxs(s.Group,{justify:"space-between",align:"center",children:[t.jsx(s.Text,{size:"xs",c:"dimmed",children:n==="icon"?"Icon Size":n==="pointcloud"?"Point Size":n==="mesh"?"Mesh Scale (meters)":n==="scenegraph"?"Model Scale":n==="screengrid"?"Cell Size (px)":"Point Radius"}),n==="icon"&&t.jsxs(s.Text,{size:"xs",fw:500,c:"dimmed",children:[S,"px"]})]}),n==="icon"?t.jsx(s.Slider,{value:S,onChange:p,min:5,max:50,step:1,size:"sm",marks:[{value:5,label:"5"},{value:15,label:"15"},{value:30,label:"30"},{value:50,label:"50"}]}):t.jsx(s.NumberInput,{value:S,onChange:E=>p(Number(E)||5),min:n==="mesh"||n==="scenegraph"?10:1,max:n==="mesh"||n==="scenegraph"?2e3:100,step:n==="mesh"||n==="scenegraph"?50:1,size:"sm"})]}),n==="hexbin"&&t.jsxs(s.Stack,{gap:4,children:[t.jsx(s.Text,{size:"xs",c:"dimmed",children:"Hexagon Size (radius × 100m)"}),t.jsx(s.NumberInput,{value:S,onChange:E=>p(Number(E)||5),min:1,max:100,size:"sm",description:"Value × 100 = meters. E.g., 5 = 500m hexagons"})]}),n==="heatmap"&&t.jsxs(s.Stack,{gap:"md",children:[t.jsxs(s.Stack,{gap:4,children:[t.jsx(s.Text,{size:"xs",c:"dimmed",children:"Radius (10-200)"}),t.jsx(s.Slider,{value:S,onChange:p,min:10,max:200,step:5,size:"sm",marks:[{value:10,label:"10"},{value:100,label:"100"},{value:200,label:"200"}]})]}),t.jsxs(s.Stack,{gap:4,children:[t.jsx(s.Text,{size:"xs",c:"dimmed",children:"Intensity (0.1-3)"}),t.jsx(s.Slider,{value:P,onChange:M,min:.1,max:3,step:.1,size:"sm",marks:[{value:.1,label:"0.1"},{value:1.5,label:"1.5"},{value:3,label:"3"}]})]})]}),n==="contour"&&t.jsxs(s.Stack,{gap:4,children:[t.jsx(s.Text,{size:"xs",c:"dimmed",children:"Radius (pixels)"}),t.jsx(s.Slider,{value:S,onChange:p,min:10,max:100,step:5,size:"sm",marks:[{value:10,label:"10"},{value:50,label:"50"},{value:100,label:"100"}]})]}),(n==="polygon"||n==="solidpolygon")&&t.jsxs(s.Stack,{gap:4,children:[t.jsxs(s.Group,{justify:"space-between",children:[t.jsx(s.Text,{size:"xs",c:"dimmed",children:"Height Scale (Elevation)"}),t.jsx(s.Text,{size:"xs",c:"dimmed",children:B.toFixed(2)})]}),t.jsx(s.Slider,{value:B,onChange:O,min:0,max:10,step:.01,size:"sm",marks:[{value:0,label:"0"},{value:1,label:"1"},{value:5,label:"5"},{value:10,label:"10"}]}),t.jsx(s.Text,{size:"xs",c:"dimmed",style:{fontSize:"10px",marginTop:"-8px"},children:"Adjust the height multiplier for 3D extrusion. Set above 0 and select a height property to enable."})]})]}),t.jsx(s.Box,{mt:"md",children:t.jsxs(s.Stack,{gap:"xs",children:[t.jsxs(s.Group,{justify:"space-between",align:"center",children:[t.jsxs(s.Group,{gap:"xs",children:[t.jsx(s.Box,{style:{width:3,height:20,backgroundColor:"#f1871c",borderRadius:2}}),t.jsx(s.Text,{size:"sm",fw:500,style:{color:"#202020",fontSize:"13px",fontFamily:"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",fontWeight:500,letterSpacing:"0.1px"},children:"Draw Filter"}),t.jsx(s.Tooltip,{label:"Draw a shape on the map to filter data",position:"right",withinPortal:!0,children:t.jsx(s.Box,{style:{display:"flex",alignItems:"center",cursor:"help"},children:t.jsx(tl,{size:14,style:{color:"#6b7280"}})})}),Fe&&t.jsx(s.Badge,{color:"blue",variant:"light",size:"sm",children:"Filter Active"})]}),t.jsx(s.Tooltip,{label:"Clear Filter",position:"left",withinPortal:!0,children:t.jsx(s.ActionIcon,{size:"sm",variant:"subtle",color:"red",onClick:_e,disabled:!Fe,children:t.jsx(Zt,{size:14})})})]}),t.jsx(s.Box,{style:{padding:"12px",border:"1px solid #e0e0e0",borderRadius:"4px",backgroundColor:"white"},children:t.jsx(oe,{point:!1,line:!1,polygon:!0,CircleMode:!0,RectangleMode:!0,FreehandMode:!0})})]})})]})})]})},Wl=({onAddData:e})=>{const n=de.use.uploadedDatasets(),o=de.use.removeUploadedDataset(),r=de.use.map(),{layerConfigs:i,setLayerVisibility:a,setVisualizationType:l,setColorConfig:x,setStyleConfig:d,getLayerConfig:h}=oo(),[y,c]=g.useState(new Set),[f,u]=g.useState(new Set);g.useEffect(()=>{n.forEach(C=>{i[C.id]||(a(C.id,!0),l(C.id,"geojson"))})},[n,i,a,l]);const m=g.useCallback((C,j)=>{x(C,j)},[x]),T=g.useCallback((C,j)=>{var b;const z=((b=i[C])==null?void 0:b.styleConfig)||{};d(C,{...z,...j})},[d,i]),S=C=>{c(j=>{const z=new Set(j);return z.has(C)?z.delete(C):z.add(C),z})},p=C=>{const j=h(C);a(C,!((j==null?void 0:j.visible)??!0))},P=(C,j,z)=>{if(r)try{r.getLayer(z)&&r.removeLayer(z),r.getSource(j)&&r.removeSource(j)}catch(b){console.error("Error removing dataset from map:",b)}o(C)},M=C=>{u(j=>{const z=new Set(j);return z.has(C)?z.delete(C):z.add(C),z})},R=C=>{var j;return((j=h(C))==null?void 0:j.visualizationType)||"geojson"},L=(C,j)=>{l(C,j)},F=C=>{var v;const j=n.find(k=>k.id===C);if(!((v=j==null?void 0:j.geojson)!=null&&v.features))return[];const z=new Set;j.geojson.features.slice(0,100).forEach(k=>{var I;(I=k.geometry)!=null&&I.type&&z.add(k.geometry.type)});const b=[{id:"geojson",name:"GeoJSON",compatibleWith:["Point","Polygon","LineString","MultiPoint","MultiPolygon","MultiLineString"]},{id:"point",name:"Point",compatibleWith:["Point","MultiPoint"]},{id:"scatterplot",name:"Scatterplot",compatibleWith:["Point","MultiPoint"]},{id:"pointcloud",name:"Point Cloud",compatibleWith:["Point","MultiPoint"]},{id:"grid",name:"Grid",compatibleWith:["Point","MultiPoint"]},{id:"h3",name:"H3",compatibleWith:["Point","Polygon","MultiPoint"]},{id:"hexbin",name:"Hexbin",compatibleWith:["Point","MultiPoint"]},{id:"heatmap",name:"Heatmap",compatibleWith:["Point","MultiPoint"]},{id:"cluster",name:"Cluster",compatibleWith:["Point","MultiPoint"]},{id:"h3cluster",name:"H3 Cluster",compatibleWith:["Point","MultiPoint","Polygon"]},{id:"screengrid",name:"Screen Grid",compatibleWith:["Point","MultiPoint"]},{id:"line",name:"Line",compatibleWith:["LineString","MultiLineString"]},{id:"path",name:"Path",compatibleWith:["LineString","MultiLineString"]},{id:"arc",name:"Arc",compatibleWith:["Point","MultiPoint"]},{id:"greatcircle",name:"Great Circle",compatibleWith:["LineString","MultiLineString"]},{id:"animatedtrip",name:"Animated Trip",compatibleWith:["LineString","MultiLineString"]},{id:"polygon",name:"Polygon",compatibleWith:["Polygon","MultiPolygon"]},{id:"solidpolygon",name:"Solid Polygon",compatibleWith:["Polygon","MultiPolygon"]},{id:"column",name:"Column",compatibleWith:["Point","MultiPoint"]},{id:"contour",name:"Contour",compatibleWith:["Point","MultiPoint"]},{id:"text",name:"Text",compatibleWith:["Point","MultiPoint"]},{id:"icon",name:"Icon",compatibleWith:["Point","MultiPoint"]},{id:"mesh",name:"3D Mesh",compatibleWith:["Point","MultiPoint","Polygon"]},{id:"scenegraph",name:"3D Model",compatibleWith:["Point","MultiPoint","Polygon"]},{id:"geohash",name:"Geohash",compatibleWith:["Point","MultiPoint"]},{id:"quadkey",name:"Quadkey",compatibleWith:["Point","MultiPoint"]},{id:"s2",name:"S2",compatibleWith:["Point","MultiPoint"]}],w=Array.from(z);return b.filter(k=>k.compatibleWith.some(I=>w.includes(I)))};return t.jsxs(t.Fragment,{children:[t.jsxs(s.Stack,{gap:"xs",className:ve.datasetsList,children:[t.jsxs(s.Group,{justify:"space-between",align:"center",style:{padding:"0 16px",marginTop:"8px"},children:[t.jsxs(s.Text,{size:"sm",fw:600,className:ve.datasetsTitle,children:["Datasets (",n.length,")"]}),t.jsx(s.Button,{leftSection:t.jsx(Qs,{size:14}),variant:"subtle",size:"xs",onClick:e,className:ve.addDataButtonSmall,children:"Add Data"})]}),n.map(C=>{const j=h(C.id),z=(j==null?void 0:j.visible)??!0,b=y.has(C.id);return t.jsxs(s.Box,{className:ve.datasetItem,children:[t.jsxs(s.Group,{justify:"space-between",align:"center",style:{cursor:"pointer",padding:"8px 16px"},onClick:()=>S(C.id),children:[t.jsxs(s.Group,{gap:"xs",style:{flex:1},children:[t.jsx(s.Box,{className:ve.datasetColorIndicator,style:{backgroundColor:C.color}}),t.jsxs(s.Stack,{gap:0,style:{flex:1},children:[t.jsx(s.Text,{size:"sm",className:ve.datasetName,children:C.name}),t.jsxs(s.Text,{size:"xs",c:"dimmed",className:ve.datasetRows,children:[C.rowCount," rows"]})]})]}),t.jsxs(s.Group,{gap:4,onClick:w=>w.stopPropagation(),children:[t.jsx(s.Tooltip,{label:z?"Hide Dataset":"Show Dataset",position:"left",children:t.jsx(s.ActionIcon,{variant:"subtle",size:"sm",onClick:w=>p(C.id),className:ve.datasetActionIcon,children:z?t.jsx(Vo,{size:16}):t.jsx(Ho,{size:16})})}),t.jsx(s.Tooltip,{label:"View Table",position:"left",withinPortal:!0,children:t.jsx(s.ActionIcon,{variant:"subtle",size:"sm",className:ve.datasetActionIcon,onClick:w=>{w.stopPropagation();const v=de.getState().setAttributeTableOpen,k=de.getState().setAttributeTableSelectedLayerId;k(C.id),v(!0)},children:t.jsx(Xa,{size:14})})}),t.jsx(s.Tooltip,{label:"Delete Dataset",position:"left",children:t.jsx(s.ActionIcon,{variant:"subtle",size:"sm",color:"red",onClick:w=>P(C.id,C.sourceId,C.layerId),className:ve.datasetActionIcon,children:t.jsx(Ka,{size:14})})}),t.jsx(s.ActionIcon,{variant:"subtle",size:"sm",onClick:w=>{w.stopPropagation(),S(C.id)},style:{transform:b?"rotate(90deg)":"rotate(0deg)",transition:"transform 0.2s ease",color:"#9ca3af"},children:t.jsx(wo,{size:18})})]})]}),t.jsx(s.Collapse,{in:b,children:t.jsx(s.Box,{style:{padding:"0 16px 8px 16px"}})})]},C.id)})]}),t.jsxs(s.Stack,{gap:"xs",className:ve.layersList,style:{marginTop:"16px"},children:[t.jsx(s.Group,{justify:"space-between",align:"center",style:{padding:"0 16px"},children:t.jsx(s.Text,{size:"sm",fw:600,className:ve.datasetsTitle,children:"Layers"})}),n.map(C=>{const j=h(C.id);j==null||j.visible;const z=f.has(C.id),b=R(C.id),w=F(C.id);return t.jsx(s.Box,{className:ve.datasetItem,children:t.jsx(Ol,{dataset:C,visualizationType:b,onVisualizationTypeChange:L,compatibleTypes:w,isExpanded:z,onToggleExpanded:M,onColorConfigChange:m,onStyleConfigChange:T})},`layer-${C.id}`)})]})]})},yi=[{id:"formula",label:"Formula",icon:t.jsx(oa,{size:24}),description:"Shows aggregated numerical data as a single metric"},{id:"category",label:"Category",icon:t.jsx(ua,{size:24}),description:"Segments data into distinct categories displaying aggregated metrics"},{id:"pie",label:"Pie",icon:t.jsx(ga,{size:24}),description:"Visualizes categorical data by displaying the proportion of each category"},{id:"histogram",label:"Histogram",icon:t.jsx(ta,{size:24}),description:"Shows the frequency distribution across equal bins in the data range"},{id:"timeSeries",label:"Time Series",icon:t.jsx(ya,{size:24}),description:"Groups features into time intervals and allows to play an animation that filters the features displayed based on the current interval."},{id:"table",label:"Table",icon:t.jsx(ca,{size:24}),description:"Displays tabular data for easy viewing and interaction"}],Gl=({selectedType:e,onTypeSelect:n,compatibleTypes:o})=>{const r=o||yi.map(c=>c.id),i=g.useRef(null),[a,l]=g.useState(!1),[x,d]=g.useState(!1),h=()=>{if(!i.current)return;const c=i.current,{scrollLeft:f,scrollWidth:u,clientWidth:m}=c,T=1,S=f>T,p=f<u-m-T;l(S),d(p)};g.useEffect(()=>{const c=setTimeout(()=>{h()},100),f=setTimeout(()=>{h()},300),u=i.current;if(u){u.addEventListener("scroll",h),window.addEventListener("resize",h);const m=new ResizeObserver(()=>{h()});return m.observe(u),()=>{clearTimeout(c),clearTimeout(f),u.removeEventListener("scroll",h),window.removeEventListener("resize",h),m.disconnect()}}return()=>{clearTimeout(c),clearTimeout(f)}},[r]);const y=c=>{if(!i.current)return;const f=i.current,u=200,m=f.scrollLeft,T=c==="left"?Math.max(0,m-u):Math.min(f.scrollWidth-f.clientWidth,m+u);f.scrollTo({left:T,behavior:"smooth"}),setTimeout(()=>{h()},300)};return t.jsxs(s.Box,{children:[t.jsxs(s.Group,{justify:"space-between",mb:"md",align:"center",children:[t.jsx(s.Text,{size:"sm",fw:600,children:"Widget type"}),t.jsxs(s.Group,{gap:4,children:[t.jsx(s.ActionIcon,{variant:"subtle",size:"sm",onClick:()=>a&&y("left"),disabled:!a,style:{color:a?"var(--project-primary, #f1871c)":"#9ca3af",opacity:a?1:.5,cursor:a?"pointer":"not-allowed",backgroundColor:"transparent"},children:t.jsx(ra,{size:16})}),t.jsx(s.ActionIcon,{variant:"subtle",size:"sm",onClick:()=>x&&y("right"),disabled:!x,style:{color:x?"var(--project-primary, #f1871c)":"#9ca3af",opacity:x?1:.5,cursor:x?"pointer":"not-allowed",backgroundColor:"transparent"},children:t.jsx(na,{size:16})})]})]}),t.jsx(s.Box,{ref:i,style:{display:"flex",flexWrap:"nowrap",overflowX:"auto",paddingBottom:"8px",scrollbarWidth:"none",msOverflowStyle:"none",gap:"8px"},sx:{"&::-webkit-scrollbar":{display:"none"}},children:yi.map(c=>{const f=e===c.id,u=r.includes(c.id);return t.jsx(s.Box,{onClick:()=>u&&n(c.id),style:{minWidth:"100px",padding:"12px",border:`2px solid ${f?"var(--project-primary, #f1871c)":u?"#e5e7eb":"#f3f4f6"}`,borderRadius:"8px",cursor:u?"pointer":"not-allowed",opacity:u?1:.5,backgroundColor:f?"var(--project-primary-muted, #fff7ed)":"white",transition:"all 0.2s",flexShrink:0},onMouseEnter:m=>{u&&(m.currentTarget.style.borderColor="var(--project-primary, #f1871c)",m.currentTarget.style.backgroundColor="var(--project-primary-muted, #fff7ed)")},onMouseLeave:m=>{f||(m.currentTarget.style.borderColor=u?"#e5e7eb":"#f3f4f6",m.currentTarget.style.backgroundColor="white")},children:t.jsxs(s.Box,{style:{display:"flex",flexDirection:"column",alignItems:"center",gap:"8px",color:f?"var(--project-primary, #f1871c)":u?"#374151":"#9ca3af"},children:[c.icon,t.jsx(s.Text,{size:"xs",fw:f?600:400,children:c.label})]})},c.id)})})]})},$t=e=>{if(!e.features||e.features.length===0)return[];const n=new Set;return e.features.forEach(o=>{o.properties&&Object.keys(o.properties).forEach(r=>n.add(r))}),Array.from(n)};function bi(e){if(e==null)return!1;if(typeof e=="number")return e>1e12?e<2e12:e>1e9&&e<2e9;if(typeof e=="string"){if(!e.trim())return!1;const n=Date.parse(e);return Number.isNaN(n)?/^\d{4}-\d{2}-\d{2}/.test(e)||/^\d{4}\/\d{2}\/\d{2}/.test(e)||/^\d{2}\/\d{2}\/\d{4}/.test(e):!0}return!1}const $l=e=>{const n={};if(!e.features||e.features.length===0)return n;const o={};return e.features.forEach(r=>{r.properties&&Object.keys(r.properties).forEach(i=>{const a=r.properties[i];a!=null&&(o[i]||(o[i]=[]),o[i].push(a))})}),Object.keys(o).forEach(r=>{const i=o[r],a=i.some(y=>typeof y=="number"),l=i.some(y=>typeof y=="boolean"),x=i.some(y=>typeof y=="string"&&bi(y)),d=i.some(y=>typeof y=="number"&&bi(y)),h=i.length>0&&i.every(y=>typeof y=="number");l&&i.every(y=>typeof y=="boolean"||y===null)?n[r]="boolean":x||d&&h?n[r]="date":a&&i.every(y=>typeof y=="number"||y===null)?n[r]="number":d?n[r]="date":n[r]="string"}),n},Ps=(e,n,o)=>{if(!e.features||e.features.length===0)return 0;switch(n){case"COUNT":return e.features.length;case"AVG":return o?e.features.reduce((l,x)=>{var y;const d=(y=x.properties)==null?void 0:y[o],h=Number(d);return l+(isNaN(h)?0:h)},0)/e.features.length:0;case"SUM":return o?e.features.reduce((l,x)=>{var y;const d=(y=x.properties)==null?void 0:y[o],h=Number(d);return l+(isNaN(h)?0:h)},0):0;case"MAX":if(!o)return 0;const i=e.features.map(l=>{var d;const x=(d=l.properties)==null?void 0:d[o];return Number(x)}).filter(l=>!isNaN(l));return i.length>0?Math.max(...i):0;case"MIN":if(!o)return 0;const a=e.features.map(l=>{var d;const x=(d=l.properties)==null?void 0:d[o];return Number(x)}).filter(l=>!isNaN(l));return a.length>0?Math.min(...a):0;default:return 0}},Jo=(e,n,o,r="COUNT")=>{if(!e.features||e.features.length===0)return[];const i={};return e.features.forEach(a=>{if(!a.properties)return;const l=String(a.properties[n]??"Unknown");if(i[l]||(i[l]={count:0,values:[]}),i[l].count++,o){const x=a.properties[o],d=Number(x);isNaN(d)||i[l].values.push(d)}}),Object.entries(i).map(([a,l])=>{let x;if(o&&l.values.length>0){const d=l.values.reduce((h,y)=>h+y,0);switch(r){case"SUM":x=d;break;case"AVG":x=d/l.values.length;break;case"MAX":x=Math.max(...l.values);break;case"MIN":x=Math.min(...l.values);break;case"COUNT":default:x=void 0;break}}return{category:a,count:l.count,value:x}})},Ms=(e,n,o=10,r,i)=>{if(!e.features||e.features.length===0)return[];const a=e.features.map(y=>{var f;const c=(f=y.properties)==null?void 0:f[n];return Number(c)}).filter(y=>!isNaN(y));if(a.length===0)return[];const l=r!==void 0?r:Math.min(...a),x=i!==void 0?i:Math.max(...a),d=(x-l)/o,h={};return a.forEach(y=>{if(y>=l&&y<=x){const c=Math.min(Math.floor((y-l)/d),o-1);h[c]=(h[c]||0)+1}}),Array.from({length:o},(y,c)=>{const f=l+c*d,u=l+(c+1)*d;return{bin:`${f.toFixed(2)} - ${u.toFixed(2)}`,count:h[c]||0,min:f,max:u}})},Hl=(e,n,o="month")=>{if(!e.features||e.features.length===0)return[];const r={};return e.features.forEach(i=>{if(!i.properties)return;const a=i.properties[n];if(a==null)return;let l;const x=Number(a),d=!Number.isNaN(x)&&x>=1&&x<=12&&Number.isInteger(x),h=!Number.isNaN(x)&&x>=1900&&x<=2100&&Number.isInteger(x);if(o==="month"&&d)l=`Month ${x}`;else if(o==="year"&&h)l=String(x);else{const y=new Date(a);if(isNaN(y.getTime()))return;switch(o){case"day":l=y.toISOString().split("T")[0];break;case"week":{const c=new Date(y);c.setDate(y.getDate()-y.getDay()),l=c.toISOString().split("T")[0];break}case"month":l=`${y.getFullYear()}-${String(y.getMonth()+1).padStart(2,"0")}`;break;case"year":l=String(y.getFullYear());break;default:l=y.toISOString().split("T")[0]}}r[l]=(r[l]||0)+1}),Object.entries(r).map(([i,a])=>({time:i,count:a})).sort((i,a)=>i.time.localeCompare(a.time))},Ci=(e,n)=>{let o,r;if(n==="year"){const i=parseInt(e,10);o=new Date(i,0,1),r=new Date(i,11,31,23,59,59,999)}else if(n==="month"){const[i,a]=e.split("-").map(Number);o=new Date(i,a-1,1),r=new Date(i,a,0,23,59,59,999)}else if(n==="week"||n==="day"){const i=new Date(e);if(isNaN(i.getTime()))throw new Error(`Invalid date: ${e}`);o=new Date(Date.UTC(i.getUTCFullYear(),i.getUTCMonth(),i.getUTCDate(),0,0,0,0)),r=new Date(Date.UTC(i.getUTCFullYear(),i.getUTCMonth(),i.getUTCDate(),0,0,0,0)),n==="day"||r.setUTCDate(r.getUTCDate()+6),r.setUTCHours(23,59,59,999)}else o=new Date(e),r=new Date(e),r.setHours(23,59,59,999);return{minMs:o.getTime(),maxMs:r.getTime()}},eo=(e,n="auto")=>{switch(n){case"currency":return new Intl.NumberFormat("en-IN",{style:"currency",currency:"INR",maximumFractionDigits:0}).format(e);case"percentage-1dec":return`${(e>1?e:e*100).toFixed(1)}%`;case"percentage-2dec":return`${(e>1?e:e*100).toFixed(2)}%`;case"percentage-rounded":const i=e>1?e:e*100;return`${Math.round(i*100)/100}%`;case"number-2dec":return e.toFixed(2);case"number-3dec":return e.toFixed(3);case"number-comma":return new Intl.NumberFormat("en-IN",{maximumFractionDigits:0}).format(e);case"number-comma-3dec":return new Intl.NumberFormat("en-IN",{minimumFractionDigits:3,maximumFractionDigits:3}).format(e);case"number-plus-comma-3dec":const a=new Intl.NumberFormat("en-IN",{minimumFractionDigits:3,maximumFractionDigits:3}).format(e);return e>=0?`+${a}`:a;case"thousands-k":return e>=1e6?`${(e/1e6).toFixed(2)}M`:e>=1e3?`${(e/1e3).toFixed(2)}k`:e.toFixed(0);case"thousands-k-1dec":return e>=1e6?`${(e/1e6).toFixed(1)}M`:e>=1e3?`${(e/1e3).toFixed(1)}k`:e.toFixed(0);case"round-10":return Math.round(e/10)*10+"";case"round-100":return Math.round(e/100)*100+"";case"number":return new Intl.NumberFormat("en-IN",{maximumFractionDigits:2}).format(e);case"auto":default:return e>=1e6?`${(e/1e6).toFixed(2)}M`:e>=1e3?`${(e/1e3).toFixed(2)}K`:e.toFixed(2)}},Mt=e=>{if(!e)return null;const n=e.getBounds();if(!n)return null;const o=n.getSouthWest(),r=n.getNorthEast();return{type:"FeatureCollection",features:[{type:"Feature",geometry:{type:"Polygon",coordinates:[[[o.lng,o.lat],[r.lng,o.lat],[r.lng,r.lat],[o.lng,r.lat],[o.lng,o.lat]]]},properties:{}}]}},no=()=>{const e=de.getState().uploadedDatasets,n=de.getState().layersAddedFromCatalogue,o=de.getState().map,r=[];return e.forEach(i=>{r.push({id:i.id,name:i.name,type:"geojson",sourceId:i.sourceId,layerId:i.layerId,geojson:i.geojson})}),n.forEach(i=>{var x;const a=(x=o==null?void 0:o.getLayer)==null?void 0:x.call(o,i.id),l=(a==null?void 0:a.metadata)||{};r.push({id:i.id,name:i.label||i.value||i.id,type:"wms",sourceId:i.id,layerId:i.id,publishName:i.value,metadata:{...l,...i}})}),r},Vl=async(e,n)=>null,qt=async(e,n)=>e.type==="geojson"?e.geojson:e.type==="wms"&&e.publishName?await Vl(e.publishName):null,_l=({onCancel:e})=>{const n=pt.use.addWidget(),o=pt.use.updateWidget(),r=pt.use.removeWidget(),i=pt.use.widgets(),a=pt.use.setSelectedWidgetType(),l=de.use.map(),x=de.use.uploadedDatasets(),d=de.use.layersAddedFromCatalogue(),{layerConfigs:h}=oo(),y=g.useMemo(()=>{const V=[];return x.forEach(W=>{V.push({id:W.id,name:W.name,type:"geojson",sourceId:W.sourceId,layerId:W.layerId,geojson:W.geojson})}),d.forEach(W=>{const X=l==null?void 0:l.getLayer(W.id),K=(X==null?void 0:X.metadata)||{};V.push({id:W.id,name:W.label||W.value||W.id,type:"wms",sourceId:W.id,layerId:W.id,publishName:W.value,metadata:{...K,...W}})}),V},[x,d,l]),[c,f]=g.useState(""),[u,m]=g.useState("formula"),[T,S]=g.useState(""),[p,P]=g.useState("COUNT"),[M,R]=g.useState(null),[L,F]=g.useState("auto"),[C,j]=g.useState(""),[z,b]=g.useState("global"),[w,v]=g.useState(!0),[k,I]=g.useState(!1),[D,B]=g.useState(!1),[O,N]=g.useState(!1),[$,_]=g.useState(!1),[U,H]=g.useState(null),[q,ae]=g.useState(null),[xe,ie]=g.useState(null),[Me,we]=g.useState(null),[me,Ie]=g.useState(30),[be,je]=g.useState(null),[ue,Xe]=g.useState(null),[Ve,Qe]=g.useState(null),[He,xt]=g.useState("month"),[Le,Je]=g.useState([]),[St,bt]=g.useState({}),[Ct,at]=g.useState(5);g.useEffect(()=>{y.length>0&&!c&&f(y[0].id)},[y.length]);const A=y.find(V=>V.id===c),[ee,oe]=g.useState(null),te=g.useMemo(()=>{var V;if(!A)return{propertyKeys:[],propertyTypes:{}};if(A.type==="geojson"&&((V=A.geojson)!=null&&V.features)){const W=new Map,X=A.geojson.features,K=new Map;X.forEach(ye=>{ye.properties&&Object.keys(ye.properties).forEach(Se=>{const $e=ye.properties[Se];$e!=null&&(K.has(Se)||K.set(Se,[]),K.get(Se).push($e))})}),K.forEach((ye,Se)=>{const $e=ye.some(Pe=>typeof Pe=="number"),Te=ye.some(Pe=>typeof Pe=="boolean"),_e=ye.some(Pe=>typeof Pe=="string"&&(!!String(Pe).trim()&&!Number.isNaN(Date.parse(Pe))||/^\d{4}-\d{2}-\d{2}/.test(String(Pe))||/^\d{4}\/\d{2}\/\d{2}/.test(String(Pe)))),qe=ye.some(Pe=>typeof Pe=="number"&&(Pe>1e12&&Pe<2e12||Pe>1e9&&Pe<2e9)),Be=ye.every(Pe=>typeof Pe=="number");let Oe="string";Te&&ye.every(Pe=>typeof Pe=="boolean")?Oe="boolean":_e||qe&&Be||qe?Oe="date":$e&&ye.every(Pe=>typeof Pe=="number")&&(Oe="number"),W.set(Se,Oe)});const ge=Array.from(W.keys()).sort(),Re={};return W.forEach((ye,Se)=>{Re[Se]=ye}),{propertyKeys:ge,propertyTypes:Re}}if(A.type==="wms"&&ee){const W=$t(ee),X=$l(ee);return{propertyKeys:W,propertyTypes:X}}return{propertyKeys:[],propertyTypes:{}}},[A,ee]);g.useEffect(()=>{if(!A){oe(null);return}(async()=>{if(A.type==="geojson")oe(A.geojson);else if(A.type==="wms"){_(!0);try{const W=await qt(A);oe(W)}catch(W){console.error("Error loading WMS data:",W),oe(null)}finally{_(!1)}}})()},[A]);const le=te.propertyKeys.filter(V=>te.propertyTypes[V]==="number");te.propertyKeys.filter(V=>te.propertyTypes[V]==="string");const Fe=te.propertyKeys.filter(V=>te.propertyTypes[V]==="date"),he=Fe.length>0?Fe:te.propertyKeys,G=g.useRef(null),fe=g.useRef(null);g.useEffect(()=>{var Be,Oe;if(!c)return;const V=h[c],W=(Be=V==null?void 0:V.colorConfig)==null?void 0:Be.heightField,X=(Oe=V==null?void 0:V.colorConfig)==null?void 0:Oe.colorField,K=G.current,ge=fe.current,Re=K!==W,ye=ge!==X;Re&&(G.current=W||null),ye&&(fe.current=X||null);const Se=W&&le.includes(W);if((p==="AVG"||p==="MAX"||p==="MIN"||p==="SUM")&&!!W&&Se&&(!M||Re&&M===K)&&R(W),u==="histogram"&&!!W&&Se&&(!Me||Re&&Me===K)&&we(W),u==="pie"&&!!W&&Se&&(!xe||Re&&xe===K)&&ie(W),(u==="category"||u==="pie")&&X&&te.propertyKeys.includes(X)&&(!q||ye&&q===ge)&&ae(X),u==="table"&&te.propertyKeys.length>0&&Le.length===0){const Pe=te.propertyKeys,Ke=W&&Pe.includes(W)?[W,...Pe.filter(rt=>rt!==W)]:Pe;Je(Ke.slice(0,5))}},[c,u,p,M,U,Me,xe,q,Le.length,le,h,te.propertyKeys]);const ne=c&&u&&!$&&(p==="AVG"||p==="MAX"||p==="MIN"||p==="SUM"?M:!0)&&(u==="category"||u==="pie"?q:!0)&&(u==="histogram"?Me:!0)&&(u==="timeSeries"?Ve:!0)&&(u==="table"?Le.length>0:!0),pe=g.useRef(""),Ee=g.useRef(null),ke=g.useRef(!0);return g.useEffect(()=>{const V=new Map;i.forEach(W=>{const X=`${W.datasetId}-${W.type}`;V.has(X)||V.set(X,[]),V.get(X).push(W)}),V.forEach(W=>{W.length>1&&W.slice(1).forEach(X=>{r(X.id)})})},[]),g.useEffect(()=>{if(ke.current){ke.current=!1;return}if(!ne){pe.current="",Ee.current=null;return}const V=JSON.stringify({selectedDataSourceId:c,selectedType:u,operation:p,column:M,rangeField:U,categoryField:q,histogramField:Me,histogramBins:me,histogramMin:be,histogramMax:ue,timeField:Ve,timeInterval:He,formatting:L,tableColumns:Le,tableColumnLabels:St,rowsPerPage:Ct});if(pe.current===V)return;const W={type:u,name:T||`${u} Widget`,datasetId:c,operation:p,column:M||void 0,format:L,notes:C||void 0,mode:z,crossFiltering:w,collapsible:k,autoCollapse:D,dataSourceType:A==null?void 0:A.type};u==="formula"&&w&&M&&(p==="AVG"||p==="MAX"||p==="MIN"||p==="SUM")?W.filter={field:M}:u==="formula"&&w&&p==="COUNT"&&(W.filter=void 0),(u==="category"||u==="pie")&&q&&(W.categoryField=q),u==="pie"&&xe&&(W.valueField=xe),u==="histogram"&&Me&&(W.histogramField=Me,W.bins=me,W.histogramMin=be||void 0,W.histogramMax=ue||void 0,w&&(W.filter={field:Me})),u==="timeSeries"&&Ve&&(W.timeField=Ve,W.timeInterval=He),u==="table"&&Le.length>0&&(W.tableColumns=Le,W.tableColumnLabels=St,W.rowsPerPage=Ct);const X=i.filter(ge=>ge.datasetId===c&&ge.type===u);X.length>1&&X.slice(1).forEach(ge=>{r(ge.id)});const K=X[0];if(K)o(K.id,W),Ee.current=K.id;else{const ge=n(W);Ee.current=ge}pe.current=V},[ne,c,u,p,M,U,q,Me,me,be,ue,Ve,He,L,C,z,w,k,D,T,Le,St,Ct,A==null?void 0:A.type,n,o,r,i]),t.jsx(s.Box,{style:{padding:"16px",border:"1px solid #e5e7eb",borderRadius:"8px",backgroundColor:"#f9fafb"},children:t.jsxs(s.Stack,{gap:"md",children:[t.jsxs(s.Box,{children:[t.jsx(s.Text,{size:"xs",fw:600,mb:4,style:{color:"#6b7280"},children:"Data Source"}),y.length===0?t.jsx(s.Text,{size:"xs",style:{color:"#f59e0b",padding:"8px"},children:"No datasets available. Please add data in the Layers tab first."}):t.jsxs(t.Fragment,{children:[t.jsx(s.Select,{placeholder:"Select a data source",data:y.map(V=>({value:V.id,label:V.type==="geojson"?`📊 ${V.name} (Dataset)`:`🗺️ ${V.name} (Layer)`})),value:c,onChange:V=>{if(V){f(V),R(null),H(null),ae(null),ie(null),we(null),Qe(null),oe(null),m(void 0),a(null),Je([]),bt({}),at(5),pe.current="",Ee.current=null;const W=i.find(X=>X.datasetId===V&&X.type===u);W&&(P(W.operation),R(W.column||null),F(W.format||"auto"),j(W.notes||""),b(W.mode),v(W.crossFiltering),I(W.collapsible),B(W.autoCollapse),W.rangeField&&H(W.rangeField),W.categoryField&&ae(W.categoryField),W.valueField&&ie(W.valueField),W.histogramField&&(we(W.histogramField),Ie(W.bins||30),je(W.histogramMin||null),Xe(W.histogramMax||null)),W.timeField&&(Qe(W.timeField),xt(W.timeInterval||"month")),W.tableColumns&&(Je(W.tableColumns),bt(W.tableColumnLabels||{}),at(W.rowsPerPage||5)),Ee.current=W.id)}},size:"sm",searchable:!0,clearable:!1,maxDropdownHeight:300,allowDeselect:!1,withinPortal:!0,comboboxProps:{zIndex:99999,withinPortal:!0},styles:{dropdown:{zIndex:99999},input:{cursor:"pointer"}}}),t.jsxs(s.Text,{size:"xs",style:{color:"#6b7280",marginTop:"4px"},children:[y.length," data source",y.length!==1?"s":""," available"]})]})]}),$&&t.jsx(s.Text,{size:"xs",style:{color:"#6b7280"},children:"Loading layer data..."}),c&&t.jsx(s.Box,{children:t.jsx(Gl,{selectedType:u,onTypeSelect:V=>{if(m(V),a(V),pe.current="",Ee.current=null,c){const W=i.find(X=>X.datasetId===c&&X.type===V);W?(P(W.operation),R(W.column||null),F(W.format||"auto"),j(W.notes||""),b(W.mode),v(W.crossFiltering),I(W.collapsible),B(W.autoCollapse),W.rangeField&&H(W.rangeField),W.categoryField&&ae(W.categoryField),W.valueField&&ie(W.valueField),W.histogramField&&(we(W.histogramField),Ie(W.bins||30),je(W.histogramMin||null),Xe(W.histogramMax||null)),W.timeField&&(Qe(W.timeField),xt(W.timeInterval||"month")),W.tableColumns&&(Je(W.tableColumns),bt(W.tableColumnLabels||{}),at(W.rowsPerPage||5)),Ee.current=W.id):(P("COUNT"),R(null),F("auto"),j(""),b("global"),v(!0),I(!1),B(!1),H(null),ae(null),ie(null),we(null),Ie(30),je(null),Xe(null),Qe(null),xt("month"),V==="table"&&te.propertyKeys.length>0?Je(te.propertyKeys.slice(0,5)):(Je([]),bt({}),at(5)))}}})}),u&&t.jsxs(t.Fragment,{children:[t.jsxs(s.Box,{children:[t.jsxs(s.Group,{gap:4,mb:8,children:[t.jsx(s.Box,{style:{width:"4px",height:"16px",backgroundColor:"var(--project-primary, #f1871c)",borderRadius:"2px"}}),t.jsx(s.Text,{size:"xs",fw:600,style:{color:"#6b7280"},children:"Data"})]}),t.jsxs(s.Stack,{gap:"xs",children:[t.jsx(s.Select,{label:"Operation",data:[{value:"AVG",label:"AVG"},{value:"COUNT",label:"COUNT"},{value:"MAX",label:"MAX"},{value:"MIN",label:"MIN"},{value:"SUM",label:"SUM"}],value:p,onChange:V=>P(V),size:"sm",allowDeselect:!1,searchable:!0,clearable:!1,maxDropdownHeight:300,withinPortal:!0,styles:{input:{cursor:"pointer"},dropdown:{zIndex:99999}}}),(p==="AVG"||p==="MAX"||p==="MIN"||p==="SUM")&&t.jsx(s.Select,{label:"Column",placeholder:"Select a numeric column",data:le.map(V=>({value:V,label:V})),value:M||null,onChange:V=>R(V),size:"sm",required:!0,searchable:!0,clearable:!1,maxDropdownHeight:300,withinPortal:!0,styles:{input:{cursor:"pointer"},dropdown:{zIndex:99999}}}),(u==="category"||u==="pie")&&t.jsx(s.Select,{label:"Category Field",placeholder:"Select a column",data:te.propertyKeys.map(V=>({value:V,label:V})),value:q||null,onChange:V=>ae(V),size:"sm",required:!0,searchable:!0,clearable:!1,maxDropdownHeight:300,withinPortal:!0,styles:{input:{cursor:"pointer"},dropdown:{zIndex:99999}}}),u==="pie"&&t.jsx(s.Select,{label:"Value Column",placeholder:"Select a numeric column",data:le.map(V=>({value:V,label:V})),value:xe||null,onChange:V=>ie(V),size:"sm",searchable:!0,clearable:!1,maxDropdownHeight:300,withinPortal:!0,styles:{input:{cursor:"pointer"},dropdown:{zIndex:99999}}}),u==="histogram"&&t.jsx(s.Select,{label:"Histogram Field",placeholder:"Select a numeric column",data:le.map(V=>({value:V,label:V})),value:Me||null,onChange:V=>we(V),size:"sm",required:!0,searchable:!0,clearable:!1,maxDropdownHeight:300,withinPortal:!0,styles:{input:{cursor:"pointer"},dropdown:{zIndex:99999}}}),u==="timeSeries"&&t.jsxs(t.Fragment,{children:[t.jsx(s.Select,{label:"Time Field",placeholder:"Select a date column",data:he.map(V=>({value:V,label:V})),value:Ve??null,onChange:V=>Qe(V??null),size:"sm",required:!0,searchable:he.length>8,clearable:!1,maxDropdownHeight:300,withinPortal:!0,comboboxProps:{zIndex:99999,withinPortal:!0},styles:{input:{cursor:"pointer"},dropdown:{zIndex:99999}}}),t.jsx(s.Select,{label:"Time Interval",placeholder:"Select interval",data:[{value:"year",label:"Year"},{value:"month",label:"Month"},{value:"day",label:"Date"}],value:He,onChange:V=>{V&&xt(V)},size:"sm",searchable:!1,clearable:!1,required:!0,withinPortal:!0,comboboxProps:{zIndex:99999,withinPortal:!0},styles:{input:{cursor:"pointer"},dropdown:{zIndex:99999}}})]}),u==="table"&&t.jsxs(s.Box,{children:[t.jsxs(s.Group,{justify:"space-between",mb:8,children:[t.jsxs(s.Text,{size:"xs",fw:600,style:{color:"#6b7280"},children:["Fields (",Le.length,")"]}),t.jsxs(s.Group,{gap:4,children:[t.jsx(s.Button,{size:"xs",variant:"subtle",onClick:()=>{const V=te.propertyKeys;Je(V)},children:"Add all"}),t.jsx(s.Button,{size:"xs",variant:"subtle",onClick:()=>{Je([]),bt({})},children:"None"})]})]}),t.jsxs(s.Stack,{gap:4,children:[te.propertyKeys.map(V=>{const W=Le.includes(V);return t.jsxs(s.Group,{justify:"space-between",style:{padding:"4px 0"},children:[t.jsxs(s.Group,{gap:8,style:{flex:1},children:[t.jsx(s.ActionIcon,{size:"sm",variant:"subtle",onClick:()=>{if(W){Je(Le.filter(K=>K!==V));const X={...St};delete X[V],bt(X)}else Je([...Le,V])},style:{cursor:"pointer"},children:W?t.jsx(Vo,{size:16}):t.jsx(Ho,{size:16})}),t.jsx(s.Text,{size:"xs",style:{flex:1},children:V})]}),W&&t.jsx(s.TextInput,{placeholder:"Label",value:St[V]||"",onChange:X=>{const K={...St};X.target.value?K[V]=X.target.value:delete K[V],bt(K)},size:"xs",style:{width:"120px"},title:"Change text label"})]},V)}),te.propertyKeys.length===0&&t.jsx(s.Text,{size:"xs",style:{color:"#6b7280",padding:"8px"},children:"No properties available"})]})]})]})]}),t.jsxs(s.Box,{children:[t.jsxs(s.Group,{gap:4,mb:8,children:[t.jsx(s.Box,{style:{width:"4px",height:"16px",backgroundColor:"var(--project-primary, #f1871c)",borderRadius:"2px"}}),t.jsx(s.Text,{size:"xs",fw:600,style:{color:"#6b7280"},children:"Display options"})]}),t.jsx(s.Stack,{gap:"xs",children:u==="histogram"?t.jsxs(t.Fragment,{children:[t.jsxs(s.Box,{children:[t.jsxs(s.Group,{justify:"space-between",mb:4,children:[t.jsx(s.Text,{size:"xs",fw:600,style:{color:"#6b7280"},children:"Buckets"}),t.jsx(s.TextInput,{value:me,onChange:V=>{const W=parseInt(V.target.value);!isNaN(W)&&W>=1&&W<=100&&Ie(W)},size:"xs",style:{width:"60px"},type:"number",min:1,max:100})]}),t.jsx(s.Slider,{value:me,onChange:Ie,min:1,max:100,step:1,size:"sm",styles:{track:{backgroundColor:"#e5e7eb"},thumb:{backgroundColor:"var(--project-primary, #f1871c)"}}})]}),t.jsxs(s.Group,{grow:!0,children:[t.jsx(s.TextInput,{label:"Custom min. value",placeholder:"0",value:(be==null?void 0:be.toString())||"",onChange:V=>{const W=V.target.value;if(W==="")je(null);else{const X=parseFloat(W);isNaN(X)||je(X)}},size:"sm",type:"number"}),t.jsx(s.TextInput,{label:"Custom max. value",placeholder:"",value:(ue==null?void 0:ue.toString())||"",onChange:V=>{const W=V.target.value;if(W==="")Xe(null);else{const X=parseFloat(W);isNaN(X)||Xe(X)}},size:"sm",type:"number"})]})]}):u==="table"?t.jsx(s.Select,{label:"Rows per page",data:[{value:"5",label:"5"},{value:"10",label:"10"},{value:"25",label:"25"},{value:"50",label:"50"},{value:"100",label:"100"}],value:Ct.toString(),onChange:V=>at(parseInt(V||"5")),size:"sm",searchable:!0,clearable:!1,maxDropdownHeight:300,withinPortal:!0,styles:{input:{cursor:"pointer"},dropdown:{zIndex:99999}}}):t.jsx(s.Select,{label:"Formatting",data:[{value:"auto",label:"# 10k"},{value:"thousands-k-1dec",label:"12.3k"},{value:"percentage-1dec",label:".01 → 1.0%"},{value:"percentage-2dec",label:".01 → 1.00%"},{value:"percentage-rounded",label:"12.345 → 12.35%"},{value:"number-2dec",label:"1.23"},{value:"number-3dec",label:"1.234"},{value:"round-10",label:"12345 → 12350"},{value:"number-comma",label:"12,345,678"},{value:"number-comma-3dec",label:"12,345.432"},{value:"number-plus-comma-3dec",label:"+12,345.432"},{value:"number",label:"Number"},{value:"currency",label:"Currency"}],value:L,onChange:V=>F(V),size:"sm",searchable:!0,clearable:!1,maxDropdownHeight:300,withinPortal:!0,styles:{input:{cursor:"pointer"},dropdown:{zIndex:99999}}})})]})]})]})})},Ul=()=>{const e=de.use.map();return g.useEffect(()=>{if(!e)return;const n=()=>{const o=new Event("viewportchange");window.dispatchEvent(o)};return e.on("moveend",n),e.on("zoomend",n),()=>{e.off("moveend",n),e.off("zoomend",n)}},[e]),t.jsx(t.Fragment,{children:t.jsxs(s.Stack,{gap:"md",style:{padding:"16px"},children:[t.jsx(s.Text,{size:"sm",fw:600,className:ve.datasetsTitle,children:"Widgets"}),t.jsx(_l,{})]})})},Jl=()=>{const e=de.use.map(),n=de.use.tilesets(),o=de.use.removeTileset(),[r,i]=g.useState(new Set),[a,l]=g.useState({}),[x,d]=g.useState(new Set),h=g.useMemo(()=>n.filter(T=>T.type==="raster"||T.type==="wms"||T.type==="vector"),[n]);g.useEffect(()=>{if(!e||h.length===0)return;const T=new Set,S={};h.forEach(p=>{const P=e.getLayer(p.layerId);if(P){e.getLayoutProperty(p.layerId,"visibility")==="visible"&&T.add(p.layerId);const R=P.type;let L=1;R==="raster"?L=e.getPaintProperty(p.layerId,"raster-opacity")??1:R==="fill"&&(L=e.getPaintProperty(p.layerId,"fill-opacity")??1),S[p.layerId]=L}}),i(T),l(p=>({...p,...S}))},[e,h]);const y=g.useMemo(()=>[{value:"default",label:"Default"},...h.map(T=>({value:`tileset:${T.layerId}`,label:T.name||T.layerId}))],[h]),c=T=>{if(e){if(T==="default"){h.forEach(S=>{e.getLayer(S.layerId)&&e.setLayoutProperty(S.layerId,"visibility","none")}),i(new Set);return}if(T.startsWith("tileset:")){const S=T.replace("tileset:","");if(!e.getLayer(S))return;const M=!r.has(S);e.setLayoutProperty(S,"visibility",M?"visible":"none"),i(R=>{const L=new Set(R);return M?L.add(S):L.delete(S),L})}}},f=(T,S)=>{if(!e)return;const p=e.getLayer(T);if(!p)return;const P=p.type;P==="raster"?e.setPaintProperty(T,"raster-opacity",S):P==="fill"&&e.setPaintProperty(T,"fill-opacity",S),l(M=>({...M,[T]:S}))},u=T=>{d(S=>{const p=new Set(S);return p.has(T)?p.delete(T):p.add(T),p})},m=T=>{e&&(e.getLayer(T.layerId)&&e.removeLayer(T.layerId),e.getSource(T.sourceId)&&e.removeSource(T.sourceId),i(S=>{const p=new Set(S);return p.delete(T.layerId),p}),d(S=>{const p=new Set(S);return p.delete(T.layerId),p}),l(S=>{const p={...S};return delete p[T.layerId],p}),o(T.id))};return t.jsxs(s.Stack,{gap:"md",style:{padding:"16px"},children:[t.jsx(s.Text,{size:"sm",fw:600,className:ve.datasetsTitle,children:"Base Map"}),t.jsx(s.Text,{size:"xs",style:{color:"#9ca3af"},children:"Toggle base map layers on or off. Multiple layers can be visible at once."}),t.jsxs(s.Stack,{gap:"xs",children:[t.jsx(s.Text,{size:"xs",style:{color:"#9ca3af"},fw:500,children:"Map Style"}),y.map(T=>{const S=T.value.startsWith("tileset:"),p=S?T.value.replace("tileset:",""):null,P=S&&p?r.has(p):!1,M=S?h.find(C=>`tileset:${C.layerId}`===T.value):null,R=S?(M==null?void 0:M.type)==="wms"?"WMS basemap":(M==null?void 0:M.type)==="vector"?"Vector basemap":"Raster basemap":"Default map style (click to hide all custom basemaps)",L=p?a[p]??1:1,F=p?x.has(p):!1;return t.jsxs(s.Box,{style:{borderRadius:4,border:P?"1px solid #f1871c":"1px solid transparent",backgroundColor:P?"rgba(241,135,28,0.08)":"transparent",overflow:"hidden"},children:[t.jsx(s.Box,{className:ve.datasetItem,style:{cursor:"pointer",padding:"6px 10px"},onClick:()=>c(T.value),children:t.jsxs(s.Group,{justify:"space-between",align:"center",children:[t.jsxs(s.Group,{gap:"xs",style:{flex:1},children:[t.jsx(s.Box,{className:ve.datasetColorIndicator,style:{backgroundColor:S?"#8b5cf6":"#9ca3af"}}),t.jsxs(s.Stack,{gap:0,style:{flex:1},children:[t.jsx(s.Text,{size:"sm",className:ve.datasetName,children:T.label}),t.jsx(s.Text,{size:"xs",c:"dimmed",className:ve.datasetRows,children:R})]})]}),t.jsxs(s.Group,{gap:"xs",children:[S&&p&&t.jsx(s.ActionIcon,{variant:"subtle",size:"sm",onClick:C=>{C.stopPropagation(),u(p)},style:{color:"#9ca3af"},children:F?t.jsx(Vi,{size:16}):t.jsx(Gt,{size:16})}),S&&t.jsx(s.Tooltip,{label:P?"Hide this layer":"Show this layer",position:"left",children:t.jsx(s.ActionIcon,{variant:"subtle",size:"sm",onClick:C=>{C.stopPropagation(),c(T.value)},className:ve.datasetActionIcon,children:P?t.jsx(Vo,{size:16}):t.jsx(Ho,{size:16})})}),S&&M&&t.jsx(s.Tooltip,{label:"Remove this basemap",position:"left",children:t.jsx(s.ActionIcon,{variant:"subtle",size:"sm",color:"red",onClick:C=>{C.stopPropagation(),m(M)},style:{color:"#ef4444"},children:t.jsx(_i,{size:16})})})]})]})}),S&&p&&t.jsx(s.Collapse,{in:F,children:t.jsx(s.Box,{style:{padding:"12px",backgroundColor:"rgba(0,0,0,0.02)",borderTop:"1px solid rgba(0,0,0,0.05)"},onClick:C=>C.stopPropagation(),children:t.jsxs(s.Stack,{gap:"xs",children:[t.jsxs(s.Group,{justify:"space-between",align:"center",children:[t.jsx(s.Text,{size:"xs",c:"dimmed",fw:500,children:"Opacity"}),t.jsxs(s.Text,{size:"xs",c:"dimmed",children:[Math.round(L*100),"%"]})]}),t.jsx(s.Slider,{value:L,onChange:C=>f(p,C),min:0,max:1,step:.01,marks:[{value:0,label:"0%"},{value:.5,label:"50%"},{value:1,label:"100%"}],styles:{markLabel:{fontSize:"10px"}}})]})})})]},T.value)})]})]})};function ql(e){return ze({attr:{viewBox:"0 0 256 256",fill:"currentColor"},child:[{tag:"path",attr:{d:"M48,180c0,11,7.18,20,16,20a14.24,14.24,0,0,0,10.22-4.66A8,8,0,0,1,85.78,206.4,30.06,30.06,0,0,1,64,216c-17.65,0-32-16.15-32-36s14.35-36,32-36a30.06,30.06,0,0,1,21.78,9.6,8,8,0,0,1-11.56,11.06A14.24,14.24,0,0,0,64,160C55.18,160,48,169,48,180Zm79.6-8.69c-4-1.16-8.14-2.35-10.45-3.84-1.25-.81-1.23-1-1.12-1.9a4.57,4.57,0,0,1,2-3.67c4.6-3.12,15.34-1.73,19.82-.56A8,8,0,0,0,142,145.86c-2.12-.55-21-5.22-32.84,2.76a20.58,20.58,0,0,0-9,14.95c-2,15.88,13.65,20.41,23,23.11,12.06,3.49,13.12,4.92,12.78,7.59-.31,2.41-1.26,3.34-2.14,3.93-4.6,3.06-15.17,1.56-19.55.36A8,8,0,0,0,109.94,214a61.34,61.34,0,0,0,15.19,2c5.82,0,12.3-1,17.49-4.46a20.82,20.82,0,0,0,9.19-15.23C154,179,137.49,174.17,127.6,171.31Zm83.09-26.84a8,8,0,0,0-10.23,4.84L188,184.21l-12.47-34.9a8,8,0,0,0-15.07,5.38l20,56a8,8,0,0,0,15.07,0l20-56A8,8,0,0,0,210.69,144.47ZM216,88v24a8,8,0,0,1-16,0V96H152a8,8,0,0,1-8-8V40H56v72a8,8,0,0,1-16,0V40A16,16,0,0,1,56,24h96a8,8,0,0,1,5.66,2.34l56,56A8,8,0,0,1,216,88Zm-27.31-8L160,51.31V80Z"},child:[]}]})(e)}function vi(e){return ze({attr:{viewBox:"0 0 256 256",fill:"currentColor"},child:[{tag:"path",attr:{d:"M213.66,82.34l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40v72a8,8,0,0,0,16,0V40h88V88a8,8,0,0,0,8,8h48V216H176a8,8,0,0,0,0,16h24a16,16,0,0,0,16-16V88A8,8,0,0,0,213.66,82.34ZM160,51.31,188.69,80H160Zm-12.19,145a20.82,20.82,0,0,1-9.19,15.23C133.43,215,127,216,121.13,216a61.34,61.34,0,0,1-15.19-2,8,8,0,0,1,4.31-15.41c4.38,1.2,15,2.7,19.55-.36.88-.59,1.83-1.52,2.14-3.93.34-2.67-.71-4.1-12.78-7.59-9.35-2.7-25-7.23-23-23.11a20.56,20.56,0,0,1,9-14.95c11.84-8,30.71-3.31,32.83-2.76a8,8,0,0,1-4.07,15.48c-4.49-1.17-15.23-2.56-19.83.56a4.54,4.54,0,0,0-2,3.67c-.12.9-.14,1.09,1.11,1.9,2.31,1.49,6.45,2.68,10.45,3.84C133.49,174.17,150.05,179,147.81,196.31ZM80,152v38a26,26,0,0,1-52,0,8,8,0,0,1,16,0,10,10,0,0,0,20,0V152a8,8,0,0,1,16,0Z"},child:[]}]})(e)}function Yl(e){return e}function Zl(e){if(e==null)return Yl;var n,o,r=e.scale[0],i=e.scale[1],a=e.translate[0],l=e.translate[1];return function(x,d){d||(n=o=0);var h=2,y=x.length,c=new Array(y);for(c[0]=(n+=x[0])*r+a,c[1]=(o+=x[1])*i+l;h<y;)c[h]=x[h],++h;return c}}function Xl(e,n){for(var o,r=e.length,i=r-n;i<--r;)o=e[i],e[i++]=e[r],e[r]=o}function Kl(e,n){return typeof n=="string"&&(n=e.objects[n]),n.type==="GeometryCollection"?{type:"FeatureCollection",features:n.geometries.map(function(o){return wi(e,o)})}:wi(e,n)}function wi(e,n){var o=n.id,r=n.bbox,i=n.properties==null?{}:n.properties,a=Ql(e,n);return o==null&&r==null?{type:"Feature",properties:i,geometry:a}:r==null?{type:"Feature",id:o,properties:i,geometry:a}:{type:"Feature",id:o,bbox:r,properties:i,geometry:a}}function Ql(e,n){var o=Zl(e.transform),r=e.arcs;function i(y,c){c.length&&c.pop();for(var f=r[y<0?~y:y],u=0,m=f.length;u<m;++u)c.push(o(f[u],u));y<0&&Xl(c,m)}function a(y){return o(y)}function l(y){for(var c=[],f=0,u=y.length;f<u;++f)i(y[f],c);return c.length<2&&c.push(c[0]),c}function x(y){for(var c=l(y);c.length<4;)c.push(c[0]);return c}function d(y){return y.map(x)}function h(y){var c=y.type,f;switch(c){case"GeometryCollection":return{type:c,geometries:y.geometries.map(h)};case"Point":f=a(y.coordinates);break;case"MultiPoint":f=y.coordinates.map(a);break;case"LineString":f=l(y.arcs);break;case"MultiLineString":f=y.arcs.map(l);break;case"Polygon":f=d(y.arcs);break;case"MultiPolygon":f=y.arcs.map(d);break;default:return null}return{type:c,coordinates:f}}return h(n)}const ec="_modalTitle_17nib_1",tc="_closeButton_17nib_6",oc="_tabs_17nib_14",rc="_uploadInstructions_17nib_58",nc="_dropZone_17nib_76",ic="_dropZoneDragging_17nib_96",sc="_fileTypeIcons_17nib_101",ac="_fileTypeIcon_17nib_101",lc="_fileTypeLabel_17nib_117",cc="_downArrow_17nib_125",dc="_dropZoneText_17nib_130",uc="_browseLink_17nib_135",pc="_disclaimer_17nib_144",Ue={modalTitle:ec,closeButton:tc,tabs:oc,uploadInstructions:rc,dropZone:nc,dropZoneDragging:ic,fileTypeIcons:sc,fileTypeIcon:ac,fileTypeLabel:lc,downArrow:cc,dropZoneText:dc,browseLink:uc,disclaimer:pc};async function fc(e){try{const n=await e.arrayBuffer(),o=await Ws(n);if(Array.isArray(o)){const r=[];for(const i of o)i.type==="FeatureCollection"&&Array.isArray(i.features)&&r.push(...i.features);return{type:"FeatureCollection",features:r}}return o.type==="FeatureCollection"?o:o.type==="Feature"?{type:"FeatureCollection",features:[o]}:{type:"FeatureCollection",features:[{type:"Feature",geometry:o,properties:{}}]}}catch(n){throw console.error("Error loading shapefile:",n),new Error(`Failed to load shapefile: ${n.message}`)}}function gc(e){var n,o,r,i,a,l,x,d,h,y,c;try{const u=new DOMParser().parseFromString(e,"text/xml");if(u.querySelector("parsererror"))throw new Error("Invalid GPX XML format");const T=[],S=u.getElementsByTagName("wpt");for(let M=0;M<S.length;M++){const R=S[M],L=parseFloat(R.getAttribute("lat")||"0"),F=parseFloat(R.getAttribute("lon")||"0"),C=(n=R.getElementsByTagName("ele")[0])==null?void 0:n.textContent,j=((o=R.getElementsByTagName("name")[0])==null?void 0:o.textContent)||"",z=((r=R.getElementsByTagName("desc")[0])==null?void 0:r.textContent)||"",b=((i=R.getElementsByTagName("time")[0])==null?void 0:i.textContent)||"";T.push({type:"Feature",geometry:{type:"Point",coordinates:C?[F,L,parseFloat(C)]:[F,L]},properties:{name:j,description:z,time:b,type:"waypoint"}})}const p=u.getElementsByTagName("trk");for(let M=0;M<p.length;M++){const R=p[M],L=((a=R.getElementsByTagName("name")[0])==null?void 0:a.textContent)||"",F=((l=R.getElementsByTagName("desc")[0])==null?void 0:l.textContent)||"",C=R.getElementsByTagName("trkseg");for(let j=0;j<C.length;j++){const b=C[j].getElementsByTagName("trkpt"),w=[],v=[];for(let k=0;k<b.length;k++){const I=b[k],D=parseFloat(I.getAttribute("lat")||"0"),B=parseFloat(I.getAttribute("lon")||"0"),O=(x=I.getElementsByTagName("ele")[0])==null?void 0:x.textContent,N=(d=I.getElementsByTagName("time")[0])==null?void 0:d.textContent;w.push(O?[B,D,parseFloat(O)]:[B,D]),N&&v.push(N)}w.length>1&&T.push({type:"Feature",geometry:{type:"LineString",coordinates:w},properties:{name:L,description:F,type:"track",segment:j+1,...v.length>0&&{timestamps:v}}})}}const P=u.getElementsByTagName("rte");for(let M=0;M<P.length;M++){const R=P[M],L=((h=R.getElementsByTagName("name")[0])==null?void 0:h.textContent)||"",F=((y=R.getElementsByTagName("desc")[0])==null?void 0:y.textContent)||"",C=R.getElementsByTagName("rtept"),j=[];for(let z=0;z<C.length;z++){const b=C[z],w=parseFloat(b.getAttribute("lat")||"0"),v=parseFloat(b.getAttribute("lon")||"0"),k=(c=b.getElementsByTagName("ele")[0])==null?void 0:c.textContent;j.push(k?[v,w,parseFloat(k)]:[v,w])}j.length>1&&T.push({type:"Feature",geometry:{type:"LineString",coordinates:j},properties:{name:L,description:F,type:"route"}})}return{type:"FeatureCollection",features:T}}catch(f){throw new Error(`Error parsing GPX: ${f.message}`)}}const hc=({size:e=32,color:n="#10b981"})=>t.jsx("svg",{viewBox:"0 0 64 64",width:e,height:e,style:{fill:n},children:t.jsxs("g",{id:"vector-tile-layer",children:[t.jsx("polygon",{id:"Path",points:"12.1949893 42.9771532 3 37.4596134 12.2699446 31.9771532 21 37.45407",style:{opacity:.6}}),t.jsx("polygon",{id:"Path-Copy-3",points:"22.2609912 37 13.0660019 31.4824602 22.3359466 26 31.0660019 31.4769168",style:{opacity:1}}),t.jsx("polygon",{id:"Path-Copy-6",points:"32.1949893 21 23 15.4824602 32.2699446 10 41 15.4769168",style:{opacity:1}}),t.jsx("polygon",{id:"Path-Copy",points:"22.2609912 49 13.0660019 43.4824602 22.3359466 38 31.0660019 43.4769168",style:{opacity:1}}),t.jsx("polygon",{id:"Path-Copy-4",points:"32.3269931 43.0228468 23.1320038 37.505307 32.4019485 32.0228468 41.1320038 37.4997636",style:{opacity:.6}}),t.jsx("polygon",{id:"Path-Copy-7",points:"42.3269931 37.0228468 33.1320038 31.505307 42.4019485 26.0228468 51.1320038 31.4997636",style:{opacity:1}}),t.jsx("polygon",{id:"Path-Copy-2",points:"32.2609912 55 23.0660019 49.4824602 32.3359466 44 41.0660019 49.4769168",style:{opacity:.6}}),t.jsx("polygon",{id:"Path-Copy-5",points:"42.3269931 49.0228468 33.1320038 43.505307 42.4019485 38.0228468 51.1320038 43.4997636",style:{opacity:1}}),t.jsx("polygon",{id:"Path-Copy-8",points:"53.3269931 43.0228468 44.1320038 37.505307 53.4019485 32.0228468 62.1320038 37.4997636",style:{opacity:.4}})]})}),mc=({size:e=32,color:n="#6b7280"})=>t.jsx("svg",{viewBox:"6 2 50 50",width:e,height:e,style:{fill:n},children:t.jsxs("g",{children:[t.jsx("path",{d:"M38.244 36.0125C39.0513 35.2052 39.0513 33.8928 38.244 33.0855C37.6319 32.4735 36.6666 32.3479 35.9007 32.6936L33.8528 30.6463L37.2683 27.2302C37.398 27.1004 37.4705 26.9252 37.4705 26.7423C37.4705 26.5595 37.398 26.3835 37.2683 26.2545L31.9001 20.887L32.8764 19.9113L34.3399 21.3755C34.4745 21.5101 34.6511 21.5777 34.8278 21.5777C35.0044 21.5777 35.181 21.5101 35.3156 21.3755L42.1459 14.5452C42.4157 14.2754 42.4157 13.8393 42.1459 13.5695L38.2433 9.66621C37.9735 9.39642 37.5374 9.39642 37.2676 9.66621L30.4366 16.4965C30.3069 16.6262 30.2344 16.8015 30.2344 16.9843C30.2344 17.1672 30.3069 17.3431 30.4366 17.4722L31.9001 18.9364L30.9244 19.912L28.4853 17.4729C28.0513 17.0389 27.4392 16.8091 26.7161 16.8091C25.2078 16.8091 23.2682 17.811 21.655 19.4242C20.5379 20.5413 19.7016 21.8199 19.3 23.0253C18.8439 24.3922 18.9874 25.539 19.703 26.2545L22.1428 28.6943L21.1671 29.6707L19.703 28.2065C19.5732 28.0768 19.398 28.0043 19.2151 28.0043C19.0323 28.0043 18.8563 28.0768 18.7273 28.2065L11.897 35.0368C11.7673 35.1658 11.6948 35.3411 11.6948 35.5246C11.6948 35.7082 11.7673 35.8834 11.897 36.0125L15.8003 39.9151C15.9349 40.0497 16.1115 40.1173 16.2882 40.1173C16.4648 40.1173 16.6414 40.0497 16.776 39.9151L23.6063 33.0855C23.736 32.9558 23.8085 32.7812 23.8085 32.5977C23.8085 32.4141 23.736 32.2389 23.6063 32.1098L22.1421 30.6463L23.1185 29.67L28.4853 35.0368C28.615 35.1665 28.7903 35.239 28.9731 35.239C29.156 35.239 29.3319 35.1665 29.4609 35.0368L32.8764 31.622L34.9182 33.663C34.5538 34.4317 34.6808 35.377 35.3156 36.0125C35.7061 36.403 36.2264 36.619 36.7798 36.619C37.3325 36.619 37.8527 36.403 38.244 36.0125Z",fill:"currentColor"}),t.jsx("path",{d:"M36.6146 39.3087C37.9049 39.3087 39.1173 38.8063 40.0281 37.8955C40.9402 36.984 41.4426 35.771 41.4419 34.48C41.4419 34.0985 41.1328 33.79 40.7519 33.79C40.3703 33.79 40.0619 34.0992 40.0619 34.48C40.0619 35.4026 39.7031 36.2692 39.0524 36.9199C38.4024 37.5699 37.5365 37.9287 36.6146 37.9287C36.6133 37.9287 36.6119 37.9287 36.6119 37.9287C36.231 37.9287 35.9219 38.2371 35.9219 38.618C35.9219 38.9995 36.2303 39.3087 36.6112 39.3087C36.6126 39.3087 36.6133 39.3087 36.6146 39.3087Z",fill:"currentColor"}),t.jsx("path",{d:"M36.6119 40.69C36.2303 40.69 35.9219 40.9985 35.9219 41.38C35.9219 41.7616 36.2303 42.07 36.6119 42.07C40.7974 42.07 44.2026 38.6649 44.2026 34.48C44.2026 34.0985 43.8941 33.79 43.5126 33.79C43.131 33.79 42.8226 34.0985 42.8226 34.48C42.8226 37.9045 40.0363 40.69 36.6119 40.69Z",fill:"currentColor"}),t.jsx("path",{d:"M46.2719 33.79C45.8903 33.79 45.5819 34.0985 45.5819 34.48C45.5819 39.426 41.5578 43.45 36.6119 43.45C36.2303 43.45 35.9219 43.7585 35.9219 44.14C35.9219 44.5216 36.2303 44.83 36.6119 44.83C42.3189 44.83 46.9619 40.187 46.9619 34.48C46.9619 34.0985 46.6534 33.79 46.2719 33.79Z",fill:"currentColor"})]})}),xc=({size:e=32,color:n="#9ca3af"})=>{const o=`clip0_wms_icon_${Math.random().toString(36).substr(2,9)}`;return t.jsxs("svg",{viewBox:"0 0 30 30",width:e,height:e,style:{fill:n},children:[t.jsx("defs",{children:t.jsx("clipPath",{id:o,children:t.jsx("rect",{width:"28",height:"26",fill:"white",transform:"translate(1 2)"})})}),t.jsxs("g",{clipPath:`url(#${o})`,children:[t.jsx("path",{d:"M14.7595 12.2358L1 19.9828L15.2405 28L29 20.2536L14.7595 12.2358Z",fill:"currentColor"}),t.jsx("path",{d:"M14.7595 7.66919L1 15.4156L15.2405 23.4334L29 15.687L14.7595 7.66919Z",fill:n==="#ffffff"?"rgba(255, 255, 255, 0.6)":"#9DA0B9"}),t.jsx("path",{d:"M14.7595 2L1 9.74639L15.2405 17.7636L29 10.0172L14.7595 2Z",fill:n==="#ffffff"?"rgba(255, 255, 255, 0.4)":"#BFC0D1"}),t.jsx("path",{d:"M25.9696 10.8737H4.02124V19.267H25.9696V10.8737Z",fill:"currentColor"}),t.jsx("path",{d:"M5.51221 12.2358H6.77682L7.643 15.9522L8.58367 12.2358H9.64733L10.629 15.9725L11.5235 12.2358H12.6784L11.3341 17.6116H10.0637L9.0693 13.8953L8.05934 17.6116H6.85362L5.51221 12.2358Z",fill:"white"}),t.jsx("path",{d:"M13.4314 12.2358H15.0812L16.3689 15.5817L17.6393 12.2358H19.2561V17.6116H18.0146V13.8389L16.4884 17.6116H16.0796L14.5453 13.8389V17.6116H13.4314V12.2358Z",fill:"white"}),t.jsx("path",{d:"M20.1084 15.9274H21.3037C21.3574 16.4088 21.5659 16.8069 22.383 16.8069C22.9304 16.8069 23.293 16.5141 23.293 16.0929C23.293 15.6717 23.0621 15.5141 22.2536 15.3936C20.8429 15.2134 20.2643 14.7995 20.2643 13.7606C20.2643 12.8433 21.0508 12.1592 22.2692 12.1592C23.5107 12.1592 24.2354 12.7003 24.3353 13.7679H23.1851C23.1077 13.2792 22.8149 13.0539 22.2675 13.0539C21.7201 13.0539 21.4423 13.3017 21.4423 13.6626C21.4423 14.0461 21.6196 14.2257 22.4679 14.3468C23.8018 14.5123 24.4889 14.8659 24.4889 15.9797C24.4889 16.937 23.6874 17.6938 22.3841 17.6938C20.8718 17.6943 20.1777 17.0029 20.1084 15.9274Z",fill:"white"})]})]})},yc=e=>{var n,o,r,i,a,l,x,d;try{const y=new DOMParser().parseFromString(e,"text/xml");if(y.querySelector("parsererror"))throw new Error("Invalid KML XML format");const f=[],u=y.getElementsByTagName("Placemark");for(let m=0;m<u.length;m++){const T=u[m],S=((n=T.getElementsByTagName("name")[0])==null?void 0:n.textContent)||"",p=((o=T.getElementsByTagName("description")[0])==null?void 0:o.textContent)||"",P=T.getElementsByTagName("Point")[0];if(P){const L=(i=(r=P.getElementsByTagName("coordinates")[0])==null?void 0:r.textContent)==null?void 0:i.trim();if(L){const[F,C]=L.split(",").map(Number);f.push({type:"Feature",geometry:{type:"Point",coordinates:[F,C]},properties:{name:S,description:p}})}}const M=T.getElementsByTagName("LineString")[0];if(M){const L=(l=(a=M.getElementsByTagName("coordinates")[0])==null?void 0:a.textContent)==null?void 0:l.trim();if(L){const F=L.split(/\s+/).filter(C=>C.trim()).map(C=>{const j=C.split(","),[z,b]=[Number(j[0]),Number(j[1])];return[z,b]});F.length>0&&f.push({type:"Feature",geometry:{type:"LineString",coordinates:F},properties:{name:S,description:p}})}}const R=T.getElementsByTagName("Polygon")[0];if(R){const L=R.getElementsByTagName("outerBoundaryIs")[0];if(L){const F=(d=(x=L.getElementsByTagName("coordinates")[0])==null?void 0:x.textContent)==null?void 0:d.trim();if(F){const C=F.split(/\s+/).filter(j=>j.trim()).map(j=>{const z=j.split(","),[b,w]=[Number(z[0]),Number(z[1])];return[b,w]});C.length>0&&f.push({type:"Feature",geometry:{type:"Polygon",coordinates:[C]},properties:{name:S,description:p}})}}}}return{type:"FeatureCollection",features:f}}catch(h){throw new Error(`Error parsing KML: ${h.message}`)}},bc=async e=>{if(e.name.toLowerCase().endsWith(".kmz")){const o=(await Os.loadAsync(e)).file(/\.kml$/i)[0];if(!o)throw new Error("No KML file found in KMZ archive");return await o.async("string")}else return await e.text()},ji=e=>{try{const n=e.objects;if(!n||Object.keys(n).length===0)throw new Error("No objects found in TopoJSON");const o=Object.keys(n)[0],r=Kl(e,e.objects[o]);return r.type==="Feature"?{type:"FeatureCollection",features:[r]}:r.type==="FeatureCollection"?r:{type:"FeatureCollection",features:[{type:"Feature",geometry:r,properties:{}}]}}catch(n){throw new Error(`Error parsing TopoJSON: ${n.message}`)}},Cc=e=>{var n,o;try{const r=e.split(/\r?\n/).filter(u=>u.trim());if(r.length<2)throw new Error("CSV file must have at least a header row and one data row");const i=go(r[0]),a=i.map(u=>u.trim().toLowerCase()),l=["lat","latitude","y","ycoord","y_coord"],x=["lon","lng","long","longitude","x","xcoord","x_coord"];let d=-1,h=-1,y=-1,c=-1;for(let u=0;u<a.length;u++){const m=a[u];if(m==="geometry"||m==="geojson"){y=u;break}if(m==="wkt"){c=u;break}}if(y===-1&&c===-1)for(let u=0;u<a.length;u++){const m=a[u];l.includes(m)&&d===-1&&(d=u),x.includes(m)&&h===-1&&(h=u)}if(c!==-1){const u=[];for(let m=1;m<r.length;m++){const T=go(r[m]);if(!(T.length<=c||!((n=T[c])!=null&&n.trim())))try{const S=T[c].trim(),p=Go.wktToGeoJSON(S),P={};for(let M=0;M<i.length;M++)M!==c&&(P[i[M]]=T[M]||"");p.type==="Feature"?u.push({...p,properties:{...p.properties,...P}}):p.type==="FeatureCollection"?p.features.forEach(M=>{u.push({...M,properties:{...M.properties,...P}})}):u.push({type:"Feature",geometry:p,properties:P})}catch(S){console.warn(`Skipping row ${m+1} due to invalid WKT:`,S)}}return{type:"FeatureCollection",features:u}}if(y!==-1){const u=[];for(let m=1;m<r.length;m++){const T=go(r[m]);if(!(T.length<=y||!((o=T[y])!=null&&o.trim())))try{const S=T[y].trim(),p=typeof S=="string"?JSON.parse(S):S,P={};for(let M=0;M<i.length;M++)M!==y&&(P[i[M]]=T[M]||"");u.push({type:"Feature",geometry:p,properties:P})}catch(S){console.warn(`Skipping row ${m+1} due to invalid geometry:`,S)}}return{type:"FeatureCollection",features:u}}if(d===-1||h===-1)throw new Error("CSV file must contain latitude and longitude columns. Supported column names: lat/latitude/y, lon/lng/long/longitude/x");const f=[];for(let u=1;u<r.length;u++){const m=go(r[u]);if(m.length<=Math.max(d,h))continue;const T=parseFloat(m[d]),S=parseFloat(m[h]);if(isNaN(T)||isNaN(S)){console.warn(`Skipping row ${u+1} due to invalid coordinates`);continue}if(T<-90||T>90||S<-180||S>180){console.warn(`Skipping row ${u+1} due to out-of-range coordinates`);continue}const p={};for(let P=0;P<i.length;P++)P!==d&&P!==h&&(p[i[P]]=m[P]||"");f.push({type:"Feature",geometry:{type:"Point",coordinates:[S,T]},properties:p})}if(f.length===0)throw new Error("No valid features found in CSV file");return{type:"FeatureCollection",features:f}}catch(r){throw new Error(`Error parsing CSV: ${r.message}`)}},go=e=>{const n=[];let o="",r=!1;for(let i=0;i<e.length;i++){const a=e[i],l=e[i+1];a==='"'?r&&l==='"'?(o+='"',i++):r=!r:a===","&&!r?(n.push(o),o=""):o+=a}return n.push(o),n},vc=({opened:e,onClose:n})=>{const[o,r]=g.useState("loadFiles"),[i,a]=g.useState(!1),l=g.useRef(null),x=de.use.addUploadedDataset(),d=de.use.map(),h=de.use.addTileset(),[y,c]=g.useState(""),[f,u]=g.useState(""),[m,T]=g.useState(""),[S,p]=g.useState(""),[P,M]=g.useState(!1),[R,L]=g.useState(null),[F,C]=g.useState("vector"),j=g.useCallback(async I=>{var B,O,N;if(!I)return;const D=Array.isArray(I)?I:[I];for(const $ of D)try{const _=$.name.toLowerCase();let U;if(_.endsWith(".csv")){const H=await $.text();U=Cc(H)}else if(_.endsWith(".json")||_.endsWith(".geojson")){const H=await $.text(),q=JSON.parse(H);q.type==="Topology"||q.objects&&q.arcs?U=ji(q):U=q}else if(_.endsWith(".kml")||_.endsWith(".kmz")){const H=await bc($);U=yc(H)}else if(_.endsWith(".topojson")){const H=await $.text(),q=JSON.parse(H);U=ji(q)}else if(_.endsWith(".wkt")){const H=await $.text(),q=Go.wktToGeoJSON(H.trim());q.type==="Feature"?U={type:"FeatureCollection",features:[q]}:q.type==="FeatureCollection"?U=q:U={type:"FeatureCollection",features:[{type:"Feature",geometry:q,properties:{}}]}}else if(_.endsWith(".shp")||_.endsWith(".zip")&&!_.endsWith(".kmz"))U=await fc($);else if(_.endsWith(".gpx")){const H=await $.text();U=gc(H)}else{alert(`Unsupported file format: ${$.name}`);continue}if(!U||U.type!=="FeatureCollection"){alert("Invalid GeoJSON file. Expected FeatureCollection.");continue}try{const H=Date.now(),q=`uploaded-${H}`,ae=`uploaded-layer-${H}`,xe=["#9333ea","#3b82f6","#10b981","#f59e0b","#ef4444","#8b5cf6","#06b6d4","#f97316"],Me=de.getState().uploadedDatasets.length%xe.length,we=xe[Me];if(d){d.getLayer(ae)&&d.removeLayer(ae),d.getSource(q)&&d.removeSource(q),d.addSource(q,{type:"geojson",data:U});const me=U.features[0],Ie=(B=me==null?void 0:me.geometry)==null?void 0:B.type;let be="circle",je={};switch(Ie){case"Point":case"MultiPoint":be="circle",je={"circle-color":we,"circle-radius":5,"circle-stroke-width":2,"circle-stroke-color":"#ffffff"};break;case"LineString":case"MultiLineString":be="line",je={"line-color":we,"line-width":3};break;case"Polygon":case"MultiPolygon":be="fill",je={"fill-color":we,"fill-opacity":.5,"fill-outline-color":we,"fill-outline-width":2};break}d.addLayer({id:ae,type:be,source:q,paint:je})}if(x({id:ae,name:$.name,rowCount:((O=U.features)==null?void 0:O.length)||0,color:we,sourceId:q,layerId:ae,geojson:U}),d&&U.features&&U.features.length>0)try{const me=et.bbox(U),[Ie,be,je,ue]=me;if(Ie<je&&be<ue){const Xe=[[Ie,be],[je,ue]],Ve=je-Ie,Qe=ue-be,He=Math.max(50,Math.min(Ve,Qe)*.1);d.fitBounds(Xe,{padding:He,duration:1e3,maxZoom:18}),console.log(`✅ Map zoomed to show dataset: ${$.name}`)}else if(U.features.length===1){const Xe=U.features[0];let Ve=null;Xe.geometry.type==="Point"?Ve=Xe.geometry.coordinates:Ve=et.centroid(Xe).geometry.coordinates,Ve&&(d.flyTo({center:Ve,zoom:15,duration:1e3}),console.log(`✅ Map zoomed to single feature: ${$.name}`))}}catch(me){console.warn("Error zooming to dataset bounds:",me)}console.log(`✅ Added ${((N=U.features)==null?void 0:N.length)||0} features from ${$.name}`)}catch(H){console.error("Error processing file:",H),alert(`Error processing file: ${H instanceof Error?H.message:"Unknown error"}`)}}catch(_){console.error("Error reading file:",_),alert(`Error reading file: ${_ instanceof Error?_.message:"Unknown error"}`)}n()},[d,x,n]),z=g.useCallback(async()=>{var I;if(!y.trim()){L("Please provide a tileset name.");return}if(!f.trim()&&!m.trim()){L("Provide either a tiles URL or a TileJSON URL.");return}L(null),M(!0);try{const D=Date.now(),B=`tileset-${D}`,O=`tileset-layer-${D}`;let N=f.trim(),$,_,U,H;const q=/tiles\.json|\.json(\?|$)/i.test(N);let ae;const xe=/\.pbf(\?|$)/i.test(N)&&/\{[zyx]\}/.test(N);if(!q&&!m.trim()&&(F==="vector"||xe))try{const je=new URL(N),ue=je.pathname.split("/"),Xe=ue.findIndex(Ve=>Ve==="tiles");if(Xe>=0&&Xe+4<ue.length){const Ve=ue.slice(-3);if(Ve[0].match(/^\{[zyx]\}$/)&&Ve[1].match(/^\{[zyx]\}$/)&&Ve[2].match(/^\{[zyx]\}\.pbf$/i)){const Qe=ue.slice(0,Xe+2).join("/");ae=`${je.origin}${Qe}/tiles.json${je.search}`}}if(!ae){const Ve=/^(.+)\/\{[zyx]\}\/\{[zyx]\}\/\{[zyx]\}\.pbf/i,Qe=je.pathname.match(Ve);Qe&&(ae=`${je.origin}${Qe[1]}/tiles.json${je.search}`)}}catch(je){console.warn("Failed to parse URL for TileJSON auto-detection:",je)}const ie=m.trim()||(q?N:"")||ae||"";if(ie)try{const je=await fetch(ie);if(!je.ok)throw new Error(`Metadata request failed with status ${je.status}`);const ue=await je.json();(ue.format==="pbf"||ue.format==="mvt"||Array.isArray(ue.vector_layers)&&ue.vector_layers.length>0)&&($=ie),Array.isArray(ue.tiles)&&ue.tiles.length>0&&(N=ue.tiles[0]),Array.isArray(ue.vector_layers)&&ue.vector_layers.length>0&&((I=ue.vector_layers[0])!=null&&I.id)&&(_=ue.vector_layers[0].id),typeof ue.attribution=="string"&&(U=ue.attribution),typeof ue.format=="string"&&(H=ue.format.toLowerCase())}catch(je){if(console.warn("Failed to load tileset metadata:",je),q)throw new Error(`Failed to load TileJSON from URL: ${je instanceof Error?je.message:String(je)}`)}const Me=H==="png"||H==="jpg"||H==="jpeg"||H==="webp"||H==="tif"||H==="tiff",we=H==="pbf"||H==="mvt",me=/\.(png|jpg|jpeg|webp|avif|tif|tiff)(\?|$)/i.test(N)||N.includes("raster"),Ie=/\.(pbf|mvt)(\?|$)/i.test(N);let be=Me||me;(F==="raster"||F==="wms")&&(be=!0),F==="vector"&&(be=!1),$&&_&&(be=!1),h(F==="wms"||be?{id:O,name:y.trim(),type:F==="wms"?"wms":"raster",sourceId:B,layerId:O,url:N,...F==="wms"&&S.trim()?{wmsLayers:S.trim()}:{}}:{id:O,name:y.trim(),type:"vector",sourceId:B,layerId:O,url:N,sourceLayer:_,...$?{tileJsonUrl:$}:{}}),c(""),u(""),T(""),n()}catch(D){console.error("Error adding tileset:",D),L((D==null?void 0:D.message)||"Failed to add tileset. Please check the URL and try again.")}finally{M(!1)}},[y,f,m,F,S,h,n]),b=I=>{I.preventDefault(),a(!0)},w=I=>{I.preventDefault(),a(!1)},v=I=>{I.preventDefault(),a(!1);const D=Array.from(I.dataTransfer.files);j(D.length===1?D[0]:D)},k=()=>{var I;(I=l.current)==null||I.click()};return t.jsx(s.Modal,{opened:e,onClose:n,title:t.jsxs(s.Group,{justify:"space-between",style:{width:"100%"},children:[t.jsx(s.Text,{size:"lg",fw:600,className:Ue.modalTitle,children:"Add Data To Map"}),t.jsx(s.ActionIcon,{variant:"subtle",onClick:n,className:Ue.closeButton,children:t.jsx(Do,{size:20})})]}),size:"xl",centered:!0,styles:{content:{backgroundColor:"#ffffff"},header:{borderBottom:"1px solid #e0e0e0",padding:"20px 24px"},body:{padding:"24px"}},children:t.jsxs(s.Stack,{gap:"lg",children:[t.jsx(s.Group,{justify:"space-between",align:"flex-start",children:t.jsx(s.Tabs,{value:o,onChange:I=>r(I||"loadFiles"),className:Ue.tabs,children:t.jsxs(s.Tabs.List,{children:[t.jsx(s.Tabs.Tab,{value:"loadFiles",children:"Load Files"}),t.jsx(s.Tabs.Tab,{value:"tileset",children:"Tileset"})]})})}),o==="loadFiles"&&t.jsxs(s.Stack,{gap:"md",children:[t.jsxs(s.Text,{size:"sm",className:Ue.uploadInstructions,children:["Upload ",t.jsx("strong",{children:"CSV, JSON, GeoJSON, Shapefile (.shp/.zip), KML, KMZ, TopoJSON, WKT, GPX"})," or saved map"," ",t.jsx("strong",{children:"JSON"}),"."," "]}),t.jsxs(s.Box,{className:`${Ue.dropZone} ${i?Ue.dropZoneDragging:""}`,onDragOver:b,onDragLeave:w,onDrop:v,children:[t.jsxs(s.Group,{gap:"md",justify:"center",className:Ue.fileTypeIcons,wrap:"wrap",children:[t.jsxs(s.Box,{className:Ue.fileTypeIcon,children:[t.jsx(ql,{size:28}),t.jsx(s.Text,{size:"xs",className:Ue.fileTypeLabel,children:"csv"})]}),t.jsxs(s.Box,{className:Ue.fileTypeIcon,children:[t.jsx(vi,{size:28}),t.jsx(s.Text,{size:"xs",className:Ue.fileTypeLabel,children:"json"})]}),t.jsxs(s.Box,{className:Ue.fileTypeIcon,children:[t.jsx(vi,{size:28}),t.jsx(s.Text,{size:"xs",className:Ue.fileTypeLabel,children:"geojson"})]}),t.jsxs(s.Box,{className:Ue.fileTypeIcon,children:[t.jsx(Yt,{size:28,color:"#10b981"}),t.jsx(s.Text,{size:"xs",className:Ue.fileTypeLabel,children:"shp/zip"})]}),t.jsxs(s.Box,{className:Ue.fileTypeIcon,children:[t.jsx(Yt,{size:28}),t.jsx(s.Text,{size:"xs",className:Ue.fileTypeLabel,children:"kml"})]}),t.jsxs(s.Box,{className:Ue.fileTypeIcon,children:[t.jsx(Yt,{size:28}),t.jsx(s.Text,{size:"xs",className:Ue.fileTypeLabel,children:"topojson"})]}),t.jsxs(s.Box,{className:Ue.fileTypeIcon,children:[t.jsx(Yt,{size:28}),t.jsx(s.Text,{size:"xs",className:Ue.fileTypeLabel,children:"wkt"})]}),t.jsxs(s.Box,{className:Ue.fileTypeIcon,children:[t.jsx(Yt,{size:28,color:"#f59e0b"}),t.jsx(s.Text,{size:"xs",className:Ue.fileTypeLabel,children:"gpx"})]})]}),t.jsx(s.Box,{className:Ue.downArrow,children:t.jsx(ea,{size:32})}),t.jsx(s.Text,{size:"md",fw:500,className:Ue.dropZoneText,children:"Drag & Drop Your File(s) Here"}),t.jsx("input",{ref:l,type:"file",multiple:!0,accept:".csv,.json,.geojson,.kml,.kmz,.topojson,.wkt,.shp,.zip,.gpx",style:{display:"none"},onChange:I=>{const D=I.target.files;D&&D.length>0&&j(D.length===1?D[0]:Array.from(D))}}),t.jsx(s.Anchor,{size:"sm",onClick:k,className:Ue.browseLink,children:"or browse your files"})]})]}),o==="tileset"&&t.jsxs(s.Stack,{gap:"md",children:[t.jsx(s.Text,{size:"sm",className:Ue.uploadInstructions,children:"Configure a tileset by choosing a type and providing the appropriate URL(s)."}),t.jsxs(s.Group,{gap:"sm",justify:"flex-start",children:[t.jsxs(s.Button,{size:"xs",variant:F==="vector"?"filled":"light",onClick:()=>C("vector"),style:{display:"flex",flexDirection:"column",alignItems:"center",gap:"4px",padding:"12px 16px",minWidth:"100px",height:"auto"},children:[t.jsx(hc,{size:32,color:F==="vector"?"#ffffff":"#10b981"}),t.jsx(s.Text,{size:"xs",fw:F==="vector"?600:400,style:{color:F==="vector"?"#ffffff":"#374151"},children:"Vector Tile"})]}),t.jsxs(s.Button,{size:"xs",variant:F==="raster"?"filled":"light",onClick:()=>C("raster"),style:{display:"flex",flexDirection:"column",alignItems:"center",gap:"4px",padding:"12px 16px",minWidth:"100px",height:"auto"},children:[t.jsx(mc,{size:32,color:F==="raster"?"#ffffff":"#6b7280"}),t.jsx(s.Text,{size:"xs",fw:F==="raster"?600:400,style:{color:F==="raster"?"#ffffff":"#6b7280"},children:"Raster Tile"})]}),t.jsxs(s.Button,{size:"xs",variant:F==="wms"?"filled":"light",onClick:()=>C("wms"),style:{display:"flex",flexDirection:"column",alignItems:"center",gap:"4px",padding:"12px 16px",minWidth:"100px",height:"auto"},children:[t.jsx(xc,{size:32,color:F==="wms"?"#ffffff":"#9ca3af"}),t.jsx(s.Text,{size:"xs",fw:F==="wms"?600:400,style:{color:F==="wms"?"#ffffff":"#9ca3af"},children:"WMS"})]})]}),t.jsx(s.TextInput,{label:"Name",placeholder:F==="wms"?"Name your WMS layer":"Name your tileset",size:"md",value:y,onChange:I=>c(I.currentTarget.value)}),F==="vector"&&t.jsxs(t.Fragment,{children:[t.jsxs(s.Box,{children:[t.jsx(s.TextInput,{label:"Tileset URL",placeholder:"Tileset URL",size:"md",value:f,onChange:I=>u(I.currentTarget.value)}),t.jsxs(s.Text,{size:"xs",c:"dimmed",mt:4,children:["Requires ","{x}",", ","{y}",", ","{z}"," placeholders in URL or .pmtiles extension."]})]}),t.jsxs(s.Box,{children:[t.jsx(s.TextInput,{label:"Tileset metadata URL",placeholder:"Tileset metadata (TileJSON URL)",size:"md",value:m,onChange:I=>T(I.currentTarget.value)}),t.jsx(s.Text,{size:"xs",c:"dimmed",mt:4,children:"TileJSON describing this tileset. You can fill either this field or the tiles URL above; when both are provided, TileJSON takes precedence."})]})]}),F==="raster"&&t.jsxs(t.Fragment,{children:[t.jsxs(s.Box,{children:[t.jsx(s.TextInput,{label:"Tileset metadata URL",placeholder:"Tileset metadata URL (TileJSON / .pmtiles)",size:"md",value:m,onChange:I=>T(I.currentTarget.value)}),t.jsx(s.Text,{size:"xs",c:"dimmed",mt:4,children:"Supports raster TileJSON or .pmtiles metadata. Optional but recommended."})]}),t.jsxs(s.Box,{children:[t.jsx(s.TextInput,{label:"Raster tile servers",placeholder:"Raster tile server URLs (comma-separated)",size:"md",value:f,onChange:I=>u(I.currentTarget.value)}),t.jsxs(s.Text,{size:"xs",c:"dimmed",mt:4,children:["XYZ raster tile URLs (e.g. Cloud Optimized GeoTIFF tilesets). For a single server, provide one URL with ","{z}",", ","{x}",", ","{y}"," placeholders."]})]})]}),F==="wms"&&t.jsxs(t.Fragment,{children:[t.jsxs(s.Box,{children:[t.jsx(s.TextInput,{label:"WMS URL",placeholder:"e.g. https://example.com/geoserver/wms?",size:"md",value:f,onChange:I=>u(I.currentTarget.value)}),t.jsx(s.Text,{size:"xs",c:"dimmed",mt:4,children:"Base WMS service URL (GetCapabilities or WMSServer endpoint)."})]}),t.jsxs(s.Box,{children:[t.jsx(s.TextInput,{label:"WMS Layers (optional)",placeholder:"e.g. 0 or layer1,layer2 — leave blank to try 0",size:"md",value:S,onChange:I=>p(I.currentTarget.value)}),t.jsx(s.Text,{size:"xs",c:"dimmed",mt:4,children:"Comma-separated layer names. For ArcGIS WMSServer try 0, 1, 2 or get layer names from GetCapabilities."})]})]}),R&&t.jsx(s.Text,{size:"xs",c:"red",children:R}),t.jsxs(s.Group,{justify:"flex-end",mt:"sm",children:[t.jsx(s.Button,{variant:"outline",onClick:n,children:"Cancel"}),t.jsx(s.Button,{onClick:z,loading:P,disabled:!y.trim()||!f.trim()&&!m.trim(),children:"Add Tileset"})]})]}),t.jsx(s.Text,{size:"xs",c:"dimmed",className:Ue.disclaimer,children:"This is a client-side application with no server backend. Data lives only on your machine/browser. No information or map data is sent to any server."})]})})},wc=(e,n="export")=>{if(!e.features||e.features.length===0){alert("No data to export");return}const o=new Set;e.features.forEach(l=>{l.properties&&Object.keys(l.properties).forEach(x=>o.add(x))}),o.add("geometry_type"),o.add("coordinates");const r=e.features.map(l=>{const x={...l.properties};return l.geometry&&(x.geometry_type=l.geometry.type,x.coordinates=JSON.stringify(l.geometry.coordinates)),x}),i=Vt.mkConfig({useKeysAsHeaders:!0,filename:n}),a=Vt.generateCsv(i)(r);Vt.download(i)(a)},jc=(e,n="export")=>{const o=JSON.stringify(e,null,2),r=new Blob([o],{type:"application/json"}),i=URL.createObjectURL(r),a=document.createElement("a");a.href=i,a.download=`${n}.geojson`,document.body.appendChild(a),a.click(),document.body.removeChild(a),URL.revokeObjectURL(i)},Sc=(e,n="export")=>{const o=e.features.map(x=>({...x.properties,geometry:x.geometry})),r=JSON.stringify(o,null,2),i=new Blob([r],{type:"application/json"}),a=URL.createObjectURL(i),l=document.createElement("a");l.href=a,l.download=`${n}.json`,document.body.appendChild(l),l.click(),document.body.removeChild(l),URL.revokeObjectURL(a)},kc=(e,n="export")=>{if(!e.features||e.features.length===0){alert("No data to export");return}const o=[];if(e.features.forEach(x=>{if(x.geometry)try{const d=Go.geojsonToWKT(x.geometry);d&&o.push(d)}catch(d){console.error("Error converting geometry to WKT:",d)}}),o.length===0){alert("No valid geometries to export");return}const r=o.length===1?o[0]:o.join(`
|
|
42
|
+
`),i=new Blob([r],{type:"text/plain"}),a=URL.createObjectURL(i),l=document.createElement("a");l.href=a,l.download=`${n}.wkt`,document.body.appendChild(l),l.click(),document.body.removeChild(l),URL.revokeObjectURL(a)},Lc=(e,n="export")=>{if(!e.features||e.features.length===0){alert("No data to export");return}let o=`<?xml version="1.0" encoding="UTF-8"?>
|
|
43
|
+
<kml xmlns="http://www.opengis.net/kml/2.2">
|
|
44
|
+
<Document>
|
|
45
|
+
<name>${n}</name>
|
|
46
|
+
`;e.features.forEach((l,x)=>{const{geometry:d,properties:h}=l;if(!d)return;let y="",c="";if(d.type==="Point"){const f=d.coordinates;y=`${f[0]},${f[1]},0`,c="Point"}else if(d.type==="LineString")y=d.coordinates.map(u=>`${u[0]},${u[1]},0`).join(" "),c="LineString";else if(d.type==="Polygon"){const f=d.coordinates,u=(h==null?void 0:h.name)||(h==null?void 0:h.Name)||`Feature ${x+1}`,m=Xt(h);o+=` <Placemark>
|
|
47
|
+
<name>${jo(u)}</name>
|
|
48
|
+
<description><![CDATA[${m}]]></description>
|
|
49
|
+
<Polygon>
|
|
50
|
+
<outerBoundaryIs>
|
|
51
|
+
<LinearRing>
|
|
52
|
+
<coordinates>${f[0].map(T=>`${T[0]},${T[1]},0`).join(" ")}</coordinates>
|
|
53
|
+
</LinearRing>
|
|
54
|
+
</outerBoundaryIs>
|
|
55
|
+
`;for(let T=1;T<f.length;T++)o+=` <innerBoundaryIs>
|
|
56
|
+
<LinearRing>
|
|
57
|
+
<coordinates>${f[T].map(S=>`${S[0]},${S[1]},0`).join(" ")}</coordinates>
|
|
58
|
+
</LinearRing>
|
|
59
|
+
</innerBoundaryIs>
|
|
60
|
+
`;o+=` </Polygon>
|
|
61
|
+
</Placemark>
|
|
62
|
+
`;return}else if(d.type==="MultiPoint"){const f=d.coordinates;y=f.map(u=>`${u[0]},${u[1]},0`).join(" "),c="MultiGeometry",o+=` <Placemark>
|
|
63
|
+
<name>${(h==null?void 0:h.name)||(h==null?void 0:h.Name)||`Feature ${x+1}`}</name>
|
|
64
|
+
<description><![CDATA[${Xt(h)}]]></description>
|
|
65
|
+
<MultiGeometry>
|
|
66
|
+
`,f.forEach(u=>{o+=` <Point>
|
|
67
|
+
<coordinates>${u[0]},${u[1]},0</coordinates>
|
|
68
|
+
</Point>
|
|
69
|
+
`}),o+=` </MultiGeometry>
|
|
70
|
+
</Placemark>
|
|
71
|
+
`;return}else if(d.type==="MultiLineString"){const f=d.coordinates;y=f[0].map(u=>`${u[0]},${u[1]},0`).join(" "),c="MultiGeometry",o+=` <Placemark>
|
|
72
|
+
<name>${(h==null?void 0:h.name)||(h==null?void 0:h.Name)||`Feature ${x+1}`}</name>
|
|
73
|
+
<description><![CDATA[${Xt(h)}]]></description>
|
|
74
|
+
<MultiGeometry>
|
|
75
|
+
`,f.forEach(u=>{o+=` <LineString>
|
|
76
|
+
<coordinates>${u.map(m=>`${m[0]},${m[1]},0`).join(" ")}</coordinates>
|
|
77
|
+
</LineString>
|
|
78
|
+
`}),o+=` </MultiGeometry>
|
|
79
|
+
</Placemark>
|
|
80
|
+
`;return}else if(d.type==="MultiPolygon"){const f=d.coordinates;y=f[0][0].map(u=>`${u[0]},${u[1]},0`).join(" "),c="MultiGeometry",o+=` <Placemark>
|
|
81
|
+
<name>${(h==null?void 0:h.name)||(h==null?void 0:h.Name)||`Feature ${x+1}`}</name>
|
|
82
|
+
<description><![CDATA[${Xt(h)}]]></description>
|
|
83
|
+
<MultiGeometry>
|
|
84
|
+
`,f.forEach(u=>{o+=` <Polygon>
|
|
85
|
+
<outerBoundaryIs>
|
|
86
|
+
<LinearRing>
|
|
87
|
+
<coordinates>${u[0].map(m=>`${m[0]},${m[1]},0`).join(" ")}</coordinates>
|
|
88
|
+
</LinearRing>
|
|
89
|
+
</outerBoundaryIs>
|
|
90
|
+
</Polygon>
|
|
91
|
+
`}),o+=` </MultiGeometry>
|
|
92
|
+
</Placemark>
|
|
93
|
+
`;return}if(y&&c){const f=(h==null?void 0:h.name)||(h==null?void 0:h.Name)||`Feature ${x+1}`,u=Xt(h);o+=` <Placemark>
|
|
94
|
+
<name>${jo(f)}</name>
|
|
95
|
+
<description><![CDATA[${u}]]></description>
|
|
96
|
+
<${c}>
|
|
97
|
+
<coordinates>${y}</coordinates>
|
|
98
|
+
</${c}>
|
|
99
|
+
</Placemark>
|
|
100
|
+
`}}),o+=` </Document>
|
|
101
|
+
</kml>`;const r=new Blob([o],{type:"application/vnd.google-earth.kml+xml"}),i=URL.createObjectURL(r),a=document.createElement("a");a.href=i,a.download=`${n}.kml`,document.body.appendChild(a),a.click(),document.body.removeChild(a),URL.revokeObjectURL(i)},Tc=(e,n="export")=>{if(!e.features||e.features.length===0){alert("No data to export");return}const o={type:"Topology",objects:{[n]:e},arcs:[]},r=JSON.stringify(o,null,2),i=new Blob([r],{type:"application/json"}),a=URL.createObjectURL(i),l=document.createElement("a");l.href=a,l.download=`${n}.topojson`,document.body.appendChild(l),l.click(),document.body.removeChild(l),URL.revokeObjectURL(a)};function Xt(e){return e?Object.entries(e).filter(([n])=>n!=="name"&&n!=="Name").map(([n,o])=>`<b>${jo(String(n))}:</b> ${jo(String(o??""))}`).join("<br/>"):""}function jo(e){return e.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'")}const Pc=(e,n,o)=>{const r=o||"export";try{if(!e||!e.features||e.features.length===0)throw new Error("No data available to export");if(e.type!=="FeatureCollection")throw new Error("Invalid GeoJSON format");switch(n){case"csv":return wc(e,r),!0;case"geojson":return jc(e,r),!0;case"wkt":return kc(e,r),!0;case"kml":return Lc(e,r),!0;case"json":return Sc(e,r),!0;case"topojson":return Tc(e,r),!0;default:throw console.error(`Unsupported export format: ${n}`),new Error(`Unsupported export format: ${n}`)}}catch(i){throw console.error("Export error:",i),i}},_t=new Map;let Et=null,to=null,Lo=0;const ce=(e,n)=>{n?(n.id!==e&&(n.id=e),_t.set(e,n)):_t.has(e)&&_t.delete(e),Mc()},Mc=()=>{if(Et&&to){const e=Array.from(_t.values());Et.setProps({layers:[...e]}),to.triggerRepaint&&to.triggerRepaint()}},Fc=({map:e})=>{const n=g.useRef(!1);return g.useEffect(()=>{if(e)return Lo++,Et||(Et=new Gs.MapboxOverlay({interleaved:!0,layers:[]}),to=e,e.addControl(Et),n.current=!0),()=>{if(Lo--,Lo===0&&Et&&e){try{e.removeControl(Et)}catch{}Et=null,to=null,_t.clear(),n.current=!1}}},[e]),null},Fs=()=>Et,Is=()=>_t;async function zs(e){return null}const Ic=[{value:"csv",label:"CSV",description:"Comma-separated values with geometry info"},{value:"geojson",label:"GeoJSON",description:"Standard GeoJSON format"},{value:"wkt",label:"WKT",description:"Well-Known Text format"},{value:"kml",label:"KML",description:"Google Earth KML format"},{value:"json",label:"JSON",description:"Plain JSON format"},{value:"topojson",label:"TopoJSON",description:"TopoJSON format (simplified)"}],zc=[{value:"original",label:"Original Screen"},{value:"4:3",label:"4:3"},{value:"16:9",label:"16:9"}],Ec=[{value:1,label:"1x"},{value:2,label:"2x"}],Rc=({size:e=24,color:n="currentColor"})=>t.jsxs("svg",{viewBox:"0 0 24 24",width:e,height:e,fill:"none",stroke:n,strokeWidth:"1.5",children:[t.jsx("rect",{x:"3",y:"3",width:"18",height:"18",rx:"2"}),t.jsx("circle",{cx:"8.5",cy:"8.5",r:"1.5"}),t.jsx("path",{d:"M21 15l-5-5L5 21"})]}),Dc=({size:e=24,color:n="currentColor"})=>t.jsxs("svg",{viewBox:"0 0 24 24",width:e,height:e,fill:"none",stroke:n,strokeWidth:"1.5",children:[t.jsx("path",{d:"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"}),t.jsx("polyline",{points:"14 2 14 8 20 8"}),t.jsx("line",{x1:"16",y1:"13",x2:"8",y2:"13"}),t.jsx("line",{x1:"16",y1:"17",x2:"8",y2:"17"}),t.jsx("polyline",{points:"10 9 9 9 8 9"})]}),Ac=({size:e=24,color:n="currentColor"})=>t.jsxs("svg",{viewBox:"0 0 24 24",width:e,height:e,fill:"none",stroke:n,strokeWidth:"1.5",children:[t.jsx("polygon",{points:"1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"}),t.jsx("line",{x1:"8",y1:"2",x2:"8",y2:"18"}),t.jsx("line",{x1:"16",y1:"6",x2:"16",y2:"22"})]}),Bc=({size:e=24,color:n="currentColor"})=>t.jsxs("svg",{viewBox:"0 0 24 24",width:e,height:e,fill:"none",stroke:n,strokeWidth:"1.5",children:[t.jsx("path",{d:"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"}),t.jsx("polyline",{points:"14 2 14 8 20 8"}),t.jsx("path",{d:"M9 15h6"}),t.jsx("path",{d:"M9 11h6"}),t.jsx("path",{d:"M9 19h4"})]}),ho=async(e,n={})=>{if(!e)return null;try{const o=e.getCanvas();if(!o)return null;const r=n.width||o.width,i=n.height||o.height,a=(p,P,M,R)=>{const L=p.getContext("webgl")||p.getContext("webgl2");if(!L)return!1;try{const F=new Uint8Array(p.width*p.height*4);L.readPixels(0,0,p.width,p.height,L.RGBA,L.UNSIGNED_BYTE,F);let C=!1;for(let w=0;w<Math.min(F.length,1e4);w+=100)if(F[w]>0||F[w+1]>0||F[w+2]>0||F[w+3]>0){C=!0;break}if(!C)return!1;const j=document.createElement("canvas");j.width=p.width,j.height=p.height;const z=j.getContext("2d");if(!z)return!1;const b=z.createImageData(p.width,p.height);for(let w=0;w<p.height;w++)for(let v=0;v<p.width;v++){const k=((p.height-w-1)*p.width+v)*4,I=(w*p.width+v)*4;b.data[I]=F[k],b.data[I+1]=F[k+1],b.data[I+2]=F[k+2],b.data[I+3]=F[k+3]}return z.putImageData(b,0,0),P.drawImage(j,0,0,M,R),!0}catch(F){return console.log("WebGL readPixels failed:",F),!1}},l=(p,P,M,R)=>{try{return P.drawImage(p,0,0,M,R),!0}catch(L){return console.log("drawImage failed:",L),!1}},x=(p,P,M,R)=>{if(l(p,P,M,R))try{const L=P.getImageData(0,0,Math.min(100,M),Math.min(100,R));let F=!1;for(let C=0;C<L.data.length;C+=4)if(L.data[C+3]>0){F=!0;break}if(F)return!0}catch{}if(a(p,P,M,R))return!0;try{const L=p.toDataURL("image/png");if(L&&L.length>100){const F=new Image;return F.src=L,P.drawImage(p,0,0,M,R),!0}}catch{}return!1},d=document.createElement("canvas");d.width=r,d.height=i;const h=d.getContext("2d",{willReadFrequently:!0});if(!h)return null;h.fillStyle="#ffffff",h.fillRect(0,0,r,i),e.isMoving()&&await Promise.race([new Promise(p=>e.once("idle",p)),new Promise(p=>setTimeout(p,2e3))]);const y=Fs(),c=Is(),f=c&&c.size>0;if(f&&y)try{const p=y._deck;p&&typeof p.redraw=="function"&&p.redraw(!0)}catch{}e.triggerRepaint(),await new Promise(p=>{let P=0;const M=f?2:1,R=()=>{P++,P>=M&&(e.off("render",R),p())};e.on("render",R),e.triggerRepaint(),setTimeout(()=>{e.off("render",R),p()},500)}),await new Promise(p=>setTimeout(p,100));let m=o.parentElement;for(;m&&m.parentElement;){const p=m.parentElement;if(p===document.body||p.tagName==="BODY")break;if(p.contains(o))m=p;else break}const T=[];T.push(o),m&&m.querySelectorAll("canvas").forEach(P=>{const M=P;if(M!==o&&M.width>0&&M.height>0){const R=window.getComputedStyle(M);R.display!=="none"&&R.visibility!=="hidden"&&T.push(M)}});let S=!1;for(let p=0;p<T.length;p++){const P=T[p];p===0?(x(P,h,r,i)||await new Promise(R=>{let L=!1;const F=()=>{L||(L=!0,x(P,h,r,i),R())};e.once("render",F),e.triggerRepaint(),setTimeout(()=>{L||(L=!0,e.off("render",F),R())},1e3)}),S=!0):(h.globalCompositeOperation="source-over",x(P,h,r,i)&&(S=!0))}if(!S)try{const p=document.createElement("canvas");p.width=r,p.height=i;const P=p.getContext("2d");return P?(P.fillStyle="#ffffff",P.fillRect(0,0,r,i),P.drawImage(o,0,0,r,i),p.toDataURL("image/png")):o.toDataURL("image/png")}catch(p){return console.log("Direct toDataURL failed:",p),null}return d.toDataURL("image/png")}catch(o){return console.error("Export error:",o),null}},Oo=e=>{const n=e.toLowerCase();if(n.includes("state"))return"#dc2626";if(n.includes("district"))return"#6b7280";if(n.includes("taluka")||n.includes("sub-district")||n.includes("tehsil"))return"#9ca3af";if(n.includes("village"))return"#d1d5db";const o=["#3b82f6","#22c55e","#8b5cf6","#06b6d4","#f97316","#ec4899"];let r=0;for(let i=0;i<e.length;i++)r=(r<<5)-r+e.charCodeAt(i);return o[Math.abs(r)%o.length]},Nc=async(e,n,o,r,i)=>{const m=Math.min(r.length+i.length,12),T=280,S=26+m*26+24,p=14,P=o-S-14,M={};for(const j of i)if(!(j.url!=="wms"||!j.layer))try{const z=await zs(j);if(!z)continue;const b=await new Promise((w,v)=>{const k=new Image;k.crossOrigin="anonymous",k.onload=()=>w(k),k.onerror=v,k.src=z});M[j.id]=b}catch{}const R=6;e.beginPath(),e.moveTo(p+R,P),e.lineTo(p+T-R,P),e.quadraticCurveTo(p+T,P,p+T,P+R),e.lineTo(p+T,P+S-R),e.quadraticCurveTo(p+T,P+S,p+T-R,P+S),e.lineTo(p+R,P+S),e.quadraticCurveTo(p,P+S,p,P+S-R),e.lineTo(p,P+R),e.quadraticCurveTo(p,P,p+R,P),e.closePath(),e.fillStyle="rgba(255, 255, 255, 0.96)",e.fill(),e.strokeStyle="#b4b4b4",e.lineWidth=1,e.stroke(),e.fillStyle="#1a1a1a",e.font="bold 14px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",e.textBaseline="middle",e.fillText("Legend",p+T/2,P+26/2),e.textBaseline="alphabetic";const L=P+26+12;let F=0;const C=(j,z,b)=>{if(F>=12)return;b(),e.fillStyle="#374151",e.font="12px -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif";const w=z.length>28?z.substring(0,26)+"…":z;e.fillText(w,p+12+16+8,j+26/2+2),F++};r.slice(0,12).forEach(j=>{const z=L+F*26;C(z,j.name,()=>{e.fillStyle=j.color||"#9333ea",e.fillRect(p+12,z+10/2,16,14)})}),i.forEach(j=>{if(F>=12)return;const z=L+F*26,b=M[j.id];if(b)try{e.drawImage(b,p+12,z+2/2,100,24)}catch{e.fillStyle=Oo(j.name),e.fillRect(p+12,z+10/2,16,14)}else e.fillStyle=Oo(j.name),e.fillRect(p+12,z+10/2,16,14);e.fillStyle="#374151",e.font="12px -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif";const w=j.name.length>28?j.name.substring(0,26)+"…":j.name;e.fillText(w,p+12+100+8,z+26/2+2),F++})},Si=(e,n)=>{if(n==="original")return e;const[o,r]=n.split(":").map(Number),i=o/r,a=e.width/e.height;let l=e.width,x=e.height,d=0,h=0;a>i?(l=Math.round(e.height*i),d=Math.round((e.width-l)/2)):(x=Math.round(e.width/i),h=Math.round((e.height-x)/2));const y=document.createElement("canvas");y.width=l,y.height=x;const c=y.getContext("2d");return c?(c.drawImage(e,d,h,l,x,0,0,l,x),y):e},Oc=({opened:e,onClose:n})=>{const o=de.use.map(),r=de.use.uploadedDatasets(),i=de.use.visibleLayers(),{layerConfigs:a,getLayerConfig:l}=oo(),x=pt.use.widgets(),[d,h]=g.useState("image"),[y,c]=g.useState(null),[f,u]=g.useState(null),[m,T]=g.useState("html"),[S,p]=g.useState("original"),[P,M]=g.useState(1),[R,L]=g.useState(!1),[F,C]=g.useState(null),[j,z]=g.useState(!1),[b,w]=g.useState(!1),[v,k]=g.useState("read"),[I,D]=g.useState(""),[B,O]=g.useState(!0),[N,$]=g.useState(!0),[_,U]=g.useState(!0),[H,q]=g.useState("Map Report"),[ae,xe]=g.useState(null),[ie,Me]=g.useState(!1),we=r.filter(A=>A.geojson&&A.geojson.features&&A.geojson.features.length>0),me=we.map(A=>{var ee,oe;return{value:A.id,label:`${A.name} (${((oe=(ee=A.geojson)==null?void 0:ee.features)==null?void 0:oe.length)||0} features)`}}),Ie=g.useCallback(async()=>{if(!(!o||!e||d!=="image")){z(!0),C(null);try{o.loaded()||await Promise.race([new Promise(ee=>o.once("load",()=>ee())),new Promise(ee=>setTimeout(ee,2e3))]),o.isMoving()&&await Promise.race([new Promise(ee=>o.once("idle",()=>ee())),new Promise(ee=>setTimeout(ee,1e3))]),await new Promise(ee=>setTimeout(ee,300));const A=await ho(o,{dpi:72});if(A)if(S!=="original"){const ee=new Image;ee.onload=()=>{const oe=Si((()=>{const te=document.createElement("canvas");te.width=ee.width,te.height=ee.height;const le=te.getContext("2d");return le==null||le.drawImage(ee,0,0),te})(),S);C(oe.toDataURL("image/png",.8)),z(!1)},ee.onerror=()=>{C(A),z(!1)},ee.src=A}else C(A),z(!1);else z(!1)}catch(A){console.error("Preview capture error:",A),z(!1)}}},[o,e,d,S]);g.useEffect(()=>{e||(c(null),u(null),w(!1),h("image"),C(null),p("original"),M(1),L(!1),D(""),O(!0),$(!0),U(!0),q("Map Report"),xe(null))},[e]);const be=g.useCallback(async()=>{if(!(!o||!e||d!=="pdf")){Me(!0),xe(null);try{o.loaded()||await Promise.race([new Promise(ee=>o.once("load",()=>ee())),new Promise(ee=>setTimeout(ee,2e3))]),o.isMoving()&&await Promise.race([new Promise(ee=>o.once("idle",()=>ee())),new Promise(ee=>setTimeout(ee,1e3))]),await new Promise(ee=>setTimeout(ee,300));const A=await ho(o,{dpi:72});A&&xe(A)}catch(A){console.error("PDF Preview capture error:",A)}finally{Me(!1)}}},[o,e,d]);g.useEffect(()=>{e&&d==="pdf"&&be()},[e,d,be]);const je=g.useMemo(()=>x.map(A=>{const ee=r.find(oe=>oe.id===A.datasetId);return{id:A.id,name:A.name,type:A.type,operation:A.operation,column:A.column,dataSourceName:(ee==null?void 0:ee.name)||"Unknown"}}),[x,r]),ue=g.useMemo(()=>{const A=r.map(oe=>({id:oe.id,name:oe.name,color:oe.color||"#9333ea"})),ee=i.map(oe=>({id:oe.id,name:oe.name,color:Oo(oe.name)}));return[...A,...ee]},[r,i]),Xe=(A,ee,oe,te,le,Fe,he)=>{if(ee.length===0)return te;const G=Math.max(...ee.map(ke=>ke.value),1),fe=Math.min(12,(Fe-20)/ee.length),ne=3,pe=40,Ee=le-pe-30;return A.setFontSize(10),A.setFont("helvetica","bold"),A.setTextColor(51,51,51),A.text(he,oe,te),te+=8,ee.slice(0,8).forEach((ke,V)=>{const W=ke.value/G*Ee,X=te+V*(fe+ne);A.setFontSize(8),A.setFont("helvetica","normal"),A.setTextColor(85,85,85);const K=ke.label.length>12?ke.label.substring(0,10)+"..":ke.label;A.text(K,oe,X+fe/2+1);const ge=ke.color||"#3b82f6",Re=parseInt(ge.slice(1,3),16),ye=parseInt(ge.slice(3,5),16),Se=parseInt(ge.slice(5,7),16);A.setFillColor(Re,ye,Se),A.rect(oe+pe,X,Math.max(W,1),fe-1,"F"),A.setFontSize(7),A.setTextColor(100,100,100),A.text(String(ke.value),oe+pe+W+3,X+fe/2+1)}),ee.length>8&&(A.setFontSize(7),A.setTextColor(128,128,128),A.text(`+${ee.length-8} more`,oe,te+8*(fe+ne)+5)),te+Math.min(ee.length,8)*(fe+ne)+10},Ve=(A,ee,oe,te,le,Fe,he)=>{if(ee.length===0)return te;const G=Math.max(...ee.map(X=>X.count),1),fe=Math.min(Fe-25,45),ne=ee.length,pe=ne>50?0:1,Ee=le-10,ke=Math.max((Ee-(ne-1)*pe)/ne,1);A.setFontSize(10),A.setFont("helvetica","bold"),A.setTextColor(51,51,51),A.text(he,oe,te),te+=5,A.setFontSize(7),A.setFont("helvetica","normal"),A.setTextColor(128,128,128),A.text("All selected",oe,te+5),te+=10;const V=te+fe;if(ee.forEach((X,K)=>{const ge=G>0?X.count/G*fe:0,Re=oe+K*(ke+pe),ye=V-ge;ge>0&&(A.setFillColor(241,135,28),A.rect(Re,ye,ke,ge,"F"))}),te=V+3,A.setFontSize(7),A.setTextColor(128,128,128),ee.length>0){const X=ge=>ge>=1e3?(ge/1e3).toFixed(1)+"K":ge>=100?ge.toFixed(0):ge.toFixed(1);A.text(X(ee[0].min),oe,te);const K=X(ee[ee.length-1].max);A.text(K,oe+le-A.getTextWidth(K)-5,te)}A.setFontSize(7),A.setTextColor(128,128,128);const W=G>=1e3?(G/1e3).toFixed(1)+"K":String(G);return A.text(W,oe+le-A.getTextWidth(W),V-fe+5),te+8},Qe=(A,ee,oe,te,le,Fe,he,G=10)=>{if(oe.length===0)return le;const fe=Fe/ee.length,ne=8;return A.setFillColor(248,249,250),A.rect(te,le-4,Fe,ne,"F"),A.setFontSize(8),A.setFont("helvetica","bold"),A.setTextColor(51,51,51),ee.forEach((pe,Ee)=>{const ke=Math.floor(fe/2.5),V=pe.length>ke?pe.substring(0,ke-2)+"..":pe;A.text(V,te+Ee*fe+2,le)}),le+=ne,A.setFont("helvetica","normal"),A.setTextColor(85,85,85),oe.slice(0,G).forEach((pe,Ee)=>{Ee%2===0?A.setFillColor(255,255,255):A.setFillColor(250,250,250),A.rect(te,le-4,Fe,ne,"F"),pe.forEach((ke,V)=>{const W=Math.floor(fe/2.5),X=String(ke).length>W?String(ke).substring(0,W-2)+"..":String(ke);A.text(X,te+V*fe+2,le)}),le+=ne}),oe.length>G&&(A.setFontSize(7),A.setTextColor(128,128,128),A.text(`... and ${oe.length-G} more rows`,te,le+3),le+=8),le+5},He=(A,ee,oe,te,le,Fe,he,G,fe,ne,pe,Ee,ke)=>{if(oe.length===0)return;const V=Fe/ee.length,W=7,X=Math.floor((G-le-fe-20)/W);let K=le,ge=0,Re=1;const ye=Math.ceil(oe.length/X);he&&(A.setFontSize(11),A.setFont("helvetica","bold"),A.setTextColor(51,51,51),A.text(he,te,K),K+=6,A.setFontSize(9),A.setFont("helvetica","normal"),A.setTextColor(128,128,128),A.text(`Total: ${oe.length} rows`,te+A.getTextWidth(he)+10,K-6));const Se=()=>{A.setFillColor(241,135,28),A.rect(te,K,Fe,W+2,"F"),A.setFontSize(7),A.setFont("helvetica","bold"),A.setTextColor(255,255,255),ee.forEach((Te,_e)=>{const qe=Math.floor(V/2.2),Be=Te.length>qe?Te.substring(0,qe-2)+"..":Te;A.text(Be,te+_e*V+2,K+5)}),K+=W+2};for(Se(),A.setFont("helvetica","normal");ge<oe.length;){K+W>G-fe-10&&(A.setFontSize(7),A.setTextColor(128,128,128),A.text(`Page ${Re} of ${ye} | Rows ${ge-X+1}-${ge} of ${oe.length}`,te,K+5),Ee(),A.addPage(),Re++,pe(`${ke} - Data Table (continued)`,A.getNumberOfPages()),K=ne+10,Se());const Te=oe[ge];ge%2===0?A.setFillColor(255,255,255):A.setFillColor(248,249,250),A.rect(te,K-1,Fe,W,"F"),A.setFontSize(7),A.setTextColor(51,51,51),Te.forEach((_e,qe)=>{const Be=Math.floor(V/2.2),Oe=String(_e).length>Be?String(_e).substring(0,Be-2)+"..":String(_e);A.text(Oe,te+qe*V+2,K+4)}),K+=W,ge++}A.setFontSize(7),A.setTextColor(128,128,128);const $e=(Re-1)*X+1;return A.text(`Page ${Re} of ${ye} | Rows ${$e}-${oe.length} of ${oe.length}`,te,K+5),K},xt=(A,ee,oe,te,le,Fe)=>{if(ee.length===0)return te;const he=ee.reduce((Be,Oe)=>Be+Oe.value,0);if(he===0)return te;const G=["#3b82f6","#10b981","#f59e0b","#ef4444","#8b5cf6","#06b6d4","#f97316","#ec4899","#84cc16","#9ca3af"];A.setFontSize(10),A.setFont("helvetica","bold"),A.setTextColor(51,51,51),A.text(Fe,oe,te+8);const fe=7,ne=ee.slice(0,fe),pe=ne.reduce((Be,Oe)=>Be+Oe.value,0),Ee=he-pe,ke=[...ne];Ee>0&&ee.length>fe&&ke.push({label:`Others (${ee.length-fe})`,value:Ee,isOthers:!0});const V=18,W=oe+V+5,X=te+35;let K=-90;ke.forEach((Be,Oe)=>{const Ke=Be.value/he*100/100*360;if(Ke<.5)return;const rt=Be.isOthers?"#9ca3af":G[Oe%G.length],ot=parseInt(rt.slice(1,3),16),nt=parseInt(rt.slice(3,5),16),lt=parseInt(rt.slice(5,7),16);A.setFillColor(ot,nt,lt);const vt=Math.max(Math.ceil(Ke/10),2),kt=Ke/vt;for(let wt=0;wt<vt;wt++){const re=(K+wt*kt)*Math.PI/180,Ae=(K+(wt+1)*kt)*Math.PI/180,Ne=W+V*Math.cos(re),se=X+V*Math.sin(re),Ge=W+V*Math.cos(Ae),E=X+V*Math.sin(Ae);A.triangle(W,X,Ne,se,Ge,E,"F")}K+=Ke});const ge=V*.45;A.setFillColor(255,255,255),A.circle(W,X,ge,"F"),A.setTextColor(120,120,120),A.setFont("helvetica","normal"),A.setFontSize(7);const Re="Total",ye=A.getTextWidth(Re);A.text(Re,W-ye/2,X-2),A.setTextColor(55,65,81),A.setFont("helvetica","bold"),A.setFontSize(9);const Se=he.toLocaleString(),$e=A.getTextWidth(Se);A.text(Se,W-$e/2,X+4);let Te=te+14;const _e=oe+V*2+15,qe=le-V*2-20;return ke.forEach((Be,Oe)=>{const Pe=(Be.value/he*100).toFixed(1),Ke=Be.isOthers?"#9ca3af":G[Oe%G.length],rt=parseInt(Ke.slice(1,3),16),ot=parseInt(Ke.slice(3,5),16),nt=parseInt(Ke.slice(5,7),16);A.setFillColor(rt,ot,nt),A.circle(_e,Te-1,2,"F"),A.setFontSize(7),A.setTextColor(85,85,85);const lt=Math.floor(qe/2.5),vt=Be.label.length>lt?Be.label.substring(0,lt-2)+"..":Be.label;A.text(vt,_e+5,Te),A.setTextColor(128,128,128);const kt=`${Pe}%`;A.text(kt,_e+qe-A.getTextWidth(kt)-5,Te),Te+=7}),Math.max(te+V*2+25,Te+5)},Le=async A=>{try{const oe=no().find(le=>le.id===A.datasetId);if(!oe)return console.log("PDF Export: No data source found for widget",A.name),null;let te;if(oe.type==="geojson"?te=oe.geojson:oe.type==="wms"&&(te=await qt(oe)),!te||!te.features||te.features.length===0)return console.log("PDF Export: No geojson data for widget",A.name),null;switch(console.log("PDF Export: Processing widget",A.name,"type:",A.type),A.type){case"formula":{const le=Ps(te,A.operation,A.column);return{type:"formula",value:eo(le,A.format||"auto"),operation:A.operation,column:A.column}}case"category":case"pie":{if(!A.categoryField)return console.log("PDF Export: No categoryField for widget",A.name),null;const le=Jo(te,A.categoryField);return{type:A.type,data:le.map(Fe=>({label:String(Fe.category),value:Fe.count}))}}case"histogram":{if(!A.histogramField)return console.log("PDF Export: No histogramField for widget",A.name),null;const le=Ms(te,A.histogramField,A.bins||30,A.histogramMin,A.histogramMax);return console.log("PDF Export: Histogram distribution for",A.name,"has",le.length,"bins"),{type:"histogram",data:le,field:A.histogramField}}case"table":{const le=A.tableColumns||$t(te).slice(0,8);if(le.length===0)return console.log("PDF Export: No columns for table widget",A.name),null;const Fe=te.features.map(he=>le.map(G=>{var ne;const fe=(ne=he.properties)==null?void 0:ne[G];return fe!=null?String(fe):"-"}));return{type:"table",headers:le,rows:Fe,totalRows:te.features.length}}case"range":{if(!A.rangeField)return null;const le=te.features.map(G=>{var fe;return(fe=G.properties)==null?void 0:fe[A.rangeField]}).filter(G=>G!=null&&!isNaN(Number(G))).map(Number);if(le.length===0)return null;const Fe=Math.min(...le),he=Math.max(...le);return{type:"range",min:Fe,max:he,field:A.rangeField,currentMin:A.rangeMin??Fe,currentMax:A.rangeMax??he}}case"timeSeries":return A.timeField?{type:"timeSeries",field:A.timeField,interval:A.timeInterval||"month"}:null;default:return null}}catch(ee){return console.error("PDF Export: Error getting widget data for",A.name,ee),null}},Je=async()=>{var A,ee,oe,te,le;if(!o){alert("Map not available");return}w(!0);try{o.loaded()||await Promise.race([new Promise(re=>o.once("load",()=>re())),new Promise(re=>setTimeout(re,2e3))]),o.isMoving()&&await Promise.race([new Promise(re=>o.once("idle",()=>re())),new Promise(re=>setTimeout(re,2e3))]),await new Promise(re=>setTimeout(re,300));const Fe=await ho(o,{dpi:200});if(!Fe)throw new Error("Failed to capture map. Please try again.");const he={};if(B&&i.length>0){for(const re of i)if(!(re.url!=="wms"||!re.layer))try{const Ae=await zs(re);if(!Ae)continue;const se=await(await fetch(Ae)).blob(),Ge=await new Promise((E,Y)=>{const Q=new FileReader;Q.onload=()=>E(Q.result),Q.onerror=Y,Q.readAsDataURL(se)});he[re.id]=Ge}catch{}}const G=new Oi({orientation:"landscape",unit:"mm",format:"a4"}),fe=G.internal.pageSize.getWidth(),ne=G.internal.pageSize.getHeight(),pe=6,Ee=fe-pe*2,ke=18,V=10,W=new Date().toLocaleDateString("en-US",{year:"numeric",month:"long",day:"numeric"}),X=(re,Ae)=>{G.setFillColor(241,135,28),G.rect(0,0,fe,ke,"F"),G.setTextColor(255,255,255),G.setFontSize(14),G.setFont("helvetica","bold"),G.text(re,pe,12),G.setFontSize(9),G.setFont("helvetica","normal");const Ne=Ae?`${W} | Page ${Ae}`:W;G.text(Ne,fe-pe-G.getTextWidth(Ne),12)},K=()=>{G.setFillColor(248,249,250),G.rect(0,ne-V,fe,V,"F"),G.setFontSize(8),G.setTextColor(128,128,128),G.text(`Generated on ${new Date().toLocaleString()}`,pe,ne-4),G.text("UGI Map Platform",fe-pe-G.getTextWidth("UGI Map Platform"),ne-4)},ge=new Map;for(const re of x){const Ae=await Le(re);Ae&&ge.set(re.id,{widget:re,data:Ae})}const Re=x.filter(re=>re.type==="formula"&&ge.has(re.id)),ye=x.filter(re=>["category","pie","histogram","timeSeries"].includes(re.type)&&ge.has(re.id)),Se=x.filter(re=>re.type==="table"&&ge.has(re.id)),$e=[...Re,...ye];console.log("PDF Export: Widgets found -",{formula:Re.length,chart:ye.length,table:Se.length,total:x.length}),X(H,1);let Te=ke+1;const _e=new Image;_e.src=Fe,await new Promise(re=>{_e.onload=()=>re(),_e.onerror=()=>re()});const qe=_e.width/_e.height,Be=ne-Te-V,Oe=Ee,Pe=Oe/qe,Ke=Be,rt=Ke*qe;let ot,nt;if(Pe<=Be)ot=Oe,nt=Pe;else if(rt<=Ee)ot=rt,nt=Ke;else{const re=Oe*Math.min(Pe,Be),Ae=Math.min(rt,Ee)*Ke;re>=Ae?(nt=Be,ot=nt*qe):(ot=Ee,nt=ot/qe)}const lt=pe+(Ee-ot)/2;G.addImage(Fe,"PNG",lt,Te,ot,nt),Te+=nt+8;const vt=_?15:0,kt=ne-Te-V-vt-10;if(B&&ue.length>0){const re=Math.min(ue.length,15),Ne=re>0&&ue.slice(0,re).some(Q=>he[Q.id])?14:12,se=10,Ge=14,E=Ee,Y=Ge+re*Ne+se*2+4;if(Te+Y>ne-V-vt-10){K(),G.addPage(),X(`${H} - Legend`,G.getNumberOfPages());const Q=ke+5,J=pe,Z=Q;G.setFillColor(255,255,255),G.setDrawColor(180,180,180),G.roundedRect(J,Z,E,Y,3,3,"FD"),G.setFontSize(11),G.setFont("helvetica","bold"),G.setTextColor(51,51,51),G.text("Legend",J+se,Z+Ge),G.setFontSize(9),G.setFont("helvetica","normal");const De=28,Ce=10,Ye=Z+Ge+se,Ze=6;ue.slice(0,re).forEach((it,We)=>{const ct=Ye+We*Ne,dt=he[it.id],ft=ct+Ne/2;if(dt)try{const ht=ft-Ce/2;G.addImage(dt,"PNG",J+se,ht,De,Ce)}catch{const Lt=it.color||"#9333ea",It=parseInt(Lt.slice(1,3),16),Tt=parseInt(Lt.slice(3,5),16),yt=parseInt(Lt.slice(5,7),16);G.setFillColor(It,Tt,yt);const zt=10,io=ft-zt/2;G.rect(J+se,io,zt,zt,"F")}else{const ht=it.color||"#9333ea",Lt=parseInt(ht.slice(1,3),16),It=parseInt(ht.slice(3,5),16),Tt=parseInt(ht.slice(5,7),16);G.setFillColor(Lt,It,Tt);const yt=10,zt=ft-yt/2;G.rect(J+se,zt,yt,yt,"F")}G.setTextColor(85,85,85);const Ft=dt?De:10,gt=E-se*2-Ft-Ze-4;let tt=it.name;if(G.getTextWidth(tt)>gt){for(;G.getTextWidth(tt+"…")>gt&&tt.length>0;)tt=tt.substring(0,tt.length-1);tt=tt+"…"}G.text(tt,J+se+Ft+Ze,ft+2)}),ue.length>re&&(G.setTextColor(128,128,128),G.setFontSize(8),G.text(`+${ue.length-re} more...`,J+se,Z+Y-4)),K(),G.setPage(1)}else{const Q=pe,J=Te;G.setFillColor(255,255,255),G.setDrawColor(180,180,180),G.roundedRect(Q,J,E,Y,3,3,"FD"),G.setFontSize(11),G.setFont("helvetica","bold"),G.setTextColor(51,51,51),G.text("Legend",Q+se,J+Ge),G.setFontSize(9),G.setFont("helvetica","normal");const Z=28,De=10,Ce=J+Ge+se,Ye=6;ue.slice(0,re).forEach((Ze,it)=>{const We=Ce+it*Ne,ct=he[Ze.id],dt=We+Ne/2;if(ct)try{const tt=dt-De/2;G.addImage(ct,"PNG",Q+se,tt,Z,De)}catch{const ht=Ze.color||"#9333ea",Lt=parseInt(ht.slice(1,3),16),It=parseInt(ht.slice(3,5),16),Tt=parseInt(ht.slice(5,7),16);G.setFillColor(Lt,It,Tt);const yt=10,zt=dt-yt/2;G.rect(Q+se,zt,yt,yt,"F")}else{const tt=Ze.color||"#9333ea",ht=parseInt(tt.slice(1,3),16),Lt=parseInt(tt.slice(3,5),16),It=parseInt(tt.slice(5,7),16);G.setFillColor(ht,Lt,It);const Tt=10,yt=dt-Tt/2;G.rect(Q+se,yt,Tt,Tt,"F")}G.setTextColor(85,85,85);const ft=ct?Z:10,Ft=E-se*2-ft-Ye-4;let gt=Ze.name;if(G.getTextWidth(gt)>Ft){for(;G.getTextWidth(gt+"…")>Ft&>.length>0;)gt=gt.substring(0,gt.length-1);gt=gt+"…"}G.text(gt,Q+se+ft+Ye,dt+2)}),ue.length>re&&(G.setTextColor(128,128,128),G.setFontSize(8),G.text(`+${ue.length-re} more...`,Q+se,J+Y-4)),Te+=Y+6}}else Te+=6;if(_){G.setPage(1);let re=Te;const Ae=I.trim()?25:0,Ne=ne-V-Ae-12;re>Ne&&(re=Ne),G.setFontSize(10),G.setFont("helvetica","bold"),G.setTextColor(41,50,60),G.text("Map Description",pe,re),re+=5,G.setFont("helvetica","normal"),G.setFontSize(9),G.setTextColor(85,85,85);const se=o.getCenter(),Ge=o.getZoom(),E=`Center: ${se.lng.toFixed(4)}°, ${se.lat.toFixed(4)}° | Zoom: ${Ge.toFixed(1)} | Datasets: ${r.length} | Visible Layers: ${i.length}`;G.text(E,pe,re),Te=re+8}if(I.trim()){G.setPage(1);let re=Te;const Ae=ne-V-15;re>Ae&&(re=Ae),G.setFontSize(10),G.setFont("helvetica","bold"),G.setTextColor(41,50,60),G.text("Comments",pe,re),re+=5,G.setFont("helvetica","normal"),G.setFontSize(9),G.setTextColor(85,85,85);const Ne=Ee,se=G.splitTextToSize(I,Ne),Ge=Math.min(se.length,3);se.slice(0,Ge).forEach((E,Y)=>{G.text(E,pe,re+Y*4.5)}),se.length>Ge&&G.text("...",pe+G.getTextWidth(se[Ge-1])+2,re+(Ge-1)*4.5)}if(G.setPage(1),K(),K(),N&&$e.length>0){G.addPage(),X(`${H} - Widgets & Charts`,2);let re=ke+8;const Ae=(Ee-10)/2;let Ne=0,se=re,Ge=0;const E=Y=>{switch(Y){case"formula":return 40;case"category":return 75;case"pie":return 75;case"histogram":return 80;case"range":return 45;case"timeSeries":return 45;default:return 60}};for(let Y=0;Y<$e.length;Y++){const Q=$e[Y],J=ge.get(Q.id);if(!J)continue;const Z=J.data,De=E(Q.type);Ne===0&&se+De>ne-V-10&&(K(),G.addPage(),X(`${H} - Widgets & Charts (continued)`,G.getNumberOfPages()),se=ke+8,re=se,Ge=0);const Ce=Ne===0?pe:pe+Ae+10;switch(G.setFillColor(255,255,255),G.setDrawColor(220,220,220),G.roundedRect(Ce,se,Ae,De,3,3,"FD"),Z.type){case"formula":{G.setFontSize(10),G.setFont("helvetica","bold"),G.setTextColor(51,51,51),G.text(Q.name,Ce+8,se+14),G.setFontSize(22),G.setFont("helvetica","bold"),G.setTextColor(241,135,28),G.text(String(Z.value),Ce+8,se+32);break}case"category":{Xe(G,Z.data,Ce+5,se+5,Ae-10,De-10,Q.name);break}case"pie":{xt(G,Z.data,Ce+5,se+5,Ae-10,Q.name);break}case"histogram":{Ve(G,Z.data,Ce+5,se+5,Ae-10,De-10,Q.name);break}case"range":{G.setFontSize(10),G.setFont("helvetica","bold"),G.setTextColor(51,51,51),G.text(Q.name,Ce+8,se+14);const Ye=se+24,Ze=Ae-20;G.setFillColor(229,231,235),G.rect(Ce+8,Ye,Ze,6,"F");const it=Z.max-Z.min,We=it>0?(Z.currentMin-Z.min)/it*Ze:0,ct=it>0?(Z.currentMax-Z.currentMin)/it*Ze:Ze;G.setFillColor(241,135,28),G.rect(Ce+8+We,Ye,ct,6,"F"),G.setFontSize(8),G.setTextColor(128,128,128),G.text(String(Z.min.toFixed(1)),Ce+8,se+40);const dt=String(Z.max.toFixed(1));G.text(dt,Ce+Ae-8-G.getTextWidth(dt),se+40);break}case"timeSeries":{G.setFontSize(10),G.setFont("helvetica","bold"),G.setTextColor(51,51,51),G.text(Q.name,Ce+8,se+14),G.setFontSize(9),G.setFont("helvetica","normal"),G.setTextColor(128,128,128),G.text(`Time field: ${Z.field}`,Ce+8,se+26),G.text(`Interval: ${Z.interval}`,Ce+8,se+36);break}}Ge=Math.max(Ge,De),Ne++,Ne>=2&&(Ne=0,se+=Ge+8,Ge=0)}K()}if(r.length>0){G.addPage(),X(`${H} - Datasets Summary`,G.getNumberOfPages());let re=ke+10;G.setFontSize(11),G.setFont("helvetica","bold"),G.setTextColor(51,51,51),G.text("Available Datasets",pe,re),re+=8;const Ae=["Dataset Name","Type","Features","Properties"],Ne=[];for(const se of r.slice(0,15)){const Ge=((ee=(A=se.geojson)==null?void 0:A.features)==null?void 0:ee.length)||0,E=(le=(te=(oe=se.geojson)==null?void 0:oe.features)==null?void 0:te[0])!=null&&le.properties?Object.keys(se.geojson.features[0].properties).length:0;Ne.push([se.name.length>30?se.name.substring(0,28)+"...":se.name,se.type||"GeoJSON",String(Ge),String(E)])}if(Ne.length>0&&(re=Qe(G,Ae,Ne,pe,re,Ee,"",15)),i.length>0){re+=15,G.setFontSize(11),G.setFont("helvetica","bold"),G.setTextColor(51,51,51),G.text("Visible Layers",pe,re),re+=8;const se=["Layer Name","Type","Dataset"],Ge=[];for(const E of i.slice(0,10))Ge.push([E.name.length>25?E.name.substring(0,23)+"...":E.name,E.type||"-",(E.datasetId||"-").substring(0,20)]);Ge.length>0&&Qe(G,se,Ge,pe,re,Ee,"",10)}K()}if(N&&Se.length>0)for(const re of Se){const Ae=ge.get(re.id);if(!Ae)continue;const Ne=Ae.data;if(Ne.type!=="table"||Ne.rows.length===0)continue;G.addPage(),X(`${H} - Data Table`,G.getNumberOfPages());const se=ke+10;He(G,Ne.headers,Ne.rows,pe,se,Ee,`${re.name}`,ne,V,ke,X,K,H),K()}const wt=`${H.replace(/[^a-zA-Z0-9]/g,"_")}-Report-${Date.now()}.pdf`;G.save(wt),console.log(`PDF Export: Saved ${G.getNumberOfPages()} page(s) as ${wt}`),setTimeout(()=>{w(!1),n()},500)}catch(Fe){console.error("PDF export error:",Fe),alert(`Failed to export PDF: ${Fe instanceof Error?Fe.message:"Unknown error"}`),w(!1)}};g.useEffect(()=>{e&&d==="image"&&Ie()},[e,d,S,Ie]);const St=()=>{if(!y||!f){alert("Please select both a dataset and an export format");return}const A=we.find(ee=>ee.id===y);if(!A||!A.geojson){alert("Selected dataset not found or has no data");return}w(!0);try{const ee=de.getState().attributeTableFilteredFeatures[y],oe=ee?{type:"FeatureCollection",features:ee}:A.geojson;if(!oe.features||oe.features.length===0){alert("No data available to export. The selected dataset is empty."),w(!1);return}if(oe.type!=="FeatureCollection"){alert("Invalid data format. Cannot export."),w(!1);return}console.log("Starting export:",{format:f,dataset:A.name,featureCount:oe.features.length}),Pc(oe,f,A.name),console.log("Export function completed successfully"),setTimeout(()=>{w(!1),n()},300)}catch(ee){console.error("Export error:",ee),alert(`Failed to export data: ${ee instanceof Error?ee.message:"Unknown error"}`),w(!1)}},bt=async()=>{if(!o){alert("Map not available");return}w(!0);try{o.loaded()||await Promise.race([new Promise(he=>o.once("load",()=>he())),new Promise(he=>setTimeout(he,2e3))]),o.isMoving()&&await Promise.race([new Promise(he=>o.once("idle",()=>he())),new Promise(he=>setTimeout(he,2e3))]),await new Promise(he=>setTimeout(he,300));const ee=await ho(o,{dpi:P===2?192:96});if(!ee)throw new Error("Failed to capture map. Please try again.");const oe=new Image;await new Promise((he,G)=>{oe.onload=()=>he(),oe.onerror=()=>G(new Error("Failed to load image")),oe.src=ee});let te=document.createElement("canvas");te.width=oe.width,te.height=oe.height;const le=te.getContext("2d");if(!le)throw new Error("Failed to get canvas context");if(le.drawImage(oe,0,0),S!=="original"&&(te=Si(te,S)),R&&(r.length>0||i.length>0)){const he=te.getContext("2d");if(he){const G=r.map(fe=>({id:fe.id,name:fe.name,color:fe.color||"#9333ea"}));await Nc(he,te.width,te.height,G,i)}}const Fe=te.toDataURL("image/png",1);try{const G=await(await fetch(Fe)).blob(),fe=URL.createObjectURL(G),ne=document.createElement("a");ne.download=`map-export-${Date.now()}.png`,ne.href=fe,ne.style.display="none",document.body.appendChild(ne),ne.click(),setTimeout(()=>{document.body.removeChild(ne),URL.revokeObjectURL(fe)},100)}catch{const he=document.createElement("a");he.download=`map-export-${Date.now()}.png`,he.href=Fe,he.style.display="none",document.body.appendChild(he),he.click(),document.body.removeChild(he)}setTimeout(()=>{w(!1),n()},500)}catch(A){console.error("Image export error:",A),alert(`Failed to export image: ${A instanceof Error?A.message:"Unknown error"}`),w(!1)}},Ct=()=>{var A,ee;w(!0);try{const oe=o==null?void 0:o.getCenter(),te=o==null?void 0:o.getZoom(),le=o==null?void 0:o.getBearing(),Fe=o==null?void 0:o.getPitch(),he=de.getState().attributeTableFilteredFeatures,G=de.getState().drawControl,fe=de.getState().navigationCropFilter;let ne=null;if(G&&(o!=null&&o.hasControl(G))){const X=G.getAll();((A=X==null?void 0:X.features)==null?void 0:A.length)>0&&(ne=X)}!ne&&((ee=fe==null?void 0:fe.features)!=null&&ee.length)&&(ne=fe);const pe=X=>{var Re,ye;if(!((Re=ne==null?void 0:ne.features)!=null&&Re.length)||!((ye=X==null?void 0:X.features)!=null&&ye.length))return X;const K=ne.features.filter(Se=>Se.geometry&&Se.geometry.type==="Polygon");if(!K.length)return X;const ge=X.features.filter(Se=>{if(!Se.geometry)return!1;if(Se.geometry.type==="Point"){const $e=Se.geometry.coordinates;if(!Array.isArray($e)||$e.length<2)return!1;const Te=et.point($e,Se.properties);return K.some(_e=>{if(!_e.geometry||_e.geometry.type!=="Polygon")return!1;const qe=et.polygon(_e.geometry.coordinates,_e.properties);return ws(Te,qe)})}return Se.geometry.type==="LineString"||Se.geometry.type==="MultiLineString"||Se.geometry.type==="Polygon"||Se.geometry.type==="MultiPolygon"?K.some($e=>Ts(Se,$e)):!1});return{...X,features:ge}},Ee=r.map(X=>{var ye;const K=l(X.id),ge=he[X.id];let Re=ge!=null&&Array.isArray(ge)?{type:"FeatureCollection",features:ge}:X.geojson;return ne&&((ye=Re==null?void 0:Re.features)!=null&&ye.length)&&(Re=pe(Re)),console.log("=== Export: Dataset Layer Config ==="),console.log("Dataset:",X.name,"ID:",X.id),console.log("Config from context:",K),console.log("VisualizationType:",K==null?void 0:K.visualizationType),console.log("StyleConfig:",K==null?void 0:K.styleConfig),console.log("ColorConfig:",K==null?void 0:K.colorConfig),{id:X.id,name:X.name,color:X.color,visible:(K==null?void 0:K.visible)!==!1,geojson:Re,layerConfig:{type:(K==null?void 0:K.visualizationType)||"geojson",visible:(K==null?void 0:K.visible)!==!1,colorConfig:(K==null?void 0:K.colorConfig)||{},styleConfig:(K==null?void 0:K.styleConfig)||{}}}}),ke=o==null?void 0:o.getCanvas(),V=ke?{width:ke.width,height:ke.height}:{width:1200,height:800},W={version:"1.0",exportedAt:new Date().toISOString(),mapState:{center:oe?[oe.lng,oe.lat]:[0,0],zoom:te||2,bearing:le||0,pitch:Fe||0},mapSize:V,mapMode:v,datasets:Ee,drawnShape:ne};if(m==="json"){const X=new Blob([JSON.stringify(W,null,2)],{type:"application/json"}),K=URL.createObjectURL(X),ge=document.createElement("a");ge.download=`map-export-${Date.now()}.json`,ge.href=K,ge.click(),URL.revokeObjectURL(K)}else if(m==="html"){const X=r.map(Te=>({name:Te.name,color:Te.color||"#9333ea"})),K=v==="edit"?`
|
|
102
|
+
<div id="sidebar" class="sidebar">
|
|
103
|
+
<div class="sidebar-header">
|
|
104
|
+
<h3>Layers</h3>
|
|
105
|
+
</div>
|
|
106
|
+
<div class="sidebar-content">
|
|
107
|
+
${r.map(Te=>`
|
|
108
|
+
<div class="layer-item" data-layer-id="layer-${Te.id}">
|
|
109
|
+
<label class="layer-toggle">
|
|
110
|
+
<input type="checkbox" checked onchange="toggleLayer('${Te.id}', this.checked)">
|
|
111
|
+
<span class="layer-color" style="background-color: ${Te.color||"#9333ea"};"></span>
|
|
112
|
+
<span class="layer-name">${Te.name}</span>
|
|
113
|
+
</label>
|
|
114
|
+
<div class="layer-controls">
|
|
115
|
+
<label class="opacity-control">
|
|
116
|
+
<span>Opacity</span>
|
|
117
|
+
<input type="range" min="0" max="100" value="100" onchange="setLayerOpacity('${Te.id}', this.value)">
|
|
118
|
+
</label>
|
|
119
|
+
</div>
|
|
120
|
+
</div>`).join("")}
|
|
121
|
+
</div>
|
|
122
|
+
</div>`:"",ge=v==="edit"?`
|
|
123
|
+
.sidebar {
|
|
124
|
+
position: absolute;
|
|
125
|
+
top: 0;
|
|
126
|
+
left: 0;
|
|
127
|
+
width: 280px;
|
|
128
|
+
height: 100%;
|
|
129
|
+
background: #29323c;
|
|
130
|
+
color: #fff;
|
|
131
|
+
z-index: 10;
|
|
132
|
+
display: flex;
|
|
133
|
+
flex-direction: column;
|
|
134
|
+
box-shadow: 2px 0 10px rgba(0,0,0,0.3);
|
|
135
|
+
}
|
|
136
|
+
.sidebar-header {
|
|
137
|
+
padding: 16px 20px;
|
|
138
|
+
border-bottom: 1px solid #3d4f5f;
|
|
139
|
+
}
|
|
140
|
+
.sidebar-header h3 {
|
|
141
|
+
margin: 0;
|
|
142
|
+
font-size: 14px;
|
|
143
|
+
font-weight: 500;
|
|
144
|
+
color: #a0aec0;
|
|
145
|
+
text-transform: uppercase;
|
|
146
|
+
letter-spacing: 0.5px;
|
|
147
|
+
}
|
|
148
|
+
.sidebar-content {
|
|
149
|
+
flex: 1;
|
|
150
|
+
overflow-y: auto;
|
|
151
|
+
padding: 8px 0;
|
|
152
|
+
}
|
|
153
|
+
.layer-item {
|
|
154
|
+
padding: 12px 20px;
|
|
155
|
+
border-bottom: 1px solid #3d4f5f;
|
|
156
|
+
}
|
|
157
|
+
.layer-toggle {
|
|
158
|
+
display: flex;
|
|
159
|
+
align-items: center;
|
|
160
|
+
cursor: pointer;
|
|
161
|
+
gap: 10px;
|
|
162
|
+
}
|
|
163
|
+
.layer-toggle input[type="checkbox"] {
|
|
164
|
+
width: 16px;
|
|
165
|
+
height: 16px;
|
|
166
|
+
cursor: pointer;
|
|
167
|
+
}
|
|
168
|
+
.layer-color {
|
|
169
|
+
width: 14px;
|
|
170
|
+
height: 14px;
|
|
171
|
+
border-radius: 2px;
|
|
172
|
+
}
|
|
173
|
+
.layer-name {
|
|
174
|
+
flex: 1;
|
|
175
|
+
font-size: 13px;
|
|
176
|
+
color: #e2e8f0;
|
|
177
|
+
overflow: hidden;
|
|
178
|
+
text-overflow: ellipsis;
|
|
179
|
+
white-space: nowrap;
|
|
180
|
+
}
|
|
181
|
+
.layer-controls {
|
|
182
|
+
margin-top: 10px;
|
|
183
|
+
padding-left: 26px;
|
|
184
|
+
}
|
|
185
|
+
.opacity-control {
|
|
186
|
+
display: flex;
|
|
187
|
+
align-items: center;
|
|
188
|
+
gap: 10px;
|
|
189
|
+
font-size: 11px;
|
|
190
|
+
color: #a0aec0;
|
|
191
|
+
}
|
|
192
|
+
.opacity-control input[type="range"] {
|
|
193
|
+
flex: 1;
|
|
194
|
+
height: 4px;
|
|
195
|
+
-webkit-appearance: none;
|
|
196
|
+
background: #4a5568;
|
|
197
|
+
border-radius: 2px;
|
|
198
|
+
cursor: pointer;
|
|
199
|
+
}
|
|
200
|
+
.opacity-control input[type="range"]::-webkit-slider-thumb {
|
|
201
|
+
-webkit-appearance: none;
|
|
202
|
+
width: 12px;
|
|
203
|
+
height: 12px;
|
|
204
|
+
background: #f1871c;
|
|
205
|
+
border-radius: 50%;
|
|
206
|
+
cursor: pointer;
|
|
207
|
+
}
|
|
208
|
+
#map { left: 280px; width: calc(100% - 280px); }`:"",Re=`<!DOCTYPE html>
|
|
209
|
+
<html>
|
|
210
|
+
<head>
|
|
211
|
+
<title>Exported Map</title>
|
|
212
|
+
<meta charset="utf-8" />
|
|
213
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
214
|
+
<script src="https://unpkg.com/maplibre-gl@4.1.2/dist/maplibre-gl.js"><\/script>
|
|
215
|
+
<link href="https://unpkg.com/maplibre-gl@4.1.2/dist/maplibre-gl.css" rel="stylesheet" />
|
|
216
|
+
<!-- deck.gl for advanced layer visualization (match app version; aggregation-layers needed for ScreenGridLayer) -->
|
|
217
|
+
<script src="https://unpkg.com/deck.gl@9.2.3/dist.min.js"><\/script>
|
|
218
|
+
<script src="https://unpkg.com/@deck.gl/aggregation-layers@9.2.3/dist.min.js"><\/script>
|
|
219
|
+
<!-- deck.gl mesh-layers for 3D mesh support -->
|
|
220
|
+
<script src="https://unpkg.com/@deck.gl/mesh-layers@9.1.12/dist.min.js"><\/script>
|
|
221
|
+
<!-- deck.gl extensions for PathStyleExtension (dash patterns) -->
|
|
222
|
+
<script src="https://unpkg.com/@deck.gl/extensions@9.2.3/dist.min.js"><\/script>
|
|
223
|
+
<!-- deck.gl geo-layers for GreatCircleLayer -->
|
|
224
|
+
<script src="https://unpkg.com/@deck.gl/geo-layers@9.2.3/dist.min.js"><\/script>
|
|
225
|
+
<!-- loaders.gl core and OBJ loader for mesh loading -->
|
|
226
|
+
<script src="https://cdn.jsdelivr.net/npm/@loaders.gl/core@4.3.4/dist/dist.min.js"><\/script>
|
|
227
|
+
<script src="https://cdn.jsdelivr.net/npm/@loaders.gl/obj@4.3.4/dist/dist.min.js"><\/script>
|
|
228
|
+
<style>
|
|
229
|
+
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
230
|
+
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
|
|
231
|
+
#map { position: absolute; top: 0; left: 0; width: ${V!=null&&V.width?`${V.width}px`:"100%"}; height: ${V!=null&&V.height?`${V.height}px`:"100%"}; }
|
|
232
|
+
#deck-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
|
|
233
|
+
.legend {
|
|
234
|
+
position: absolute;
|
|
235
|
+
bottom: 30px;
|
|
236
|
+
${v==="edit"?"left: 290px;":"left: 10px;"}
|
|
237
|
+
background: rgba(255, 255, 255, 0.95);
|
|
238
|
+
padding: 12px 16px;
|
|
239
|
+
border-radius: 8px;
|
|
240
|
+
box-shadow: 0 2px 10px rgba(0,0,0,0.15);
|
|
241
|
+
font-size: 13px;
|
|
242
|
+
max-width: 250px;
|
|
243
|
+
z-index: 5;
|
|
244
|
+
}
|
|
245
|
+
.legend h4 {
|
|
246
|
+
margin: 0 0 10px 0;
|
|
247
|
+
font-size: 14px;
|
|
248
|
+
color: #333;
|
|
249
|
+
border-bottom: 1px solid #eee;
|
|
250
|
+
padding-bottom: 8px;
|
|
251
|
+
}
|
|
252
|
+
.legend-item {
|
|
253
|
+
display: flex;
|
|
254
|
+
align-items: center;
|
|
255
|
+
margin: 6px 0;
|
|
256
|
+
}
|
|
257
|
+
.legend-color {
|
|
258
|
+
width: 16px;
|
|
259
|
+
height: 16px;
|
|
260
|
+
border-radius: 3px;
|
|
261
|
+
margin-right: 10px;
|
|
262
|
+
border: 1px solid rgba(0,0,0,0.1);
|
|
263
|
+
}
|
|
264
|
+
.legend-label {
|
|
265
|
+
color: #555;
|
|
266
|
+
font-size: 12px;
|
|
267
|
+
overflow: hidden;
|
|
268
|
+
text-overflow: ellipsis;
|
|
269
|
+
white-space: nowrap;
|
|
270
|
+
}
|
|
271
|
+
.maplibregl-ctrl-attrib {
|
|
272
|
+
font-size: 11px;
|
|
273
|
+
}
|
|
274
|
+
${ge}
|
|
275
|
+
</style>
|
|
276
|
+
</head>
|
|
277
|
+
<body>
|
|
278
|
+
${K}
|
|
279
|
+
<div id="map"></div>
|
|
280
|
+
${v==="read"&&X.length>0?`
|
|
281
|
+
<div class="legend">
|
|
282
|
+
<h4>Layers</h4>
|
|
283
|
+
${X.map(Te=>`
|
|
284
|
+
<div class="legend-item">
|
|
285
|
+
<div class="legend-color" style="background-color: ${Te.color};"></div>
|
|
286
|
+
<span class="legend-label">${Te.name}</span>
|
|
287
|
+
</div>`).join("")}
|
|
288
|
+
</div>`:""}
|
|
289
|
+
<script>
|
|
290
|
+
// Map configuration
|
|
291
|
+
const mapConfig = ${JSON.stringify(W,null,2)};
|
|
292
|
+
|
|
293
|
+
// Color scale for aggregation layers (Yellow-Orange-Red)
|
|
294
|
+
const COLOR_RANGE = [
|
|
295
|
+
[255, 255, 204],
|
|
296
|
+
[255, 237, 160],
|
|
297
|
+
[254, 217, 118],
|
|
298
|
+
[254, 178, 76],
|
|
299
|
+
[253, 141, 60],
|
|
300
|
+
[252, 78, 42],
|
|
301
|
+
[227, 26, 28],
|
|
302
|
+
[189, 0, 38],
|
|
303
|
+
[128, 0, 38]
|
|
304
|
+
];
|
|
305
|
+
|
|
306
|
+
// ArcGIS World Imagery tiles style
|
|
307
|
+
const arcgisWorldImageryStyle = {
|
|
308
|
+
version: 8,
|
|
309
|
+
sources: {
|
|
310
|
+
'arcgis-world-imagery': {
|
|
311
|
+
type: 'raster',
|
|
312
|
+
tiles: [
|
|
313
|
+
'https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'
|
|
314
|
+
],
|
|
315
|
+
tileSize: 256,
|
|
316
|
+
attribution: '© Esri'
|
|
317
|
+
}
|
|
318
|
+
},
|
|
319
|
+
layers: [
|
|
320
|
+
{
|
|
321
|
+
id: 'arcgis-world-imagery-layer',
|
|
322
|
+
type: 'raster',
|
|
323
|
+
source: 'arcgis-world-imagery',
|
|
324
|
+
minzoom: 0,
|
|
325
|
+
maxzoom: 22
|
|
326
|
+
}
|
|
327
|
+
]
|
|
328
|
+
};
|
|
329
|
+
|
|
330
|
+
// Store layer visibility state
|
|
331
|
+
const layerVisibility = {};
|
|
332
|
+
const layerOpacity = {};
|
|
333
|
+
let deckOverlay = null;
|
|
334
|
+
let allDeckLayers = [];
|
|
335
|
+
// Store trip layer animation state
|
|
336
|
+
const tripLayerAnimations = {};
|
|
337
|
+
|
|
338
|
+
// Initialize the map with ArcGIS World Imagery tiles
|
|
339
|
+
const map = new maplibregl.Map({
|
|
340
|
+
container: 'map',
|
|
341
|
+
style: arcgisWorldImageryStyle,
|
|
342
|
+
center: mapConfig.mapState.center,
|
|
343
|
+
zoom: mapConfig.mapState.zoom,
|
|
344
|
+
bearing: mapConfig.mapState.bearing,
|
|
345
|
+
pitch: mapConfig.mapState.pitch,
|
|
346
|
+
attributionControl: true
|
|
347
|
+
});
|
|
348
|
+
|
|
349
|
+
// Add navigation controls
|
|
350
|
+
map.addControl(new maplibregl.NavigationControl(), 'top-right');
|
|
351
|
+
map.addControl(new maplibregl.ScaleControl({ maxWidth: 150 }), 'bottom-right');
|
|
352
|
+
|
|
353
|
+
// Toggle layer visibility (for deck.gl layers)
|
|
354
|
+
function toggleLayer(datasetId, visible) {
|
|
355
|
+
layerVisibility[datasetId] = visible;
|
|
356
|
+
updateDeckLayers();
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
// Set layer opacity (for deck.gl layers)
|
|
360
|
+
function setLayerOpacity(datasetId, opacityPercent) {
|
|
361
|
+
layerOpacity[datasetId] = opacityPercent / 100;
|
|
362
|
+
updateDeckLayers();
|
|
363
|
+
}
|
|
364
|
+
|
|
365
|
+
// Update deck.gl layers based on visibility/opacity
|
|
366
|
+
function updateDeckLayers() {
|
|
367
|
+
if (!deckOverlay) return;
|
|
368
|
+
|
|
369
|
+
const visibleLayers = allDeckLayers.filter(layer => {
|
|
370
|
+
const datasetId = layer.props.datasetId;
|
|
371
|
+
return layerVisibility[datasetId] !== false;
|
|
372
|
+
}).map(layer => {
|
|
373
|
+
const datasetId = layer.props.datasetId;
|
|
374
|
+
const opacity = layerOpacity[datasetId] !== undefined ? layerOpacity[datasetId] : 1;
|
|
375
|
+
// Update currentTime for trip layers if animation is active
|
|
376
|
+
var layerId = layer.id;
|
|
377
|
+
if (tripLayerAnimations[layerId] && tripLayerAnimations[layerId].isAnimated) {
|
|
378
|
+
var animState = tripLayerAnimations[layerId];
|
|
379
|
+
var elapsed = Date.now() - animState.startTime;
|
|
380
|
+
var currentTime = ((elapsed * animState.speed) / 100) % animState.loopLength;
|
|
381
|
+
return layer.clone({ opacity: opacity, currentTime: currentTime });
|
|
382
|
+
}
|
|
383
|
+
return layer.clone({ opacity: opacity });
|
|
384
|
+
});
|
|
385
|
+
|
|
386
|
+
deckOverlay.setProps({ layers: visibleLayers });
|
|
387
|
+
}
|
|
388
|
+
|
|
389
|
+
// Animation loop for trip layers
|
|
390
|
+
var animationFrameIdTrip = null;
|
|
391
|
+
function animateTripLayers() {
|
|
392
|
+
if (!deckOverlay) {
|
|
393
|
+
// Deck overlay not ready yet, try again later
|
|
394
|
+
animationFrameIdTrip = requestAnimationFrame(animateTripLayers);
|
|
395
|
+
return;
|
|
396
|
+
}
|
|
397
|
+
var hasAnimatedTrips = false;
|
|
398
|
+
for (var layerId in tripLayerAnimations) {
|
|
399
|
+
if (tripLayerAnimations[layerId].isAnimated) {
|
|
400
|
+
hasAnimatedTrips = true;
|
|
401
|
+
break;
|
|
402
|
+
}
|
|
403
|
+
}
|
|
404
|
+
if (hasAnimatedTrips) {
|
|
405
|
+
updateDeckLayers();
|
|
406
|
+
animationFrameIdTrip = requestAnimationFrame(animateTripLayers);
|
|
407
|
+
} else {
|
|
408
|
+
animationFrameIdTrip = null;
|
|
409
|
+
}
|
|
410
|
+
}
|
|
411
|
+
|
|
412
|
+
// Helper function to extract point data from GeoJSON (handles all geometry types)
|
|
413
|
+
function extractPointData(geojson) {
|
|
414
|
+
if (!geojson || !geojson.features) return [];
|
|
415
|
+
|
|
416
|
+
const points = [];
|
|
417
|
+
|
|
418
|
+
geojson.features.forEach(function(feature) {
|
|
419
|
+
if (!feature.geometry) return;
|
|
420
|
+
|
|
421
|
+
let coordinates = [];
|
|
422
|
+
|
|
423
|
+
// Extract coordinates based on geometry type (same as app's GridLayerComponent)
|
|
424
|
+
switch (feature.geometry.type) {
|
|
425
|
+
case 'Point':
|
|
426
|
+
coordinates = [[feature.geometry.coordinates[0], feature.geometry.coordinates[1]]];
|
|
427
|
+
break;
|
|
428
|
+
case 'MultiPoint':
|
|
429
|
+
coordinates = feature.geometry.coordinates.map(function(coord) {
|
|
430
|
+
return [coord[0], coord[1]];
|
|
431
|
+
});
|
|
432
|
+
break;
|
|
433
|
+
case 'Polygon':
|
|
434
|
+
// Use all points from the first ring (exterior ring)
|
|
435
|
+
coordinates = feature.geometry.coordinates[0].map(function(coord) {
|
|
436
|
+
return [coord[0], coord[1]];
|
|
437
|
+
});
|
|
438
|
+
break;
|
|
439
|
+
case 'MultiPolygon':
|
|
440
|
+
// Use all points from all polygons
|
|
441
|
+
feature.geometry.coordinates.forEach(function(polygon) {
|
|
442
|
+
polygon[0].forEach(function(coord) {
|
|
443
|
+
coordinates.push([coord[0], coord[1]]);
|
|
444
|
+
});
|
|
445
|
+
});
|
|
446
|
+
break;
|
|
447
|
+
case 'LineString':
|
|
448
|
+
coordinates = feature.geometry.coordinates.map(function(coord) {
|
|
449
|
+
return [coord[0], coord[1]];
|
|
450
|
+
});
|
|
451
|
+
break;
|
|
452
|
+
case 'MultiLineString':
|
|
453
|
+
// Flatten all line strings
|
|
454
|
+
feature.geometry.coordinates.forEach(function(line) {
|
|
455
|
+
line.forEach(function(coord) {
|
|
456
|
+
coordinates.push([coord[0], coord[1]]);
|
|
457
|
+
});
|
|
458
|
+
});
|
|
459
|
+
break;
|
|
460
|
+
default:
|
|
461
|
+
return;
|
|
462
|
+
}
|
|
463
|
+
|
|
464
|
+
// Add each coordinate as a point
|
|
465
|
+
coordinates.forEach(function(coord) {
|
|
466
|
+
points.push({
|
|
467
|
+
position: [coord[0], coord[1]],
|
|
468
|
+
properties: feature.properties || {}
|
|
469
|
+
});
|
|
470
|
+
});
|
|
471
|
+
});
|
|
472
|
+
|
|
473
|
+
return points;
|
|
474
|
+
}
|
|
475
|
+
|
|
476
|
+
// Extract point data for ScreenGrid (matches app's ScreenGridLayerComponent: centroid for polygons, weight from heightField)
|
|
477
|
+
function extractPointDataForScreenGrid(geojson, weightField) {
|
|
478
|
+
if (!geojson || !geojson.features) return [];
|
|
479
|
+
const points = [];
|
|
480
|
+
geojson.features.forEach(function(feature) {
|
|
481
|
+
if (!feature.geometry) return;
|
|
482
|
+
const props = feature.properties || {};
|
|
483
|
+
let weight = 1;
|
|
484
|
+
if (weightField) {
|
|
485
|
+
let val = props[weightField];
|
|
486
|
+
if (val === undefined || val === null) {
|
|
487
|
+
const lower = weightField.toLowerCase();
|
|
488
|
+
for (var k in props) { if (k.toLowerCase() === lower) { val = props[k]; break; } }
|
|
489
|
+
}
|
|
490
|
+
if (val !== undefined && val !== null) {
|
|
491
|
+
const num = typeof val === 'number' ? val : Number(val);
|
|
492
|
+
if (!isNaN(num) && isFinite(num)) weight = num;
|
|
493
|
+
}
|
|
494
|
+
}
|
|
495
|
+
switch (feature.geometry.type) {
|
|
496
|
+
case 'Point':
|
|
497
|
+
points.push({ position: [feature.geometry.coordinates[0], feature.geometry.coordinates[1]], weight: weight, properties: props });
|
|
498
|
+
break;
|
|
499
|
+
case 'MultiPoint':
|
|
500
|
+
feature.geometry.coordinates.forEach(function(coord) {
|
|
501
|
+
points.push({ position: [coord[0], coord[1]], weight: weight, properties: props });
|
|
502
|
+
});
|
|
503
|
+
break;
|
|
504
|
+
case 'Polygon':
|
|
505
|
+
var ring = feature.geometry.coordinates[0];
|
|
506
|
+
if (ring && ring.length > 0) {
|
|
507
|
+
var cx = ring.reduce(function(s, c) { return s + c[0]; }, 0) / ring.length;
|
|
508
|
+
var cy = ring.reduce(function(s, c) { return s + c[1]; }, 0) / ring.length;
|
|
509
|
+
points.push({ position: [cx, cy], weight: weight, properties: props });
|
|
510
|
+
}
|
|
511
|
+
break;
|
|
512
|
+
case 'MultiPolygon':
|
|
513
|
+
feature.geometry.coordinates.forEach(function(polygon) {
|
|
514
|
+
var r = polygon[0];
|
|
515
|
+
if (r && r.length > 0) {
|
|
516
|
+
var cx = r.reduce(function(s, c) { return s + c[0]; }, 0) / r.length;
|
|
517
|
+
var cy = r.reduce(function(s, c) { return s + c[1]; }, 0) / r.length;
|
|
518
|
+
points.push({ position: [cx, cy], weight: weight, properties: props });
|
|
519
|
+
}
|
|
520
|
+
});
|
|
521
|
+
break;
|
|
522
|
+
default:
|
|
523
|
+
break;
|
|
524
|
+
}
|
|
525
|
+
});
|
|
526
|
+
return points;
|
|
527
|
+
}
|
|
528
|
+
|
|
529
|
+
// Shared helper to show a popup with feature properties (used by both MapLibre and deck.gl layers)
|
|
530
|
+
var activePopup = null;
|
|
531
|
+
function showFeaturePopup(lngLat, properties, title) {
|
|
532
|
+
if (!map || !lngLat || !properties) return;
|
|
533
|
+
|
|
534
|
+
try {
|
|
535
|
+
// Close previous popup if any
|
|
536
|
+
if (activePopup) {
|
|
537
|
+
activePopup.remove();
|
|
538
|
+
activePopup = null;
|
|
539
|
+
}
|
|
540
|
+
|
|
541
|
+
var container = document.createElement('div');
|
|
542
|
+
container.style.fontSize = '12px';
|
|
543
|
+
container.style.lineHeight = '1.4';
|
|
544
|
+
container.style.maxWidth = '260px';
|
|
545
|
+
|
|
546
|
+
var html = '';
|
|
547
|
+
if (title) {
|
|
548
|
+
html += '<div style="font-weight:600;margin-bottom:6px;color:#111827;">' + title + '</div>';
|
|
549
|
+
}
|
|
550
|
+
|
|
551
|
+
var keys = Object.keys(properties || {});
|
|
552
|
+
keys.forEach(function(key) {
|
|
553
|
+
var value = properties[key];
|
|
554
|
+
if (value === undefined || value === null || value === '') return;
|
|
555
|
+
html += '<div style="margin-bottom:2px;"><span style="color:#6b7280;">' + key + ':</span> ' +
|
|
556
|
+
'<span style="color:#111827;">' + String(value) + '</span></div>';
|
|
557
|
+
});
|
|
558
|
+
|
|
559
|
+
if (!html) {
|
|
560
|
+
html = '<div style="color:#6b7280;">No attributes</div>';
|
|
561
|
+
}
|
|
562
|
+
|
|
563
|
+
container.innerHTML = html;
|
|
564
|
+
|
|
565
|
+
activePopup = new maplibregl.Popup({
|
|
566
|
+
closeButton: true,
|
|
567
|
+
closeOnClick: true,
|
|
568
|
+
offset: 12
|
|
569
|
+
})
|
|
570
|
+
.setLngLat(lngLat)
|
|
571
|
+
.setDOMContent(container)
|
|
572
|
+
.addTo(map);
|
|
573
|
+
} catch (e) {
|
|
574
|
+
console.warn('Failed to show popup', e);
|
|
575
|
+
}
|
|
576
|
+
}
|
|
577
|
+
|
|
578
|
+
// Helper function to parse color string to RGB array
|
|
579
|
+
function parseColor(colorStr) {
|
|
580
|
+
if (!colorStr) return [147, 51, 234]; // default purple
|
|
581
|
+
if (colorStr.startsWith('#')) {
|
|
582
|
+
const hex = colorStr.slice(1);
|
|
583
|
+
return [
|
|
584
|
+
parseInt(hex.slice(0, 2), 16),
|
|
585
|
+
parseInt(hex.slice(2, 4), 16),
|
|
586
|
+
parseInt(hex.slice(4, 6), 16)
|
|
587
|
+
];
|
|
588
|
+
}
|
|
589
|
+
return [147, 51, 234];
|
|
590
|
+
}
|
|
591
|
+
|
|
592
|
+
// Create deck.gl layer based on layer type
|
|
593
|
+
function createDeckLayer(dataset, layerConfig) {
|
|
594
|
+
const pointData = extractPointData(dataset.geojson);
|
|
595
|
+
if (pointData.length === 0) return null;
|
|
596
|
+
|
|
597
|
+
const rawLayerType = layerConfig?.type || 'point';
|
|
598
|
+
// In export, normalize some custom visualization types to supported deck.gl layers:
|
|
599
|
+
// - h3cluster -> hexagon aggregation
|
|
600
|
+
let layerType = rawLayerType;
|
|
601
|
+
if (rawLayerType === 'h3cluster') layerType = 'hexagon';
|
|
602
|
+
// Note: greatcircle now uses GreatCircleLayer directly, not normalized to arc
|
|
603
|
+
const color = parseColor(dataset.color);
|
|
604
|
+
const styleConfig = layerConfig?.styleConfig || {};
|
|
605
|
+
const colorConfig = layerConfig?.colorConfig || {};
|
|
606
|
+
|
|
607
|
+
// Get settings from styleConfig (match app's PersistentLayers defaults)
|
|
608
|
+
const cellSize = styleConfig.cellSize || 1000;
|
|
609
|
+
const elevationScale = styleConfig.elevationScale ?? (colorConfig.heightField ? 0.1 : 1);
|
|
610
|
+
const pointRadius = styleConfig.pointRadius ?? 5; // App uses 5 for point layers
|
|
611
|
+
const strokeWidth = styleConfig.strokeWidth ?? 1;
|
|
612
|
+
const strokeColor = styleConfig.strokeColor || '#ffffff';
|
|
613
|
+
|
|
614
|
+
console.log('=== Layer Config Debug ===');
|
|
615
|
+
console.log('StyleConfig:', JSON.stringify(styleConfig));
|
|
616
|
+
console.log('ColorConfig:', JSON.stringify(colorConfig));
|
|
617
|
+
console.log('Using cellSize:', cellSize, 'elevationScale:', elevationScale);
|
|
618
|
+
|
|
619
|
+
const baseProps = {
|
|
620
|
+
id: 'deck-' + dataset.id,
|
|
621
|
+
datasetId: dataset.id,
|
|
622
|
+
data: pointData,
|
|
623
|
+
pickable: true,
|
|
624
|
+
visible: true,
|
|
625
|
+
};
|
|
626
|
+
|
|
627
|
+
console.log('=== Creating Deck Layer ===');
|
|
628
|
+
console.log('Layer type:', layerType);
|
|
629
|
+
console.log('Dataset:', dataset.name);
|
|
630
|
+
console.log('Features count:', dataset.geojson?.features?.length || 0);
|
|
631
|
+
console.log('Points extracted:', pointData.length);
|
|
632
|
+
console.log('First 3 points:', pointData.slice(0, 3).map(p => p.position));
|
|
633
|
+
console.log('Style config:', JSON.stringify(styleConfig));
|
|
634
|
+
console.log('Cell size:', cellSize);
|
|
635
|
+
console.log('Elevation scale:', elevationScale);
|
|
636
|
+
|
|
637
|
+
// Grid Layer (3D columns aggregated into grid cells)
|
|
638
|
+
if (layerType === 'grid') {
|
|
639
|
+
// Check if we have fields for elevation and color
|
|
640
|
+
const heightField = colorConfig.heightField;
|
|
641
|
+
const colorField = colorConfig.colorField;
|
|
642
|
+
const colorMapping = colorConfig.colorMapping || {};
|
|
643
|
+
const layerOpacityValue = styleConfig.opacity !== undefined ? styleConfig.opacity : 0.9;
|
|
644
|
+
|
|
645
|
+
console.log('Creating GridLayer:');
|
|
646
|
+
console.log(' - cellSize:', cellSize);
|
|
647
|
+
console.log(' - heightField:', heightField);
|
|
648
|
+
console.log(' - colorField:', colorField);
|
|
649
|
+
console.log(' - elevationScale:', elevationScale);
|
|
650
|
+
console.log(' - opacity:', layerOpacityValue);
|
|
651
|
+
console.log(' - colorMapping:', JSON.stringify(colorMapping));
|
|
652
|
+
|
|
653
|
+
// Elevation function that aggregates height values from points
|
|
654
|
+
const getElevationValue = heightField ? function(points) {
|
|
655
|
+
if (points.length === 0) return 0;
|
|
656
|
+
let sumValue = 0;
|
|
657
|
+
let hasValidValue = false;
|
|
658
|
+
points.forEach(function(point) {
|
|
659
|
+
const props = point.properties || {};
|
|
660
|
+
let val = props[heightField];
|
|
661
|
+
if (val === undefined || val === null) {
|
|
662
|
+
// Try case-insensitive search
|
|
663
|
+
const lowerField = heightField.toLowerCase();
|
|
664
|
+
for (var key in props) {
|
|
665
|
+
if (key.toLowerCase() === lowerField) {
|
|
666
|
+
val = props[key];
|
|
667
|
+
break;
|
|
668
|
+
}
|
|
669
|
+
}
|
|
670
|
+
}
|
|
671
|
+
if (val !== undefined && val !== null) {
|
|
672
|
+
const numVal = typeof val === 'number' ? val : Number(val);
|
|
673
|
+
if (!isNaN(numVal) && isFinite(numVal)) {
|
|
674
|
+
sumValue += numVal;
|
|
675
|
+
hasValidValue = true;
|
|
676
|
+
}
|
|
677
|
+
}
|
|
678
|
+
});
|
|
679
|
+
// Use square root scaling for balanced distribution
|
|
680
|
+
return hasValidValue ? Math.max(100, Math.sqrt(sumValue) * 15) : points.length * 50;
|
|
681
|
+
} : function(points) {
|
|
682
|
+
// Default: use point count
|
|
683
|
+
return points.length * 50;
|
|
684
|
+
};
|
|
685
|
+
|
|
686
|
+
// Color function that uses colorField for categorization
|
|
687
|
+
const getColorValue = colorField ? function(points) {
|
|
688
|
+
if (points.length === 0) return 0;
|
|
689
|
+
// Count occurrences of each value and return the dominant one's index
|
|
690
|
+
const valueCounts = {};
|
|
691
|
+
points.forEach(function(point) {
|
|
692
|
+
const props = point.properties || {};
|
|
693
|
+
let val = props[colorField];
|
|
694
|
+
if (val === undefined || val === null) {
|
|
695
|
+
const lowerField = colorField.toLowerCase();
|
|
696
|
+
for (var key in props) {
|
|
697
|
+
if (key.toLowerCase() === lowerField) {
|
|
698
|
+
val = props[key];
|
|
699
|
+
break;
|
|
700
|
+
}
|
|
701
|
+
}
|
|
702
|
+
}
|
|
703
|
+
if (val !== undefined && val !== null) {
|
|
704
|
+
const strVal = String(val);
|
|
705
|
+
valueCounts[strVal] = (valueCounts[strVal] || 0) + 1;
|
|
706
|
+
}
|
|
707
|
+
});
|
|
708
|
+
// Find most common value
|
|
709
|
+
let maxCount = 0;
|
|
710
|
+
let dominantValue = null;
|
|
711
|
+
for (var v in valueCounts) {
|
|
712
|
+
if (valueCounts[v] > maxCount) {
|
|
713
|
+
maxCount = valueCounts[v];
|
|
714
|
+
dominantValue = v;
|
|
715
|
+
}
|
|
716
|
+
}
|
|
717
|
+
// Return index based on unique values
|
|
718
|
+
const uniqueValues = Object.keys(colorMapping);
|
|
719
|
+
if (dominantValue && uniqueValues.length > 0) {
|
|
720
|
+
const idx = uniqueValues.indexOf(dominantValue);
|
|
721
|
+
return idx >= 0 ? idx : 0;
|
|
722
|
+
}
|
|
723
|
+
return points.length; // Fallback to count
|
|
724
|
+
} : function(points) {
|
|
725
|
+
return points.length;
|
|
726
|
+
};
|
|
727
|
+
|
|
728
|
+
// Build color range from colorMapping if available
|
|
729
|
+
let gridColorRange = COLOR_RANGE;
|
|
730
|
+
if (colorField && Object.keys(colorMapping).length > 0) {
|
|
731
|
+
gridColorRange = Object.values(colorMapping).map(function(hexColor) {
|
|
732
|
+
if (hexColor && hexColor.startsWith('#')) {
|
|
733
|
+
return [
|
|
734
|
+
parseInt(hexColor.slice(1, 3), 16),
|
|
735
|
+
parseInt(hexColor.slice(3, 5), 16),
|
|
736
|
+
parseInt(hexColor.slice(5, 7), 16)
|
|
737
|
+
];
|
|
738
|
+
}
|
|
739
|
+
return [255, 200, 0]; // Default yellow
|
|
740
|
+
});
|
|
741
|
+
console.log('Using custom colorRange from colorMapping:', gridColorRange.length, 'colors');
|
|
742
|
+
}
|
|
743
|
+
|
|
744
|
+
return new deck.GridLayer({
|
|
745
|
+
...baseProps,
|
|
746
|
+
getPosition: d => d.position,
|
|
747
|
+
cellSize: cellSize,
|
|
748
|
+
elevationScale: elevationScale,
|
|
749
|
+
extruded: true,
|
|
750
|
+
colorRange: gridColorRange,
|
|
751
|
+
coverage: 0.9,
|
|
752
|
+
opacity: layerOpacityValue,
|
|
753
|
+
getElevationValue: getElevationValue,
|
|
754
|
+
getColorValue: getColorValue,
|
|
755
|
+
});
|
|
756
|
+
}
|
|
757
|
+
|
|
758
|
+
// Screen Grid Layer (purple grid squares - matches app's ScreenGridLayerComponent)
|
|
759
|
+
if (layerType === 'screengrid') {
|
|
760
|
+
const weightField = colorConfig.heightField;
|
|
761
|
+
const screenGridPoints = extractPointDataForScreenGrid(dataset.geojson, weightField);
|
|
762
|
+
if (screenGridPoints.length === 0) return null;
|
|
763
|
+
|
|
764
|
+
const fillColor = styleConfig.fillColor || dataset.color || '#3b82f6';
|
|
765
|
+
const cellSizePixels = styleConfig.pointRadius ?? 20;
|
|
766
|
+
const layerOpacityValue = styleConfig.opacity !== undefined ? styleConfig.opacity : 0.8;
|
|
767
|
+
|
|
768
|
+
var r = 59, g = 130, b = 246;
|
|
769
|
+
if (fillColor && fillColor.startsWith('#')) {
|
|
770
|
+
r = parseInt(fillColor.slice(1, 3), 16) || 59;
|
|
771
|
+
g = parseInt(fillColor.slice(3, 5), 16) || 130;
|
|
772
|
+
b = parseInt(fillColor.slice(5, 7), 16) || 246;
|
|
773
|
+
}
|
|
774
|
+
var screenGridColorRange = [
|
|
775
|
+
[r, g, b, 25],
|
|
776
|
+
[r, g, b, 85],
|
|
777
|
+
[r, g, b, 127],
|
|
778
|
+
[r, g, b, 170],
|
|
779
|
+
[r, g, b, 212],
|
|
780
|
+
[r, g, b, 255],
|
|
781
|
+
];
|
|
782
|
+
|
|
783
|
+
if (typeof deck.ScreenGridLayer !== 'function') {
|
|
784
|
+
console.warn('ScreenGridLayer not available, falling back to ScatterplotLayer');
|
|
785
|
+
return new deck.ScatterplotLayer({
|
|
786
|
+
...baseProps,
|
|
787
|
+
data: screenGridPoints,
|
|
788
|
+
getPosition: d => d.position,
|
|
789
|
+
getRadius: cellSizePixels * 0.5,
|
|
790
|
+
opacity: layerOpacityValue,
|
|
791
|
+
getFillColor: [r, g, b, Math.round(layerOpacityValue * 255)],
|
|
792
|
+
radiusScale: 1,
|
|
793
|
+
radiusMinPixels: 1,
|
|
794
|
+
radiusMaxPixels: 100,
|
|
795
|
+
});
|
|
796
|
+
}
|
|
797
|
+
return new deck.ScreenGridLayer({
|
|
798
|
+
...baseProps,
|
|
799
|
+
data: screenGridPoints,
|
|
800
|
+
getPosition: d => d.position,
|
|
801
|
+
getWeight: d => d.weight,
|
|
802
|
+
cellSizePixels: cellSizePixels,
|
|
803
|
+
colorRange: screenGridColorRange,
|
|
804
|
+
gpuAggregation: false,
|
|
805
|
+
aggregation: 'SUM',
|
|
806
|
+
opacity: layerOpacityValue,
|
|
807
|
+
pickable: true,
|
|
808
|
+
});
|
|
809
|
+
}
|
|
810
|
+
|
|
811
|
+
// Contour Layer (match app's ContourLayerComponent: dynamic thresholds & fill color gradient)
|
|
812
|
+
if (layerType === 'contour') {
|
|
813
|
+
const heightField = colorConfig.heightField;
|
|
814
|
+
const layerOpacityValue = styleConfig.opacity !== undefined ? styleConfig.opacity : 0.8;
|
|
815
|
+
const fillColor = styleConfig.fillColor || dataset.color || '#3b82f6';
|
|
816
|
+
|
|
817
|
+
function contourHexToRgba(hex, alpha) {
|
|
818
|
+
var normalized = hex && hex.startsWith('#') ? hex : '#' + (hex || '000000');
|
|
819
|
+
var hv = normalized.replace('#', '');
|
|
820
|
+
var r = parseInt(hv.slice(0, 2), 16) || 0;
|
|
821
|
+
var g = parseInt(hv.slice(2, 4), 16) || 0;
|
|
822
|
+
var b = parseInt(hv.slice(4, 6), 16) || 0;
|
|
823
|
+
return [r, g, b, Math.round(alpha * 255)];
|
|
824
|
+
}
|
|
825
|
+
|
|
826
|
+
var baseContourColor = contourHexToRgba(fillColor, layerOpacityValue);
|
|
827
|
+
var cr = baseContourColor[0];
|
|
828
|
+
var cg = baseContourColor[1];
|
|
829
|
+
var cb = baseContourColor[2];
|
|
830
|
+
var ca = Math.round(layerOpacityValue * 255);
|
|
831
|
+
|
|
832
|
+
// Use a single consistent stroke color for all contour levels (match app: one color ramp selection)
|
|
833
|
+
var contourColors = [
|
|
834
|
+
[cr, cg, cb, ca],
|
|
835
|
+
[cr, cg, cb, ca],
|
|
836
|
+
[cr, cg, cb, ca],
|
|
837
|
+
[cr, cg, cb, ca],
|
|
838
|
+
[cr, cg, cb, ca]
|
|
839
|
+
];
|
|
840
|
+
|
|
841
|
+
// Dynamic thresholds based on point density (same idea as component)
|
|
842
|
+
var dataCount = pointData.length;
|
|
843
|
+
var thresholds;
|
|
844
|
+
if (dataCount > 1000) thresholds = [1, 5, 10, 25, 50];
|
|
845
|
+
else if (dataCount > 500) thresholds = [1, 3, 7, 15, 30];
|
|
846
|
+
else if (dataCount > 100) thresholds = [1, 2, 4, 8, 15];
|
|
847
|
+
else if (dataCount > 20) thresholds = [1, 2, 3, 5, 8];
|
|
848
|
+
else thresholds = [1, 2, 3, 4, 5];
|
|
849
|
+
|
|
850
|
+
var contours = thresholds.map(function(threshold, idx) {
|
|
851
|
+
return {
|
|
852
|
+
threshold: threshold,
|
|
853
|
+
color: contourColors[idx] || contourColors[contourColors.length - 1],
|
|
854
|
+
strokeWidth: idx === thresholds.length - 1 ? 2 : 1
|
|
855
|
+
};
|
|
856
|
+
});
|
|
857
|
+
|
|
858
|
+
// Weight accessor with case-insensitive field lookup
|
|
859
|
+
var getWeight = 1;
|
|
860
|
+
if (heightField) {
|
|
861
|
+
getWeight = function(d) {
|
|
862
|
+
var props = d.properties || {};
|
|
863
|
+
var val = props[heightField];
|
|
864
|
+
if (val === undefined || val === null) {
|
|
865
|
+
var lower = heightField.toLowerCase();
|
|
866
|
+
for (var k in props) {
|
|
867
|
+
if (k.toLowerCase() === lower) {
|
|
868
|
+
val = props[k];
|
|
869
|
+
break;
|
|
870
|
+
}
|
|
871
|
+
}
|
|
872
|
+
}
|
|
873
|
+
if (typeof val === 'number') return Math.max(1, val);
|
|
874
|
+
var num = parseFloat(val);
|
|
875
|
+
return isNaN(num) ? 1 : Math.max(1, num);
|
|
876
|
+
};
|
|
877
|
+
}
|
|
878
|
+
|
|
879
|
+
var cellSizeMeters = styleConfig.pointRadius ? styleConfig.pointRadius * 50 : 500;
|
|
880
|
+
|
|
881
|
+
return new deck.ContourLayer({
|
|
882
|
+
...baseProps,
|
|
883
|
+
data: pointData,
|
|
884
|
+
getPosition: function(d) { return d.position; },
|
|
885
|
+
getWeight: getWeight,
|
|
886
|
+
cellSize: cellSizeMeters,
|
|
887
|
+
contours: contours,
|
|
888
|
+
aggregation: 'SUM',
|
|
889
|
+
pickable: true,
|
|
890
|
+
visible: true,
|
|
891
|
+
opacity: layerOpacityValue
|
|
892
|
+
});
|
|
893
|
+
}
|
|
894
|
+
|
|
895
|
+
// Point Cloud Layer (solid points, no stroke - matches app's PointCloudLayerComponent)
|
|
896
|
+
if (layerType === 'pointcloud') {
|
|
897
|
+
const fillColorPc = styleConfig.fillColor || dataset.color || '#3b82f6';
|
|
898
|
+
const pointSizePc = styleConfig.pointRadius ?? 10;
|
|
899
|
+
const layerOpacityPc = styleConfig.opacity !== undefined ? styleConfig.opacity : 0.8;
|
|
900
|
+
const colorFieldPc = colorConfig.colorField;
|
|
901
|
+
const colorMappingPc = colorConfig.colorMapping || {};
|
|
902
|
+
|
|
903
|
+
var baseColorPc = parseColor(fillColorPc);
|
|
904
|
+
baseColorPc = [baseColorPc[0], baseColorPc[1], baseColorPc[2], Math.round(layerOpacityPc * 255)];
|
|
905
|
+
|
|
906
|
+
var getColorPc = baseColorPc;
|
|
907
|
+
if (colorFieldPc && Object.keys(colorMappingPc).length > 0) {
|
|
908
|
+
const colorValuesPc = Object.keys(colorMappingPc);
|
|
909
|
+
const colorArrayPc = Object.values(colorMappingPc).map(function(hex) {
|
|
910
|
+
if (hex && hex.startsWith('#')) {
|
|
911
|
+
return [parseInt(hex.slice(1, 3), 16), parseInt(hex.slice(3, 5), 16), parseInt(hex.slice(5, 7), 16), Math.round(layerOpacityPc * 255)];
|
|
912
|
+
}
|
|
913
|
+
return baseColorPc;
|
|
914
|
+
});
|
|
915
|
+
getColorPc = function(d) {
|
|
916
|
+
var props = d.properties || {};
|
|
917
|
+
var val = props[colorFieldPc];
|
|
918
|
+
if (val === undefined || val === null) {
|
|
919
|
+
var lower = colorFieldPc.toLowerCase();
|
|
920
|
+
for (var k in props) { if (k.toLowerCase() === lower) { val = props[k]; break; } }
|
|
921
|
+
}
|
|
922
|
+
if (val !== undefined && val !== null) {
|
|
923
|
+
var str = String(val).trim();
|
|
924
|
+
var idx = colorValuesPc.indexOf(str);
|
|
925
|
+
if (idx >= 0 && colorArrayPc[idx]) return colorArrayPc[idx];
|
|
926
|
+
for (var i = 0; i < colorValuesPc.length; i++) {
|
|
927
|
+
if (colorValuesPc[i].toLowerCase() === str.toLowerCase()) return colorArrayPc[i];
|
|
928
|
+
}
|
|
929
|
+
}
|
|
930
|
+
return baseColorPc;
|
|
931
|
+
};
|
|
932
|
+
}
|
|
933
|
+
|
|
934
|
+
var pointcloudData = pointData.map(function(p) {
|
|
935
|
+
return { position: [p.position[0], p.position[1], 0], properties: p.properties };
|
|
936
|
+
});
|
|
937
|
+
|
|
938
|
+
if (typeof deck.PointCloudLayer !== 'function') {
|
|
939
|
+
console.warn('PointCloudLayer not available, falling back to ScatterplotLayer (no stroke)');
|
|
940
|
+
return new deck.ScatterplotLayer({
|
|
941
|
+
...baseProps,
|
|
942
|
+
data: pointcloudData,
|
|
943
|
+
getPosition: d => d.position,
|
|
944
|
+
getRadius: pointSizePc,
|
|
945
|
+
radiusUnits: 'pixels',
|
|
946
|
+
opacity: layerOpacityPc,
|
|
947
|
+
getFillColor: typeof getColorPc === 'function' ? getColorPc : function() { return getColorPc; },
|
|
948
|
+
stroked: false,
|
|
949
|
+
radiusScale: 1,
|
|
950
|
+
radiusMinPixels: 1,
|
|
951
|
+
radiusMaxPixels: 100,
|
|
952
|
+
onClick: function(info) {
|
|
953
|
+
if (!info || !info.object) return;
|
|
954
|
+
var coord = info.coordinate || (info.object.position ? [info.object.position[0], info.object.position[1]] : null);
|
|
955
|
+
if (!coord) return;
|
|
956
|
+
var props = info.object.properties || {};
|
|
957
|
+
showFeaturePopup(coord, props, dataset.name || 'Feature');
|
|
958
|
+
}
|
|
959
|
+
});
|
|
960
|
+
}
|
|
961
|
+
return new deck.PointCloudLayer({
|
|
962
|
+
...baseProps,
|
|
963
|
+
data: pointcloudData,
|
|
964
|
+
getPosition: d => d.position,
|
|
965
|
+
getColor: getColorPc,
|
|
966
|
+
pointSize: pointSizePc,
|
|
967
|
+
sizeUnits: 'pixels',
|
|
968
|
+
opacity: layerOpacityPc,
|
|
969
|
+
pickable: true,
|
|
970
|
+
onClick: function(info) {
|
|
971
|
+
if (!info || !info.object) return;
|
|
972
|
+
var coord = info.coordinate || (info.object.position ? [info.object.position[0], info.object.position[1]] : null);
|
|
973
|
+
if (!coord) return;
|
|
974
|
+
var props = info.object.properties || {};
|
|
975
|
+
showFeaturePopup(coord, props, dataset.name || 'Feature');
|
|
976
|
+
}
|
|
977
|
+
});
|
|
978
|
+
}
|
|
979
|
+
|
|
980
|
+
// Arc Layer (match app's ArcLayerComponent: arcs between start/end or point targets)
|
|
981
|
+
if (layerType === 'arc') {
|
|
982
|
+
// Build arc data from original GeoJSON
|
|
983
|
+
var arcs = [];
|
|
984
|
+
var pointsList = [];
|
|
985
|
+
|
|
986
|
+
// First pass: collect point/centroid positions
|
|
987
|
+
(dataset.geojson.features || []).forEach(function(feature) {
|
|
988
|
+
if (!feature.geometry) return;
|
|
989
|
+
var geomType = feature.geometry.type;
|
|
990
|
+
var props = feature.properties || {};
|
|
991
|
+
|
|
992
|
+
if (geomType === 'Point') {
|
|
993
|
+
pointsList.push({ coords: [feature.geometry.coordinates[0], feature.geometry.coordinates[1]], properties: props });
|
|
994
|
+
} else if (geomType === 'MultiPoint') {
|
|
995
|
+
feature.geometry.coordinates.forEach(function(coord) {
|
|
996
|
+
pointsList.push({ coords: [coord[0], coord[1]], properties: props });
|
|
997
|
+
});
|
|
998
|
+
} else if (geomType === 'Polygon') {
|
|
999
|
+
var ring = feature.geometry.coordinates[0];
|
|
1000
|
+
if (ring && ring.length > 0) {
|
|
1001
|
+
var cx = ring.reduce(function(sum, c) { return sum + c[0]; }, 0) / ring.length;
|
|
1002
|
+
var cy = ring.reduce(function(sum, c) { return sum + c[1]; }, 0) / ring.length;
|
|
1003
|
+
pointsList.push({ coords: [cx, cy], properties: props });
|
|
1004
|
+
}
|
|
1005
|
+
} else if (geomType === 'MultiPolygon') {
|
|
1006
|
+
feature.geometry.coordinates.forEach(function(poly) {
|
|
1007
|
+
var r = poly[0];
|
|
1008
|
+
if (r && r.length > 0) {
|
|
1009
|
+
var cx2 = r.reduce(function(sum, c) { return sum + c[0]; }, 0) / r.length;
|
|
1010
|
+
var cy2 = r.reduce(function(sum, c) { return sum + c[1]; }, 0) / r.length;
|
|
1011
|
+
pointsList.push({ coords: [cx2, cy2], properties: props });
|
|
1012
|
+
}
|
|
1013
|
+
});
|
|
1014
|
+
}
|
|
1015
|
+
});
|
|
1016
|
+
|
|
1017
|
+
// Second pass: build arcs from LineString/MultiLineString or explicit target props
|
|
1018
|
+
(dataset.geojson.features || []).forEach(function(feature) {
|
|
1019
|
+
if (!feature.geometry) return;
|
|
1020
|
+
var geomType = feature.geometry.type;
|
|
1021
|
+
var props = feature.properties || {};
|
|
1022
|
+
|
|
1023
|
+
if (geomType === 'LineString' && feature.geometry.coordinates.length >= 2) {
|
|
1024
|
+
var coords = feature.geometry.coordinates;
|
|
1025
|
+
arcs.push({
|
|
1026
|
+
source: [coords[0][0], coords[0][1]],
|
|
1027
|
+
target: [coords[coords.length - 1][0], coords[coords.length - 1][1]],
|
|
1028
|
+
properties: props
|
|
1029
|
+
});
|
|
1030
|
+
} else if (geomType === 'MultiLineString') {
|
|
1031
|
+
feature.geometry.coordinates.forEach(function(line) {
|
|
1032
|
+
if (line.length >= 2) {
|
|
1033
|
+
arcs.push({
|
|
1034
|
+
source: [line[0][0], line[0][1]],
|
|
1035
|
+
target: [line[line.length - 1][0], line[line.length - 1][1]],
|
|
1036
|
+
properties: props
|
|
1037
|
+
});
|
|
1038
|
+
}
|
|
1039
|
+
});
|
|
1040
|
+
} else if (geomType === 'Point') {
|
|
1041
|
+
var tLng = props.targetLng || props.target_lng || props.dest_lng || props.destLng || props.toLng || props.to_lng;
|
|
1042
|
+
var tLat = props.targetLat || props.target_lat || props.dest_lat || props.destLat || props.toLat || props.to_lat;
|
|
1043
|
+
if (tLng !== undefined && tLat !== undefined) {
|
|
1044
|
+
arcs.push({
|
|
1045
|
+
source: [feature.geometry.coordinates[0], feature.geometry.coordinates[1]],
|
|
1046
|
+
target: [Number(tLng), Number(tLat)],
|
|
1047
|
+
properties: props
|
|
1048
|
+
});
|
|
1049
|
+
}
|
|
1050
|
+
}
|
|
1051
|
+
});
|
|
1052
|
+
|
|
1053
|
+
// If no explicit arcs found, connect points sequentially
|
|
1054
|
+
if (!arcs.length && pointsList.length >= 2) {
|
|
1055
|
+
for (var pi = 0; pi < pointsList.length - 1; pi++) {
|
|
1056
|
+
arcs.push({
|
|
1057
|
+
source: pointsList[pi].coords,
|
|
1058
|
+
target: pointsList[pi + 1].coords,
|
|
1059
|
+
properties: pointsList[pi].properties
|
|
1060
|
+
});
|
|
1061
|
+
}
|
|
1062
|
+
}
|
|
1063
|
+
|
|
1064
|
+
if (!arcs.length) return null;
|
|
1065
|
+
|
|
1066
|
+
var sourceColorHex = styleConfig.fillColor || dataset.color || '#3b82f6';
|
|
1067
|
+
var targetColorHex = styleConfig.strokeColor || '#ef4444';
|
|
1068
|
+
var opacityArc = styleConfig.opacity !== undefined ? styleConfig.opacity : 0.8;
|
|
1069
|
+
|
|
1070
|
+
function hexToRgbaLocal(hex, alpha) {
|
|
1071
|
+
var normalized = hex && hex.startsWith('#') ? hex : '#' + (hex || '000000');
|
|
1072
|
+
var hv = normalized.replace('#', '');
|
|
1073
|
+
var r = parseInt(hv.slice(0, 2), 16) || 0;
|
|
1074
|
+
var g = parseInt(hv.slice(2, 4), 16) || 0;
|
|
1075
|
+
var b = parseInt(hv.slice(4, 6), 16) || 0;
|
|
1076
|
+
return [r, g, b, Math.round(alpha * 255)];
|
|
1077
|
+
}
|
|
1078
|
+
|
|
1079
|
+
var sourceBase = hexToRgbaLocal(sourceColorHex, opacityArc);
|
|
1080
|
+
var targetBase = hexToRgbaLocal(targetColorHex, opacityArc);
|
|
1081
|
+
|
|
1082
|
+
var colorFieldArc = colorConfig.colorField;
|
|
1083
|
+
var colorMappingArc = colorConfig.colorMapping || {};
|
|
1084
|
+
|
|
1085
|
+
function getSourceColorArc(d) {
|
|
1086
|
+
if (colorFieldArc && colorMappingArc && Object.keys(colorMappingArc).length > 0) {
|
|
1087
|
+
var props = d.properties || {};
|
|
1088
|
+
var v = props[colorFieldArc];
|
|
1089
|
+
if (v === undefined || v === null) {
|
|
1090
|
+
var lower = colorFieldArc.toLowerCase();
|
|
1091
|
+
for (var key in props) {
|
|
1092
|
+
if (key.toLowerCase() === lower) {
|
|
1093
|
+
v = props[key];
|
|
1094
|
+
break;
|
|
1095
|
+
}
|
|
1096
|
+
}
|
|
1097
|
+
}
|
|
1098
|
+
if (v !== undefined && v !== null) {
|
|
1099
|
+
var vs = String(v).trim();
|
|
1100
|
+
var mapped = colorMappingArc[vs];
|
|
1101
|
+
if (!mapped) {
|
|
1102
|
+
for (var ck in colorMappingArc) {
|
|
1103
|
+
if (ck.toLowerCase() === vs.toLowerCase()) {
|
|
1104
|
+
mapped = colorMappingArc[ck];
|
|
1105
|
+
break;
|
|
1106
|
+
}
|
|
1107
|
+
}
|
|
1108
|
+
}
|
|
1109
|
+
if (mapped && mapped.startsWith('#')) {
|
|
1110
|
+
return hexToRgbaLocal(mapped, opacityArc);
|
|
1111
|
+
}
|
|
1112
|
+
}
|
|
1113
|
+
}
|
|
1114
|
+
return sourceBase;
|
|
1115
|
+
}
|
|
1116
|
+
|
|
1117
|
+
return new deck.ArcLayer({
|
|
1118
|
+
...baseProps,
|
|
1119
|
+
data: arcs,
|
|
1120
|
+
getSourcePosition: function(d) { return d.source; },
|
|
1121
|
+
getTargetPosition: function(d) { return d.target; },
|
|
1122
|
+
getSourceColor: getSourceColorArc,
|
|
1123
|
+
getTargetColor: targetBase,
|
|
1124
|
+
getWidth: styleConfig.strokeWidth || 2,
|
|
1125
|
+
widthMinPixels: 1,
|
|
1126
|
+
widthMaxPixels: 10,
|
|
1127
|
+
greatCircle: true,
|
|
1128
|
+
pickable: true,
|
|
1129
|
+
visible: true,
|
|
1130
|
+
opacity: opacityArc
|
|
1131
|
+
});
|
|
1132
|
+
}
|
|
1133
|
+
|
|
1134
|
+
// Great Circle Layer (match app's GreatCircleLayerComponent: GreatCircleLayer for curved arcs)
|
|
1135
|
+
if (layerType === 'greatcircle') {
|
|
1136
|
+
// Build arc data from LineString/MultiLineString or Point with target properties (same logic as GreatCircleLayerComponent)
|
|
1137
|
+
var greatCircleArcs = [];
|
|
1138
|
+
var greatCirclePoints = [];
|
|
1139
|
+
|
|
1140
|
+
// First pass: collect points (for sequential connection if needed)
|
|
1141
|
+
(dataset.geojson.features || []).forEach(function(feature) {
|
|
1142
|
+
if (!feature.geometry) return;
|
|
1143
|
+
var geomType = feature.geometry.type;
|
|
1144
|
+
var props = feature.properties || {};
|
|
1145
|
+
|
|
1146
|
+
if (geomType === 'Point') {
|
|
1147
|
+
greatCirclePoints.push({
|
|
1148
|
+
coords: [feature.geometry.coordinates[0], feature.geometry.coordinates[1]],
|
|
1149
|
+
properties: props
|
|
1150
|
+
});
|
|
1151
|
+
} else if (geomType === 'Polygon') {
|
|
1152
|
+
var ring = feature.geometry.coordinates[0];
|
|
1153
|
+
if (ring && ring.length > 0) {
|
|
1154
|
+
var cx = ring.reduce(function(sum, c) { return sum + c[0]; }, 0) / ring.length;
|
|
1155
|
+
var cy = ring.reduce(function(sum, c) { return sum + c[1]; }, 0) / ring.length;
|
|
1156
|
+
greatCirclePoints.push({ coords: [cx, cy], properties: props });
|
|
1157
|
+
}
|
|
1158
|
+
} else if (geomType === 'MultiPolygon') {
|
|
1159
|
+
feature.geometry.coordinates.forEach(function(poly) {
|
|
1160
|
+
var r = poly[0];
|
|
1161
|
+
if (r && r.length > 0) {
|
|
1162
|
+
var cx2 = r.reduce(function(sum, c) { return sum + c[0]; }, 0) / r.length;
|
|
1163
|
+
var cy2 = r.reduce(function(sum, c) { return sum + c[1]; }, 0) / r.length;
|
|
1164
|
+
greatCirclePoints.push({ coords: [cx2, cy2], properties: props });
|
|
1165
|
+
}
|
|
1166
|
+
});
|
|
1167
|
+
}
|
|
1168
|
+
});
|
|
1169
|
+
|
|
1170
|
+
// Second pass: create arcs from LineString/MultiLineString or Point with target properties
|
|
1171
|
+
(dataset.geojson.features || []).forEach(function(feature) {
|
|
1172
|
+
if (!feature.geometry) return;
|
|
1173
|
+
var geomType = feature.geometry.type;
|
|
1174
|
+
var props = feature.properties || {};
|
|
1175
|
+
|
|
1176
|
+
if (geomType === 'LineString' && feature.geometry.coordinates.length >= 2) {
|
|
1177
|
+
var coords = feature.geometry.coordinates;
|
|
1178
|
+
greatCircleArcs.push({
|
|
1179
|
+
source: [coords[0][0], coords[0][1]],
|
|
1180
|
+
target: [coords[coords.length - 1][0], coords[coords.length - 1][1]],
|
|
1181
|
+
properties: props
|
|
1182
|
+
});
|
|
1183
|
+
} else if (geomType === 'MultiLineString') {
|
|
1184
|
+
feature.geometry.coordinates.forEach(function(line) {
|
|
1185
|
+
if (line.length >= 2) {
|
|
1186
|
+
greatCircleArcs.push({
|
|
1187
|
+
source: [line[0][0], line[0][1]],
|
|
1188
|
+
target: [line[line.length - 1][0], line[line.length - 1][1]],
|
|
1189
|
+
properties: props
|
|
1190
|
+
});
|
|
1191
|
+
}
|
|
1192
|
+
});
|
|
1193
|
+
} else if (geomType === 'Point') {
|
|
1194
|
+
// Check for target coordinates in properties (match GreatCircleLayerComponent)
|
|
1195
|
+
var tLng = props.targetLng !== undefined ? props.targetLng :
|
|
1196
|
+
(props.target_lng !== undefined ? props.target_lng : undefined);
|
|
1197
|
+
var tLat = props.targetLat !== undefined ? props.targetLat :
|
|
1198
|
+
(props.target_lat !== undefined ? props.target_lat : undefined);
|
|
1199
|
+
if (tLng !== undefined && tLat !== undefined) {
|
|
1200
|
+
greatCircleArcs.push({
|
|
1201
|
+
source: [feature.geometry.coordinates[0], feature.geometry.coordinates[1]],
|
|
1202
|
+
target: [Number(tLng), Number(tLat)],
|
|
1203
|
+
properties: props
|
|
1204
|
+
});
|
|
1205
|
+
}
|
|
1206
|
+
}
|
|
1207
|
+
});
|
|
1208
|
+
|
|
1209
|
+
// If no explicit arcs found but we have multiple points, connect them sequentially
|
|
1210
|
+
if (!greatCircleArcs.length && greatCirclePoints.length >= 2) {
|
|
1211
|
+
for (var pi = 0; pi < greatCirclePoints.length - 1; pi++) {
|
|
1212
|
+
greatCircleArcs.push({
|
|
1213
|
+
source: greatCirclePoints[pi].coords,
|
|
1214
|
+
target: greatCirclePoints[pi + 1].coords,
|
|
1215
|
+
properties: greatCirclePoints[pi].properties
|
|
1216
|
+
});
|
|
1217
|
+
}
|
|
1218
|
+
}
|
|
1219
|
+
|
|
1220
|
+
if (!greatCircleArcs.length) return null;
|
|
1221
|
+
|
|
1222
|
+
// Get colors from styleConfig (match PersistentLayers: fillColor=sourceColor, strokeColor=targetColor)
|
|
1223
|
+
var sourceColorGC = styleConfig.fillColor || dataset.color || '#3b82f6';
|
|
1224
|
+
var targetColorGC = styleConfig.strokeColor || '#ef4444';
|
|
1225
|
+
var opacityGC = styleConfig.opacity !== undefined ? styleConfig.opacity : 0.8;
|
|
1226
|
+
var strokeWidthGC = styleConfig.strokeWidth ?? 2;
|
|
1227
|
+
var colorFieldGC = colorConfig.colorField;
|
|
1228
|
+
var colorMappingGC = colorConfig.colorMapping || {};
|
|
1229
|
+
var widthFieldGC = colorConfig.heightField;
|
|
1230
|
+
|
|
1231
|
+
function hexToRgbaGC(hex, alpha) {
|
|
1232
|
+
var normalized = hex && hex.startsWith('#') ? hex : '#' + (hex || '000000');
|
|
1233
|
+
var hv = normalized.replace('#', '');
|
|
1234
|
+
var r = parseInt(hv.slice(0, 2), 16) || 0;
|
|
1235
|
+
var g = parseInt(hv.slice(2, 4), 16) || 0;
|
|
1236
|
+
var b = parseInt(hv.slice(4, 6), 16) || 0;
|
|
1237
|
+
return [r, g, b, Math.round(alpha * 255)];
|
|
1238
|
+
}
|
|
1239
|
+
|
|
1240
|
+
var sourceBaseGC = hexToRgbaGC(sourceColorGC, opacityGC);
|
|
1241
|
+
var targetBaseGC = hexToRgbaGC(targetColorGC, opacityGC);
|
|
1242
|
+
|
|
1243
|
+
// getSourceColor function - supports colorField/colorMapping
|
|
1244
|
+
var getSourceColorGC = sourceBaseGC;
|
|
1245
|
+
if (colorFieldGC && colorMappingGC && Object.keys(colorMappingGC).length > 0) {
|
|
1246
|
+
getSourceColorGC = function(d) {
|
|
1247
|
+
var props = d.properties || {};
|
|
1248
|
+
var value = props[colorFieldGC];
|
|
1249
|
+
if (value === undefined || value === null) {
|
|
1250
|
+
var lowerField = colorFieldGC.toLowerCase();
|
|
1251
|
+
for (var key in props) {
|
|
1252
|
+
if (key.toLowerCase() === lowerField) {
|
|
1253
|
+
value = props[key];
|
|
1254
|
+
break;
|
|
1255
|
+
}
|
|
1256
|
+
}
|
|
1257
|
+
}
|
|
1258
|
+
if (value !== undefined && value !== null) {
|
|
1259
|
+
var valueStr = String(value).trim();
|
|
1260
|
+
var mappedColor = colorMappingGC[valueStr];
|
|
1261
|
+
if (!mappedColor) {
|
|
1262
|
+
for (var k in colorMappingGC) {
|
|
1263
|
+
if (k.toLowerCase() === valueStr.toLowerCase()) {
|
|
1264
|
+
mappedColor = colorMappingGC[k];
|
|
1265
|
+
break;
|
|
1266
|
+
}
|
|
1267
|
+
}
|
|
1268
|
+
}
|
|
1269
|
+
if (mappedColor) {
|
|
1270
|
+
return hexToRgbaGC(mappedColor, opacityGC);
|
|
1271
|
+
}
|
|
1272
|
+
}
|
|
1273
|
+
return sourceBaseGC;
|
|
1274
|
+
};
|
|
1275
|
+
}
|
|
1276
|
+
|
|
1277
|
+
// getTargetColor function (always uses targetColor, no data-driven coloring)
|
|
1278
|
+
var getTargetColorGC = targetBaseGC;
|
|
1279
|
+
|
|
1280
|
+
// getWidth function - supports widthField, defaults to strokeWidth
|
|
1281
|
+
var getWidthGC = strokeWidthGC;
|
|
1282
|
+
if (widthFieldGC) {
|
|
1283
|
+
getWidthGC = function(d) {
|
|
1284
|
+
var props = d.properties || {};
|
|
1285
|
+
var value = props[widthFieldGC];
|
|
1286
|
+
if (typeof value === 'number') return Math.max(1, value);
|
|
1287
|
+
var num = parseFloat(value);
|
|
1288
|
+
return isNaN(num) ? strokeWidthGC : Math.max(1, num);
|
|
1289
|
+
};
|
|
1290
|
+
}
|
|
1291
|
+
|
|
1292
|
+
// Check if GreatCircleLayer is available
|
|
1293
|
+
if (typeof deck.GreatCircleLayer !== 'function') {
|
|
1294
|
+
console.warn('GreatCircleLayer not available, falling back to ArcLayer with greatCircle: true');
|
|
1295
|
+
// Fallback to ArcLayer with greatCircle enabled
|
|
1296
|
+
return new deck.ArcLayer({
|
|
1297
|
+
...baseProps,
|
|
1298
|
+
data: greatCircleArcs,
|
|
1299
|
+
getSourcePosition: function(d) { return d.source; },
|
|
1300
|
+
getTargetPosition: function(d) { return d.target; },
|
|
1301
|
+
getSourceColor: getSourceColorGC,
|
|
1302
|
+
getTargetColor: getTargetColorGC,
|
|
1303
|
+
getWidth: getWidthGC,
|
|
1304
|
+
widthMinPixels: 1,
|
|
1305
|
+
widthMaxPixels: 10,
|
|
1306
|
+
greatCircle: true,
|
|
1307
|
+
pickable: true,
|
|
1308
|
+
visible: true,
|
|
1309
|
+
opacity: opacityGC,
|
|
1310
|
+
onClick: function(info) {
|
|
1311
|
+
if (!info || !info.object) return;
|
|
1312
|
+
var coord = info.coordinate || (info.object.source ? [info.object.source[0], info.object.source[1]] : null);
|
|
1313
|
+
if (!coord) return;
|
|
1314
|
+
var props = info.object.properties || {};
|
|
1315
|
+
showFeaturePopup(coord, props, dataset.name || 'Feature');
|
|
1316
|
+
},
|
|
1317
|
+
updateTriggers: {
|
|
1318
|
+
getSourceColor: [sourceColorGC, opacityGC, colorFieldGC, colorMappingGC],
|
|
1319
|
+
getTargetColor: [targetColorGC, opacityGC],
|
|
1320
|
+
getWidth: [widthFieldGC, strokeWidthGC]
|
|
1321
|
+
}
|
|
1322
|
+
});
|
|
1323
|
+
} else {
|
|
1324
|
+
// Use GreatCircleLayer (match app's GreatCircleLayerComponent)
|
|
1325
|
+
return new deck.GreatCircleLayer({
|
|
1326
|
+
...baseProps,
|
|
1327
|
+
data: greatCircleArcs,
|
|
1328
|
+
getSourcePosition: function(d) { return d.source; },
|
|
1329
|
+
getTargetPosition: function(d) { return d.target; },
|
|
1330
|
+
getSourceColor: getSourceColorGC,
|
|
1331
|
+
getTargetColor: getTargetColorGC,
|
|
1332
|
+
getWidth: getWidthGC,
|
|
1333
|
+
widthScale: 1,
|
|
1334
|
+
widthMinPixels: 1,
|
|
1335
|
+
widthMaxPixels: 10,
|
|
1336
|
+
numSegments: 50,
|
|
1337
|
+
pickable: true,
|
|
1338
|
+
visible: true,
|
|
1339
|
+
opacity: opacityGC,
|
|
1340
|
+
onClick: function(info) {
|
|
1341
|
+
if (!info || !info.object) return;
|
|
1342
|
+
var coord = info.coordinate || (info.object.source ? [info.object.source[0], info.object.source[1]] : null);
|
|
1343
|
+
if (!coord) return;
|
|
1344
|
+
var props = info.object.properties || {};
|
|
1345
|
+
showFeaturePopup(coord, props, dataset.name || 'Feature');
|
|
1346
|
+
},
|
|
1347
|
+
updateTriggers: {
|
|
1348
|
+
getSourceColor: [sourceColorGC, opacityGC, colorFieldGC, colorMappingGC],
|
|
1349
|
+
getTargetColor: [targetColorGC, opacityGC],
|
|
1350
|
+
getWidth: [widthFieldGC, strokeWidthGC]
|
|
1351
|
+
}
|
|
1352
|
+
});
|
|
1353
|
+
}
|
|
1354
|
+
}
|
|
1355
|
+
|
|
1356
|
+
// Trip Layer / Animated Trip Layer (match app's AnimatedTripsLayerComponent: TripsLayer for animated paths)
|
|
1357
|
+
// Reference: https://deck.gl/examples/trips-layer
|
|
1358
|
+
if (layerType === 'trip' || layerType === 'animatedtrip') {
|
|
1359
|
+
// Process data into trips format as per deck.gl example
|
|
1360
|
+
// Each trip has: { waypoints: [{ coordinates: [lng, lat], timestamp: number }] }
|
|
1361
|
+
var trips = [];
|
|
1362
|
+
var maxTime = 0;
|
|
1363
|
+
var isAnimated = layerType === 'animatedtrip';
|
|
1364
|
+
|
|
1365
|
+
(dataset.geojson.features || []).forEach(function(feature, featureIndex) {
|
|
1366
|
+
if (!feature.geometry) return;
|
|
1367
|
+
var geometry = feature.geometry;
|
|
1368
|
+
var props = feature.properties || {};
|
|
1369
|
+
|
|
1370
|
+
var coordinates = [];
|
|
1371
|
+
|
|
1372
|
+
// Extract coordinates based on geometry type
|
|
1373
|
+
if (geometry.type === 'LineString' && geometry.coordinates) {
|
|
1374
|
+
coordinates = geometry.coordinates;
|
|
1375
|
+
} else if (geometry.type === 'MultiLineString' && Array.isArray(geometry.coordinates)) {
|
|
1376
|
+
// Flatten MultiLineString into single path
|
|
1377
|
+
geometry.coordinates.forEach(function(line) {
|
|
1378
|
+
coordinates = coordinates.concat(line);
|
|
1379
|
+
});
|
|
1380
|
+
} else if (geometry.type === 'Polygon' && geometry.coordinates && geometry.coordinates[0]) {
|
|
1381
|
+
coordinates = geometry.coordinates[0]; // Use outer ring
|
|
1382
|
+
} else if (geometry.type === 'MultiPolygon' && Array.isArray(geometry.coordinates)) {
|
|
1383
|
+
// Use first polygon's outer ring
|
|
1384
|
+
if (geometry.coordinates[0] && geometry.coordinates[0][0]) {
|
|
1385
|
+
coordinates = geometry.coordinates[0][0];
|
|
1386
|
+
}
|
|
1387
|
+
}
|
|
1388
|
+
|
|
1389
|
+
if (coordinates.length >= 2) {
|
|
1390
|
+
// Create waypoints with timestamps (as per deck.gl example)
|
|
1391
|
+
// Check if timestamps exist in properties, otherwise generate them
|
|
1392
|
+
var timestamps = [];
|
|
1393
|
+
if (props.timestamps && Array.isArray(props.timestamps)) {
|
|
1394
|
+
timestamps = props.timestamps;
|
|
1395
|
+
} else if (props.times && Array.isArray(props.times)) {
|
|
1396
|
+
timestamps = props.times;
|
|
1397
|
+
} else if (props.time && Array.isArray(props.time)) {
|
|
1398
|
+
timestamps = props.time;
|
|
1399
|
+
} else {
|
|
1400
|
+
// Generate timestamps: 30 units per point (as per AnimatedTripsLayerComponent)
|
|
1401
|
+
for (var i = 0; i < coordinates.length; i++) {
|
|
1402
|
+
timestamps.push(i * 30);
|
|
1403
|
+
}
|
|
1404
|
+
}
|
|
1405
|
+
|
|
1406
|
+
var waypoints = coordinates.map(function(coord, i) {
|
|
1407
|
+
return {
|
|
1408
|
+
coordinates: [coord[0], coord[1]],
|
|
1409
|
+
timestamp: timestamps[i] !== undefined ? timestamps[i] : (i * 30)
|
|
1410
|
+
};
|
|
1411
|
+
});
|
|
1412
|
+
|
|
1413
|
+
var tripMaxTime = waypoints[waypoints.length - 1].timestamp;
|
|
1414
|
+
if (tripMaxTime > maxTime) maxTime = tripMaxTime;
|
|
1415
|
+
|
|
1416
|
+
trips.push({
|
|
1417
|
+
waypoints: waypoints,
|
|
1418
|
+
properties: props,
|
|
1419
|
+
index: featureIndex
|
|
1420
|
+
});
|
|
1421
|
+
}
|
|
1422
|
+
});
|
|
1423
|
+
|
|
1424
|
+
if (trips.length === 0) return null;
|
|
1425
|
+
|
|
1426
|
+
// Get styling from styleConfig (match AnimatedTripsLayerComponent defaults)
|
|
1427
|
+
var fillColorTrip = styleConfig.fillColor || dataset.color || '#fd805d'; // [253, 128, 93] as per deck.gl example
|
|
1428
|
+
var opacityTrip = styleConfig.opacity !== undefined ? styleConfig.opacity : 0.8;
|
|
1429
|
+
var trailLengthTrip = 600; // As per deck.gl example and AnimatedTripsLayerComponent
|
|
1430
|
+
var widthMinPixelsTrip = 8; // As per deck.gl example
|
|
1431
|
+
var widthMaxPixelsTrip = 12;
|
|
1432
|
+
var capRoundedTrip = true; // As per deck.gl example
|
|
1433
|
+
var jointRoundedTrip = true; // As per deck.gl example
|
|
1434
|
+
var fadeTrailTrip = true;
|
|
1435
|
+
var colorFieldTrip = colorConfig.colorField;
|
|
1436
|
+
var colorMappingTrip = colorConfig.colorMapping || {};
|
|
1437
|
+
|
|
1438
|
+
function hexToRgbTrip(hex) {
|
|
1439
|
+
var normalized = hex && hex.startsWith('#') ? hex : '#' + (hex || '000000');
|
|
1440
|
+
var hv = normalized.replace('#', '');
|
|
1441
|
+
var r = parseInt(hv.slice(0, 2), 16) || 253;
|
|
1442
|
+
var g = parseInt(hv.slice(2, 4), 16) || 128;
|
|
1443
|
+
var b = parseInt(hv.slice(4, 6), 16) || 93;
|
|
1444
|
+
return [r, g, b];
|
|
1445
|
+
}
|
|
1446
|
+
|
|
1447
|
+
// getColor function - supports colorField/colorMapping (match AnimatedTripsLayerComponent exactly)
|
|
1448
|
+
// Returns RGB array [r, g, b] - opacity is handled separately via layer's opacity prop
|
|
1449
|
+
var baseColorTrip = hexToRgbTrip(fillColorTrip);
|
|
1450
|
+
var getColorTrip;
|
|
1451
|
+
if (colorFieldTrip && colorMappingTrip && Object.keys(colorMappingTrip).length > 0) {
|
|
1452
|
+
getColorTrip = function(d) {
|
|
1453
|
+
var props = d.properties || {};
|
|
1454
|
+
var value = props[colorFieldTrip];
|
|
1455
|
+
if (value === undefined || value === null) {
|
|
1456
|
+
var lowerField = colorFieldTrip.toLowerCase();
|
|
1457
|
+
for (var key in props) {
|
|
1458
|
+
if (key.toLowerCase() === lowerField) {
|
|
1459
|
+
value = props[key];
|
|
1460
|
+
break;
|
|
1461
|
+
}
|
|
1462
|
+
}
|
|
1463
|
+
}
|
|
1464
|
+
if (value !== undefined && value !== null) {
|
|
1465
|
+
var valueStr = String(value).trim();
|
|
1466
|
+
var mappedColor = colorMappingTrip[valueStr];
|
|
1467
|
+
if (!mappedColor) {
|
|
1468
|
+
for (var k in colorMappingTrip) {
|
|
1469
|
+
if (k.toLowerCase() === valueStr.toLowerCase()) {
|
|
1470
|
+
mappedColor = colorMappingTrip[k];
|
|
1471
|
+
break;
|
|
1472
|
+
}
|
|
1473
|
+
}
|
|
1474
|
+
}
|
|
1475
|
+
if (mappedColor) {
|
|
1476
|
+
return hexToRgbTrip(mappedColor);
|
|
1477
|
+
}
|
|
1478
|
+
}
|
|
1479
|
+
return baseColorTrip;
|
|
1480
|
+
};
|
|
1481
|
+
} else {
|
|
1482
|
+
// When no colorField/colorMapping, return color directly (array), not a function
|
|
1483
|
+
// Match AnimatedTripsLayerComponent: getColorAccessor = color (line 176)
|
|
1484
|
+
getColorTrip = baseColorTrip;
|
|
1485
|
+
}
|
|
1486
|
+
|
|
1487
|
+
// Calculate loop length for animation
|
|
1488
|
+
var loopLengthTrip = maxTime + trailLengthTrip;
|
|
1489
|
+
|
|
1490
|
+
// Check if TripsLayer is available
|
|
1491
|
+
if (typeof deck.TripsLayer !== 'function') {
|
|
1492
|
+
console.warn('TripsLayer not available, falling back to PathLayer');
|
|
1493
|
+
// Fallback to PathLayer (static paths)
|
|
1494
|
+
var pathDataTrip = [];
|
|
1495
|
+
trips.forEach(function(trip) {
|
|
1496
|
+
pathDataTrip.push({
|
|
1497
|
+
path: trip.waypoints.map(function(wp) { return wp.coordinates; }),
|
|
1498
|
+
properties: trip.properties
|
|
1499
|
+
});
|
|
1500
|
+
});
|
|
1501
|
+
return new deck.PathLayer({
|
|
1502
|
+
...baseProps,
|
|
1503
|
+
data: pathDataTrip,
|
|
1504
|
+
getPath: function(d) { return d.path; },
|
|
1505
|
+
getColor: getColorTrip,
|
|
1506
|
+
getWidth: 3,
|
|
1507
|
+
widthMinPixels: widthMinPixelsTrip,
|
|
1508
|
+
widthMaxPixels: widthMaxPixelsTrip,
|
|
1509
|
+
capRounded: capRoundedTrip,
|
|
1510
|
+
jointRounded: jointRoundedTrip,
|
|
1511
|
+
pickable: true,
|
|
1512
|
+
visible: true,
|
|
1513
|
+
opacity: opacityTrip,
|
|
1514
|
+
onClick: function(info) {
|
|
1515
|
+
if (!info || !info.object) return;
|
|
1516
|
+
var coord = info.coordinate || (info.object.path && info.object.path.length > 0 ?
|
|
1517
|
+
[info.object.path[0][0], info.object.path[0][1]] : null);
|
|
1518
|
+
if (!coord) return;
|
|
1519
|
+
var props = info.object.properties || {};
|
|
1520
|
+
showFeaturePopup(coord, props, dataset.name || 'Feature');
|
|
1521
|
+
},
|
|
1522
|
+
updateTriggers: {
|
|
1523
|
+
getColor: [fillColorTrip, opacityTrip, colorFieldTrip, colorMappingTrip]
|
|
1524
|
+
}
|
|
1525
|
+
});
|
|
1526
|
+
} else {
|
|
1527
|
+
// Use TripsLayer (match app's AnimatedTripsLayerComponent and deck.gl example)
|
|
1528
|
+
// For animated trips, we'll set currentTime to loop through timestamps
|
|
1529
|
+
// For static trips, set currentTime to maxTime to show full paths
|
|
1530
|
+
var currentTimeTrip = isAnimated ? 0 : maxTime; // Start at 0 for animation, maxTime for static
|
|
1531
|
+
|
|
1532
|
+
// Store animation state for this layer if animated
|
|
1533
|
+
if (isAnimated) {
|
|
1534
|
+
var animationSpeedTrip = 1; // Match PersistentLayers.tsx which passes animationSpeed={1}
|
|
1535
|
+
tripLayerAnimations[baseProps.id] = {
|
|
1536
|
+
isAnimated: true,
|
|
1537
|
+
startTime: Date.now(),
|
|
1538
|
+
speed: animationSpeedTrip,
|
|
1539
|
+
loopLength: loopLengthTrip
|
|
1540
|
+
};
|
|
1541
|
+
// Start animation loop if not already running
|
|
1542
|
+
if (!animationFrameIdTrip) {
|
|
1543
|
+
animationFrameIdTrip = requestAnimationFrame(animateTripLayers);
|
|
1544
|
+
}
|
|
1545
|
+
}
|
|
1546
|
+
|
|
1547
|
+
return new deck.TripsLayer({
|
|
1548
|
+
...baseProps,
|
|
1549
|
+
data: trips,
|
|
1550
|
+
// Accessors as per deck.gl example: https://deck.gl/examples/trips-layer
|
|
1551
|
+
getPath: function(d) { return d.waypoints.map(function(wp) { return wp.coordinates; }); },
|
|
1552
|
+
getTimestamps: function(d) { return d.waypoints.map(function(wp) { return wp.timestamp; }); },
|
|
1553
|
+
getColor: getColorTrip,
|
|
1554
|
+
// Animation properties (as per deck.gl example)
|
|
1555
|
+
currentTime: currentTimeTrip,
|
|
1556
|
+
trailLength: trailLengthTrip,
|
|
1557
|
+
fadeTrail: fadeTrailTrip,
|
|
1558
|
+
// Styling as per deck.gl example
|
|
1559
|
+
capRounded: capRoundedTrip,
|
|
1560
|
+
jointRounded: jointRoundedTrip,
|
|
1561
|
+
widthMinPixels: widthMinPixelsTrip,
|
|
1562
|
+
widthMaxPixels: widthMaxPixelsTrip,
|
|
1563
|
+
// Other properties
|
|
1564
|
+
opacity: opacityTrip,
|
|
1565
|
+
pickable: true,
|
|
1566
|
+
onClick: function(info) {
|
|
1567
|
+
if (!info || !info.object) return;
|
|
1568
|
+
var coord = info.coordinate || (info.object.waypoints && info.object.waypoints.length > 0 ?
|
|
1569
|
+
[info.object.waypoints[0].coordinates[0], info.object.waypoints[0].coordinates[1]] : null);
|
|
1570
|
+
if (!coord) return;
|
|
1571
|
+
var props = info.object.properties || {};
|
|
1572
|
+
showFeaturePopup(coord, props, dataset.name || 'Feature');
|
|
1573
|
+
},
|
|
1574
|
+
updateTriggers: {
|
|
1575
|
+
getColor: [fillColorTrip, colorFieldTrip, colorMappingTrip],
|
|
1576
|
+
// Note: currentTime is updated via layer.clone() in updateDeckLayers() animation loop
|
|
1577
|
+
// No need to include it in updateTriggers as it's updated directly
|
|
1578
|
+
}
|
|
1579
|
+
});
|
|
1580
|
+
}
|
|
1581
|
+
}
|
|
1582
|
+
|
|
1583
|
+
// (H3ClusterLayer export was attempted but is not reliable with CDN bundle; we now treat h3cluster like hexagon aggregation above)
|
|
1584
|
+
|
|
1585
|
+
// H3 Hexagon Layer or Hexbin Layer (also used as fallback for h3cluster export)
|
|
1586
|
+
if (layerType === 'h3' || layerType === 'hexbin' || layerType === 'hexagon') {
|
|
1587
|
+
const heightField = colorConfig.heightField;
|
|
1588
|
+
const colorField = colorConfig.colorField;
|
|
1589
|
+
const colorMapping = colorConfig.colorMapping || {};
|
|
1590
|
+
const layerOpacityValue = styleConfig.opacity !== undefined ? styleConfig.opacity : 0.9;
|
|
1591
|
+
|
|
1592
|
+
// Build color range from colorMapping if available
|
|
1593
|
+
let hexColorRange = COLOR_RANGE;
|
|
1594
|
+
if (colorField && Object.keys(colorMapping).length > 0) {
|
|
1595
|
+
hexColorRange = Object.values(colorMapping).map(function(hexColor) {
|
|
1596
|
+
if (hexColor && hexColor.startsWith('#')) {
|
|
1597
|
+
return [
|
|
1598
|
+
parseInt(hexColor.slice(1, 3), 16),
|
|
1599
|
+
parseInt(hexColor.slice(3, 5), 16),
|
|
1600
|
+
parseInt(hexColor.slice(5, 7), 16)
|
|
1601
|
+
];
|
|
1602
|
+
}
|
|
1603
|
+
return [255, 200, 0];
|
|
1604
|
+
});
|
|
1605
|
+
}
|
|
1606
|
+
|
|
1607
|
+
// Color by category when colorField/colorMapping are provided (match grid layer behavior),
|
|
1608
|
+
// otherwise fall back to simple density-based coloring.
|
|
1609
|
+
const getColorValue = colorField && Object.keys(colorMapping).length > 0
|
|
1610
|
+
? function(points) {
|
|
1611
|
+
if (points.length === 0) return 0;
|
|
1612
|
+
const valueCounts = {};
|
|
1613
|
+
points.forEach(function(point) {
|
|
1614
|
+
const props = point.properties || {};
|
|
1615
|
+
let val = props[colorField];
|
|
1616
|
+
if (val === undefined || val === null) {
|
|
1617
|
+
const lowerField = colorField.toLowerCase();
|
|
1618
|
+
for (var key in props) {
|
|
1619
|
+
if (key.toLowerCase() === lowerField) {
|
|
1620
|
+
val = props[key];
|
|
1621
|
+
break;
|
|
1622
|
+
}
|
|
1623
|
+
}
|
|
1624
|
+
}
|
|
1625
|
+
if (val !== undefined && val !== null) {
|
|
1626
|
+
const strVal = String(val);
|
|
1627
|
+
valueCounts[strVal] = (valueCounts[strVal] || 0) + 1;
|
|
1628
|
+
}
|
|
1629
|
+
});
|
|
1630
|
+
let maxCount = 0;
|
|
1631
|
+
let dominantValue = null;
|
|
1632
|
+
for (var v in valueCounts) {
|
|
1633
|
+
if (valueCounts[v] > maxCount) {
|
|
1634
|
+
maxCount = valueCounts[v];
|
|
1635
|
+
dominantValue = v;
|
|
1636
|
+
}
|
|
1637
|
+
}
|
|
1638
|
+
const uniqueValues = Object.keys(colorMapping);
|
|
1639
|
+
if (dominantValue && uniqueValues.length > 0) {
|
|
1640
|
+
const idx = uniqueValues.indexOf(dominantValue);
|
|
1641
|
+
return idx >= 0 ? idx : 0;
|
|
1642
|
+
}
|
|
1643
|
+
return points.length;
|
|
1644
|
+
}
|
|
1645
|
+
: function(points) {
|
|
1646
|
+
return points.length;
|
|
1647
|
+
};
|
|
1648
|
+
|
|
1649
|
+
return new deck.HexagonLayer({
|
|
1650
|
+
...baseProps,
|
|
1651
|
+
getPosition: d => d.position,
|
|
1652
|
+
radius: cellSize,
|
|
1653
|
+
elevationScale: elevationScale,
|
|
1654
|
+
extruded: true,
|
|
1655
|
+
colorRange: hexColorRange,
|
|
1656
|
+
coverage: 0.9,
|
|
1657
|
+
opacity: layerOpacityValue,
|
|
1658
|
+
getElevationValue: heightField ? function(points) {
|
|
1659
|
+
let sum = 0;
|
|
1660
|
+
points.forEach(function(p) {
|
|
1661
|
+
const val = p.properties[heightField];
|
|
1662
|
+
if (val !== undefined && val !== null) {
|
|
1663
|
+
sum += Number(val) || 0;
|
|
1664
|
+
}
|
|
1665
|
+
});
|
|
1666
|
+
return Math.max(100, Math.sqrt(sum) * 15);
|
|
1667
|
+
} : function(points) { return points.length * 50; },
|
|
1668
|
+
getColorValue: getColorValue,
|
|
1669
|
+
});
|
|
1670
|
+
}
|
|
1671
|
+
|
|
1672
|
+
// Column Layer (3D columns at point locations)
|
|
1673
|
+
if (layerType === 'column') {
|
|
1674
|
+
const heightField = colorConfig.heightField;
|
|
1675
|
+
const colorField = colorConfig.colorField;
|
|
1676
|
+
const colorMapping = colorConfig.colorMapping || {};
|
|
1677
|
+
const layerOpacityValue = styleConfig.opacity !== undefined ? styleConfig.opacity : 0.9;
|
|
1678
|
+
|
|
1679
|
+
// Build color lookup from colorMapping
|
|
1680
|
+
const colorValues = Object.keys(colorMapping);
|
|
1681
|
+
const colorArray = Object.values(colorMapping).map(function(hexColor) {
|
|
1682
|
+
if (hexColor && hexColor.startsWith('#')) {
|
|
1683
|
+
return [
|
|
1684
|
+
parseInt(hexColor.slice(1, 3), 16),
|
|
1685
|
+
parseInt(hexColor.slice(3, 5), 16),
|
|
1686
|
+
parseInt(hexColor.slice(5, 7), 16),
|
|
1687
|
+
Math.round(layerOpacityValue * 255)
|
|
1688
|
+
];
|
|
1689
|
+
}
|
|
1690
|
+
return [...color, Math.round(layerOpacityValue * 255)];
|
|
1691
|
+
});
|
|
1692
|
+
|
|
1693
|
+
return new deck.ColumnLayer({
|
|
1694
|
+
...baseProps,
|
|
1695
|
+
getPosition: d => d.position,
|
|
1696
|
+
diskResolution: 12,
|
|
1697
|
+
radius: cellSize / 2,
|
|
1698
|
+
extruded: true,
|
|
1699
|
+
elevationScale: elevationScale,
|
|
1700
|
+
opacity: layerOpacityValue,
|
|
1701
|
+
getElevation: d => {
|
|
1702
|
+
if (heightField && d.properties[heightField] !== undefined) {
|
|
1703
|
+
const val = Number(d.properties[heightField]) || 0;
|
|
1704
|
+
return Math.max(100, Math.sqrt(val) * 15);
|
|
1705
|
+
}
|
|
1706
|
+
return 1000;
|
|
1707
|
+
},
|
|
1708
|
+
getFillColor: d => {
|
|
1709
|
+
if (colorField && colorMapping && d.properties[colorField] !== undefined) {
|
|
1710
|
+
const val = String(d.properties[colorField]);
|
|
1711
|
+
const idx = colorValues.indexOf(val);
|
|
1712
|
+
if (idx >= 0 && colorArray[idx]) {
|
|
1713
|
+
return colorArray[idx];
|
|
1714
|
+
}
|
|
1715
|
+
}
|
|
1716
|
+
return [...color, Math.round(layerOpacityValue * 255)];
|
|
1717
|
+
},
|
|
1718
|
+
});
|
|
1719
|
+
}
|
|
1720
|
+
|
|
1721
|
+
// Icon Layer (match app's IconLayerComponent: custom icons with colorField support)
|
|
1722
|
+
if (layerType === 'icon') {
|
|
1723
|
+
const fillColorIcon = styleConfig.fillColor || dataset.color || '#3388FF';
|
|
1724
|
+
const iconSizeIcon = styleConfig.pointRadius ? Math.max(5, Math.min(styleConfig.pointRadius, 50)) : 15;
|
|
1725
|
+
const layerOpacityIcon = styleConfig.opacity !== undefined ? styleConfig.opacity : 1;
|
|
1726
|
+
const iconTypeIcon = styleConfig.iconType || 'marker';
|
|
1727
|
+
const colorFieldIcon = colorConfig.colorField;
|
|
1728
|
+
const colorMappingIcon = colorConfig.colorMapping || {};
|
|
1729
|
+
|
|
1730
|
+
// Helper function to create icon canvas (matches IconLayerComponent)
|
|
1731
|
+
function createIconCanvasExport(iconType, color) {
|
|
1732
|
+
var canvas = document.createElement('canvas');
|
|
1733
|
+
canvas.width = 64;
|
|
1734
|
+
canvas.height = 64;
|
|
1735
|
+
var ctx = canvas.getContext('2d');
|
|
1736
|
+
if (!ctx) return null;
|
|
1737
|
+
|
|
1738
|
+
ctx.fillStyle = color;
|
|
1739
|
+
ctx.strokeStyle = '#ffffff';
|
|
1740
|
+
ctx.lineWidth = 2;
|
|
1741
|
+
|
|
1742
|
+
switch (iconType) {
|
|
1743
|
+
case 'circle':
|
|
1744
|
+
ctx.beginPath();
|
|
1745
|
+
ctx.arc(32, 32, 28, 0, Math.PI * 2);
|
|
1746
|
+
ctx.fill();
|
|
1747
|
+
ctx.stroke();
|
|
1748
|
+
break;
|
|
1749
|
+
case 'marker':
|
|
1750
|
+
ctx.beginPath();
|
|
1751
|
+
ctx.moveTo(32, 4);
|
|
1752
|
+
ctx.bezierCurveTo(12, 4, 4, 20, 4, 28);
|
|
1753
|
+
ctx.bezierCurveTo(4, 44, 32, 60, 32, 60);
|
|
1754
|
+
ctx.bezierCurveTo(32, 60, 60, 44, 60, 28);
|
|
1755
|
+
ctx.bezierCurveTo(60, 20, 52, 4, 32, 4);
|
|
1756
|
+
ctx.fill();
|
|
1757
|
+
ctx.stroke();
|
|
1758
|
+
ctx.fillStyle = '#ffffff';
|
|
1759
|
+
ctx.beginPath();
|
|
1760
|
+
ctx.arc(32, 26, 10, 0, Math.PI * 2);
|
|
1761
|
+
ctx.fill();
|
|
1762
|
+
break;
|
|
1763
|
+
case 'square':
|
|
1764
|
+
ctx.fillRect(8, 8, 48, 48);
|
|
1765
|
+
ctx.strokeRect(8, 8, 48, 48);
|
|
1766
|
+
break;
|
|
1767
|
+
case 'diamond':
|
|
1768
|
+
ctx.beginPath();
|
|
1769
|
+
ctx.moveTo(32, 4);
|
|
1770
|
+
ctx.lineTo(60, 32);
|
|
1771
|
+
ctx.lineTo(32, 60);
|
|
1772
|
+
ctx.lineTo(4, 32);
|
|
1773
|
+
ctx.closePath();
|
|
1774
|
+
ctx.fill();
|
|
1775
|
+
ctx.stroke();
|
|
1776
|
+
break;
|
|
1777
|
+
case 'triangle':
|
|
1778
|
+
ctx.beginPath();
|
|
1779
|
+
ctx.moveTo(32, 8);
|
|
1780
|
+
ctx.lineTo(58, 56);
|
|
1781
|
+
ctx.lineTo(6, 56);
|
|
1782
|
+
ctx.closePath();
|
|
1783
|
+
ctx.fill();
|
|
1784
|
+
ctx.stroke();
|
|
1785
|
+
break;
|
|
1786
|
+
case 'star':
|
|
1787
|
+
ctx.beginPath();
|
|
1788
|
+
for (var i = 0; i < 5; i++) {
|
|
1789
|
+
var outerAngle = (i * 72 - 90) * Math.PI / 180;
|
|
1790
|
+
var innerAngle = ((i * 72) + 36 - 90) * Math.PI / 180;
|
|
1791
|
+
var outerX = 32 + 28 * Math.cos(outerAngle);
|
|
1792
|
+
var outerY = 32 + 28 * Math.sin(outerAngle);
|
|
1793
|
+
var innerX = 32 + 12 * Math.cos(innerAngle);
|
|
1794
|
+
var innerY = 32 + 12 * Math.sin(innerAngle);
|
|
1795
|
+
if (i === 0) {
|
|
1796
|
+
ctx.moveTo(outerX, outerY);
|
|
1797
|
+
} else {
|
|
1798
|
+
ctx.lineTo(outerX, outerY);
|
|
1799
|
+
}
|
|
1800
|
+
ctx.lineTo(innerX, innerY);
|
|
1801
|
+
}
|
|
1802
|
+
ctx.closePath();
|
|
1803
|
+
ctx.fill();
|
|
1804
|
+
ctx.stroke();
|
|
1805
|
+
break;
|
|
1806
|
+
case 'hospital':
|
|
1807
|
+
ctx.fillRect(8, 8, 48, 48);
|
|
1808
|
+
ctx.strokeRect(8, 8, 48, 48);
|
|
1809
|
+
ctx.fillStyle = '#ffffff';
|
|
1810
|
+
ctx.fillRect(26, 16, 12, 32);
|
|
1811
|
+
ctx.fillRect(16, 26, 32, 12);
|
|
1812
|
+
break;
|
|
1813
|
+
case 'school':
|
|
1814
|
+
ctx.beginPath();
|
|
1815
|
+
ctx.moveTo(32, 8);
|
|
1816
|
+
ctx.lineTo(56, 24);
|
|
1817
|
+
ctx.lineTo(56, 40);
|
|
1818
|
+
ctx.lineTo(32, 56);
|
|
1819
|
+
ctx.lineTo(8, 40);
|
|
1820
|
+
ctx.lineTo(8, 24);
|
|
1821
|
+
ctx.closePath();
|
|
1822
|
+
ctx.fill();
|
|
1823
|
+
ctx.stroke();
|
|
1824
|
+
break;
|
|
1825
|
+
case 'home':
|
|
1826
|
+
ctx.beginPath();
|
|
1827
|
+
ctx.moveTo(32, 8);
|
|
1828
|
+
ctx.lineTo(56, 32);
|
|
1829
|
+
ctx.lineTo(48, 32);
|
|
1830
|
+
ctx.lineTo(48, 56);
|
|
1831
|
+
ctx.lineTo(16, 56);
|
|
1832
|
+
ctx.lineTo(16, 32);
|
|
1833
|
+
ctx.lineTo(8, 32);
|
|
1834
|
+
ctx.closePath();
|
|
1835
|
+
ctx.fill();
|
|
1836
|
+
ctx.stroke();
|
|
1837
|
+
ctx.fillStyle = '#ffffff';
|
|
1838
|
+
ctx.fillRect(26, 40, 12, 16);
|
|
1839
|
+
break;
|
|
1840
|
+
case 'flag':
|
|
1841
|
+
ctx.fillRect(12, 8, 4, 48);
|
|
1842
|
+
ctx.beginPath();
|
|
1843
|
+
ctx.moveTo(16, 8);
|
|
1844
|
+
ctx.lineTo(52, 20);
|
|
1845
|
+
ctx.lineTo(16, 32);
|
|
1846
|
+
ctx.closePath();
|
|
1847
|
+
ctx.fill();
|
|
1848
|
+
break;
|
|
1849
|
+
default:
|
|
1850
|
+
ctx.beginPath();
|
|
1851
|
+
ctx.arc(32, 32, 28, 0, Math.PI * 2);
|
|
1852
|
+
ctx.fill();
|
|
1853
|
+
ctx.stroke();
|
|
1854
|
+
}
|
|
1855
|
+
return canvas;
|
|
1856
|
+
}
|
|
1857
|
+
|
|
1858
|
+
// Create icon atlas if colorField is set, otherwise single canvas
|
|
1859
|
+
var iconAtlasCanvas = null;
|
|
1860
|
+
var iconMappingExport = { marker: { x: 0, y: 0, width: 64, height: 64, mask: false } };
|
|
1861
|
+
|
|
1862
|
+
if (colorFieldIcon && colorMappingIcon && Object.keys(colorMappingIcon).length > 0) {
|
|
1863
|
+
// Create atlas with one icon per color
|
|
1864
|
+
var colors = Object.values(colorMappingIcon);
|
|
1865
|
+
var uniqueColors = [];
|
|
1866
|
+
var seenColors = {};
|
|
1867
|
+
colors.forEach(function(c) {
|
|
1868
|
+
if (!seenColors[c]) {
|
|
1869
|
+
uniqueColors.push(c);
|
|
1870
|
+
seenColors[c] = true;
|
|
1871
|
+
}
|
|
1872
|
+
});
|
|
1873
|
+
|
|
1874
|
+
var iconSize = 64;
|
|
1875
|
+
var totalIcons = uniqueColors.includes(fillColorIcon) ? uniqueColors.length : uniqueColors.length + 1;
|
|
1876
|
+
var iconsPerRow = Math.ceil(Math.sqrt(totalIcons));
|
|
1877
|
+
var atlasSize = iconsPerRow * iconSize;
|
|
1878
|
+
|
|
1879
|
+
iconAtlasCanvas = document.createElement('canvas');
|
|
1880
|
+
iconAtlasCanvas.width = atlasSize;
|
|
1881
|
+
iconAtlasCanvas.height = atlasSize;
|
|
1882
|
+
var atlasCtx = iconAtlasCanvas.getContext('2d');
|
|
1883
|
+
if (atlasCtx) {
|
|
1884
|
+
var colorToPosition = {};
|
|
1885
|
+
iconMappingExport = {};
|
|
1886
|
+
|
|
1887
|
+
uniqueColors.forEach(function(color, index) {
|
|
1888
|
+
var row = Math.floor(index / iconsPerRow);
|
|
1889
|
+
var col = index % iconsPerRow;
|
|
1890
|
+
var x = col * iconSize;
|
|
1891
|
+
var y = row * iconSize;
|
|
1892
|
+
|
|
1893
|
+
var iconCanvas = createIconCanvasExport(iconTypeIcon, color);
|
|
1894
|
+
if (iconCanvas) {
|
|
1895
|
+
atlasCtx.drawImage(iconCanvas, x, y);
|
|
1896
|
+
}
|
|
1897
|
+
colorToPosition[color] = { x: x, y: y };
|
|
1898
|
+
});
|
|
1899
|
+
|
|
1900
|
+
// Map all colorMapping keys to their icon positions
|
|
1901
|
+
Object.keys(colorMappingIcon).forEach(function(key) {
|
|
1902
|
+
var color = colorMappingIcon[key];
|
|
1903
|
+
var pos = colorToPosition[color];
|
|
1904
|
+
if (pos) {
|
|
1905
|
+
iconMappingExport[key] = { x: pos.x, y: pos.y, width: iconSize, height: iconSize, mask: false };
|
|
1906
|
+
}
|
|
1907
|
+
});
|
|
1908
|
+
|
|
1909
|
+
// Add default icon if fillColor not in uniqueColors
|
|
1910
|
+
if (!colorToPosition[fillColorIcon]) {
|
|
1911
|
+
var defaultIndex = uniqueColors.length;
|
|
1912
|
+
var defaultRow = Math.floor(defaultIndex / iconsPerRow);
|
|
1913
|
+
var defaultCol = defaultIndex % iconsPerRow;
|
|
1914
|
+
var defaultX = defaultCol * iconSize;
|
|
1915
|
+
var defaultY = defaultRow * iconSize;
|
|
1916
|
+
var defaultIcon = createIconCanvasExport(iconTypeIcon, fillColorIcon);
|
|
1917
|
+
if (defaultIcon) {
|
|
1918
|
+
atlasCtx.drawImage(defaultIcon, defaultX, defaultY);
|
|
1919
|
+
}
|
|
1920
|
+
iconMappingExport['default'] = { x: defaultX, y: defaultY, width: iconSize, height: iconSize, mask: false };
|
|
1921
|
+
} else {
|
|
1922
|
+
var pos = colorToPosition[fillColorIcon];
|
|
1923
|
+
iconMappingExport['default'] = { x: pos.x, y: pos.y, width: iconSize, height: iconSize, mask: false };
|
|
1924
|
+
}
|
|
1925
|
+
}
|
|
1926
|
+
} else {
|
|
1927
|
+
// Single color - create simple canvas
|
|
1928
|
+
iconAtlasCanvas = createIconCanvasExport(iconTypeIcon, fillColorIcon);
|
|
1929
|
+
}
|
|
1930
|
+
|
|
1931
|
+
if (!iconAtlasCanvas) {
|
|
1932
|
+
console.warn('Failed to create icon canvas, falling back to ScatterplotLayer');
|
|
1933
|
+
// Fall through to ScatterplotLayer
|
|
1934
|
+
} else {
|
|
1935
|
+
// getIcon function - returns icon key based on colorField
|
|
1936
|
+
var getIconFn = function() { return 'marker'; };
|
|
1937
|
+
if (colorFieldIcon && colorMappingIcon && Object.keys(colorMappingIcon).length > 0) {
|
|
1938
|
+
getIconFn = function(d) {
|
|
1939
|
+
var props = d.properties || {};
|
|
1940
|
+
var value = props[colorFieldIcon];
|
|
1941
|
+
if (value === undefined || value === null) {
|
|
1942
|
+
var lowerField = colorFieldIcon.toLowerCase();
|
|
1943
|
+
for (var key in props) {
|
|
1944
|
+
if (key.toLowerCase() === lowerField) {
|
|
1945
|
+
value = props[key];
|
|
1946
|
+
break;
|
|
1947
|
+
}
|
|
1948
|
+
}
|
|
1949
|
+
}
|
|
1950
|
+
if (value !== undefined && value !== null) {
|
|
1951
|
+
var valueStr = String(value).trim();
|
|
1952
|
+
if (iconMappingExport[valueStr]) return valueStr;
|
|
1953
|
+
for (var k in iconMappingExport) {
|
|
1954
|
+
if (k.toLowerCase() === valueStr.toLowerCase()) return k;
|
|
1955
|
+
}
|
|
1956
|
+
}
|
|
1957
|
+
return 'default';
|
|
1958
|
+
};
|
|
1959
|
+
}
|
|
1960
|
+
|
|
1961
|
+
// getSize function
|
|
1962
|
+
var sizeFieldIcon = colorConfig.heightField;
|
|
1963
|
+
var getSizeFn = iconSizeIcon;
|
|
1964
|
+
if (sizeFieldIcon) {
|
|
1965
|
+
getSizeFn = function(d) {
|
|
1966
|
+
var props = d.properties || {};
|
|
1967
|
+
var val = props[sizeFieldIcon];
|
|
1968
|
+
if (val === undefined || val === null) {
|
|
1969
|
+
var lower = sizeFieldIcon.toLowerCase();
|
|
1970
|
+
for (var k in props) { if (k.toLowerCase() === lower) { val = props[k]; break; } }
|
|
1971
|
+
}
|
|
1972
|
+
if (typeof val === 'number') return Math.max(5, val);
|
|
1973
|
+
var num = parseFloat(val);
|
|
1974
|
+
return isNaN(num) ? iconSizeIcon : Math.max(5, num);
|
|
1975
|
+
};
|
|
1976
|
+
}
|
|
1977
|
+
|
|
1978
|
+
if (typeof deck.IconLayer !== 'function') {
|
|
1979
|
+
console.warn('IconLayer not available, falling back to ScatterplotLayer');
|
|
1980
|
+
// Fall through to ScatterplotLayer
|
|
1981
|
+
} else {
|
|
1982
|
+
return new deck.IconLayer({
|
|
1983
|
+
...baseProps,
|
|
1984
|
+
getPosition: function(d) { return d.position; },
|
|
1985
|
+
getIcon: getIconFn,
|
|
1986
|
+
getSize: getSizeFn,
|
|
1987
|
+
getColor: [255, 255, 255, 255], // White tint since color is in the icon
|
|
1988
|
+
iconAtlas: iconAtlasCanvas,
|
|
1989
|
+
iconMapping: iconMappingExport,
|
|
1990
|
+
sizeScale: 1,
|
|
1991
|
+
sizeMinPixels: 1,
|
|
1992
|
+
sizeMaxPixels: 200,
|
|
1993
|
+
billboard: true,
|
|
1994
|
+
pickable: true,
|
|
1995
|
+
visible: true,
|
|
1996
|
+
opacity: layerOpacityIcon,
|
|
1997
|
+
onClick: function(info) {
|
|
1998
|
+
if (!info || !info.object) return;
|
|
1999
|
+
var coord = info.coordinate || (info.object.position ? [info.object.position[0], info.object.position[1]] : null);
|
|
2000
|
+
if (!coord) return;
|
|
2001
|
+
var props = info.object.properties || {};
|
|
2002
|
+
showFeaturePopup(coord, props, dataset.name || 'Feature');
|
|
2003
|
+
}
|
|
2004
|
+
});
|
|
2005
|
+
}
|
|
2006
|
+
}
|
|
2007
|
+
}
|
|
2008
|
+
|
|
2009
|
+
// Mesh Layer (match app's SimpleMeshLayerComponent: 3D mesh objects)
|
|
2010
|
+
if (layerType === 'mesh') {
|
|
2011
|
+
const fillColorMesh = styleConfig.fillColor || dataset.color || '#3b82f6';
|
|
2012
|
+
const layerOpacityMesh = styleConfig.opacity !== undefined ? styleConfig.opacity : 0.8;
|
|
2013
|
+
const sizeScaleMesh = styleConfig.pointRadius ?? 200;
|
|
2014
|
+
const wireframeMesh = false; // Default wireframe off
|
|
2015
|
+
const colorFieldMesh = colorConfig.colorField;
|
|
2016
|
+
const colorMappingMesh = colorConfig.colorMapping || {};
|
|
2017
|
+
const sizeFieldMesh = colorConfig.heightField;
|
|
2018
|
+
|
|
2019
|
+
// 3D Mesh URL (same as app)
|
|
2020
|
+
const MESH_URL = 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/humanoid_quad.obj';
|
|
2021
|
+
|
|
2022
|
+
// Helper function to convert hex to RGBA
|
|
2023
|
+
function hexToRgbaMesh(hex, alpha) {
|
|
2024
|
+
var normalized = hex && hex.startsWith('#') ? hex : '#' + (hex || '000000');
|
|
2025
|
+
var hv = normalized.replace('#', '');
|
|
2026
|
+
var r = parseInt(hv.slice(0, 2), 16) || 0;
|
|
2027
|
+
var g = parseInt(hv.slice(2, 4), 16) || 0;
|
|
2028
|
+
var b = parseInt(hv.slice(4, 6), 16) || 0;
|
|
2029
|
+
return [r, g, b, Math.round(alpha * 255)];
|
|
2030
|
+
}
|
|
2031
|
+
|
|
2032
|
+
// Process data to extract positions (match app's SimpleMeshLayerComponent)
|
|
2033
|
+
var meshData = [];
|
|
2034
|
+
(dataset.geojson.features || []).forEach(function(feature, index) {
|
|
2035
|
+
if (!feature.geometry) return;
|
|
2036
|
+
|
|
2037
|
+
switch (feature.geometry.type) {
|
|
2038
|
+
case 'Point': {
|
|
2039
|
+
var coords = feature.geometry.coordinates;
|
|
2040
|
+
if (coords && coords.length >= 2) {
|
|
2041
|
+
meshData.push({
|
|
2042
|
+
position: [coords[0], coords[1], coords[2] || 0],
|
|
2043
|
+
properties: feature.properties || {},
|
|
2044
|
+
index: index
|
|
2045
|
+
});
|
|
2046
|
+
}
|
|
2047
|
+
break;
|
|
2048
|
+
}
|
|
2049
|
+
case 'MultiPoint':
|
|
2050
|
+
feature.geometry.coordinates.forEach(function(coord, i) {
|
|
2051
|
+
if (coord && coord.length >= 2) {
|
|
2052
|
+
meshData.push({
|
|
2053
|
+
position: [coord[0], coord[1], coord[2] || 0],
|
|
2054
|
+
properties: feature.properties || {},
|
|
2055
|
+
index: index * 1000 + i
|
|
2056
|
+
});
|
|
2057
|
+
}
|
|
2058
|
+
});
|
|
2059
|
+
break;
|
|
2060
|
+
case 'Polygon': {
|
|
2061
|
+
var polyCoords = feature.geometry.coordinates[0];
|
|
2062
|
+
if (polyCoords && polyCoords.length > 0) {
|
|
2063
|
+
var centroidX = polyCoords.reduce(function(sum, c) { return sum + c[0]; }, 0) / polyCoords.length;
|
|
2064
|
+
var centroidY = polyCoords.reduce(function(sum, c) { return sum + c[1]; }, 0) / polyCoords.length;
|
|
2065
|
+
meshData.push({
|
|
2066
|
+
position: [centroidX, centroidY, 0],
|
|
2067
|
+
properties: feature.properties || {},
|
|
2068
|
+
index: index
|
|
2069
|
+
});
|
|
2070
|
+
}
|
|
2071
|
+
break;
|
|
2072
|
+
}
|
|
2073
|
+
case 'MultiPolygon':
|
|
2074
|
+
feature.geometry.coordinates.forEach(function(poly, i) {
|
|
2075
|
+
if (poly[0] && poly[0].length > 0) {
|
|
2076
|
+
var r = poly[0];
|
|
2077
|
+
var cx = r.reduce(function(sum, c) { return sum + c[0]; }, 0) / r.length;
|
|
2078
|
+
var cy = r.reduce(function(sum, c) { return sum + c[1]; }, 0) / r.length;
|
|
2079
|
+
meshData.push({
|
|
2080
|
+
position: [cx, cy, 0],
|
|
2081
|
+
properties: feature.properties || {},
|
|
2082
|
+
index: index * 1000 + i
|
|
2083
|
+
});
|
|
2084
|
+
}
|
|
2085
|
+
});
|
|
2086
|
+
break;
|
|
2087
|
+
case 'LineString': {
|
|
2088
|
+
var lineCoords = feature.geometry.coordinates;
|
|
2089
|
+
if (lineCoords && lineCoords.length > 0) {
|
|
2090
|
+
var midIndex = Math.floor(lineCoords.length / 2);
|
|
2091
|
+
var midPoint = lineCoords[midIndex];
|
|
2092
|
+
if (midPoint && midPoint.length >= 2) {
|
|
2093
|
+
meshData.push({
|
|
2094
|
+
position: [midPoint[0], midPoint[1], midPoint[2] || 0],
|
|
2095
|
+
properties: feature.properties || {},
|
|
2096
|
+
index: index
|
|
2097
|
+
});
|
|
2098
|
+
}
|
|
2099
|
+
}
|
|
2100
|
+
break;
|
|
2101
|
+
}
|
|
2102
|
+
}
|
|
2103
|
+
});
|
|
2104
|
+
|
|
2105
|
+
if (meshData.length === 0) return null;
|
|
2106
|
+
|
|
2107
|
+
// Calculate base color
|
|
2108
|
+
var baseColorMesh = hexToRgbaMesh(fillColorMesh, 1);
|
|
2109
|
+
|
|
2110
|
+
// getColor function - supports colorField/colorMapping
|
|
2111
|
+
var getColorMesh = baseColorMesh;
|
|
2112
|
+
if (colorFieldMesh && colorMappingMesh && Object.keys(colorMappingMesh).length > 0) {
|
|
2113
|
+
getColorMesh = function(d) {
|
|
2114
|
+
var props = d.properties || {};
|
|
2115
|
+
var value = props[colorFieldMesh];
|
|
2116
|
+
if (value === undefined || value === null) {
|
|
2117
|
+
var lowerField = colorFieldMesh.toLowerCase();
|
|
2118
|
+
for (var key in props) {
|
|
2119
|
+
if (key.toLowerCase() === lowerField) {
|
|
2120
|
+
value = props[key];
|
|
2121
|
+
break;
|
|
2122
|
+
}
|
|
2123
|
+
}
|
|
2124
|
+
}
|
|
2125
|
+
if (value !== undefined && value !== null) {
|
|
2126
|
+
var valueStr = String(value);
|
|
2127
|
+
var mappedColor = colorMappingMesh[valueStr];
|
|
2128
|
+
if (!mappedColor) {
|
|
2129
|
+
for (var k in colorMappingMesh) {
|
|
2130
|
+
if (k.toLowerCase() === valueStr.toLowerCase()) {
|
|
2131
|
+
mappedColor = colorMappingMesh[k];
|
|
2132
|
+
break;
|
|
2133
|
+
}
|
|
2134
|
+
}
|
|
2135
|
+
}
|
|
2136
|
+
if (mappedColor) {
|
|
2137
|
+
return hexToRgbaMesh(mappedColor, 1);
|
|
2138
|
+
}
|
|
2139
|
+
}
|
|
2140
|
+
return baseColorMesh;
|
|
2141
|
+
};
|
|
2142
|
+
}
|
|
2143
|
+
|
|
2144
|
+
// getScale function - supports sizeField
|
|
2145
|
+
var getScaleMesh = [1, 1, 1];
|
|
2146
|
+
if (sizeFieldMesh) {
|
|
2147
|
+
getScaleMesh = function(d) {
|
|
2148
|
+
var props = d.properties || {};
|
|
2149
|
+
var val = props[sizeFieldMesh];
|
|
2150
|
+
if (val === undefined || val === null) {
|
|
2151
|
+
var lower = sizeFieldMesh.toLowerCase();
|
|
2152
|
+
for (var k in props) { if (k.toLowerCase() === lower) { val = props[k]; break; } }
|
|
2153
|
+
}
|
|
2154
|
+
var scale = typeof val === 'number' ? val : (parseFloat(val) || 1);
|
|
2155
|
+
var normalizedScale = Math.max(0.1, Math.min(10, scale));
|
|
2156
|
+
return [normalizedScale, normalizedScale, normalizedScale];
|
|
2157
|
+
};
|
|
2158
|
+
}
|
|
2159
|
+
|
|
2160
|
+
if (typeof deck.SimpleMeshLayer !== 'function') {
|
|
2161
|
+
console.warn('SimpleMeshLayer not available, falling back to ScatterplotLayer');
|
|
2162
|
+
// Fall through to ScatterplotLayer
|
|
2163
|
+
} else {
|
|
2164
|
+
// Try to get OBJLoader from various possible locations
|
|
2165
|
+
var OBJLoader = null;
|
|
2166
|
+
if (typeof window !== 'undefined') {
|
|
2167
|
+
// Try @loaders.gl/obj CDN structure (may be exposed as loaders.OBJLoader or loaders.obj.OBJLoader)
|
|
2168
|
+
if (window.loaders && window.loaders.OBJLoader) {
|
|
2169
|
+
OBJLoader = window.loaders.OBJLoader;
|
|
2170
|
+
} else if (window.loaders && window.loaders.obj && window.loaders.obj.OBJLoader) {
|
|
2171
|
+
OBJLoader = window.loaders.obj.OBJLoader;
|
|
2172
|
+
} else if (window.OBJLoader) {
|
|
2173
|
+
OBJLoader = window.OBJLoader;
|
|
2174
|
+
} else if (typeof loaders !== 'undefined' && loaders.OBJLoader) {
|
|
2175
|
+
OBJLoader = loaders.OBJLoader;
|
|
2176
|
+
} else if (typeof loaders !== 'undefined' && loaders.obj && loaders.obj.OBJLoader) {
|
|
2177
|
+
OBJLoader = loaders.obj.OBJLoader;
|
|
2178
|
+
}
|
|
2179
|
+
}
|
|
2180
|
+
|
|
2181
|
+
// If OBJLoader not found, try to use mesh URL directly (deck.gl may handle it via fetch)
|
|
2182
|
+
if (!OBJLoader) {
|
|
2183
|
+
console.warn('OBJLoader not found, attempting to use mesh URL directly (deck.gl may auto-detect format)');
|
|
2184
|
+
}
|
|
2185
|
+
|
|
2186
|
+
try {
|
|
2187
|
+
return new deck.SimpleMeshLayer({
|
|
2188
|
+
...baseProps,
|
|
2189
|
+
data: meshData,
|
|
2190
|
+
mesh: MESH_URL,
|
|
2191
|
+
loaders: OBJLoader ? [OBJLoader] : undefined,
|
|
2192
|
+
getPosition: function(d) { return d.position; },
|
|
2193
|
+
getColor: getColorMesh,
|
|
2194
|
+
getScale: getScaleMesh,
|
|
2195
|
+
getOrientation: function(d) { return [0, d.index * 45 % 360, 0]; },
|
|
2196
|
+
sizeScale: sizeScaleMesh,
|
|
2197
|
+
wireframe: wireframeMesh,
|
|
2198
|
+
material: {
|
|
2199
|
+
ambient: 0.4,
|
|
2200
|
+
diffuse: 0.7,
|
|
2201
|
+
shininess: 32,
|
|
2202
|
+
specularColor: [60, 60, 60]
|
|
2203
|
+
},
|
|
2204
|
+
pickable: true,
|
|
2205
|
+
visible: true,
|
|
2206
|
+
opacity: layerOpacityMesh,
|
|
2207
|
+
onClick: function(info) {
|
|
2208
|
+
if (!info || !info.object) return;
|
|
2209
|
+
var coord = info.coordinate || (info.object.position ? [info.object.position[0], info.object.position[1]] : null);
|
|
2210
|
+
if (!coord) return;
|
|
2211
|
+
var props = info.object.properties || {};
|
|
2212
|
+
showFeaturePopup(coord, props, dataset.name || 'Feature');
|
|
2213
|
+
}
|
|
2214
|
+
});
|
|
2215
|
+
} catch (err) {
|
|
2216
|
+
console.warn('Failed to create SimpleMeshLayer:', err, 'falling back to ScatterplotLayer');
|
|
2217
|
+
// Fall through to ScatterplotLayer
|
|
2218
|
+
}
|
|
2219
|
+
}
|
|
2220
|
+
}
|
|
2221
|
+
|
|
2222
|
+
// Scenegraph Layer (3D glTF/GLB models)
|
|
2223
|
+
// IMPORTANT: ScenegraphLayer requires camera uniforms that aren't available in the CDN bundle setup,
|
|
2224
|
+
// causing cameraPosition errors and infinite render loops. We use SimpleMeshLayer as a fallback
|
|
2225
|
+
// which provides 3D visualization without the camera dependency.
|
|
2226
|
+
// NOTE: Animations are not supported in the fallback (SimpleMeshLayer doesn't support glTF animations).
|
|
2227
|
+
if (layerType === 'scenegraph') {
|
|
2228
|
+
console.warn('ScenegraphLayer (animated glTF/GLB) is not compatible with exported HTML due to camera context limitations. Using SimpleMeshLayer (static 3D mesh) as fallback. Animations will not be available in the export.');
|
|
2229
|
+
|
|
2230
|
+
const fillColorScene = styleConfig.fillColor || dataset.color || '#3b82f6';
|
|
2231
|
+
const layerOpacityScene = styleConfig.opacity !== undefined ? styleConfig.opacity : 0.8;
|
|
2232
|
+
const sizeScaleScene = styleConfig.pointRadius ?? 200;
|
|
2233
|
+
const colorFieldScene = colorConfig.colorField;
|
|
2234
|
+
const colorMappingScene = colorConfig.colorMapping || {};
|
|
2235
|
+
const sizeFieldScene = colorConfig.heightField;
|
|
2236
|
+
const wireframeScene = false;
|
|
2237
|
+
|
|
2238
|
+
// Use OBJ mesh format (works reliably with CDN bundle)
|
|
2239
|
+
const MESH_URL = 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/humanoid_quad.obj';
|
|
2240
|
+
|
|
2241
|
+
// Helper function to convert hex to RGBA
|
|
2242
|
+
function hexToRgbaScene(hex, alpha) {
|
|
2243
|
+
var normalized = hex && hex.startsWith('#') ? hex : '#' + (hex || '000000');
|
|
2244
|
+
var hv = normalized.replace('#', '');
|
|
2245
|
+
var r = parseInt(hv.slice(0, 2), 16) || 0;
|
|
2246
|
+
var g = parseInt(hv.slice(2, 4), 16) || 0;
|
|
2247
|
+
var b = parseInt(hv.slice(4, 6), 16) || 0;
|
|
2248
|
+
return [r, g, b, Math.round(alpha * 255)];
|
|
2249
|
+
}
|
|
2250
|
+
|
|
2251
|
+
// Process data to extract positions (same logic as ScenegraphLayer)
|
|
2252
|
+
var meshData = [];
|
|
2253
|
+
(dataset.geojson.features || []).forEach(function(feature, index) {
|
|
2254
|
+
if (!feature.geometry) return;
|
|
2255
|
+
|
|
2256
|
+
switch (feature.geometry.type) {
|
|
2257
|
+
case 'Point': {
|
|
2258
|
+
var coords = feature.geometry.coordinates;
|
|
2259
|
+
if (coords && coords.length >= 2) {
|
|
2260
|
+
meshData.push({
|
|
2261
|
+
position: [coords[0], coords[1], coords[2] || 0],
|
|
2262
|
+
properties: feature.properties || {},
|
|
2263
|
+
index: index
|
|
2264
|
+
});
|
|
2265
|
+
}
|
|
2266
|
+
break;
|
|
2267
|
+
}
|
|
2268
|
+
case 'MultiPoint':
|
|
2269
|
+
feature.geometry.coordinates.forEach(function(coord, i) {
|
|
2270
|
+
if (coord && coord.length >= 2) {
|
|
2271
|
+
meshData.push({
|
|
2272
|
+
position: [coord[0], coord[1], coord[2] || 0],
|
|
2273
|
+
properties: feature.properties || {},
|
|
2274
|
+
index: index * 1000 + i
|
|
2275
|
+
});
|
|
2276
|
+
}
|
|
2277
|
+
});
|
|
2278
|
+
break;
|
|
2279
|
+
case 'Polygon': {
|
|
2280
|
+
var polyCoords = feature.geometry.coordinates[0];
|
|
2281
|
+
if (polyCoords && polyCoords.length > 0) {
|
|
2282
|
+
var centroidX = polyCoords.reduce(function(sum, c) { return sum + c[0]; }, 0) / polyCoords.length;
|
|
2283
|
+
var centroidY = polyCoords.reduce(function(sum, c) { return sum + c[1]; }, 0) / polyCoords.length;
|
|
2284
|
+
meshData.push({
|
|
2285
|
+
position: [centroidX, centroidY, 0],
|
|
2286
|
+
properties: feature.properties || {},
|
|
2287
|
+
index: index
|
|
2288
|
+
});
|
|
2289
|
+
}
|
|
2290
|
+
break;
|
|
2291
|
+
}
|
|
2292
|
+
case 'MultiPolygon':
|
|
2293
|
+
feature.geometry.coordinates.forEach(function(poly, i) {
|
|
2294
|
+
if (poly[0] && poly[0].length > 0) {
|
|
2295
|
+
var r = poly[0];
|
|
2296
|
+
var cx = r.reduce(function(sum, c) { return sum + c[0]; }, 0) / r.length;
|
|
2297
|
+
var cy = r.reduce(function(sum, c) { return sum + c[1]; }, 0) / r.length;
|
|
2298
|
+
meshData.push({
|
|
2299
|
+
position: [cx, cy, 0],
|
|
2300
|
+
properties: feature.properties || {},
|
|
2301
|
+
index: index * 1000 + i
|
|
2302
|
+
});
|
|
2303
|
+
}
|
|
2304
|
+
});
|
|
2305
|
+
break;
|
|
2306
|
+
case 'LineString': {
|
|
2307
|
+
var lineCoords = feature.geometry.coordinates;
|
|
2308
|
+
if (lineCoords && lineCoords.length > 0) {
|
|
2309
|
+
var midIndex = Math.floor(lineCoords.length / 2);
|
|
2310
|
+
var midPoint = lineCoords[midIndex];
|
|
2311
|
+
if (midPoint && midPoint.length >= 2) {
|
|
2312
|
+
meshData.push({
|
|
2313
|
+
position: [midPoint[0], midPoint[1], midPoint[2] || 0],
|
|
2314
|
+
properties: feature.properties || {},
|
|
2315
|
+
index: index
|
|
2316
|
+
});
|
|
2317
|
+
}
|
|
2318
|
+
}
|
|
2319
|
+
break;
|
|
2320
|
+
}
|
|
2321
|
+
}
|
|
2322
|
+
});
|
|
2323
|
+
|
|
2324
|
+
if (meshData.length === 0) return null;
|
|
2325
|
+
|
|
2326
|
+
// Calculate base color
|
|
2327
|
+
var baseColorScene = hexToRgbaScene(fillColorScene, 1);
|
|
2328
|
+
|
|
2329
|
+
// getColor function - supports colorField/colorMapping
|
|
2330
|
+
var getColorScene = baseColorScene;
|
|
2331
|
+
if (colorFieldScene && colorMappingScene && Object.keys(colorMappingScene).length > 0) {
|
|
2332
|
+
getColorScene = function(d) {
|
|
2333
|
+
var props = d.properties || {};
|
|
2334
|
+
var value = props[colorFieldScene];
|
|
2335
|
+
if (value === undefined || value === null) {
|
|
2336
|
+
var lowerField = colorFieldScene.toLowerCase();
|
|
2337
|
+
for (var key in props) {
|
|
2338
|
+
if (key.toLowerCase() === lowerField) {
|
|
2339
|
+
value = props[key];
|
|
2340
|
+
break;
|
|
2341
|
+
}
|
|
2342
|
+
}
|
|
2343
|
+
}
|
|
2344
|
+
if (value !== undefined && value !== null) {
|
|
2345
|
+
var valueStr = String(value);
|
|
2346
|
+
var mappedColor = colorMappingScene[valueStr];
|
|
2347
|
+
if (!mappedColor) {
|
|
2348
|
+
for (var k in colorMappingScene) {
|
|
2349
|
+
if (k.toLowerCase() === valueStr.toLowerCase()) {
|
|
2350
|
+
mappedColor = colorMappingScene[k];
|
|
2351
|
+
break;
|
|
2352
|
+
}
|
|
2353
|
+
}
|
|
2354
|
+
}
|
|
2355
|
+
if (mappedColor) {
|
|
2356
|
+
return hexToRgbaScene(mappedColor, 1);
|
|
2357
|
+
}
|
|
2358
|
+
}
|
|
2359
|
+
return baseColorScene;
|
|
2360
|
+
};
|
|
2361
|
+
}
|
|
2362
|
+
|
|
2363
|
+
// getScale function - supports sizeField
|
|
2364
|
+
var getScaleScene = [1, 1, 1];
|
|
2365
|
+
if (sizeFieldScene) {
|
|
2366
|
+
getScaleScene = function(d) {
|
|
2367
|
+
var props = d.properties || {};
|
|
2368
|
+
var val = props[sizeFieldScene];
|
|
2369
|
+
if (val === undefined || val === null) {
|
|
2370
|
+
var lower = sizeFieldScene.toLowerCase();
|
|
2371
|
+
for (var k in props) { if (k.toLowerCase() === lower) { val = props[k]; break; } }
|
|
2372
|
+
}
|
|
2373
|
+
var scale = typeof val === 'number' ? val : (parseFloat(val) || 1);
|
|
2374
|
+
var normalizedScale = Math.max(0.1, Math.min(10, scale));
|
|
2375
|
+
return [normalizedScale, normalizedScale, normalizedScale];
|
|
2376
|
+
};
|
|
2377
|
+
}
|
|
2378
|
+
|
|
2379
|
+
// Try to get OBJLoader from various possible locations
|
|
2380
|
+
var OBJLoader = null;
|
|
2381
|
+
if (typeof window !== 'undefined') {
|
|
2382
|
+
if (window.loaders && window.loaders.OBJLoader) {
|
|
2383
|
+
OBJLoader = window.loaders.OBJLoader;
|
|
2384
|
+
} else if (window.loaders && window.loaders.obj && window.loaders.obj.OBJLoader) {
|
|
2385
|
+
OBJLoader = window.loaders.obj.OBJLoader;
|
|
2386
|
+
} else if (window.OBJLoader) {
|
|
2387
|
+
OBJLoader = window.OBJLoader;
|
|
2388
|
+
} else if (typeof loaders !== 'undefined' && loaders.OBJLoader) {
|
|
2389
|
+
OBJLoader = loaders.OBJLoader;
|
|
2390
|
+
} else if (typeof loaders !== 'undefined' && loaders.obj && loaders.obj.OBJLoader) {
|
|
2391
|
+
OBJLoader = loaders.obj.OBJLoader;
|
|
2392
|
+
}
|
|
2393
|
+
}
|
|
2394
|
+
|
|
2395
|
+
if (!OBJLoader) {
|
|
2396
|
+
console.warn('OBJLoader not found for 3D mesh, attempting to use mesh URL directly');
|
|
2397
|
+
}
|
|
2398
|
+
|
|
2399
|
+
// Use SimpleMeshLayer instead of ScenegraphLayer (avoids cameraPosition errors)
|
|
2400
|
+
if (typeof deck.SimpleMeshLayer !== 'function') {
|
|
2401
|
+
console.warn('SimpleMeshLayer not available, falling back to ScatterplotLayer');
|
|
2402
|
+
// Fall through to ScatterplotLayer
|
|
2403
|
+
} else {
|
|
2404
|
+
try {
|
|
2405
|
+
return new deck.SimpleMeshLayer({
|
|
2406
|
+
...baseProps,
|
|
2407
|
+
data: meshData,
|
|
2408
|
+
mesh: MESH_URL,
|
|
2409
|
+
loaders: OBJLoader ? [OBJLoader] : undefined,
|
|
2410
|
+
getPosition: function(d) { return d.position; },
|
|
2411
|
+
getColor: getColorScene,
|
|
2412
|
+
getScale: getScaleScene,
|
|
2413
|
+
getOrientation: function(d) { return [0, d.index * 45 % 360, 0]; },
|
|
2414
|
+
sizeScale: sizeScaleScene,
|
|
2415
|
+
wireframe: wireframeScene,
|
|
2416
|
+
material: {
|
|
2417
|
+
ambient: 0.4,
|
|
2418
|
+
diffuse: 0.7,
|
|
2419
|
+
shininess: 32,
|
|
2420
|
+
specularColor: [60, 60, 60]
|
|
2421
|
+
},
|
|
2422
|
+
pickable: true,
|
|
2423
|
+
visible: true,
|
|
2424
|
+
opacity: layerOpacityScene,
|
|
2425
|
+
onClick: function(info) {
|
|
2426
|
+
if (!info || !info.object) return;
|
|
2427
|
+
var coord = info.coordinate || (info.object.position ? [info.object.position[0], info.object.position[1]] : null);
|
|
2428
|
+
if (!coord) return;
|
|
2429
|
+
var props = info.object.properties || {};
|
|
2430
|
+
showFeaturePopup(coord, props, dataset.name || 'Feature');
|
|
2431
|
+
}
|
|
2432
|
+
});
|
|
2433
|
+
} catch (err) {
|
|
2434
|
+
console.warn('Failed to create SimpleMeshLayer for scenegraph fallback:', err, 'falling back to ScatterplotLayer');
|
|
2435
|
+
// Fall through to ScatterplotLayer
|
|
2436
|
+
}
|
|
2437
|
+
}
|
|
2438
|
+
}
|
|
2439
|
+
|
|
2440
|
+
// Text Layer (match app's TextLayerComponent: text labels with colorField support)
|
|
2441
|
+
if (layerType === 'text') {
|
|
2442
|
+
const textColorText = styleConfig.fillColor || '#000000';
|
|
2443
|
+
const backgroundColorText = '#ffffff';
|
|
2444
|
+
const layerOpacityText = styleConfig.opacity !== undefined ? styleConfig.opacity : 1;
|
|
2445
|
+
const sizeScaleText = styleConfig.pointRadius ? styleConfig.pointRadius / 10 : 1;
|
|
2446
|
+
const textFieldText = colorConfig.colorField;
|
|
2447
|
+
const sizeFieldText = colorConfig.heightField;
|
|
2448
|
+
const colorFieldText = colorConfig.colorField;
|
|
2449
|
+
const colorMappingText = colorConfig.colorMapping || {};
|
|
2450
|
+
|
|
2451
|
+
// Helper function to convert hex to RGBA
|
|
2452
|
+
function hexToRgbaText(hex, alpha) {
|
|
2453
|
+
var normalized = hex && hex.startsWith('#') ? hex : '#' + (hex || '000000');
|
|
2454
|
+
var hv = normalized.replace('#', '');
|
|
2455
|
+
var r = parseInt(hv.slice(0, 2), 16) || 0;
|
|
2456
|
+
var g = parseInt(hv.slice(2, 4), 16) || 0;
|
|
2457
|
+
var b = parseInt(hv.slice(4, 6), 16) || 0;
|
|
2458
|
+
return [r, g, b, Math.round(alpha * 255)];
|
|
2459
|
+
}
|
|
2460
|
+
|
|
2461
|
+
// getText function - returns text from textField or default fields
|
|
2462
|
+
var getTextFn = function(d) {
|
|
2463
|
+
if (textFieldText) {
|
|
2464
|
+
var props = d.properties || {};
|
|
2465
|
+
var value = props[textFieldText];
|
|
2466
|
+
if (value === undefined || value === null) {
|
|
2467
|
+
var lowerField = textFieldText.toLowerCase();
|
|
2468
|
+
for (var key in props) {
|
|
2469
|
+
if (key.toLowerCase() === lowerField) {
|
|
2470
|
+
value = props[key];
|
|
2471
|
+
break;
|
|
2472
|
+
}
|
|
2473
|
+
}
|
|
2474
|
+
}
|
|
2475
|
+
return value !== undefined && value !== null ? String(value) : '';
|
|
2476
|
+
}
|
|
2477
|
+
// Default: try to find a name-like field
|
|
2478
|
+
var props = d.properties || {};
|
|
2479
|
+
return String(props.name || props.label || props.title || props.id || '');
|
|
2480
|
+
};
|
|
2481
|
+
|
|
2482
|
+
// getColor function - supports colorField/colorMapping
|
|
2483
|
+
var getColorFn = hexToRgbaText(textColorText, layerOpacityText);
|
|
2484
|
+
if (colorFieldText && colorMappingText && Object.keys(colorMappingText).length > 0) {
|
|
2485
|
+
getColorFn = function(d) {
|
|
2486
|
+
var props = d.properties || {};
|
|
2487
|
+
var value = props[colorFieldText];
|
|
2488
|
+
if (value === undefined || value === null) {
|
|
2489
|
+
var lowerField = colorFieldText.toLowerCase();
|
|
2490
|
+
for (var key in props) {
|
|
2491
|
+
if (key.toLowerCase() === lowerField) {
|
|
2492
|
+
value = props[key];
|
|
2493
|
+
break;
|
|
2494
|
+
}
|
|
2495
|
+
}
|
|
2496
|
+
}
|
|
2497
|
+
if (value !== undefined && value !== null) {
|
|
2498
|
+
var valueStr = String(value);
|
|
2499
|
+
var mappedColor = colorMappingText[valueStr];
|
|
2500
|
+
if (!mappedColor) {
|
|
2501
|
+
for (var k in colorMappingText) {
|
|
2502
|
+
if (k.toLowerCase() === valueStr.toLowerCase()) {
|
|
2503
|
+
mappedColor = colorMappingText[k];
|
|
2504
|
+
break;
|
|
2505
|
+
}
|
|
2506
|
+
}
|
|
2507
|
+
}
|
|
2508
|
+
if (mappedColor) {
|
|
2509
|
+
return hexToRgbaText(mappedColor, layerOpacityText);
|
|
2510
|
+
}
|
|
2511
|
+
}
|
|
2512
|
+
return hexToRgbaText(textColorText, layerOpacityText);
|
|
2513
|
+
};
|
|
2514
|
+
}
|
|
2515
|
+
|
|
2516
|
+
// getSize function - supports sizeField
|
|
2517
|
+
var getSizeFn = 16;
|
|
2518
|
+
if (sizeFieldText) {
|
|
2519
|
+
getSizeFn = function(d) {
|
|
2520
|
+
var props = d.properties || {};
|
|
2521
|
+
var val = props[sizeFieldText];
|
|
2522
|
+
if (val === undefined || val === null) {
|
|
2523
|
+
var lower = sizeFieldText.toLowerCase();
|
|
2524
|
+
for (var k in props) { if (k.toLowerCase() === lower) { val = props[k]; break; } }
|
|
2525
|
+
}
|
|
2526
|
+
if (typeof val === 'number') return val;
|
|
2527
|
+
var num = parseFloat(val);
|
|
2528
|
+
return isNaN(num) ? 16 : num;
|
|
2529
|
+
};
|
|
2530
|
+
}
|
|
2531
|
+
|
|
2532
|
+
if (typeof deck.TextLayer !== 'function') {
|
|
2533
|
+
console.warn('TextLayer not available, falling back to ScatterplotLayer');
|
|
2534
|
+
// Fall through to ScatterplotLayer
|
|
2535
|
+
} else {
|
|
2536
|
+
return new deck.TextLayer({
|
|
2537
|
+
...baseProps,
|
|
2538
|
+
getPosition: function(d) { return d.position; },
|
|
2539
|
+
getText: getTextFn,
|
|
2540
|
+
getSize: getSizeFn,
|
|
2541
|
+
getColor: getColorFn,
|
|
2542
|
+
getBackgroundColor: hexToRgbaText(backgroundColorText, 0.8),
|
|
2543
|
+
background: true,
|
|
2544
|
+
backgroundPadding: [4, 2],
|
|
2545
|
+
sizeScale: sizeScaleText,
|
|
2546
|
+
sizeMinPixels: 10,
|
|
2547
|
+
sizeMaxPixels: 50,
|
|
2548
|
+
billboard: true,
|
|
2549
|
+
fontFamily: 'Monaco, monospace',
|
|
2550
|
+
fontWeight: 'normal',
|
|
2551
|
+
characterSet: 'auto',
|
|
2552
|
+
pickable: true,
|
|
2553
|
+
visible: true,
|
|
2554
|
+
opacity: layerOpacityText,
|
|
2555
|
+
onClick: function(info) {
|
|
2556
|
+
if (!info || !info.object) return;
|
|
2557
|
+
var coord = info.coordinate || (info.object.position ? [info.object.position[0], info.object.position[1]] : null);
|
|
2558
|
+
if (!coord) return;
|
|
2559
|
+
var props = info.object.properties || {};
|
|
2560
|
+
showFeaturePopup(coord, props, dataset.name || 'Feature');
|
|
2561
|
+
}
|
|
2562
|
+
});
|
|
2563
|
+
}
|
|
2564
|
+
}
|
|
2565
|
+
|
|
2566
|
+
// Heatmap Layer
|
|
2567
|
+
if (layerType === 'heatmap') {
|
|
2568
|
+
const heightField = colorConfig.heightField;
|
|
2569
|
+
const colorField = colorConfig.colorField;
|
|
2570
|
+
const colorMapping = colorConfig.colorMapping || {};
|
|
2571
|
+
const layerOpacityValue = styleConfig.opacity !== undefined ? styleConfig.opacity : 0.9;
|
|
2572
|
+
|
|
2573
|
+
// Build color range from colorMapping if available
|
|
2574
|
+
let heatmapColorRange = COLOR_RANGE;
|
|
2575
|
+
if (colorField && Object.keys(colorMapping).length > 0) {
|
|
2576
|
+
heatmapColorRange = Object.values(colorMapping).map(function(hexColor) {
|
|
2577
|
+
if (hexColor && hexColor.startsWith('#')) {
|
|
2578
|
+
return [
|
|
2579
|
+
parseInt(hexColor.slice(1, 3), 16),
|
|
2580
|
+
parseInt(hexColor.slice(3, 5), 16),
|
|
2581
|
+
parseInt(hexColor.slice(5, 7), 16)
|
|
2582
|
+
];
|
|
2583
|
+
}
|
|
2584
|
+
return [255, 200, 0];
|
|
2585
|
+
});
|
|
2586
|
+
}
|
|
2587
|
+
|
|
2588
|
+
return new deck.HeatmapLayer({
|
|
2589
|
+
...baseProps,
|
|
2590
|
+
getPosition: d => d.position,
|
|
2591
|
+
getWeight: heightField ? function(d) {
|
|
2592
|
+
const val = d.properties[heightField];
|
|
2593
|
+
return val !== undefined ? (Number(val) || 1) : 1;
|
|
2594
|
+
} : function(d) { return 1; },
|
|
2595
|
+
radiusPixels: 30,
|
|
2596
|
+
intensity: 1,
|
|
2597
|
+
threshold: 0.03,
|
|
2598
|
+
opacity: layerOpacityValue,
|
|
2599
|
+
colorRange: heatmapColorRange,
|
|
2600
|
+
});
|
|
2601
|
+
}
|
|
2602
|
+
|
|
2603
|
+
// Geohash Layer (match app's GeohashLayerComponent: aggregate points into geohash cells)
|
|
2604
|
+
if (layerType === 'geohash') {
|
|
2605
|
+
const fillColorGeohash = styleConfig.fillColor || dataset.color || '#3b82f6';
|
|
2606
|
+
const strokeColorGeohash = styleConfig.strokeColor || '#ffffff';
|
|
2607
|
+
const layerOpacityGeohash = styleConfig.opacity !== undefined ? styleConfig.opacity : 0.7;
|
|
2608
|
+
const precisionGeohash = styleConfig.precision || 5;
|
|
2609
|
+
const extrudedGeohash = true;
|
|
2610
|
+
const elevationScaleGeohash = styleConfig.elevationScale ?? 1;
|
|
2611
|
+
const colorFieldGeohash = colorConfig.colorField;
|
|
2612
|
+
const colorMappingGeohash = colorConfig.colorMapping || {};
|
|
2613
|
+
const heightFieldGeohash = colorConfig.heightField;
|
|
2614
|
+
|
|
2615
|
+
// Geohash encoding/decoding functions (match GeohashLayerComponent)
|
|
2616
|
+
var BASE32 = '0123456789bcdefghjkmnpqrstuvwxyz';
|
|
2617
|
+
|
|
2618
|
+
function encodeGeohash(lat, lng, precision) {
|
|
2619
|
+
var minLat = -90, maxLat = 90;
|
|
2620
|
+
var minLng = -180, maxLng = 180;
|
|
2621
|
+
var hash = '';
|
|
2622
|
+
var isEven = true;
|
|
2623
|
+
var bit = 0;
|
|
2624
|
+
var ch = 0;
|
|
2625
|
+
|
|
2626
|
+
while (hash.length < precision) {
|
|
2627
|
+
if (isEven) {
|
|
2628
|
+
var mid = (minLng + maxLng) / 2;
|
|
2629
|
+
if (lng >= mid) {
|
|
2630
|
+
ch |= (1 << (4 - bit));
|
|
2631
|
+
minLng = mid;
|
|
2632
|
+
} else {
|
|
2633
|
+
maxLng = mid;
|
|
2634
|
+
}
|
|
2635
|
+
} else {
|
|
2636
|
+
var mid = (minLat + maxLat) / 2;
|
|
2637
|
+
if (lat >= mid) {
|
|
2638
|
+
ch |= (1 << (4 - bit));
|
|
2639
|
+
minLat = mid;
|
|
2640
|
+
} else {
|
|
2641
|
+
maxLat = mid;
|
|
2642
|
+
}
|
|
2643
|
+
}
|
|
2644
|
+
isEven = !isEven;
|
|
2645
|
+
if (bit < 4) {
|
|
2646
|
+
bit++;
|
|
2647
|
+
} else {
|
|
2648
|
+
hash += BASE32[ch];
|
|
2649
|
+
bit = 0;
|
|
2650
|
+
ch = 0;
|
|
2651
|
+
}
|
|
2652
|
+
}
|
|
2653
|
+
return hash;
|
|
2654
|
+
}
|
|
2655
|
+
|
|
2656
|
+
function decodeGeohashBbox(hash) {
|
|
2657
|
+
var minLat = -90, maxLat = 90;
|
|
2658
|
+
var minLng = -180, maxLng = 180;
|
|
2659
|
+
var isEven = true;
|
|
2660
|
+
|
|
2661
|
+
for (var i = 0; i < hash.length; i++) {
|
|
2662
|
+
var c = hash[i];
|
|
2663
|
+
var cd = BASE32.indexOf(c);
|
|
2664
|
+
for (var j = 4; j >= 0; j--) {
|
|
2665
|
+
var mask = 1 << j;
|
|
2666
|
+
if (isEven) {
|
|
2667
|
+
if (cd & mask) {
|
|
2668
|
+
minLng = (minLng + maxLng) / 2;
|
|
2669
|
+
} else {
|
|
2670
|
+
maxLng = (minLng + maxLng) / 2;
|
|
2671
|
+
}
|
|
2672
|
+
} else {
|
|
2673
|
+
if (cd & mask) {
|
|
2674
|
+
minLat = (minLat + maxLat) / 2;
|
|
2675
|
+
} else {
|
|
2676
|
+
maxLat = (minLat + maxLat) / 2;
|
|
2677
|
+
}
|
|
2678
|
+
}
|
|
2679
|
+
isEven = !isEven;
|
|
2680
|
+
}
|
|
2681
|
+
}
|
|
2682
|
+
return [minLat, minLng, maxLat, maxLng];
|
|
2683
|
+
}
|
|
2684
|
+
|
|
2685
|
+
// Helper function to convert hex to RGBA
|
|
2686
|
+
function hexToRgbaGeohash(hex, alpha) {
|
|
2687
|
+
var normalized = hex && hex.startsWith('#') ? hex : '#' + (hex || '000000');
|
|
2688
|
+
var hv = normalized.replace('#', '');
|
|
2689
|
+
var r = parseInt(hv.slice(0, 2), 16) || 0;
|
|
2690
|
+
var g = parseInt(hv.slice(2, 4), 16) || 0;
|
|
2691
|
+
var b = parseInt(hv.slice(4, 6), 16) || 0;
|
|
2692
|
+
return [r, g, b, Math.round(alpha * 255)];
|
|
2693
|
+
}
|
|
2694
|
+
|
|
2695
|
+
// Aggregate points into geohash cells (match GeohashLayerComponent logic)
|
|
2696
|
+
var cellMap = {};
|
|
2697
|
+
(dataset.geojson.features || []).forEach(function(feature, index) {
|
|
2698
|
+
if (!feature.geometry) return;
|
|
2699
|
+
|
|
2700
|
+
var coordinates = [];
|
|
2701
|
+
switch (feature.geometry.type) {
|
|
2702
|
+
case 'Point':
|
|
2703
|
+
coordinates = [[feature.geometry.coordinates[0], feature.geometry.coordinates[1]]];
|
|
2704
|
+
break;
|
|
2705
|
+
case 'MultiPoint':
|
|
2706
|
+
coordinates = feature.geometry.coordinates.map(function(coord) {
|
|
2707
|
+
return [coord[0], coord[1]];
|
|
2708
|
+
});
|
|
2709
|
+
break;
|
|
2710
|
+
case 'Polygon':
|
|
2711
|
+
var polyCoords = feature.geometry.coordinates[0];
|
|
2712
|
+
if (polyCoords && polyCoords.length > 0) {
|
|
2713
|
+
var centroidX = polyCoords.reduce(function(sum, c) { return sum + c[0]; }, 0) / polyCoords.length;
|
|
2714
|
+
var centroidY = polyCoords.reduce(function(sum, c) { return sum + c[1]; }, 0) / polyCoords.length;
|
|
2715
|
+
coordinates = [[centroidX, centroidY]];
|
|
2716
|
+
}
|
|
2717
|
+
break;
|
|
2718
|
+
default:
|
|
2719
|
+
return;
|
|
2720
|
+
}
|
|
2721
|
+
|
|
2722
|
+
coordinates.forEach(function(coord) {
|
|
2723
|
+
try {
|
|
2724
|
+
var hash = encodeGeohash(coord[1], coord[0], precisionGeohash);
|
|
2725
|
+
if (!cellMap[hash]) {
|
|
2726
|
+
cellMap[hash] = { count: 0, sum: 0, properties: [], colorFieldValues: {} };
|
|
2727
|
+
}
|
|
2728
|
+
var cell = cellMap[hash];
|
|
2729
|
+
cell.count++;
|
|
2730
|
+
cell.properties.push(feature.properties || {});
|
|
2731
|
+
|
|
2732
|
+
// Track colorField values for aggregation
|
|
2733
|
+
if (colorFieldGeohash && feature.properties && feature.properties[colorFieldGeohash] !== undefined) {
|
|
2734
|
+
var colorValue = String(feature.properties[colorFieldGeohash]);
|
|
2735
|
+
cell.colorFieldValues[colorValue] = (cell.colorFieldValues[colorValue] || 0) + 1;
|
|
2736
|
+
}
|
|
2737
|
+
|
|
2738
|
+
if (heightFieldGeohash && feature.properties && feature.properties[heightFieldGeohash]) {
|
|
2739
|
+
var val = parseFloat(feature.properties[heightFieldGeohash]);
|
|
2740
|
+
if (!isNaN(val)) cell.sum += val;
|
|
2741
|
+
}
|
|
2742
|
+
} catch (e) {
|
|
2743
|
+
// Invalid coordinates
|
|
2744
|
+
}
|
|
2745
|
+
});
|
|
2746
|
+
});
|
|
2747
|
+
|
|
2748
|
+
// Convert to GeoJSON polygons
|
|
2749
|
+
var geohashFeatures = [];
|
|
2750
|
+
for (var hash in cellMap) {
|
|
2751
|
+
try {
|
|
2752
|
+
var cell = cellMap[hash];
|
|
2753
|
+
var bbox = decodeGeohashBbox(hash);
|
|
2754
|
+
// bbox is [minLat, minLng, maxLat, maxLng]
|
|
2755
|
+
var polygon = {
|
|
2756
|
+
type: 'Polygon',
|
|
2757
|
+
coordinates: [[
|
|
2758
|
+
[bbox[1], bbox[0]], // SW
|
|
2759
|
+
[bbox[3], bbox[0]], // SE
|
|
2760
|
+
[bbox[3], bbox[2]], // NE
|
|
2761
|
+
[bbox[1], bbox[2]], // NW
|
|
2762
|
+
[bbox[1], bbox[0]] // SW (close)
|
|
2763
|
+
]]
|
|
2764
|
+
};
|
|
2765
|
+
|
|
2766
|
+
// Find the most common colorField value in this cell
|
|
2767
|
+
var dominantColorValue = undefined;
|
|
2768
|
+
if (colorFieldGeohash && Object.keys(cell.colorFieldValues).length > 0) {
|
|
2769
|
+
var maxCount = 0;
|
|
2770
|
+
for (var value in cell.colorFieldValues) {
|
|
2771
|
+
if (cell.colorFieldValues[value] > maxCount) {
|
|
2772
|
+
maxCount = cell.colorFieldValues[value];
|
|
2773
|
+
dominantColorValue = value;
|
|
2774
|
+
}
|
|
2775
|
+
}
|
|
2776
|
+
}
|
|
2777
|
+
|
|
2778
|
+
var props = {
|
|
2779
|
+
geohash: hash,
|
|
2780
|
+
count: cell.count,
|
|
2781
|
+
sum: cell.sum,
|
|
2782
|
+
average: cell.count > 0 ? cell.sum / cell.count : 0
|
|
2783
|
+
};
|
|
2784
|
+
if (dominantColorValue !== undefined && colorFieldGeohash) {
|
|
2785
|
+
props[colorFieldGeohash] = dominantColorValue;
|
|
2786
|
+
}
|
|
2787
|
+
|
|
2788
|
+
geohashFeatures.push({
|
|
2789
|
+
type: 'Feature',
|
|
2790
|
+
geometry: polygon,
|
|
2791
|
+
properties: props
|
|
2792
|
+
});
|
|
2793
|
+
} catch (e) {
|
|
2794
|
+
// Invalid geohash
|
|
2795
|
+
}
|
|
2796
|
+
}
|
|
2797
|
+
|
|
2798
|
+
if (geohashFeatures.length === 0) return null;
|
|
2799
|
+
|
|
2800
|
+
var geohashData = { type: 'FeatureCollection', features: geohashFeatures };
|
|
2801
|
+
var baseColorGeohash = hexToRgbaGeohash(fillColorGeohash, layerOpacityGeohash);
|
|
2802
|
+
var counts = geohashFeatures.map(function(f) { return f.properties.count || 1; });
|
|
2803
|
+
var maxCount = Math.max.apply(null, counts.concat([1]));
|
|
2804
|
+
|
|
2805
|
+
// getFillColor function - supports colorField/colorMapping
|
|
2806
|
+
var getFillColorGeohash = function(f) {
|
|
2807
|
+
// If colorField and colorMapping are provided, use them for data-driven coloring
|
|
2808
|
+
if (colorFieldGeohash && colorMappingGeohash && Object.keys(colorMappingGeohash).length > 0) {
|
|
2809
|
+
var colorValue = f.properties[colorFieldGeohash];
|
|
2810
|
+
if (colorValue !== undefined && colorValue !== null) {
|
|
2811
|
+
var colorValueStr = String(colorValue);
|
|
2812
|
+
// Try exact match first
|
|
2813
|
+
var mappedColor = colorMappingGeohash[colorValueStr];
|
|
2814
|
+
// If no exact match, try case-insensitive match
|
|
2815
|
+
if (!mappedColor) {
|
|
2816
|
+
for (var key in colorMappingGeohash) {
|
|
2817
|
+
if (key.toLowerCase() === colorValueStr.toLowerCase()) {
|
|
2818
|
+
mappedColor = colorMappingGeohash[key];
|
|
2819
|
+
break;
|
|
2820
|
+
}
|
|
2821
|
+
}
|
|
2822
|
+
}
|
|
2823
|
+
// If we found a mapped color, use it
|
|
2824
|
+
if (mappedColor) {
|
|
2825
|
+
return hexToRgbaGeohash(mappedColor, layerOpacityGeohash);
|
|
2826
|
+
}
|
|
2827
|
+
}
|
|
2828
|
+
}
|
|
2829
|
+
|
|
2830
|
+
// Fallback to intensity-based coloring using fillColor
|
|
2831
|
+
var count = f.properties.count || 1;
|
|
2832
|
+
var intensity = Math.min(1, count / maxCount);
|
|
2833
|
+
return [
|
|
2834
|
+
Math.round(baseColorGeohash[0] * (0.4 + intensity * 0.6)),
|
|
2835
|
+
Math.round(baseColorGeohash[1] * (0.4 + intensity * 0.6)),
|
|
2836
|
+
Math.round(baseColorGeohash[2] * (0.4 + intensity * 0.6)),
|
|
2837
|
+
baseColorGeohash[3]
|
|
2838
|
+
];
|
|
2839
|
+
};
|
|
2840
|
+
|
|
2841
|
+
// getElevation function - supports heightField
|
|
2842
|
+
var getElevationGeohash = function(f) {
|
|
2843
|
+
if (heightFieldGeohash) {
|
|
2844
|
+
return f.properties.sum || f.properties.count * 100 || 100;
|
|
2845
|
+
}
|
|
2846
|
+
return f.properties.count * 100 || 100;
|
|
2847
|
+
};
|
|
2848
|
+
|
|
2849
|
+
return new deck.GeoJsonLayer({
|
|
2850
|
+
...baseProps,
|
|
2851
|
+
data: geohashData,
|
|
2852
|
+
getFillColor: getFillColorGeohash,
|
|
2853
|
+
getLineColor: hexToRgbaGeohash(strokeColorGeohash, 1),
|
|
2854
|
+
getElevation: getElevationGeohash,
|
|
2855
|
+
extruded: extrudedGeohash,
|
|
2856
|
+
elevationScale: elevationScaleGeohash,
|
|
2857
|
+
stroked: true,
|
|
2858
|
+
lineWidthMinPixels: 1,
|
|
2859
|
+
pickable: true,
|
|
2860
|
+
visible: true,
|
|
2861
|
+
opacity: layerOpacityGeohash,
|
|
2862
|
+
onClick: function(info) {
|
|
2863
|
+
if (!info || !info.object) return;
|
|
2864
|
+
var coord = info.coordinate || (info.object.geometry && info.object.geometry.coordinates ?
|
|
2865
|
+
[info.object.geometry.coordinates[0][0][0], info.object.geometry.coordinates[0][0][1]] : null);
|
|
2866
|
+
if (!coord) return;
|
|
2867
|
+
var props = info.object.properties || {};
|
|
2868
|
+
showFeaturePopup(coord, props, dataset.name || 'Feature');
|
|
2869
|
+
},
|
|
2870
|
+
updateTriggers: {
|
|
2871
|
+
getFillColor: [fillColorGeohash, layerOpacityGeohash, colorFieldGeohash, colorMappingGeohash],
|
|
2872
|
+
getElevation: [heightFieldGeohash]
|
|
2873
|
+
}
|
|
2874
|
+
});
|
|
2875
|
+
}
|
|
2876
|
+
|
|
2877
|
+
// Path/Line Layer (match app's PathLayerComponent: Deck.gl PathLayer for LineString/MultiLineString geometries)
|
|
2878
|
+
// Note: Both "path" and "line" visualization types use PathLayerComponent
|
|
2879
|
+
if (layerType === 'path' || layerType === 'line') {
|
|
2880
|
+
const fillColorLine = styleConfig.fillColor;
|
|
2881
|
+
const strokeColorLine = styleConfig.strokeColor;
|
|
2882
|
+
const layerOpacityLine = styleConfig.opacity !== undefined ? styleConfig.opacity : 0.8;
|
|
2883
|
+
const strokeWidthLine = styleConfig.strokeWidth ?? 1;
|
|
2884
|
+
const dashPatternLine = styleConfig.dashPattern || 'solid';
|
|
2885
|
+
const colorFieldLine = colorConfig.colorField;
|
|
2886
|
+
const colorMappingLine = colorConfig.colorMapping || {};
|
|
2887
|
+
// Note: PathLayerComponent doesn't support widthField - it only uses strokeWidth
|
|
2888
|
+
|
|
2889
|
+
// Helper function to convert hex to RGBA
|
|
2890
|
+
function hexToRgbaLine(hex, alpha) {
|
|
2891
|
+
var normalized = hex && hex.startsWith('#') ? hex : '#' + (hex || '000000');
|
|
2892
|
+
var hv = normalized.replace('#', '');
|
|
2893
|
+
var r = parseInt(hv.slice(0, 2), 16) || 0;
|
|
2894
|
+
var g = parseInt(hv.slice(2, 4), 16) || 0;
|
|
2895
|
+
var b = parseInt(hv.slice(4, 6), 16) || 0;
|
|
2896
|
+
return [r, g, b, Math.round(alpha * 255)];
|
|
2897
|
+
}
|
|
2898
|
+
|
|
2899
|
+
// For path layers, use strokeColor as primary color (paths are lines, not filled shapes)
|
|
2900
|
+
// Only fall back to fillColor if strokeColor is not provided (match PathLayerComponent exactly)
|
|
2901
|
+
var effectiveColorLine = (strokeColorLine !== undefined && strokeColorLine !== null && strokeColorLine !== '')
|
|
2902
|
+
? strokeColorLine
|
|
2903
|
+
: (fillColorLine || '#000000');
|
|
2904
|
+
|
|
2905
|
+
// Process data to extract paths (same logic as PathLayerComponent)
|
|
2906
|
+
var pathData = [];
|
|
2907
|
+
(dataset.geojson.features || []).forEach(function(feature) {
|
|
2908
|
+
if (!feature.geometry) return;
|
|
2909
|
+
|
|
2910
|
+
var coordinates = [];
|
|
2911
|
+
switch (feature.geometry.type) {
|
|
2912
|
+
case 'LineString':
|
|
2913
|
+
coordinates = feature.geometry.coordinates.map(function(coord) {
|
|
2914
|
+
return [coord[0], coord[1]];
|
|
2915
|
+
});
|
|
2916
|
+
break;
|
|
2917
|
+
case 'MultiLineString':
|
|
2918
|
+
// Use the first line string
|
|
2919
|
+
if (feature.geometry.coordinates[0]) {
|
|
2920
|
+
coordinates = feature.geometry.coordinates[0].map(function(coord) {
|
|
2921
|
+
return [coord[0], coord[1]];
|
|
2922
|
+
});
|
|
2923
|
+
}
|
|
2924
|
+
break;
|
|
2925
|
+
case 'Polygon':
|
|
2926
|
+
// Use the first ring (exterior ring) of the polygon
|
|
2927
|
+
if (feature.geometry.coordinates[0]) {
|
|
2928
|
+
coordinates = feature.geometry.coordinates[0].map(function(coord) {
|
|
2929
|
+
return [coord[0], coord[1]];
|
|
2930
|
+
});
|
|
2931
|
+
}
|
|
2932
|
+
break;
|
|
2933
|
+
case 'MultiPolygon':
|
|
2934
|
+
// Use the first polygon's first ring
|
|
2935
|
+
if (feature.geometry.coordinates[0] && feature.geometry.coordinates[0][0]) {
|
|
2936
|
+
coordinates = feature.geometry.coordinates[0][0].map(function(coord) {
|
|
2937
|
+
return [coord[0], coord[1]];
|
|
2938
|
+
});
|
|
2939
|
+
}
|
|
2940
|
+
break;
|
|
2941
|
+
}
|
|
2942
|
+
|
|
2943
|
+
if (coordinates.length > 0) {
|
|
2944
|
+
pathData.push({
|
|
2945
|
+
path: coordinates,
|
|
2946
|
+
properties: feature.properties || {}
|
|
2947
|
+
});
|
|
2948
|
+
}
|
|
2949
|
+
});
|
|
2950
|
+
|
|
2951
|
+
if (pathData.length === 0) return null;
|
|
2952
|
+
|
|
2953
|
+
// getColor function - supports colorField/colorMapping, uses strokeColor as primary
|
|
2954
|
+
// Always return a function (match PathLayerComponent behavior)
|
|
2955
|
+
var baseColorLine = hexToRgbaLine(effectiveColorLine, layerOpacityLine);
|
|
2956
|
+
var getColorLine = function(d) {
|
|
2957
|
+
// If color mapping exists, use it
|
|
2958
|
+
if (colorFieldLine && colorMappingLine && Object.keys(colorMappingLine).length > 0) {
|
|
2959
|
+
var props = d.properties || {};
|
|
2960
|
+
var value = props[colorFieldLine];
|
|
2961
|
+
if (value === undefined || value === null) {
|
|
2962
|
+
var lowerField = colorFieldLine.toLowerCase();
|
|
2963
|
+
for (var key in props) {
|
|
2964
|
+
if (key.toLowerCase() === lowerField) {
|
|
2965
|
+
value = props[key];
|
|
2966
|
+
break;
|
|
2967
|
+
}
|
|
2968
|
+
}
|
|
2969
|
+
}
|
|
2970
|
+
if (value !== undefined && value !== null) {
|
|
2971
|
+
var valueStr = String(value).trim();
|
|
2972
|
+
var mappedColor = colorMappingLine[valueStr];
|
|
2973
|
+
if (!mappedColor) {
|
|
2974
|
+
for (var k in colorMappingLine) {
|
|
2975
|
+
if (k.toLowerCase() === valueStr.toLowerCase()) {
|
|
2976
|
+
mappedColor = colorMappingLine[k];
|
|
2977
|
+
break;
|
|
2978
|
+
}
|
|
2979
|
+
}
|
|
2980
|
+
}
|
|
2981
|
+
if (mappedColor) {
|
|
2982
|
+
return hexToRgbaLine(mappedColor, layerOpacityLine);
|
|
2983
|
+
}
|
|
2984
|
+
}
|
|
2985
|
+
}
|
|
2986
|
+
// Fallback to effectiveColor (strokeColor if set, otherwise fillColor)
|
|
2987
|
+
return baseColorLine;
|
|
2988
|
+
};
|
|
2989
|
+
|
|
2990
|
+
// getWidth - PathLayerComponent uses strokeWidth directly (not a function, no widthField support)
|
|
2991
|
+
var getWidthLine = strokeWidthLine;
|
|
2992
|
+
|
|
2993
|
+
// Dash patterns mapping (match app's DASH_PATTERNS)
|
|
2994
|
+
var DASH_PATTERNS_LINE = {
|
|
2995
|
+
solid: [0, 0],
|
|
2996
|
+
dashed: [8, 4],
|
|
2997
|
+
dotted: [2, 2],
|
|
2998
|
+
longDash: [16, 8],
|
|
2999
|
+
shortDash: [4, 4],
|
|
3000
|
+
dashDot: [8, 4, 2, 4],
|
|
3001
|
+
denseDot: [1, 2],
|
|
3002
|
+
railroad: [1, 8],
|
|
3003
|
+
highway: [12, 6],
|
|
3004
|
+
boundary: [10, 5]
|
|
3005
|
+
};
|
|
3006
|
+
|
|
3007
|
+
// getDashArray function - supports dashPattern (must be a function, not a constant)
|
|
3008
|
+
var hasDashPatternLine = dashPatternLine && dashPatternLine !== 'solid';
|
|
3009
|
+
var getDashArrayLine = undefined;
|
|
3010
|
+
if (hasDashPatternLine && DASH_PATTERNS_LINE[dashPatternLine]) {
|
|
3011
|
+
// deck.gl PathStyleExtension only supports 2-element arrays [dashLength, gapLength]
|
|
3012
|
+
var pattern = DASH_PATTERNS_LINE[dashPatternLine];
|
|
3013
|
+
if (Array.isArray(pattern) && pattern.length >= 2) {
|
|
3014
|
+
// getDashArray must be a function that returns the dash pattern array
|
|
3015
|
+
var dashPatternArray = [pattern[0], pattern[1]];
|
|
3016
|
+
getDashArrayLine = function(d) {
|
|
3017
|
+
return dashPatternArray;
|
|
3018
|
+
};
|
|
3019
|
+
}
|
|
3020
|
+
}
|
|
3021
|
+
|
|
3022
|
+
if (typeof deck.PathLayer !== 'function') {
|
|
3023
|
+
console.warn('PathLayer not available, falling back to ScatterplotLayer');
|
|
3024
|
+
// Fall through to ScatterplotLayer
|
|
3025
|
+
} else {
|
|
3026
|
+
// Check if PathStyleExtension is available for dash patterns
|
|
3027
|
+
// PathStyleExtension is loaded from @deck.gl/extensions CDN bundle
|
|
3028
|
+
// After loading @deck.gl/extensions, it should be available as deck.PathStyleExtension
|
|
3029
|
+
var PathStyleExtension = null;
|
|
3030
|
+
try {
|
|
3031
|
+
if (typeof deck !== 'undefined') {
|
|
3032
|
+
// Primary: deck.PathStyleExtension (standard CDN location)
|
|
3033
|
+
if (typeof deck.PathStyleExtension === 'function') {
|
|
3034
|
+
PathStyleExtension = deck.PathStyleExtension;
|
|
3035
|
+
}
|
|
3036
|
+
// Alternative: deck.extensions.PathStyleExtension
|
|
3037
|
+
else if (deck.extensions && typeof deck.extensions.PathStyleExtension === 'function') {
|
|
3038
|
+
PathStyleExtension = deck.extensions.PathStyleExtension;
|
|
3039
|
+
}
|
|
3040
|
+
// Fallback: window.deck.PathStyleExtension
|
|
3041
|
+
else if (typeof window !== 'undefined' && window.deck && typeof window.deck.PathStyleExtension === 'function') {
|
|
3042
|
+
PathStyleExtension = window.deck.PathStyleExtension;
|
|
3043
|
+
}
|
|
3044
|
+
}
|
|
3045
|
+
} catch (e) {
|
|
3046
|
+
console.warn('PathStyleExtension not found, dash patterns will not be available:', e);
|
|
3047
|
+
}
|
|
3048
|
+
|
|
3049
|
+
// Log for debugging
|
|
3050
|
+
if (hasDashPatternLine) {
|
|
3051
|
+
console.log('=== Line Layer Dash Pattern Debug ===');
|
|
3052
|
+
console.log('Dash pattern requested:', dashPatternLine);
|
|
3053
|
+
console.log('PathStyleExtension available:', PathStyleExtension !== null);
|
|
3054
|
+
console.log('getDashArrayLine type:', typeof getDashArrayLine);
|
|
3055
|
+
if (getDashArrayLine && typeof getDashArrayLine === 'function') {
|
|
3056
|
+
console.log('getDashArrayLine sample result:', getDashArrayLine({}));
|
|
3057
|
+
}
|
|
3058
|
+
}
|
|
3059
|
+
|
|
3060
|
+
var extensionsLine = [];
|
|
3061
|
+
if (hasDashPatternLine && PathStyleExtension && getDashArrayLine) {
|
|
3062
|
+
try {
|
|
3063
|
+
// Create PathStyleExtension with dash enabled
|
|
3064
|
+
var pathStyleExt = new PathStyleExtension({ dash: true });
|
|
3065
|
+
extensionsLine.push(pathStyleExt);
|
|
3066
|
+
console.log('PathStyleExtension created successfully for dash pattern:', dashPatternLine);
|
|
3067
|
+
} catch (e) {
|
|
3068
|
+
console.error('Failed to create PathStyleExtension, dash patterns disabled:', e);
|
|
3069
|
+
console.error('PathStyleExtension constructor:', PathStyleExtension);
|
|
3070
|
+
}
|
|
3071
|
+
} else if (hasDashPatternLine) {
|
|
3072
|
+
if (!PathStyleExtension) {
|
|
3073
|
+
console.warn('PathStyleExtension not available, dash pattern "' + dashPatternLine + '" will be ignored');
|
|
3074
|
+
console.warn('deck object:', typeof deck !== 'undefined' ? Object.keys(deck).slice(0, 10) : 'undefined');
|
|
3075
|
+
}
|
|
3076
|
+
if (!getDashArrayLine) {
|
|
3077
|
+
console.warn('getDashArrayLine not set for dash pattern:', dashPatternLine);
|
|
3078
|
+
}
|
|
3079
|
+
}
|
|
3080
|
+
|
|
3081
|
+
var pathLayerOptions = {
|
|
3082
|
+
...baseProps,
|
|
3083
|
+
data: pathData,
|
|
3084
|
+
getPath: function(d) { return d.path; },
|
|
3085
|
+
getColor: getColorLine,
|
|
3086
|
+
getWidth: getWidthLine,
|
|
3087
|
+
widthUnits: 'pixels',
|
|
3088
|
+
widthMinPixels: 1,
|
|
3089
|
+
widthMaxPixels: 20,
|
|
3090
|
+
capRounded: true,
|
|
3091
|
+
jointRounded: true,
|
|
3092
|
+
billboard: false,
|
|
3093
|
+
pickable: true,
|
|
3094
|
+
visible: true,
|
|
3095
|
+
opacity: layerOpacityLine,
|
|
3096
|
+
onClick: function(info) {
|
|
3097
|
+
if (!info || !info.object) return;
|
|
3098
|
+
var coord = info.coordinate || (info.object.path && info.object.path.length > 0 ?
|
|
3099
|
+
[info.object.path[0][0], info.object.path[0][1]] : null);
|
|
3100
|
+
if (!coord) return;
|
|
3101
|
+
var props = info.object.properties || {};
|
|
3102
|
+
showFeaturePopup(coord, props, dataset.name || 'Feature');
|
|
3103
|
+
},
|
|
3104
|
+
updateTriggers: {
|
|
3105
|
+
getColor: [effectiveColorLine, layerOpacityLine, colorFieldLine, colorMappingLine, strokeColorLine, fillColorLine, pathData.length],
|
|
3106
|
+
getPath: [pathData.length],
|
|
3107
|
+
getWidth: [strokeWidthLine],
|
|
3108
|
+
getDashArray: [dashPatternLine]
|
|
3109
|
+
}
|
|
3110
|
+
};
|
|
3111
|
+
|
|
3112
|
+
// Add extensions if dash pattern is enabled
|
|
3113
|
+
if (extensionsLine.length > 0) {
|
|
3114
|
+
pathLayerOptions.extensions = extensionsLine;
|
|
3115
|
+
}
|
|
3116
|
+
|
|
3117
|
+
// Add getDashArray if dash pattern is enabled
|
|
3118
|
+
if (hasDashPatternLine && getDashArrayLine) {
|
|
3119
|
+
pathLayerOptions.getDashArray = getDashArrayLine;
|
|
3120
|
+
pathLayerOptions.dashJustified = true;
|
|
3121
|
+
pathLayerOptions.dashGapPickable = false;
|
|
3122
|
+
}
|
|
3123
|
+
|
|
3124
|
+
return new deck.PathLayer(pathLayerOptions);
|
|
3125
|
+
}
|
|
3126
|
+
}
|
|
3127
|
+
|
|
3128
|
+
// Scatterplot Layer (default for points - match app's ScatterplotLayerComponent)
|
|
3129
|
+
var colorField = colorConfig.colorField;
|
|
3130
|
+
var colorMapping = colorConfig.colorMapping || {};
|
|
3131
|
+
const layerOpacityValue = styleConfig.opacity !== undefined ? styleConfig.opacity : 0.8;
|
|
3132
|
+
const fillColorForPoints = styleConfig.fillColor || dataset.color || '#3b82f6';
|
|
3133
|
+
const pointStrokeColor = styleConfig.strokeColor || '#ffffff';
|
|
3134
|
+
|
|
3135
|
+
// When colorField is set but colorMapping is empty, generate from data (match app's colorFieldValues sort)
|
|
3136
|
+
if (colorField && Object.keys(colorMapping).length === 0 && pointData.length > 0) {
|
|
3137
|
+
var DEFAULT_PALETTE = ['#e41a1c', '#377eb8', '#4daf4a', '#984ea3', '#ff7f00', '#ffff33', '#a65628', '#f781bf', '#999999'];
|
|
3138
|
+
var seen = {};
|
|
3139
|
+
pointData.forEach(function(d) {
|
|
3140
|
+
var props = d.properties || {};
|
|
3141
|
+
var val = props[colorField];
|
|
3142
|
+
if (val === undefined || val === null) {
|
|
3143
|
+
var lowerField = colorField.toLowerCase();
|
|
3144
|
+
for (var k in props) {
|
|
3145
|
+
if (k.toLowerCase() === lowerField) { val = props[k]; break; }
|
|
3146
|
+
}
|
|
3147
|
+
}
|
|
3148
|
+
if (val !== undefined && val !== null) {
|
|
3149
|
+
var str = String(val).trim();
|
|
3150
|
+
seen[str] = true;
|
|
3151
|
+
}
|
|
3152
|
+
});
|
|
3153
|
+
var uniqueValues = Object.keys(seen);
|
|
3154
|
+
uniqueValues.sort(function(a, b) {
|
|
3155
|
+
var numA = Number(a);
|
|
3156
|
+
var numB = Number(b);
|
|
3157
|
+
var isNumA = !isNaN(numA) && a.trim() !== '';
|
|
3158
|
+
var isNumB = !isNaN(numB) && b.trim() !== '';
|
|
3159
|
+
if (isNumA && isNumB) return numA - numB;
|
|
3160
|
+
if (isNumA) return -1;
|
|
3161
|
+
if (isNumB) return 1;
|
|
3162
|
+
return a.localeCompare(b);
|
|
3163
|
+
});
|
|
3164
|
+
colorMapping = {};
|
|
3165
|
+
uniqueValues.forEach(function(v, i) {
|
|
3166
|
+
colorMapping[v] = DEFAULT_PALETTE[i % DEFAULT_PALETTE.length];
|
|
3167
|
+
});
|
|
3168
|
+
}
|
|
3169
|
+
|
|
3170
|
+
// Build color lookup from colorMapping
|
|
3171
|
+
const fillColorRgb = parseColor(fillColorForPoints);
|
|
3172
|
+
const colorValues = Object.keys(colorMapping);
|
|
3173
|
+
const colorArray = Object.values(colorMapping).map(function(hexColor) {
|
|
3174
|
+
if (hexColor && hexColor.startsWith('#')) {
|
|
3175
|
+
return [
|
|
3176
|
+
parseInt(hexColor.slice(1, 3), 16),
|
|
3177
|
+
parseInt(hexColor.slice(3, 5), 16),
|
|
3178
|
+
parseInt(hexColor.slice(5, 7), 16),
|
|
3179
|
+
Math.round(layerOpacityValue * 255)
|
|
3180
|
+
];
|
|
3181
|
+
}
|
|
3182
|
+
return [...fillColorRgb, Math.round(layerOpacityValue * 255)];
|
|
3183
|
+
});
|
|
3184
|
+
|
|
3185
|
+
// getFillColor with case-insensitive lookup (same as app)
|
|
3186
|
+
function getFillColorForPoint(d) {
|
|
3187
|
+
if (!colorField || !colorMapping || Object.keys(colorMapping).length === 0) {
|
|
3188
|
+
return [...fillColorRgb, Math.round(layerOpacityValue * 255)];
|
|
3189
|
+
}
|
|
3190
|
+
var props = d.properties || {};
|
|
3191
|
+
var value = props[colorField];
|
|
3192
|
+
if (value === undefined || value === null) {
|
|
3193
|
+
var lowerField = colorField.toLowerCase();
|
|
3194
|
+
for (var key in props) {
|
|
3195
|
+
if (key.toLowerCase() === lowerField) {
|
|
3196
|
+
value = props[key];
|
|
3197
|
+
break;
|
|
3198
|
+
}
|
|
3199
|
+
}
|
|
3200
|
+
}
|
|
3201
|
+
if (value !== undefined && value !== null) {
|
|
3202
|
+
var valueStr = String(value).trim();
|
|
3203
|
+
var idx = colorValues.indexOf(valueStr);
|
|
3204
|
+
if (idx >= 0 && colorArray[idx]) return colorArray[idx];
|
|
3205
|
+
for (var i = 0; i < colorValues.length; i++) {
|
|
3206
|
+
if (colorValues[i].toLowerCase() === valueStr.toLowerCase()) {
|
|
3207
|
+
return colorArray[i];
|
|
3208
|
+
}
|
|
3209
|
+
}
|
|
3210
|
+
}
|
|
3211
|
+
return [...fillColorRgb, Math.round(layerOpacityValue * 255)];
|
|
3212
|
+
}
|
|
3213
|
+
|
|
3214
|
+
var strokeRgb = parseColor(pointStrokeColor);
|
|
3215
|
+
|
|
3216
|
+
// getRadius: use radiusField (heightField) when set, else constant (match app's ScatterplotLayerComponent)
|
|
3217
|
+
const radiusField = colorConfig.heightField;
|
|
3218
|
+
var getRadiusFn = pointRadius;
|
|
3219
|
+
// For cluster visualization, keep constant radius like the main app (no size-by-field)
|
|
3220
|
+
if (radiusField && layerType !== 'cluster') {
|
|
3221
|
+
getRadiusFn = function(d) {
|
|
3222
|
+
var props = d.properties || {};
|
|
3223
|
+
var val = props[radiusField];
|
|
3224
|
+
if (val === undefined || val === null) {
|
|
3225
|
+
var lower = radiusField.toLowerCase();
|
|
3226
|
+
for (var k in props) { if (k.toLowerCase() === lower) { val = props[k]; break; } }
|
|
3227
|
+
}
|
|
3228
|
+
if (typeof val === 'number') return Math.max(1, val) * (pointRadius / 5);
|
|
3229
|
+
var num = parseFloat(val);
|
|
3230
|
+
return !isNaN(num) ? Math.max(1, num) * (pointRadius / 5) : pointRadius;
|
|
3231
|
+
};
|
|
3232
|
+
}
|
|
3233
|
+
|
|
3234
|
+
return new deck.ScatterplotLayer({
|
|
3235
|
+
...baseProps,
|
|
3236
|
+
getPosition: d => d.position,
|
|
3237
|
+
getRadius: getRadiusFn,
|
|
3238
|
+
radiusUnits: 'pixels',
|
|
3239
|
+
opacity: layerOpacityValue,
|
|
3240
|
+
getFillColor: getFillColorForPoint,
|
|
3241
|
+
getLineColor: [strokeRgb[0], strokeRgb[1], strokeRgb[2], Math.round(layerOpacityValue * 255)],
|
|
3242
|
+
lineWidthMinPixels: strokeWidth,
|
|
3243
|
+
stroked: true,
|
|
3244
|
+
radiusScale: 1,
|
|
3245
|
+
radiusMinPixels: 1,
|
|
3246
|
+
radiusMaxPixels: 100,
|
|
3247
|
+
onClick: function(info) {
|
|
3248
|
+
if (!info || !info.object) return;
|
|
3249
|
+
var coord = info.coordinate || (info.object.position ? [info.object.position[0], info.object.position[1]] : null);
|
|
3250
|
+
if (!coord) return;
|
|
3251
|
+
var props = info.object.properties || {};
|
|
3252
|
+
showFeaturePopup(coord, props, dataset.name || 'Feature');
|
|
3253
|
+
}
|
|
3254
|
+
});
|
|
3255
|
+
}
|
|
3256
|
+
|
|
3257
|
+
// Add datasets when map loads
|
|
3258
|
+
map.on('load', function() {
|
|
3259
|
+
const deckLayers = [];
|
|
3260
|
+
|
|
3261
|
+
mapConfig.datasets.forEach(function(dataset) {
|
|
3262
|
+
if (!dataset.geojson || !dataset.geojson.features) return;
|
|
3263
|
+
|
|
3264
|
+
// Initialize visibility
|
|
3265
|
+
layerVisibility[dataset.id] = true;
|
|
3266
|
+
layerOpacity[dataset.id] = 1;
|
|
3267
|
+
|
|
3268
|
+
// Get the layer configuration
|
|
3269
|
+
const layerConfig = dataset.layerConfig;
|
|
3270
|
+
const rawLayerType = layerConfig?.type || 'geojson';
|
|
3271
|
+
// In export, normalize visualization types to supported deck.gl layers
|
|
3272
|
+
let layerType = rawLayerType;
|
|
3273
|
+
if (rawLayerType === 'h3cluster') layerType = 'hexagon';
|
|
3274
|
+
// Note: greatcircle now uses GreatCircleLayer directly, not normalized to arc
|
|
3275
|
+
|
|
3276
|
+
console.log('=== Processing Dataset ===');
|
|
3277
|
+
console.log('Name:', dataset.name);
|
|
3278
|
+
console.log('ID:', dataset.id);
|
|
3279
|
+
console.log('LayerType:', layerType);
|
|
3280
|
+
console.log('LayerConfig:', JSON.stringify(dataset.layerConfig));
|
|
3281
|
+
console.log('Features count:', dataset.geojson.features.length);
|
|
3282
|
+
console.log('First feature geometry type:', dataset.geojson.features[0]?.geometry?.type);
|
|
3283
|
+
|
|
3284
|
+
// Check if it's an advanced layer type that needs deck.gl
|
|
3285
|
+
// NOTE: heatmap is handled separately using a MapLibre heatmap layer (to match the app)
|
|
3286
|
+
const isAdvancedLayer = ['grid', 'hexbin', 'hexagon', 'column', 'h3', 'contour', 'screengrid', 'pointcloud', 'arc', 'icon', 'text', 'mesh', 'scenegraph', 'geohash', 'line', 'path', 'greatcircle', 'trip', 'animatedtrip'].includes(layerType);
|
|
3287
|
+
console.log('Is advanced layer:', isAdvancedLayer);
|
|
3288
|
+
|
|
3289
|
+
// Check geometry type
|
|
3290
|
+
const geometryType = dataset.geojson.features[0]?.geometry?.type;
|
|
3291
|
+
const isPointGeometry = geometryType === 'Point' || geometryType === 'MultiPoint';
|
|
3292
|
+
|
|
3293
|
+
// Special handling for heatmap: use MapLibre heatmap layer (same style as app's MapboxHeatmapLayer)
|
|
3294
|
+
if (layerType === 'heatmap') {
|
|
3295
|
+
try {
|
|
3296
|
+
const weightField = layerConfig?.colorConfig?.heightField;
|
|
3297
|
+
const features = [];
|
|
3298
|
+
|
|
3299
|
+
(dataset.geojson.features || []).forEach(function(feature) {
|
|
3300
|
+
if (!feature.geometry) return;
|
|
3301
|
+
|
|
3302
|
+
let coordinates = null;
|
|
3303
|
+
switch (feature.geometry.type) {
|
|
3304
|
+
case 'Point':
|
|
3305
|
+
coordinates = [feature.geometry.coordinates[0], feature.geometry.coordinates[1]];
|
|
3306
|
+
break;
|
|
3307
|
+
case 'MultiPoint':
|
|
3308
|
+
if (feature.geometry.coordinates.length > 0) {
|
|
3309
|
+
coordinates = [feature.geometry.coordinates[0][0], feature.geometry.coordinates[0][1]];
|
|
3310
|
+
}
|
|
3311
|
+
break;
|
|
3312
|
+
case 'Polygon':
|
|
3313
|
+
case 'MultiPolygon':
|
|
3314
|
+
var coords = feature.geometry.type === 'Polygon'
|
|
3315
|
+
? feature.geometry.coordinates[0]
|
|
3316
|
+
: feature.geometry.coordinates[0][0];
|
|
3317
|
+
if (coords && coords.length > 0) {
|
|
3318
|
+
var sumX = coords.reduce(function(sum, c) { return sum + c[0]; }, 0);
|
|
3319
|
+
var sumY = coords.reduce(function(sum, c) { return sum + c[1]; }, 0);
|
|
3320
|
+
coordinates = [sumX / coords.length, sumY / coords.length];
|
|
3321
|
+
}
|
|
3322
|
+
break;
|
|
3323
|
+
case 'LineString':
|
|
3324
|
+
var lineCoords = feature.geometry.coordinates;
|
|
3325
|
+
if (lineCoords.length > 0) {
|
|
3326
|
+
var midIndex = Math.floor(lineCoords.length / 2);
|
|
3327
|
+
coordinates = [lineCoords[midIndex][0], lineCoords[midIndex][1]];
|
|
3328
|
+
}
|
|
3329
|
+
break;
|
|
3330
|
+
default:
|
|
3331
|
+
return;
|
|
3332
|
+
}
|
|
3333
|
+
|
|
3334
|
+
if (!coordinates) return;
|
|
3335
|
+
|
|
3336
|
+
var weight = 1;
|
|
3337
|
+
if (weightField && feature.properties) {
|
|
3338
|
+
var val = feature.properties[weightField];
|
|
3339
|
+
if (typeof val === 'number') {
|
|
3340
|
+
weight = val;
|
|
3341
|
+
} else if (typeof val === 'string') {
|
|
3342
|
+
var parsed = parseFloat(val);
|
|
3343
|
+
if (!isNaN(parsed)) weight = parsed;
|
|
3344
|
+
}
|
|
3345
|
+
}
|
|
3346
|
+
|
|
3347
|
+
features.push({
|
|
3348
|
+
type: 'Feature',
|
|
3349
|
+
geometry: { type: 'Point', coordinates: coordinates },
|
|
3350
|
+
properties: Object.assign({ weight: weight }, feature.properties || {})
|
|
3351
|
+
});
|
|
3352
|
+
});
|
|
3353
|
+
|
|
3354
|
+
if (!features.length) {
|
|
3355
|
+
return;
|
|
3356
|
+
}
|
|
3357
|
+
|
|
3358
|
+
var heatSourceId = 'heatmap-source-' + dataset.id;
|
|
3359
|
+
var heatLayerId = 'heatmap-layer-' + dataset.id;
|
|
3360
|
+
var heatGeojson = { type: 'FeatureCollection', features: features };
|
|
3361
|
+
|
|
3362
|
+
map.addSource(heatSourceId, {
|
|
3363
|
+
type: 'geojson',
|
|
3364
|
+
data: heatGeojson
|
|
3365
|
+
});
|
|
3366
|
+
|
|
3367
|
+
var radius = layerConfig?.styleConfig?.pointRadius ?? 50;
|
|
3368
|
+
var intensity = (layerConfig?.styleConfig && (layerConfig.styleConfig).intensity !== undefined)
|
|
3369
|
+
? (layerConfig.styleConfig).intensity
|
|
3370
|
+
: 1;
|
|
3371
|
+
var opacity = layerConfig?.styleConfig?.opacity ?? 0.8;
|
|
3372
|
+
|
|
3373
|
+
map.addLayer({
|
|
3374
|
+
id: heatLayerId,
|
|
3375
|
+
type: 'heatmap',
|
|
3376
|
+
source: heatSourceId,
|
|
3377
|
+
paint: {
|
|
3378
|
+
'heatmap-weight': [
|
|
3379
|
+
'interpolate',
|
|
3380
|
+
['linear'],
|
|
3381
|
+
['get', 'weight'],
|
|
3382
|
+
0, 0,
|
|
3383
|
+
10, 1
|
|
3384
|
+
],
|
|
3385
|
+
'heatmap-intensity': intensity,
|
|
3386
|
+
'heatmap-radius': radius,
|
|
3387
|
+
'heatmap-opacity': opacity,
|
|
3388
|
+
'heatmap-color': [
|
|
3389
|
+
'interpolate',
|
|
3390
|
+
['linear'],
|
|
3391
|
+
['heatmap-density'],
|
|
3392
|
+
0, 'rgba(0, 255, 0, 0)',
|
|
3393
|
+
0.2, 'rgba(0, 255, 0, 0.5)',
|
|
3394
|
+
0.4, 'rgba(255, 255, 0, 0.7)',
|
|
3395
|
+
0.6, 'rgba(255, 165, 0, 0.8)',
|
|
3396
|
+
0.8, 'rgba(255, 69, 0, 0.9)',
|
|
3397
|
+
1, 'rgba(255, 0, 0, 1)'
|
|
3398
|
+
]
|
|
3399
|
+
},
|
|
3400
|
+
layout: {
|
|
3401
|
+
visibility: 'visible'
|
|
3402
|
+
}
|
|
3403
|
+
});
|
|
3404
|
+
} catch (errHeat) {
|
|
3405
|
+
console.error('Error adding heatmap layer for dataset', dataset.name, errHeat);
|
|
3406
|
+
}
|
|
3407
|
+
return; // Skip further processing for this dataset
|
|
3408
|
+
}
|
|
3409
|
+
|
|
3410
|
+
if (isAdvancedLayer) {
|
|
3411
|
+
// Use deck.gl for advanced layer types (Grid, Hexagon, etc.)
|
|
3412
|
+
// These can work with any geometry type since we extract all coordinates as points
|
|
3413
|
+
const deckLayer = createDeckLayer(dataset, layerConfig);
|
|
3414
|
+
if (deckLayer) {
|
|
3415
|
+
deckLayers.push(deckLayer);
|
|
3416
|
+
console.log('Added deck.gl layer:', layerType, 'for', dataset.name, 'with extracted points');
|
|
3417
|
+
}
|
|
3418
|
+
} else if (isPointGeometry) {
|
|
3419
|
+
// Use deck.gl ScatterplotLayer for point geometries with geojson visualization
|
|
3420
|
+
// IMPORTANT: Pass the full layerConfig including visualization type and colorConfig
|
|
3421
|
+
const deckLayer = createDeckLayer(dataset, layerConfig);
|
|
3422
|
+
if (deckLayer) {
|
|
3423
|
+
deckLayers.push(deckLayer);
|
|
3424
|
+
console.log('Added ScatterplotLayer for', dataset.name, 'with colorConfig:', JSON.stringify(layerConfig?.colorConfig));
|
|
3425
|
+
}
|
|
3426
|
+
} else {
|
|
3427
|
+
// Use MapLibre for lines and polygons with geojson visualization
|
|
3428
|
+
const sourceId = 'source-' + dataset.id;
|
|
3429
|
+
const layerId = 'layer-' + dataset.id;
|
|
3430
|
+
const defaultColor = dataset.color || '#9333ea';
|
|
3431
|
+
const colorField = layerConfig?.colorConfig?.colorField;
|
|
3432
|
+
const colorMapping = layerConfig?.colorConfig?.colorMapping || {};
|
|
3433
|
+
const layerOpacityValue = layerConfig?.styleConfig?.opacity !== undefined ? layerConfig.styleConfig.opacity : 0.8;
|
|
3434
|
+
|
|
3435
|
+
map.addSource(sourceId, {
|
|
3436
|
+
type: 'geojson',
|
|
3437
|
+
data: dataset.geojson
|
|
3438
|
+
});
|
|
3439
|
+
|
|
3440
|
+
// Build color expression if colorField and colorMapping are available
|
|
3441
|
+
let colorExpression = defaultColor;
|
|
3442
|
+
if (colorField && Object.keys(colorMapping).length > 0) {
|
|
3443
|
+
// Build a MapLibre match expression for data-driven coloring
|
|
3444
|
+
const matchExpr = ['match', ['get', colorField]];
|
|
3445
|
+
Object.entries(colorMapping).forEach(function(entry) {
|
|
3446
|
+
matchExpr.push(entry[0]); // value
|
|
3447
|
+
matchExpr.push(entry[1]); // color
|
|
3448
|
+
});
|
|
3449
|
+
matchExpr.push(defaultColor); // fallback
|
|
3450
|
+
colorExpression = matchExpr;
|
|
3451
|
+
console.log('Using data-driven color for', dataset.name, 'with', Object.keys(colorMapping).length, 'mappings');
|
|
3452
|
+
}
|
|
3453
|
+
|
|
3454
|
+
if (geometryType === 'LineString' || geometryType === 'MultiLineString') {
|
|
3455
|
+
map.addLayer({
|
|
3456
|
+
id: layerId,
|
|
3457
|
+
type: 'line',
|
|
3458
|
+
source: sourceId,
|
|
3459
|
+
paint: {
|
|
3460
|
+
'line-color': colorExpression,
|
|
3461
|
+
'line-width': layerConfig?.styleConfig?.strokeWidth || 3,
|
|
3462
|
+
'line-opacity': layerOpacityValue
|
|
3463
|
+
}
|
|
3464
|
+
});
|
|
3465
|
+
} else if (geometryType === 'Polygon' || geometryType === 'MultiPolygon') {
|
|
3466
|
+
map.addLayer({
|
|
3467
|
+
id: layerId,
|
|
3468
|
+
type: 'fill',
|
|
3469
|
+
source: sourceId,
|
|
3470
|
+
paint: {
|
|
3471
|
+
'fill-color': colorExpression,
|
|
3472
|
+
'fill-opacity': layerOpacityValue * 0.6
|
|
3473
|
+
}
|
|
3474
|
+
});
|
|
3475
|
+
map.addLayer({
|
|
3476
|
+
id: layerId + '-outline',
|
|
3477
|
+
type: 'line',
|
|
3478
|
+
source: sourceId,
|
|
3479
|
+
paint: {
|
|
3480
|
+
'line-color': colorExpression,
|
|
3481
|
+
'line-width': layerConfig?.styleConfig?.strokeWidth || 2,
|
|
3482
|
+
'line-opacity': layerOpacityValue
|
|
3483
|
+
}
|
|
3484
|
+
});
|
|
3485
|
+
}
|
|
3486
|
+
|
|
3487
|
+
// Click popup for MapLibre GeoJSON layers (lines and polygons)
|
|
3488
|
+
map.on('click', layerId, function(e) {
|
|
3489
|
+
if (!e || !e.features || !e.features.length) return;
|
|
3490
|
+
var feature = e.features[0];
|
|
3491
|
+
var props = feature.properties || {};
|
|
3492
|
+
showFeaturePopup(e.lngLat, props, dataset.name || 'Feature');
|
|
3493
|
+
});
|
|
3494
|
+
}
|
|
3495
|
+
});
|
|
3496
|
+
|
|
3497
|
+
// Create deck.gl overlay if we have deck layers
|
|
3498
|
+
if (deckLayers.length > 0) {
|
|
3499
|
+
allDeckLayers = deckLayers;
|
|
3500
|
+
|
|
3501
|
+
deckOverlay = new deck.MapboxOverlay({
|
|
3502
|
+
interleaved: true,
|
|
3503
|
+
layers: deckLayers
|
|
3504
|
+
});
|
|
3505
|
+
|
|
3506
|
+
map.addControl(deckOverlay);
|
|
3507
|
+
|
|
3508
|
+
// Start trip layer animation if any animated trip layers exist
|
|
3509
|
+
// Check if we have any animated trip layers and start animation loop
|
|
3510
|
+
var hasAnimatedTrips = false;
|
|
3511
|
+
for (var layerId in tripLayerAnimations) {
|
|
3512
|
+
if (tripLayerAnimations[layerId].isAnimated) {
|
|
3513
|
+
hasAnimatedTrips = true;
|
|
3514
|
+
break;
|
|
3515
|
+
}
|
|
3516
|
+
}
|
|
3517
|
+
if (hasAnimatedTrips && !animationFrameIdTrip) {
|
|
3518
|
+
animationFrameIdTrip = requestAnimationFrame(animateTripLayers);
|
|
3519
|
+
}
|
|
3520
|
+
|
|
3521
|
+
// Global click handler: use deck.gl picking to show popups for deck.gl layers
|
|
3522
|
+
map.on('click', function(e) {
|
|
3523
|
+
if (!deckOverlay || !allDeckLayers.length) return;
|
|
3524
|
+
if (!e || !e.point) return;
|
|
3525
|
+
|
|
3526
|
+
var pickInfo;
|
|
3527
|
+
try {
|
|
3528
|
+
pickInfo = deckOverlay.pickObject({
|
|
3529
|
+
x: e.point.x,
|
|
3530
|
+
y: e.point.y,
|
|
3531
|
+
radius: 5
|
|
3532
|
+
});
|
|
3533
|
+
} catch (err) {
|
|
3534
|
+
console.warn('Deck picking failed', err);
|
|
3535
|
+
return;
|
|
3536
|
+
}
|
|
3537
|
+
|
|
3538
|
+
if (!pickInfo || !pickInfo.object) return;
|
|
3539
|
+
|
|
3540
|
+
var coord = pickInfo.coordinate || (pickInfo.object.position ? [pickInfo.object.position[0], pickInfo.object.position[1]] : [e.lngLat.lng, e.lngLat.lat]);
|
|
3541
|
+
|
|
3542
|
+
// Prefer direct properties; for aggregated layers (grid/hex/column/screengrid) fall back to first point's properties
|
|
3543
|
+
var props = pickInfo.object.properties || {};
|
|
3544
|
+
if ((!props || Object.keys(props).length === 0) && pickInfo.object.points && pickInfo.object.points.length > 0) {
|
|
3545
|
+
var firstPoint = pickInfo.object.points[0];
|
|
3546
|
+
if (firstPoint && firstPoint.properties) {
|
|
3547
|
+
props = firstPoint.properties;
|
|
3548
|
+
}
|
|
3549
|
+
}
|
|
3550
|
+
|
|
3551
|
+
var datasetName = '';
|
|
3552
|
+
try {
|
|
3553
|
+
var dsId = pickInfo.layer && pickInfo.layer.props && pickInfo.layer.props.datasetId;
|
|
3554
|
+
if (dsId && mapConfig.datasets && Array.isArray(mapConfig.datasets)) {
|
|
3555
|
+
for (var i = 0; i < mapConfig.datasets.length; i++) {
|
|
3556
|
+
var ds = mapConfig.datasets[i];
|
|
3557
|
+
if (ds.id === dsId) {
|
|
3558
|
+
datasetName = ds.name || '';
|
|
3559
|
+
break;
|
|
3560
|
+
}
|
|
3561
|
+
}
|
|
3562
|
+
}
|
|
3563
|
+
} catch (err2) {
|
|
3564
|
+
// ignore lookup errors
|
|
3565
|
+
}
|
|
3566
|
+
|
|
3567
|
+
showFeaturePopup(coord, props, datasetName || 'Feature');
|
|
3568
|
+
});
|
|
3569
|
+
}
|
|
3570
|
+
|
|
3571
|
+
// Add drawn shape layer (polygon/circle overlay) if present
|
|
3572
|
+
const drawnShape = mapConfig.drawnShape;
|
|
3573
|
+
if (drawnShape && drawnShape.features && drawnShape.features.length > 0) {
|
|
3574
|
+
const drawSourceId = 'drawn-shape-source';
|
|
3575
|
+
const drawFillId = 'drawn-shape-fill';
|
|
3576
|
+
const drawOutlineId = 'drawn-shape-outline';
|
|
3577
|
+
map.addSource(drawSourceId, {
|
|
3578
|
+
type: 'geojson',
|
|
3579
|
+
data: drawnShape
|
|
3580
|
+
});
|
|
3581
|
+
map.addLayer({
|
|
3582
|
+
id: drawFillId,
|
|
3583
|
+
type: 'fill',
|
|
3584
|
+
source: drawSourceId,
|
|
3585
|
+
paint: {
|
|
3586
|
+
'fill-color': '#3388ff',
|
|
3587
|
+
'fill-opacity': 0.2
|
|
3588
|
+
}
|
|
3589
|
+
});
|
|
3590
|
+
map.addLayer({
|
|
3591
|
+
id: drawOutlineId,
|
|
3592
|
+
type: 'line',
|
|
3593
|
+
source: drawSourceId,
|
|
3594
|
+
paint: {
|
|
3595
|
+
'line-color': '#0066cc',
|
|
3596
|
+
'line-width': 2
|
|
3597
|
+
}
|
|
3598
|
+
});
|
|
3599
|
+
}
|
|
3600
|
+
|
|
3601
|
+
console.log('Map loaded with ' + mapConfig.datasets.length + ' dataset(s), ' + deckLayers.length + ' deck.gl layer(s)' + (mapConfig.drawnShape?.features?.length ? ', drawn shape: ' + mapConfig.drawnShape.features.length + ' feature(s)' : ''));
|
|
3602
|
+
|
|
3603
|
+
// Add debug info panel (toggle with 'D' key)
|
|
3604
|
+
var debugPanel = document.createElement('div');
|
|
3605
|
+
debugPanel.id = 'debug-panel';
|
|
3606
|
+
debugPanel.style.cssText = 'position:absolute;top:10px;right:10px;background:rgba(0,0,0,0.85);color:#fff;padding:15px;border-radius:8px;font-size:12px;max-width:350px;max-height:400px;overflow-y:auto;z-index:1000;display:none;font-family:monospace;';
|
|
3607
|
+
|
|
3608
|
+
var debugInfo = '<b style="color:#4ade80;">Layer Debug Info</b><br><br>';
|
|
3609
|
+
debugInfo += 'Datasets: ' + mapConfig.datasets.length + '<br>';
|
|
3610
|
+
debugInfo += 'Deck.gl layers: ' + deckLayers.length + '<br><hr style="border-color:#444;margin:8px 0;">';
|
|
3611
|
+
|
|
3612
|
+
mapConfig.datasets.forEach(function(ds, idx) {
|
|
3613
|
+
var lc = ds.layerConfig;
|
|
3614
|
+
var sc = lc?.styleConfig || {};
|
|
3615
|
+
var cc = lc?.colorConfig || {};
|
|
3616
|
+
debugInfo += '<b style="color:#60a5fa;">' + (idx + 1) + '. ' + ds.name + '</b><br>';
|
|
3617
|
+
debugInfo += ' Type: <span style="color:#fbbf24;">' + (lc?.type || 'geojson') + '</span><br>';
|
|
3618
|
+
debugInfo += ' Features: ' + (ds.geojson?.features?.length || 0) + '<br>';
|
|
3619
|
+
var points = extractPointData(ds.geojson);
|
|
3620
|
+
debugInfo += ' Points extracted: <span style="color:#4ade80;">' + points.length + '</span><br>';
|
|
3621
|
+
debugInfo += ' CellSize: ' + (sc.cellSize || 1000) + 'm<br>';
|
|
3622
|
+
debugInfo += ' ColorField: <span style="color:#f472b6;">' + (cc.colorField || 'none') + '</span><br>';
|
|
3623
|
+
debugInfo += ' HeightField: <span style="color:#a78bfa;">' + (cc.heightField || 'none') + '</span><br>';
|
|
3624
|
+
debugInfo += ' ElevationScale: ' + (sc.elevationScale !== undefined ? sc.elevationScale : 'default') + '<br>';
|
|
3625
|
+
debugInfo += ' Opacity: ' + ((sc.opacity !== undefined ? (sc.opacity * 100).toFixed(0) : '90') + '%') + '<br>';
|
|
3626
|
+
var colorMappingCount = cc.colorMapping ? Object.keys(cc.colorMapping).length : 0;
|
|
3627
|
+
debugInfo += ' ColorMapping: ' + colorMappingCount + ' values<br>';
|
|
3628
|
+
debugInfo += '<br>';
|
|
3629
|
+
});
|
|
3630
|
+
|
|
3631
|
+
debugInfo += '<hr style="border-color:#444;margin:8px 0;"><span style="color:#a78bfa;">Press "D" to toggle this panel</span>';
|
|
3632
|
+
debugPanel.innerHTML = debugInfo;
|
|
3633
|
+
document.body.appendChild(debugPanel);
|
|
3634
|
+
|
|
3635
|
+
// Toggle debug panel with 'D' key
|
|
3636
|
+
document.addEventListener('keydown', function(e) {
|
|
3637
|
+
if (e.key === 'd' || e.key === 'D') {
|
|
3638
|
+
debugPanel.style.display = debugPanel.style.display === 'none' ? 'block' : 'none';
|
|
3639
|
+
}
|
|
3640
|
+
});
|
|
3641
|
+
|
|
3642
|
+
// Show debug panel initially for 5 seconds
|
|
3643
|
+
debugPanel.style.display = 'block';
|
|
3644
|
+
setTimeout(function() { debugPanel.style.display = 'none'; }, 5000);
|
|
3645
|
+
});
|
|
3646
|
+
<\/script>
|
|
3647
|
+
</body>
|
|
3648
|
+
</html>`,ye=new Blob([Re],{type:"text/html"}),Se=URL.createObjectURL(ye),$e=document.createElement("a");$e.download=`map-export-${Date.now()}.html`,$e.href=Se,$e.click(),URL.revokeObjectURL(Se)}setTimeout(()=>{w(!1),n()},500)}catch(oe){console.error("Map export error:",oe),alert("Failed to export map. Please try again."),w(!1)}},at=y&&f&&!b;return t.jsx(s.Modal,{opened:e,onClose:n,withCloseButton:d!=="map"&&d!=="pdf",size:d==="map"||d==="pdf"?"900px":"xl",centered:!0,styles:{body:{padding:0},content:{borderRadius:"4px"},header:d==="map"||d==="pdf"?{position:"absolute",right:0,top:0,zIndex:10}:{}},children:t.jsxs(s.Tabs,{value:d,onChange:h,styles:{tab:{"&[data-active]":{borderColor:"var(--project-primary, #f1871c)",color:"var(--project-primary, #f1871c)"}}},children:[t.jsxs(s.Tabs.List,{grow:!0,style:{borderBottom:"1px solid #e5e7eb"},children:[t.jsx(s.Tabs.Tab,{value:"image",leftSection:t.jsx(Rc,{size:18}),style:{padding:"14px 12px"},children:t.jsx(s.Text,{size:"xs",children:"Export Image"})}),t.jsx(s.Tabs.Tab,{value:"pdf",leftSection:t.jsx(Bc,{size:18}),style:{padding:"14px 12px"},children:t.jsx(s.Text,{size:"xs",children:"PDF Report"})}),t.jsx(s.Tabs.Tab,{value:"data",leftSection:t.jsx(Dc,{size:18}),style:{padding:"14px 12px"},children:t.jsx(s.Text,{size:"xs",children:"Export Data"})}),t.jsx(s.Tabs.Tab,{value:"map",leftSection:t.jsx(Ac,{size:18}),style:{padding:"14px 12px"},children:t.jsx(s.Text,{size:"xs",children:"Export Map"})})]}),t.jsxs(s.Tabs.Panel,{value:"image",children:[t.jsxs(s.Box,{style:{display:"flex",minHeight:"350px"},children:[t.jsxs(s.Box,{style:{flex:"0 0 280px",padding:"24px",borderRight:"1px solid #e5e7eb"},children:[t.jsx(s.Text,{size:"xl",fw:400,mb:"lg",style:{color:"#333"},children:"Export Image"}),t.jsxs(s.Box,{mb:"lg",children:[t.jsx(s.Text,{size:"sm",fw:600,mb:4,style:{color:"#333"},children:"Ratio"}),t.jsx(s.Text,{size:"xs",c:"dimmed",mb:"sm",children:"Choose the ratio for various usages."}),t.jsx(s.Group,{gap:"xs",wrap:"wrap",children:zc.map(A=>t.jsx(s.Button,{size:"xs",variant:S===A.value?"filled":"outline",color:S===A.value?"orange":"gray",onClick:()=>p(A.value),style:{borderColor:S===A.value?"var(--project-primary, #f1871c)":"#dee2e6",backgroundColor:S===A.value?"var(--project-primary, #f1871c)":void 0,color:S===A.value?"#fff":"#868e96",fontWeight:400},children:A.label},A.value))})]}),t.jsxs(s.Box,{mb:"lg",children:[t.jsx(s.Text,{size:"sm",fw:600,mb:4,style:{color:"#333"},children:"Resolution"}),t.jsx(s.Text,{size:"xs",c:"dimmed",mb:"sm",children:"High resolution is better for prints."}),t.jsx(s.Group,{gap:"xs",children:Ec.map(A=>t.jsx(s.Button,{size:"xs",variant:P===A.value?"filled":"outline",color:P===A.value?"orange":"gray",onClick:()=>M(A.value),style:{borderColor:P===A.value?"var(--project-primary, #f1871c)":"#dee2e6",backgroundColor:P===A.value?"var(--project-primary, #f1871c)":void 0,color:P===A.value?"#fff":"#868e96",fontWeight:400},children:A.label},A.value))})]}),t.jsxs(s.Box,{mb:"lg",children:[t.jsx(s.Text,{size:"sm",fw:600,mb:4,style:{color:"#333"},children:"Map Legend"}),t.jsx(s.Checkbox,{label:"Add legend on map",checked:R,onChange:A=>L(A.currentTarget.checked),size:"sm",styles:{label:{color:"#868e96",fontSize:"13px"}}})]})]}),t.jsxs(s.Box,{style:{flex:1,padding:"24px",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",backgroundColor:"#f8f9fa",position:"relative"},children:[t.jsx(s.LoadingOverlay,{visible:j,loaderProps:{size:"md"}}),F?t.jsx(s.Box,{style:{width:"100%",maxWidth:"400px",borderRadius:"4px",overflow:"hidden",boxShadow:"0 2px 8px rgba(0,0,0,0.15)"},children:t.jsx("img",{src:F,alt:"Map Preview",style:{width:"100%",height:"auto",display:"block"}})}):t.jsx(s.Box,{style:{width:"100%",maxWidth:"400px",height:"220px",backgroundColor:"#e9ecef",borderRadius:"4px",display:"flex",alignItems:"center",justifyContent:"center"},children:t.jsxs(s.Stack,{align:"center",gap:"xs",children:[t.jsx(s.Text,{size:"sm",c:"dimmed",children:j?"Capturing preview...":"Preview not available"}),!j&&t.jsx(s.Button,{size:"xs",variant:"light",onClick:Ie,children:"Retry Capture"})]})})]})]}),t.jsxs(s.Group,{justify:"flex-end",gap:"sm",p:"md",style:{borderTop:"1px solid #e5e7eb"},children:[t.jsx(s.Button,{variant:"subtle",color:"gray",onClick:n,children:"Cancel"}),t.jsx(s.Button,{onClick:bt,loading:b,color:"orange",style:{backgroundColor:"var(--project-primary, #f1871c)"},children:"Download"})]})]}),t.jsxs(s.Tabs.Panel,{value:"pdf",children:[t.jsxs(s.Box,{style:{display:"flex",minHeight:"400px",position:"relative"},children:[t.jsx(s.ActionIcon,{variant:"subtle",color:"gray",onClick:n,style:{position:"absolute",top:"16px",right:"16px",zIndex:10},children:t.jsx(Do,{size:20})}),t.jsxs(s.Box,{style:{flex:"0 0 300px",padding:"24px",borderRight:"1px solid #e5e7eb"},children:[t.jsx(s.Text,{size:"xl",fw:400,mb:"lg",style:{color:"#333"},children:"Download PDF Report"}),t.jsx(s.Text,{size:"xs",c:"dimmed",mb:"lg",children:"Save a snapshot of your interactive map dashboard by downloading it as a PDF. Export includes map, legends, widgets, and custom comments."}),t.jsxs(s.Box,{mb:"md",children:[t.jsx(s.Text,{size:"sm",fw:600,mb:4,style:{color:"#333"},children:"Report Title"}),t.jsx(s.TextInput,{placeholder:"Enter report title",value:H,onChange:A=>q(A.target.value),size:"sm"})]}),t.jsxs(s.Box,{mb:"md",children:[t.jsx(s.Text,{size:"sm",fw:600,mb:4,style:{color:"#333"},children:"Comments"}),t.jsx(s.Text,{size:"xs",c:"dimmed",mb:"sm",children:"Add notes or descriptions to include in the PDF report."}),t.jsx(s.Textarea,{placeholder:"Enter comments or description...",value:I,onChange:A=>D(A.target.value),minRows:3,maxRows:5,size:"sm"})]}),t.jsxs(s.Box,{mb:"md",children:[t.jsx(s.Text,{size:"sm",fw:600,mb:8,style:{color:"#333"},children:"Include in Report"}),t.jsxs(s.Stack,{gap:"xs",children:[t.jsx(s.Switch,{label:"Legend",description:`${ue.length} layer(s) available`,checked:B,onChange:A=>O(A.currentTarget.checked),size:"sm",styles:{label:{color:"#333",fontWeight:500},description:{color:"#868e96"}}}),t.jsx(s.Switch,{label:"Widgets",description:`${x.length} widget(s) configured`,checked:N,onChange:A=>$(A.currentTarget.checked),size:"sm",styles:{label:{color:"#333",fontWeight:500},description:{color:"#868e96"}}}),t.jsx(s.Switch,{label:"Map Description",description:"Include coordinates, zoom level, and layer count",checked:_,onChange:A=>U(A.currentTarget.checked),size:"sm",styles:{label:{color:"#333",fontWeight:500},description:{color:"#868e96"}}})]})]}),t.jsx(s.Box,{style:{padding:"12px",backgroundColor:"var(--project-primary-muted, #fff7ed)",borderRadius:"8px",border:"1px solid #99f6e4"},children:t.jsxs(s.Text,{size:"xs",style:{color:"var(--project-primary-hover, #e0781a)"},children:[t.jsx("strong",{children:"Note:"})," Table widgets in the report display only the first 10 rows. For full data access, use the Export Data tab."]})})]}),t.jsxs(s.Box,{style:{flex:1,padding:"24px",display:"flex",flexDirection:"column",backgroundColor:"#f8f9fa",position:"relative"},children:[t.jsx(s.LoadingOverlay,{visible:ie,loaderProps:{size:"md"}}),t.jsx(s.Text,{size:"sm",fw:600,mb:"md",style:{color:"#333"},children:"Preview"}),ae?t.jsxs(s.Box,{style:{flex:1,display:"flex",flexDirection:"column",gap:"16px"},children:[t.jsxs(s.Box,{style:{backgroundColor:"#fff",borderRadius:"8px",overflow:"hidden",boxShadow:"0 2px 8px rgba(0,0,0,0.1)",padding:"12px"},children:[t.jsx(s.Box,{style:{backgroundColor:"var(--project-primary, #f1871c)",padding:"8px 12px",marginBottom:"8px",borderRadius:"4px"},children:t.jsx(s.Text,{size:"xs",fw:600,style:{color:"#fff"},children:H})}),t.jsx("img",{src:ae,alt:"Map Preview",style:{width:"100%",maxHeight:"180px",objectFit:"contain",borderRadius:"4px"}})]}),t.jsxs(s.Box,{style:{display:"flex",gap:"12px"},children:[B&&ue.length>0&&t.jsxs(s.Box,{style:{flex:1,backgroundColor:"#fff",borderRadius:"8px",padding:"12px",boxShadow:"0 1px 4px rgba(0,0,0,0.08)"},children:[t.jsx(s.Text,{size:"xs",fw:600,mb:"xs",style:{color:"#333"},children:"Legend"}),t.jsxs(s.Stack,{gap:4,children:[ue.slice(0,3).map(A=>t.jsxs(s.Group,{gap:"xs",children:[t.jsx(s.Box,{style:{width:"12px",height:"12px",backgroundColor:A.color,borderRadius:"2px"}}),t.jsx(s.Text,{size:"xs",c:"dimmed",lineClamp:1,children:A.name})]},A.id)),ue.length>3&&t.jsxs(s.Text,{size:"xs",c:"dimmed",children:["+",ue.length-3," more"]})]})]}),N&&x.length>0&&t.jsxs(s.Box,{style:{flex:1,backgroundColor:"#fff",borderRadius:"8px",padding:"12px",boxShadow:"0 1px 4px rgba(0,0,0,0.08)"},children:[t.jsxs(s.Text,{size:"xs",fw:600,mb:"xs",style:{color:"#333"},children:["Widgets (",x.length,")"]}),t.jsxs(s.Stack,{gap:4,children:[je.slice(0,3).map(A=>t.jsxs(s.Group,{gap:"xs",children:[t.jsx(s.Box,{style:{width:"8px",height:"8px",backgroundColor:"#3b82f6",borderRadius:"50%"}}),t.jsxs(s.Text,{size:"xs",c:"dimmed",lineClamp:1,children:[A.type,": ",A.name]})]},A.id)),x.length>3&&t.jsxs(s.Text,{size:"xs",c:"dimmed",children:["+",x.length-3," more"]})]})]})]}),I.trim()&&t.jsxs(s.Box,{style:{backgroundColor:"#fff",borderRadius:"8px",padding:"12px",boxShadow:"0 1px 4px rgba(0,0,0,0.08)"},children:[t.jsx(s.Text,{size:"xs",fw:600,mb:"xs",style:{color:"#333"},children:"Comments"}),t.jsx(s.Text,{size:"xs",c:"dimmed",lineClamp:2,children:I})]})]}):t.jsx(s.Box,{style:{flex:1,display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:"#e9ecef",borderRadius:"8px"},children:t.jsxs(s.Stack,{align:"center",gap:"xs",children:[t.jsx(s.Text,{size:"sm",c:"dimmed",children:ie?"Generating preview...":"Preview not available"}),!ie&&t.jsx(s.Button,{size:"xs",variant:"light",onClick:be,children:"Generate Preview"})]})})]})]}),t.jsxs(s.Group,{justify:"flex-end",gap:"sm",p:"md",style:{borderTop:"1px solid #e5e7eb"},children:[t.jsx(s.Button,{variant:"subtle",color:"gray",onClick:n,children:"Cancel"}),t.jsx(s.Button,{onClick:be,variant:"light",color:"orange",disabled:ie,children:"Preview"}),t.jsx(s.Button,{onClick:Je,loading:b,color:"orange",style:{backgroundColor:"var(--project-primary, #f1871c)"},children:"Download PDF"})]})]}),t.jsx(s.Tabs.Panel,{value:"data",p:"md",children:t.jsxs(s.Stack,{gap:"md",children:[t.jsx(s.Text,{size:"sm",c:"dimmed",children:"Export your data in various formats."}),t.jsxs(s.Box,{children:[t.jsx(s.Text,{size:"sm",fw:500,mb:"xs",children:"Select Dataset"}),t.jsx(s.Select,{placeholder:"Choose a dataset to export",data:me,value:y,onChange:A=>c(A),searchable:!0,clearable:!0}),we.length===0&&t.jsx(s.Text,{size:"xs",c:"dimmed",mt:"xs",children:"No datasets with data available for export"})]}),t.jsxs(s.Box,{children:[t.jsx(s.Text,{size:"sm",fw:500,mb:"xs",children:"Export Format"}),t.jsx(s.Stack,{gap:"xs",children:Ic.map(A=>t.jsx(s.Button,{variant:f===A.value?"filled":"light",onClick:()=>u(A.value),justify:"space-between",fullWidth:!0,style:{height:"auto",padding:"10px 14px"},children:t.jsxs(s.Box,{style:{textAlign:"left",flex:1},children:[t.jsx(s.Text,{fw:500,size:"sm",children:A.label}),t.jsx(s.Text,{size:"xs",c:"dimmed",children:A.description})]})},A.value))})]}),t.jsx(s.Divider,{}),t.jsxs(s.Group,{justify:"flex-end",gap:"sm",children:[t.jsx(s.Button,{variant:"subtle",onClick:n,children:"Cancel"}),t.jsx(s.Button,{onClick:St,disabled:!at,loading:b,color:"orange",style:{backgroundColor:"var(--project-primary, #f1871c)"},children:"Export"})]})]})}),t.jsx(s.Tabs.Panel,{value:"map",children:t.jsxs(s.Box,{p:"xl",style:{position:"relative"},children:[t.jsx(s.ActionIcon,{variant:"subtle",color:"gray",onClick:n,style:{position:"absolute",top:"16px",right:"16px"},children:t.jsx(Do,{size:20})}),t.jsx(s.Text,{size:"xl",fw:400,mb:"xl",style:{color:"#333"},children:"Export Map"}),t.jsx(s.Box,{mb:"xl",children:t.jsxs(s.Group,{gap:"xl",align:"flex-start",children:[t.jsxs(s.Box,{style:{width:"200px"},children:[t.jsx(s.Text,{size:"sm",fw:600,style:{color:"#333"},children:"Map format"}),t.jsx(s.Text,{size:"xs",c:"dimmed",children:"Choose the format to export your map to"})]}),t.jsxs(s.Box,{children:[t.jsxs(s.Group,{gap:"md",children:[t.jsxs(s.Box,{onClick:()=>T("html"),style:{width:"90px",height:"90px",border:m==="html"?"2px solid var(--project-primary, #f1871c)":"1px solid #e5e7eb",borderRadius:"4px",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",cursor:"pointer",backgroundColor:m==="html"?"var(--project-primary-muted, #fff7ed)":"#fff",position:"relative"},children:[m==="html"&&t.jsx(s.Box,{style:{position:"absolute",top:"4px",right:"4px",width:"16px",height:"16px",backgroundColor:"var(--project-primary, #f1871c)",borderRadius:"2px",display:"flex",alignItems:"center",justifyContent:"center"},children:t.jsx(so,{size:12,color:"#fff"})}),t.jsxs("svg",{width:"40",height:"40",viewBox:"0 0 24 24",fill:"none",children:[t.jsx("path",{d:"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z",stroke:"var(--project-primary, #f1871c)",strokeWidth:"1.5",fill:"#fff7ed"}),t.jsx("polyline",{points:"14 2 14 8 20 8",stroke:"var(--project-primary, #f1871c)",strokeWidth:"1.5",fill:"none"})]}),t.jsx(s.Text,{size:"sm",fw:500,mt:4,style:{color:"var(--project-primary, #f1871c)"},children:"html"})]}),t.jsxs(s.Box,{onClick:()=>T("json"),style:{width:"90px",height:"90px",border:m==="json"?"2px solid var(--project-primary, #f1871c)":"1px solid #e5e7eb",borderRadius:"4px",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",cursor:"pointer",backgroundColor:m==="json"?"var(--project-primary-muted, #fff7ed)":"#fff",position:"relative"},children:[m==="json"&&t.jsx(s.Box,{style:{position:"absolute",top:"4px",right:"4px",width:"16px",height:"16px",backgroundColor:"var(--project-primary, #f1871c)",borderRadius:"2px",display:"flex",alignItems:"center",justifyContent:"center"},children:t.jsx(so,{size:12,color:"#fff"})}),t.jsxs("svg",{width:"40",height:"40",viewBox:"0 0 24 24",fill:"none",children:[t.jsx("path",{d:"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z",stroke:"#868e96",strokeWidth:"1.5",fill:"#f8f9fa"}),t.jsx("polyline",{points:"14 2 14 8 20 8",stroke:"#868e96",strokeWidth:"1.5",fill:"none"})]}),t.jsx(s.Text,{size:"sm",fw:500,mt:4,style:{color:"#868e96"},children:"json"})]})]}),t.jsxs(s.Text,{size:"xs",c:"dimmed",mt:"sm",children:["Export your map into an interactive ",m," file."]})]})]})}),t.jsx(s.Divider,{my:"lg"}),m==="html"&&t.jsxs(t.Fragment,{children:[t.jsx(s.Box,{mb:"xl",children:t.jsxs(s.Group,{gap:"xl",align:"flex-start",children:[t.jsxs(s.Box,{style:{width:"200px"},children:[t.jsx(s.Text,{size:"sm",fw:600,style:{color:"#333"},children:"Base Map"}),t.jsx(s.Text,{size:"xs",c:"dimmed",children:"Default satellite basemap"})]}),t.jsx(s.Box,{style:{flex:1},children:t.jsx(s.Text,{size:"sm",c:"dimmed",children:"The exported map will use ArcGIS World Imagery tiles as the base map. No API key is required."})})]})}),t.jsx(s.Divider,{my:"lg"}),t.jsx(s.Box,{mb:"xl",children:t.jsxs(s.Group,{gap:"xl",align:"flex-start",children:[t.jsxs(s.Box,{style:{width:"200px"},children:[t.jsx(s.Text,{size:"sm",fw:600,style:{color:"#333"},children:"Map Mode"}),t.jsxs(s.Text,{size:"xs",c:"dimmed",children:["Select the app mode."," ",t.jsx(s.Text,{span:!0,c:"orange",style:{cursor:"pointer"},onClick:()=>window.open("https://developer.mozilla.org/en-US/docs/Web/HTML","_blank"),children:"More info"})]})]}),t.jsx(s.Box,{children:t.jsxs(s.Group,{gap:"md",children:[t.jsxs(s.Box,{onClick:()=>k("read"),style:{width:"160px",border:v==="read"?"2px solid var(--project-primary, #f1871c)":"1px solid #e5e7eb",borderRadius:"4px",overflow:"hidden",cursor:"pointer",backgroundColor:"#fff",position:"relative"},children:[v==="read"&&t.jsx(s.Box,{style:{position:"absolute",top:"4px",right:"4px",width:"16px",height:"16px",backgroundColor:"var(--project-primary, #f1871c)",borderRadius:"2px",display:"flex",alignItems:"center",justifyContent:"center",zIndex:1},children:t.jsx(so,{size:12,color:"#fff"})}),t.jsx(s.Box,{style:{height:"90px",background:"linear-gradient(135deg, #1a365d 0%, #2d3748 100%)",display:"flex",alignItems:"center",justifyContent:"center"},children:t.jsxs("svg",{width:"60",height:"60",viewBox:"0 0 24 24",fill:"none",children:[t.jsx("rect",{x:"3",y:"3",width:"18",height:"18",rx:"2",stroke:"#f1871c",strokeWidth:"1",fill:"rgba(79, 209, 197, 0.2)"}),t.jsx("circle",{cx:"8",cy:"8",r:"2",fill:"#f1871c"}),t.jsx("path",{d:"M3 15l5-5 4 4 5-6 4 4",stroke:"#f1871c",strokeWidth:"1.5",fill:"none"})]})}),t.jsx(s.Box,{p:"xs",style:{textAlign:"center"},children:t.jsx(s.Text,{size:"xs",c:v==="read"?"orange":"dimmed",children:"Allow users to read the map"})})]}),t.jsxs(s.Box,{onClick:()=>k("edit"),style:{width:"160px",border:v==="edit"?"2px solid var(--project-primary, #f1871c)":"1px solid #e5e7eb",borderRadius:"4px",overflow:"hidden",cursor:"pointer",backgroundColor:"#fff",position:"relative"},children:[v==="edit"&&t.jsx(s.Box,{style:{position:"absolute",top:"4px",right:"4px",width:"16px",height:"16px",backgroundColor:"var(--project-primary, #f1871c)",borderRadius:"2px",display:"flex",alignItems:"center",justifyContent:"center",zIndex:1},children:t.jsx(so,{size:12,color:"#fff"})}),t.jsx(s.Box,{style:{height:"90px",background:"linear-gradient(135deg, #1a365d 0%, #2d3748 100%)",display:"flex",alignItems:"center",justifyContent:"center"},children:t.jsxs(s.Group,{gap:4,children:[t.jsxs("svg",{width:"50",height:"50",viewBox:"0 0 24 24",fill:"none",children:[t.jsx("rect",{x:"3",y:"3",width:"18",height:"18",rx:"2",stroke:"#f1871c",strokeWidth:"1",fill:"rgba(79, 209, 197, 0.2)"}),t.jsx("circle",{cx:"8",cy:"8",r:"2",fill:"#f1871c"}),t.jsx("path",{d:"M3 15l5-5 4 4 5-6 4 4",stroke:"#f1871c",strokeWidth:"1.5",fill:"none"})]}),t.jsxs(s.Box,{style:{width:"30px",height:"50px",backgroundColor:"rgba(45, 55, 72, 0.9)",borderRadius:"2px",display:"flex",flexDirection:"column",padding:"4px",gap:"2px"},children:[t.jsx(s.Box,{style:{width:"100%",height:"6px",backgroundColor:"#f1871c",borderRadius:"1px"}}),t.jsx(s.Box,{style:{width:"80%",height:"4px",backgroundColor:"#718096",borderRadius:"1px"}}),t.jsx(s.Box,{style:{width:"60%",height:"4px",backgroundColor:"#718096",borderRadius:"1px"}})]})]})}),t.jsx(s.Box,{p:"xs",style:{textAlign:"center"},children:t.jsx(s.Text,{size:"xs",c:v==="edit"?"orange":"dimmed",children:"Allow users to edit the map"})})]})]})})]})})]}),t.jsxs(s.Group,{justify:"flex-end",gap:"sm",mt:"xl",pt:"md",style:{borderTop:"1px solid #e5e7eb"},children:[t.jsx(s.Button,{variant:"subtle",color:"gray",onClick:n,children:"Cancel"}),t.jsx(s.Button,{onClick:Ct,loading:b,color:"orange",style:{backgroundColor:"var(--project-primary, #f1871c)"},children:"Export"})]})]})})]})})},Wc=(e,n,o)=>{const r={id:e,data:n,getHexagon:(o==null?void 0:o.getHexagon)||(i=>i.hexagon||i.hex||i.h3),visible:(o==null?void 0:o.visible)!==!1,pickable:(o==null?void 0:o.pickable)!==!1,coverage:o==null?void 0:o.coverage,highPrecision:o==null?void 0:o.highPrecision};return o!=null&&o.getFillColor?(o.getFillColor,r.getFillColor=o.getFillColor):r.getFillColor=[255,140,0,180],o!=null&&o.extruded&&(r.extruded=!0,r.elevationScale=o.elevationScale??1,o.getElevation?r.getElevation=o.getElevation:r.getElevation=0),(o==null?void 0:o.opacity)!==void 0&&(r.opacity=o.opacity),o!=null&&o.onClick&&(r.onClick=o.onClick),o!=null&&o.updateTriggers&&(r.updateTriggers=o.updateTriggers),new So.H3HexagonLayer(r)},Es=e=>{if(!e||!e.coordinates)return null;switch(e.type){case"Point":return[e.coordinates[0],e.coordinates[1]];case"MultiPoint":if(e.coordinates.length===0)return null;const n=e.coordinates,o=n.reduce((f,u)=>[f[0]+u[0],f[1]+u[1]],[0,0]);return[o[0]/n.length,o[1]/n.length];case"LineString":if(e.coordinates.length===0)return null;const r=e.coordinates,i=Math.floor(r.length/2);return[r[i][0],r[i][1]];case"MultiLineString":if(e.coordinates.length===0)return null;let a=[],l=0;if(e.coordinates.forEach(f=>{f.length>l&&(l=f.length,a=f)}),a.length===0)return null;const x=Math.floor(a.length/2);return[a[x][0],a[x][1]];case"Polygon":if(e.coordinates.length===0||!e.coordinates[0])return null;let d=e.coordinates[0];if(d.length===0||(d.length>1&&d[0][0]===d[d.length-1][0]&&d[0][1]===d[d.length-1][1]&&(d=d.slice(0,-1)),d.length===0))return null;const h=d.reduce((f,u)=>[f[0]+u[0],f[1]+u[1]],[0,0]);return[h[0]/d.length,h[1]/d.length];case"MultiPolygon":if(e.coordinates.length===0)return null;const y=[];if(e.coordinates.forEach(f=>{f[0]&&y.push(...f[0].slice(0,-1))}),y.length===0)return null;const c=y.reduce((f,u)=>[f[0]+u[0],f[1]+u[1]],[0,0]);return[c[0]/y.length,c[1]/y.length];default:return null}},ki=e=>{if(e==null)return"-";if(typeof e=="object")try{return JSON.stringify(e)}catch{return String(e)}return typeof e=="number"?Number.isInteger(e)?e.toLocaleString():e.toLocaleString(void 0,{maximumFractionDigits:4}):String(e)},Nt=(e,n,o,r,i={})=>{const{maxProperties:a=20,excludeFields:l=[]}=i,x=document.createElement("div");if(x.className="layer-popup-content",x.style.cssText=`
|
|
3649
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
|
3650
|
+
font-size: 12px;
|
|
3651
|
+
max-width: 320px;
|
|
3652
|
+
max-height: 400px;
|
|
3653
|
+
overflow-y: auto;
|
|
3654
|
+
`,o!=null&&o.name){const c=document.createElement("div");c.style.cssText=`
|
|
3655
|
+
font-weight: 600;
|
|
3656
|
+
font-size: 13px;
|
|
3657
|
+
padding: 8px 12px;
|
|
3658
|
+
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
|
|
3659
|
+
color: white;
|
|
3660
|
+
border-radius: 4px 4px 0 0;
|
|
3661
|
+
margin: -1px -1px 0 -1px;
|
|
3662
|
+
`,c.textContent=o.name,x.appendChild(c)}const d=document.createElement("table");d.style.cssText=`
|
|
3663
|
+
width: 100%;
|
|
3664
|
+
border-collapse: collapse;
|
|
3665
|
+
font-size: 11px;
|
|
3666
|
+
`;let h;if(r&&r.length>0?h=r.filter(c=>e.hasOwnProperty(c)&&!l.includes(c)):h=Object.keys(e).filter(c=>!l.includes(c)&&!c.startsWith("_")&&c!=="geometry").slice(0,a),h.forEach((c,f)=>{const u=e[c],m=document.createElement("tr");m.style.cssText=`
|
|
3667
|
+
background-color: ${f%2===0?"#f8fafc":"#ffffff"};
|
|
3668
|
+
`;const T=document.createElement("td");T.style.cssText=`
|
|
3669
|
+
padding: 6px 10px;
|
|
3670
|
+
font-weight: 500;
|
|
3671
|
+
color: #475569;
|
|
3672
|
+
white-space: nowrap;
|
|
3673
|
+
vertical-align: top;
|
|
3674
|
+
border-bottom: 1px solid #e2e8f0;
|
|
3675
|
+
max-width: 120px;
|
|
3676
|
+
overflow: hidden;
|
|
3677
|
+
text-overflow: ellipsis;
|
|
3678
|
+
`,T.textContent=c,T.title=c;const S=document.createElement("td");S.style.cssText=`
|
|
3679
|
+
padding: 6px 10px;
|
|
3680
|
+
color: #1e293b;
|
|
3681
|
+
word-break: break-word;
|
|
3682
|
+
border-bottom: 1px solid #e2e8f0;
|
|
3683
|
+
max-width: 180px;
|
|
3684
|
+
`,S.textContent=ki(u),S.title=ki(u),m.appendChild(T),m.appendChild(S),d.appendChild(m)}),h.length===0){const c=document.createElement("tr"),f=document.createElement("td");f.colSpan=2,f.style.cssText=`
|
|
3685
|
+
padding: 12px;
|
|
3686
|
+
color: #94a3b8;
|
|
3687
|
+
text-align: center;
|
|
3688
|
+
font-style: italic;
|
|
3689
|
+
`,f.textContent="No properties to display",c.appendChild(f),d.appendChild(c)}if(x.appendChild(d),n){const c=Es(n);if(c){const f=document.createElement("div");f.style.cssText=`
|
|
3690
|
+
padding: 6px 10px;
|
|
3691
|
+
font-size: 10px;
|
|
3692
|
+
color: #64748b;
|
|
3693
|
+
background-color: #f1f5f9;
|
|
3694
|
+
border-top: 1px solid #e2e8f0;
|
|
3695
|
+
display: flex;
|
|
3696
|
+
justify-content: space-between;
|
|
3697
|
+
align-items: center;
|
|
3698
|
+
`;const u=document.createElement("span");u.textContent=`📍 ${c[1].toFixed(6)}, ${c[0].toFixed(6)}`,f.appendChild(u);const m=document.createElement("button");m.style.cssText=`
|
|
3699
|
+
background: none;
|
|
3700
|
+
border: none;
|
|
3701
|
+
cursor: pointer;
|
|
3702
|
+
padding: 2px 6px;
|
|
3703
|
+
font-size: 10px;
|
|
3704
|
+
color: #3b82f6;
|
|
3705
|
+
border-radius: 3px;
|
|
3706
|
+
`,m.textContent="Copy",m.title="Copy coordinates",m.onclick=()=>{navigator.clipboard.writeText(`${c[1]}, ${c[0]}`),m.textContent="Copied!",setTimeout(()=>{m.textContent="Copy"},1500)},f.appendChild(m),x.appendChild(f)}}const y=Object.keys(e).filter(c=>!l.includes(c)&&!c.startsWith("_")&&c!=="geometry").length;if(!r&&y>a){const c=document.createElement("div");c.style.cssText=`
|
|
3707
|
+
padding: 4px 10px;
|
|
3708
|
+
font-size: 10px;
|
|
3709
|
+
color: #94a3b8;
|
|
3710
|
+
text-align: center;
|
|
3711
|
+
border-top: 1px solid #e2e8f0;
|
|
3712
|
+
`,c.textContent=`+ ${y-a} more properties`,x.appendChild(c)}return x},Ot=()=>{const e="deck-layer-popup-styles";if(document.getElementById(e))return;const n=document.createElement("style");n.id=e,n.textContent=`
|
|
3713
|
+
.map-tooltip-popup .maplibregl-popup-content {
|
|
3714
|
+
padding: 0;
|
|
3715
|
+
border-radius: 6px;
|
|
3716
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
3717
|
+
border: 1px solid #e2e8f0;
|
|
3718
|
+
overflow: hidden;
|
|
3719
|
+
}
|
|
3720
|
+
|
|
3721
|
+
.map-tooltip-popup .maplibregl-popup-close-button {
|
|
3722
|
+
font-size: 18px;
|
|
3723
|
+
color: #64748b;
|
|
3724
|
+
padding: 4px 8px;
|
|
3725
|
+
right: 2px;
|
|
3726
|
+
top: 2px;
|
|
3727
|
+
}
|
|
3728
|
+
|
|
3729
|
+
.map-tooltip-popup .maplibregl-popup-close-button:hover {
|
|
3730
|
+
color: #1e293b;
|
|
3731
|
+
background: rgba(0, 0, 0, 0.05);
|
|
3732
|
+
border-radius: 4px;
|
|
3733
|
+
}
|
|
3734
|
+
|
|
3735
|
+
.layer-popup-content::-webkit-scrollbar {
|
|
3736
|
+
width: 6px;
|
|
3737
|
+
}
|
|
3738
|
+
|
|
3739
|
+
.layer-popup-content::-webkit-scrollbar-track {
|
|
3740
|
+
background: #f1f5f9;
|
|
3741
|
+
}
|
|
3742
|
+
|
|
3743
|
+
.layer-popup-content::-webkit-scrollbar-thumb {
|
|
3744
|
+
background: #cbd5e1;
|
|
3745
|
+
border-radius: 3px;
|
|
3746
|
+
}
|
|
3747
|
+
|
|
3748
|
+
.layer-popup-content::-webkit-scrollbar-thumb:hover {
|
|
3749
|
+
background: #94a3b8;
|
|
3750
|
+
}
|
|
3751
|
+
`,document.head.appendChild(n)},Gc=({map:e,data:n,selectedLayerId:o="h3-hexagon-layer",dataset:r,fillColor:i="#ff8c00",opacity:a=.7,visible:l=!0,resolution:x=8,extruded:d=!1,elevationScale:h=1,getElevation:y,onClick:c,colorField:f,colorMapping:u,heightField:m})=>{const T=g.useRef(null),S=g.useRef(o),p=g.useRef(null),P=g.useRef(c),M=de.use.tooltipFields(),R=de.use.datasetTooltipFields();g.useEffect(()=>{P.current=c},[c]),g.useEffect(()=>{Ot()},[]);const L=g.useMemo(()=>{if(!n||n.length===0)return[];const b=new Map;return n.forEach(w=>{if(!w.geometry)return;let v=[];switch(w.geometry.type){case"Point":v=[[w.geometry.coordinates[0],w.geometry.coordinates[1]]];break;case"MultiPoint":v=w.geometry.coordinates.map(k=>[k[0],k[1]]);break;case"Polygon":v=w.geometry.coordinates[0].map(k=>[k[0],k[1]]);break;case"MultiPolygon":v=w.geometry.coordinates[0][0].map(k=>[k[0],k[1]]);break;case"LineString":v=w.geometry.coordinates.map(k=>[k[0],k[1]]);break;case"MultiLineString":v=w.geometry.coordinates[0].map(k=>[k[0],k[1]]);break;default:return}v.forEach(([k,I])=>{try{const D=bo.latLngToCell(I,k,x);if(b.has(D)){const B=b.get(D);B.count=(B.count||1)+1,B.properties={...B.properties,...w.properties||{}}}else b.set(D,{hex:D,h3:D,hexagon:D,count:1,properties:w.properties||{}})}catch(D){console.warn("Failed to convert coordinate to H3:",D,{lat:I,lng:k})}})}),Array.from(b.values())},[n,x]),F=(b,w)=>{const v=parseInt(b.slice(1,3),16),k=parseInt(b.slice(3,5),16),I=parseInt(b.slice(5,7),16);return[v,k,I,Math.round(w*255)]},C=g.useMemo(()=>f&&u&&Object.keys(u).length>0?w=>{const v=w.properties||w||{};let k=v[f];if(k==null){const I=f.toLowerCase();for(const D in v)if(D.toLowerCase()===I){k=v[D];break}}if(k!=null){const I=String(k).trim();let D=u[I];if(!D){for(const B in u)if(B.toLowerCase()===I.toLowerCase()){D=u[B];break}}if(D)return F(D,a)}return F(i,a)}:F(i,a),[i,a,f,u]),j=g.useMemo(()=>m?b=>{const w=b.properties||b||{};let v=w[m];if(v==null){const k=m.toLowerCase();for(const I in w)if(I.toLowerCase()===k){v=w[I];break}}if(v!=null){const k=typeof v=="number"?v:Number(v);return isNaN(k)?0:k}return 0}:y,[m,y]);g.useEffect(()=>{o&&(S.current=o)},[o]);const z=g.useCallback(b=>{var N,$;if(P.current&&P.current(b),!b||!b.object)return p.current&&(p.current.remove(),p.current=null),!1;const w=((N=b.object)==null?void 0:N.properties)||{},v=(($=b.object)==null?void 0:$.count)||1;if(!e)return!1;p.current&&(p.current.remove(),p.current=null);let k=null;if(b.coordinate&&b.coordinate.length>=2&&(k=[b.coordinate[0],b.coordinate[1]]),!k)return!1;const I={"Point Count":v,...w},D=r!=null&&r.id&&R[r.id]&&R[r.id].length>0?R[r.id]:M,B=Nt(I,void 0,r,D.length>0?D:void 0),O=new Bt.Popup({closeButton:!0,closeOnClick:!1,className:"map-tooltip-popup",offset:15}).setLngLat(k).setDOMContent(B).addTo(e);return O.on("close",()=>{p.current=null}),p.current=O,!1},[e,r,M,R]);return g.useEffect(()=>{if(e)return()=>{const b=S.current;b&&(ce(b,null),T.current=null),S.current=void 0,p.current&&(p.current.remove(),p.current=null)}},[e]),g.useEffect(()=>{if(!e||!o)return;f&&u&&Object.keys(u).length>0&&console.log("H3HexagonLayer: Applying color mapping",{colorField:f,colorMappingKeys:Object.keys(u),sampleMapping:Object.entries(u).slice(0,3),h3DataSample:L.length>0?L[0]:null});const b=u&&Object.keys(u).length>0?JSON.stringify(u):"",w=Wc(o,l&&L.length>0?L:[],{getHexagon:v=>v.hex||v.h3||v.hexagon,getFillColor:C,getElevation:j,elevationScale:h,extruded:d||m!==void 0&&m!=="",pickable:!0,visible:l&&L.length>0,opacity:a,onClick:z,coverage:1,highPrecision:"auto",updateTriggers:{getFillColor:[f||"",b,L.length,l,a],getElevation:[m||"",L.length,l,h],getHexagon:[L.length,l]}});T.current=w,ce(o,w)},[e,o,L,l,C,a,d,h,j,z,f,u,m,u?JSON.stringify(u):""]),null},$c=(e,n,o)=>{const r={id:e,data:n,visible:(o==null?void 0:o.visible)!==!1,pickable:(o==null?void 0:o.pickable)!==!1};return o!=null&&o.getPath?r.getPath=o.getPath:r.getPath=i=>{var a;return i.path||i.coordinates||((a=i.geometry)==null?void 0:a.coordinates)||[]},o!=null&&o.getColor?(o.getColor,r.getColor=o.getColor):r.getColor=[0,0,255,180],(o==null?void 0:o.getWidth)!==void 0?(o.getWidth,r.getWidth=o.getWidth):r.getWidth=1,o!=null&&o.widthUnits&&(r.widthUnits=o.widthUnits),(o==null?void 0:o.widthScale)!==void 0&&(r.widthScale=o.widthScale),(o==null?void 0:o.widthMinPixels)!==void 0&&(r.widthMinPixels=o.widthMinPixels),(o==null?void 0:o.widthMaxPixels)!==void 0&&(r.widthMaxPixels=o.widthMaxPixels),(o==null?void 0:o.capRounded)!==void 0&&(r.capRounded=o.capRounded),(o==null?void 0:o.jointRounded)!==void 0&&(r.jointRounded=o.jointRounded),(o==null?void 0:o.billboard)!==void 0&&(r.billboard=o.billboard),(o==null?void 0:o.miterLimit)!==void 0&&(r.miterLimit=o.miterLimit),(o==null?void 0:o._pathType)!==void 0&&(r._pathType=o._pathType),o!=null&&o.positionFormat&&(r.positionFormat=o.positionFormat),(o==null?void 0:o.opacity)!==void 0&&(r.opacity=o.opacity),o!=null&&o.onClick&&(r.onClick=o.onClick),o!=null&&o.updateTriggers&&(r.updateTriggers=o.updateTriggers),o!=null&&o.extensions&&o.extensions.length>0&&(r.extensions=o.extensions),o!=null&&o.getDashArray&&(r.getDashArray=o.getDashArray),new st.PathLayer(r)},Hc=e=>new Wi.PathStyleExtension({dash:e==null?void 0:e.dash,highPrecisionDash:(e==null?void 0:e.highPrecisionDash)??!1,offset:(e==null?void 0:e.offset)??!1}),mo={solid:[0,0],dashed:[8,4],dotted:[2,2],longDash:[16,8],shortDash:[4,4],dashDot:[8,4,2,4],denseDot:[1,2],railroad:[1,8],highway:[12,6],boundary:[10,5]},Vc=()=>new Wi.BrushingExtension,_c=({map:e,data:n,selectedLayerId:o="path-layer",dataset:r,fillColor:i,strokeColor:a,opacity:l=.8,strokeWidth:x=1,visible:d=!0,colorField:h,colorMapping:y,dashPattern:c,dashField:f,dashMapping:u,brushingEnabled:m=!1,brushingRadius:T=1e4,onClick:S})=>{const p=a!=null&&a!==""?a:i||"#000000",P=g.useRef(null),M=g.useRef(o),R=g.useRef(null),L=g.useRef(S),F=de.use.tooltipFields(),C=de.use.datasetTooltipFields();g.useEffect(()=>{L.current=S},[S]),g.useEffect(()=>{Ot()},[]);const j=g.useMemo(()=>!n||n.length===0?[]:n.map(D=>{var O,N,$,_;if(!D.geometry)return null;let B=[];switch(D.geometry.type){case"LineString":B=D.geometry.coordinates.map(U=>[U[0],U[1]]);break;case"MultiLineString":B=((O=D.geometry.coordinates[0])==null?void 0:O.map(U=>[U[0],U[1]]))||[];break;case"Polygon":B=((N=D.geometry.coordinates[0])==null?void 0:N.map(U=>[U[0],U[1]]))||[];break;case"MultiPolygon":B=((_=($=D.geometry.coordinates[0])==null?void 0:$[0])==null?void 0:_.map(U=>[U[0],U[1]]))||[];break;default:return null}return B.length===0?null:{path:B,properties:D.properties||{}}}).filter(D=>D!==null),[n]),z=(D,B)=>{const N=(D.startsWith("#")?D:`#${D}`).replace("#",""),$=parseInt(N.slice(0,2),16),_=parseInt(N.slice(2,4),16),U=parseInt(N.slice(4,6),16);return isNaN($)||isNaN(_)||isNaN(U)?(console.warn(`[PathLayerComponent] Invalid hex color: ${D}, using fallback`),[0,0,0,Math.round(B*255)]):[$,_,U,Math.round(B*255)]},b=g.useMemo(()=>h&&y&&Object.keys(y).length>0?D=>{const B=D.properties||D||{};let O=B[h];if(O==null){const N=h.toLowerCase();for(const $ in B)if($.toLowerCase()===N){O=B[$];break}}if(O!=null){const N=String(O).trim();let $=y[N];if(!$){for(const _ in y)if(_.toLowerCase()===N.toLowerCase()){$=y[_];break}}if($)return z($,l)}return z(p,l)}:D=>z(p,l),[p,l,h,y,a,i]);g.useEffect(()=>{o&&(M.current=o)},[o]);const w=g.useCallback(D=>{var H,q;if(L.current&&L.current(D),!D||!D.object)return R.current&&(R.current.remove(),R.current=null),!1;const B=((H=D.object)==null?void 0:H.properties)||{};if(!e)return!1;R.current&&(R.current.remove(),R.current=null);let O=null;if(D.coordinate&&D.coordinate.length>=2&&(O=[D.coordinate[0],D.coordinate[1]]),!O)return!1;const N=r!=null&&r.id&&C[r.id]&&C[r.id].length>0?C[r.id]:F,$=(q=D.object)!=null&&q.path?{type:"LineString",coordinates:D.object.path}:void 0,_=Nt(B,$,r,N),U=new Bt.Popup({closeButton:!0,closeOnClick:!1,className:"map-tooltip-popup",offset:15}).setLngLat(O).setDOMContent(_).addTo(e);return U.on("close",()=>{R.current=null}),R.current=U,!1},[e,r,F,C]),v=c&&c!=="solid",k=f&&u&&Object.keys(u).length>0,I=g.useMemo(()=>{if(k)return D=>{const B=D.properties||D||{},O=String(B[f]||"").trim(),N=u[O]||"solid";return mo[N]||mo.solid};if(v)return mo[c]||mo.solid},[c,f,u,v,k]);return g.useEffect(()=>{if(e)return()=>{const D=M.current;D&&(ce(D,null),P.current=null),M.current=void 0,R.current&&(R.current.remove(),R.current=null)}},[e]),g.useEffect(()=>{if(!e||!o)return;const D=[];(v||k)&&D.push(Hc({dash:!0})),m&&D.push(Vc());const B={getPath:N=>N.path||[],getColor:b,getWidth:x,pickable:!0,visible:d&&j.length>0,opacity:l,capRounded:!0,jointRounded:!0,widthUnits:"pixels",onClick:w,updateTriggers:{getColor:[b,p,i,a,h||"",y?JSON.stringify(y):"",j.length,d,l],getPath:[j.length,d],getWidth:[x,d],getDashArray:[c,f,u?JSON.stringify(u):""]}};D.length>0&&(B.extensions=D),I&&(B.getDashArray=I),m&&(B.brushingEnabled=!0,B.brushingRadius=T);let O;D.length>0&&I?O=new st.PathLayer({id:o,data:d&&j.length>0?j:[],getPath:N=>N.path||[],getColor:b,getWidth:x,pickable:!0,visible:d&&j.length>0,opacity:l,capRounded:!0,jointRounded:!0,widthUnits:"pixels",onClick:w,extensions:D,getDashArray:I,dashJustified:!0,dashGapPickable:!1,updateTriggers:{getColor:[b,p,i,a,h||"",y?JSON.stringify(y):"",j.length,d,l],getPath:[j.length,d],getWidth:[x,d],getDashArray:[c,f,u?JSON.stringify(u):""]}}):O=$c(o,d&&j.length>0?j:[],B),P.current=O,ce(o,O)},[e,o,j,d,b,l,x,p,i,a,h,y,y?JSON.stringify(y):"",w,c,f,u,u?JSON.stringify(u):"",I,v,k,m,T]),null},Uc=(e,n,o)=>{const r={id:e,data:n,visible:(o==null?void 0:o.visible)!==!1,pickable:(o==null?void 0:o.pickable)!==!1};return(o==null?void 0:o.stroked)!==void 0?r.stroked=o.stroked:r.stroked=!0,(o==null?void 0:o.filled)!==void 0?r.filled=o.filled:r.filled=!0,(o==null?void 0:o.extruded)!==void 0&&(r.extruded=o.extruded),o!=null&&o.pointType&&(r.pointType=o.pointType),o!=null&&o.getFillColor?(o.getFillColor,r.getFillColor=o.getFillColor):r.getFillColor=[0,0,255,180],o!=null&&o.getLineColor?(o.getLineColor,r.getLineColor=o.getLineColor):r.getLineColor=[0,0,0,255],(o==null?void 0:o.getPointRadius)!==void 0?(o.getPointRadius,r.getPointRadius=o.getPointRadius):r.getPointRadius=10,(o==null?void 0:o.getLineWidth)!==void 0?(o.getLineWidth,r.getLineWidth=o.getLineWidth):r.getLineWidth=1,(o==null?void 0:o.getElevation)!==void 0&&(o.getElevation,r.getElevation=o.getElevation),(o==null?void 0:o.lineWidthScale)!==void 0&&(r.lineWidthScale=o.lineWidthScale),(o==null?void 0:o.lineWidthMinPixels)!==void 0&&(r.lineWidthMinPixels=o.lineWidthMinPixels),(o==null?void 0:o.lineWidthMaxPixels)!==void 0&&(r.lineWidthMaxPixels=o.lineWidthMaxPixels),(o==null?void 0:o.elevationScale)!==void 0&&(r.elevationScale=o.elevationScale),(o==null?void 0:o.pointRadiusScale)!==void 0&&(r.pointRadiusScale=o.pointRadiusScale),(o==null?void 0:o.pointRadiusMinPixels)!==void 0&&(r.pointRadiusMinPixels=o.pointRadiusMinPixels),(o==null?void 0:o.pointRadiusMaxPixels)!==void 0&&(r.pointRadiusMaxPixels=o.pointRadiusMaxPixels),o!=null&&o.iconMapping&&(r.iconMapping=o.iconMapping),o!=null&&o.iconAtlas&&(r.iconAtlas=o.iconAtlas),o!=null&&o.getIcon&&(o.getIcon,r.getIcon=o.getIcon),(o==null?void 0:o.getIconSize)!==void 0&&(o.getIconSize,r.getIconSize=o.getIconSize),o!=null&&o.getIconColor&&(o.getIconColor,r.getIconColor=o.getIconColor),o!=null&&o.getText&&(o.getText,r.getText=o.getText),(o==null?void 0:o.getTextSize)!==void 0&&(o.getTextSize,r.getTextSize=o.getTextSize),o!=null&&o.getTextColor&&(o.getTextColor,r.getTextColor=o.getTextColor),o!=null&&o.getTextAnchor&&(o.getTextAnchor,r.getTextAnchor=o.getTextAnchor),o!=null&&o.getTextAlignmentBaseline&&(o.getTextAlignmentBaseline,r.getTextAlignmentBaseline=o.getTextAlignmentBaseline),(o==null?void 0:o.opacity)!==void 0&&(r.opacity=o.opacity),o!=null&&o.onClick&&(r.onClick=o.onClick),o!=null&&o.updateTriggers&&(r.updateTriggers=o.updateTriggers),new st.GeoJsonLayer(r)},Jc=({map:e,data:n,selectedLayerId:o="geojson-layer",dataset:r,fillColor:i,strokeColor:a,opacity:l=.8,strokeWidth:x=1,pointRadius:d=5,visible:h=!0,colorField:y,colorMapping:c,onLayerSelect:f})=>{const u=i??(a||"#3b82f6"),m=a??(i||"#000000"),T=g.useRef(null),S=g.useRef(o),p=g.useRef(null),P=g.useRef(f),M=de.use.tooltipFields(),R=de.use.datasetTooltipFields();g.useEffect(()=>{P.current=f},[f]),g.useEffect(()=>{Ot()},[]);const L=(b,w)=>{const k=(b.startsWith("#")?b:`#${b}`).replace("#",""),I=parseInt(k.slice(0,2),16),D=parseInt(k.slice(2,4),16),B=parseInt(k.slice(4,6),16);return isNaN(I)||isNaN(D)||isNaN(B)?[0,0,0,Math.round(w*255)]:[I,D,B,Math.round(w*255)]},F=g.useMemo(()=>{const b=u,w=l,v=y,k=c;return v&&k&&Object.keys(k).length>0?I=>{const D=I.properties||I||{};let B=D[v];if(B==null){const O=v.toLowerCase();for(const N in D)if(N.toLowerCase()===O){B=D[N];break}}if(B!=null){const O=String(B).trim();let N=k[O];if(!N){for(const $ in k)if($.toLowerCase()===O.toLowerCase()){N=k[$];break}}if(N)return L(N,w)}return L(b,w)}:I=>L(b,w)},[u,l,y,c]),C=g.useMemo(()=>{const b=u,w=l,v=y,k=c;return v&&k&&Object.keys(k).length>0?I=>{const D=I.properties||I||{};let B=D[v];if(B==null){const O=v.toLowerCase();for(const N in D)if(N.toLowerCase()===O){B=D[N];break}}if(B!=null){const O=String(B).trim();let N=k[O];if(!N){for(const $ in k)if($.toLowerCase()===O.toLowerCase()){N=k[$];break}}if(N)return L(N,w)}return L(b,w)}:I=>L(b,w)},[u,l,y,c]),j=g.useCallback(b=>{var O,N;if(!b||!b.object)return p.current&&(p.current.remove(),p.current=null),!1;const w=((O=b.object)==null?void 0:O.properties)||{},v=(N=b.object)==null?void 0:N.geometry;if(P.current&&P.current({...b,coordinate:b.coordinate,object:b.object,properties:w,geometry:v}),!e)return!1;p.current&&(p.current.remove(),p.current=null);let k=null;if(b.coordinate&&b.coordinate.length>=2?k=[b.coordinate[0],b.coordinate[1]]:v&&(k=Es(v)),!k)return!1;const I=r!=null&&r.id&&R[r.id]&&R[r.id].length>0?R[r.id]:M,D=Nt(w,v,r,I),B=new Bt.Popup({closeButton:!0,closeOnClick:!1,className:"map-tooltip-popup",offset:15}).setLngLat(k).setDOMContent(D).addTo(e);return B.on("close",()=>{p.current=null}),p.current=B,!1},[e,r,M,R]),z=g.useMemo(()=>n?n.type==="FeatureCollection"?n:n.type==="Feature"?{type:"FeatureCollection",features:[n]}:Array.isArray(n)&&n.length>0&&n[0].type==="Feature"?{type:"FeatureCollection",features:n}:Array.isArray(n)?{type:"FeatureCollection",features:n}:n:null,[n]);return g.useEffect(()=>{o&&(S.current=o)},[o]),g.useEffect(()=>{if(e)return()=>{const b=S.current;b&&(ce(b,null),T.current=null),S.current=void 0,p.current&&(p.current.remove(),p.current=null)}},[e]),g.useEffect(()=>{if(!e||!o||!z)return;if(r!=null&&r.layerId&&e.getLayer(r.layerId))try{e.setLayoutProperty(r.layerId,"visibility","none")}catch{}const b=Uc(o,h?z:{type:"FeatureCollection",features:[]},{stroked:!0,filled:!0,pointType:"circle",getFillColor:F,getLineColor:C,getLineWidth:x||3,getPointRadius:d||5,lineWidthScale:1,lineWidthMinPixels:1,lineWidthMaxPixels:100,pointRadiusScale:1,pointRadiusMinPixels:3,pointRadiusMaxPixels:100,pickable:!0,visible:h,opacity:l,onClick:j,updateTriggers:{getFillColor:[u,i,a,l,y||"",c?JSON.stringify(c):"",h],getLineColor:[u,i,a,l,y||"",c?JSON.stringify(c):"",h],getLineWidth:[x,h],getPointRadius:[d,Math.max(d||5,3),h]}});T.current=b,ce(o,b)},[e,o,z,h,F,C,l,x,d,u,m,i,a,y,c,j,c?JSON.stringify(c):""]),null},qc=(e,n,o)=>{const r={id:e,data:n||[],visible:(o==null?void 0:o.visible)!==!1,pickable:(o==null?void 0:o.pickable)!==!1};return o!=null&&o.getPosition?r.getPosition=o.getPosition:r.getPosition=i=>{var a;return i.coordinates?i.coordinates:i.position?i.position:(a=i.geometry)!=null&&a.coordinates?i.geometry.coordinates:Array.isArray(i)&&i.length>=2?[i[0],i[1]]:[0,0]},(o==null?void 0:o.getColorWeight)!==void 0&&(o.getColorWeight,r.getColorWeight=o.getColorWeight),(o==null?void 0:o.getElevationWeight)!==void 0&&(o.getElevationWeight,r.getElevationWeight=o.getElevationWeight),(o==null?void 0:o.cellSize)!==void 0?r.cellSize=o.cellSize:r.cellSize=1e3,o!=null&&o.colorRange&&(r.colorRange=o.colorRange),o!=null&&o.colorScaleType&&(r.colorScaleType=o.colorScaleType),(o==null?void 0:o.coverage)!==void 0?r.coverage=o.coverage:r.coverage=1,(o==null?void 0:o.elevationScale)!==void 0&&(r.elevationScale=o.elevationScale),(o==null?void 0:o.extruded)!==void 0&&(r.extruded=o.extruded),o!=null&&o.getColorValue&&(r.getColorValue=o.getColorValue),o!=null&&o.getElevationValue&&(r.getElevationValue=o.getElevationValue),(o==null?void 0:o.opacity)!==void 0&&(r.opacity=o.opacity),o!=null&&o.onClick&&(r.onClick=o.onClick),o!=null&&o.updateTriggers&&(r.updateTriggers=o.updateTriggers),new $o.GridLayer(r)},Yc=({map:e,data:n,selectedLayerId:o="grid-layer",dataset:r,fillColor:i="#3b82f6",opacity:a=.7,visible:l=!0,cellSize:x=1e3,extruded:d=!1,elevationScale:h=1,onClick:y,colorField:c,colorMapping:f,heightField:u})=>{const m=g.useRef(null),T=g.useRef(o),S=g.useRef(!1),p=g.useRef(null),P=g.useRef(y),M=de.use.tooltipFields(),R=de.use.datasetTooltipFields();g.useEffect(()=>{P.current=y},[y]),g.useEffect(()=>{Ot()},[]);const L=g.useMemo(()=>{if(!n||n.length===0)return[];const w=[];return n.forEach(v=>{if(!v.geometry)return;let k=[];switch(v.geometry.type){case"Point":k=[[v.geometry.coordinates[0],v.geometry.coordinates[1]]];break;case"MultiPoint":k=v.geometry.coordinates.map(I=>[I[0],I[1]]);break;case"Polygon":k=v.geometry.coordinates[0].map(I=>[I[0],I[1]]);break;case"MultiPolygon":k=v.geometry.coordinates[0][0].map(I=>[I[0],I[1]]);break;case"LineString":k=v.geometry.coordinates.map(I=>[I[0],I[1]]);break;case"MultiLineString":v.geometry.coordinates.forEach(I=>{k.push(...I.map(D=>[D[0],D[1]]))});break;default:return}k.forEach(([I,D])=>{w.push({coordinates:[I,D],position:[I,D],properties:v.properties||{},_feature:v})})}),w},[n]),F=g.useMemo(()=>{if(c&&f&&Object.keys(f).length>0){const N=Array.from(new Set(Object.values(f)));if(N.length===0){const _=(i.startsWith("#")?i:`#${i}`).replace("#",""),U=parseInt(_.slice(0,2),16)||59,H=parseInt(_.slice(2,4),16)||130,q=parseInt(_.slice(4,6),16)||246,ae=Math.round(a*255);return[[U,H,q,ae]]}return N.map($=>{const U=($.startsWith("#")?$:`#${$}`).replace("#",""),H=parseInt(U.slice(0,2),16)||0,q=parseInt(U.slice(2,4),16)||0,ae=parseInt(U.slice(4,6),16)||0;return[H,q,ae,Math.round(a*255)]})}const v=(i.startsWith("#")?i:`#${i}`).replace("#",""),k=parseInt(v.slice(0,2),16)||59,I=parseInt(v.slice(2,4),16)||130,D=parseInt(v.slice(4,6),16)||246,B=Math.round(a*255),O=[[Math.min(255,k+30),Math.min(255,I+30),Math.min(255,D+30),B],[Math.min(255,k+15),Math.min(255,I+15),Math.min(255,D+15),B],[k,I,D,B],[Math.max(0,k-15),Math.max(0,I-15),Math.max(0,D-15),B],[Math.max(0,k-30),Math.max(0,I-30),Math.max(0,D-30),B]].filter(N=>N[0]>=0&&N[1]>=0&&N[2]>=0);return O.length>0?O:[[k,I,D,B]]},[f,a,i,c]),C=g.useMemo(()=>{if(c&&f&&Object.keys(f).length>0){const w=new Map,v=Array.from(new Set(Object.values(f)));return Object.entries(f).forEach(([k,I])=>{const D=v.indexOf(I);D>=0&&(w.set(k.toLowerCase(),D),w.set(k,D))}),k=>{if(k.length===0)return 0;const I=new Map;k.forEach(O=>{var _;const N=O.properties||((_=O._feature)==null?void 0:_.properties)||O||{};let $=N[c];if($==null){const U=c.toLowerCase();for(const H in N)if(H.toLowerCase()===U){$=N[H];break}}if($!=null){const U=String($).trim();if(w.has(U)||w.has(U.toLowerCase())){const H=w.has(U)?U:U.toLowerCase();I.set(H,(I.get(H)||0)+1)}}});let D=null,B=0;return I.forEach((O,N)=>{O>B&&(B=O,D=N)}),D&&w.has(D)?w.get(D):Math.min(k.length,F.length-1)}}return c?w=>{if(w.length===0)return 0;let v=0,k=0;return w.forEach(I=>{const D=I.properties||I||{};let B=D[c];if(B==null){const O=c.toLowerCase();for(const N in D)if(N.toLowerCase()===O){B=D[N];break}}if(B!=null){const O=typeof B=="number"?B:parseFloat(B);isNaN(O)||(v+=O,k++)}}),k>0?v/k:w.length}:w=>w.length===0||F.length===0?0:Math.min(2,F.length-1)},[c,f,F]),j=g.useMemo(()=>{if(!u||!L.length)return null;const w=[];if(L.forEach(B=>{var $;const O=B.properties||(($=B._feature)==null?void 0:$.properties)||B||{};let N=O[u];if(N==null){const _=u.toLowerCase();for(const U in O)if(U.toLowerCase()===_){N=O[U];break}}if(N!=null){const _=typeof N=="number"?N:Number(N);!isNaN(_)&&isFinite(_)&&_>0&&w.push(_)}}),w.length===0)return null;w.sort((B,O)=>B-O);const v=w[0],k=w[w.length-1],I=w[Math.floor(w.length/2)],D=w[Math.floor(w.length*.95)];return{min:v,max:k,median:I,p95:D,mean:w.reduce((B,O)=>B+O,0)/w.length}},[u,L]),z=g.useMemo(()=>u?w=>{if(w.length===0)return 0;let v=0,k=!1;if(w.forEach(I=>{var O;const D=I.properties||((O=I._feature)==null?void 0:O.properties)||I||{};let B=D[u];if(B==null){const N=u.toLowerCase();for(const $ in D)if($.toLowerCase()===N){B=D[$];break}}if(B!=null){const N=typeof B=="number"?B:Number(B);!isNaN(N)&&isFinite(N)&&(v+=N,k=!0)}}),k&&j){const I=j.p95*3,D=Math.min(v,I),B=j.p95*2,O=Math.sqrt(D/B)*B,N=100,$=3e3,_=Math.min(1,O/B);return N+_*($-N)}return k?Math.max(100,Math.sqrt(v)*15):w.length*50}:w=>w.length*50,[u,j]);g.useEffect(()=>{o&&(T.current=o)},[o]);const b=g.useCallback(w=>{var N,$,_,U,H,q,ae;if(P.current&&P.current(w),!w||!w.object)return p.current&&(p.current.remove(),p.current=null),!1;if(!e)return!1;p.current&&(p.current.remove(),p.current=null);let v=null;if(w.coordinate&&w.coordinate.length>=2&&(v=[w.coordinate[0],w.coordinate[1]]),!v)return!1;const k={"Point Count":((N=w.object)==null?void 0:N.count)||((_=($=w.object)==null?void 0:$.points)==null?void 0:_.length)||1},I=((U=w.object)==null?void 0:U.points)||[];if(I.length>0){const xe=((H=I[0])==null?void 0:H.properties)||((ae=(q=I[0])==null?void 0:q._feature)==null?void 0:ae.properties)||{};Object.keys(xe).forEach(ie=>{if(!ie.startsWith("_")){const Me=I.map(we=>{var Ie;return(we.properties||((Ie=we._feature)==null?void 0:Ie.properties)||{})[ie]}).filter(we=>we!=null);if(Me.length>0){const we=Me.filter(me=>typeof me=="number"||!isNaN(Number(me)));if(we.length===Me.length&&we.length>0){const me=we.reduce((Ie,be)=>Ie+Number(be),0);k[`${ie} (Sum)`]=me}else{const me={};Me.forEach(be=>{const je=String(be);me[je]=(me[je]||0)+1});const Ie=Object.entries(me).sort((be,je)=>je[1]-be[1])[0];Ie&&(k[ie]=Ie[0])}}}})}const D=r!=null&&r.id&&R[r.id]&&R[r.id].length>0?R[r.id]:M,B=Nt(k,void 0,r,(D.length>0,void 0)),O=new Bt.Popup({closeButton:!0,closeOnClick:!1,className:"map-tooltip-popup",offset:15}).setLngLat(v).setDOMContent(B).addTo(e);return O.on("close",()=>{p.current=null}),p.current=O,!1},[e,r,M,R]);return g.useEffect(()=>{if(e)return()=>{if(S.current){console.log("[GridLayer] Skipping cleanup - update in progress");return}const w=T.current;w&&(ce(w,null),m.current=null,T.current=void 0),p.current&&(p.current.remove(),p.current=null)}},[e]),g.useEffect(()=>{if(!(!e||!o)){S.current=!0;try{!m.current&&console.log("GridLayer: Creating layer",{selectedLayerId:o,pointDataCount:L.length,visible:l,elevationScale:h!==void 0?h:u?.1:1,heightField:u||"none (using point count)"});const v=f&&Object.keys(f).length>0?JSON.stringify(f):"",k=d||u!==void 0&&u!==""||!0,I=qc(o,l&&L.length>0?L:[],{getPosition:D=>D.coordinates||D.position,getColorValue:C,getElevationValue:z,cellSize:x,elevationScale:h!==void 0?h:u?.1:1,extruded:k,pickable:!0,visible:l&&L.length>0,opacity:a,onClick:b,colorRange:F,colorScaleType:c&&f&&Object.keys(f).length>0?"ordinal":"quantize",coverage:1,updateTriggers:{getColorValue:[c||"",v,L.length,l,a],getElevationValue:[u||"",L.length,l,h],getPosition:[L.length,l]}});m.current=I,ce(o,I)}finally{S.current=!1}}},[e,o,L,l,C,z,a,x,d,h,b,c,f,u,f?JSON.stringify(f):"",F]),null},Zc=({map:e,data:n,selectedLayerId:o="scatterplot-layer",dataset:r,fillColor:i="#3b82f6",strokeColor:a="#ffffff",opacity:l=.8,visible:x=!0,radius:d=5,radiusScale:h=1,radiusMinPixels:y=2,radiusMaxPixels:c=100,lineWidthMinPixels:f=1,stroked:u=!0,filled:m=!0,onClick:T,colorField:S,colorMapping:p,radiusField:P})=>{const M=g.useRef(null),R=g.useRef(o),L=g.useRef(null),F=g.useRef(T),C=de.use.tooltipFields(),j=de.use.datasetTooltipFields();g.useEffect(()=>{F.current=T},[T]),g.useEffect(()=>{Ot()},[]);const z=g.useMemo(()=>{if(!n||n.length===0)return[];const I=[];return n.forEach(D=>{if(!D.geometry)return;let B=[];switch(D.geometry.type){case"Point":B=[[D.geometry.coordinates[0],D.geometry.coordinates[1]]];break;case"MultiPoint":B=D.geometry.coordinates.map(_=>[_[0],_[1]]);break;case"Polygon":const O=D.geometry.coordinates[0],N=O.reduce((_,U)=>_+U[0],0)/O.length,$=O.reduce((_,U)=>_+U[1],0)/O.length;B=[[N,$]];break;default:return}B.forEach(([O,N])=>{I.push({position:[O,N],properties:D.properties||{}})})}),I},[n]),b=(I,D)=>{const O=(I.startsWith("#")?I:`#${I}`).replace("#",""),N=parseInt(O.slice(0,2),16),$=parseInt(O.slice(2,4),16),_=parseInt(O.slice(4,6),16);return[N,$,_,Math.round(D*255)]},w=g.useMemo(()=>S&&p&&Object.keys(p).length>0?I=>{const D=I.properties||{};let B=D[S];if(B==null){const O=S.toLowerCase();for(const N in D)if(N.toLowerCase()===O){B=D[N];break}}if(B!=null){const O=String(B).trim();if(p[O])return b(p[O],l);for(const N in p)if(N.toLowerCase()===O.toLowerCase())return b(p[N],l)}return b(i,l)}:b(i,l),[S,p,i,l]),v=g.useMemo(()=>P?I=>{const D=I.properties||{};let B=D[P];if(B==null){const N=P.toLowerCase();for(const $ in D)if($.toLowerCase()===N){B=D[$];break}}if(typeof B=="number")return Math.max(1,B)*(d/5);const O=parseFloat(B);return isNaN(O)?d:Math.max(1,O)*(d/5)}:d,[P,d]),k=g.useCallback(I=>{var U,H,q;if(F.current&&F.current(I),!I||!I.object)return L.current&&(L.current.remove(),L.current=null),!1;const D=((U=I.object)==null?void 0:U.properties)||{};if(!e)return!1;L.current&&(L.current.remove(),L.current=null);let B=null;if(I.coordinate&&I.coordinate.length>=2?B=[I.coordinate[0],I.coordinate[1]]:(H=I.object)!=null&&H.position&&(B=[I.object.position[0],I.object.position[1]]),!B)return!1;const O=r!=null&&r.id&&j[r.id]&&j[r.id].length>0?j[r.id]:C,N=(q=I.object)!=null&&q.position?{type:"Point",coordinates:I.object.position}:void 0,$=Nt(D,N,r,O),_=new Bt.Popup({closeButton:!0,closeOnClick:!1,className:"map-tooltip-popup",offset:15}).setLngLat(B).setDOMContent($).addTo(e);return _.on("close",()=>{L.current=null}),L.current=_,!1},[e,r,C,j]);return g.useEffect(()=>{o&&(R.current=o)},[o]),g.useEffect(()=>{if(e)return()=>{const I=R.current;I&&(ce(I,null),M.current=null,R.current=void 0),L.current&&(L.current.remove(),L.current=null)}},[e]),g.useEffect(()=>{if(!e||!o)return;const I=new st.ScatterplotLayer({id:o,data:x&&z.length>0?z:[],getPosition:D=>D.position,getFillColor:w,getLineColor:b(a,l),getRadius:v,radiusScale:h,radiusMinPixels:y,radiusMaxPixels:c,lineWidthMinPixels:f,stroked:u,filled:m,pickable:!0,visible:x&&z.length>0,opacity:l,onClick:k,updateTriggers:{getFillColor:[S,p?JSON.stringify(p):"",i,l],getRadius:[P,d]}});M.current=I,ce(o,I)},[e,o,z,x,w,v,a,l,d,h,y,c,f,u,m,k,S,p,i,P]),null},Xc=({map:e,data:n,selectedLayerId:o="heatmap-layer",dataset:r,visible:i=!0,opacity:a=.8,intensity:l=1,radius:x=50,weightField:d})=>{const h=`${o}-source`,y=o,c=g.useRef(!1),f=g.useMemo(()=>{if(!n||n.length===0)return{type:"FeatureCollection",features:[]};const u=[];return n.forEach(m=>{if(!m.geometry)return;let T=null;switch(m.geometry.type){case"Point":T=[m.geometry.coordinates[0],m.geometry.coordinates[1]];break;case"MultiPoint":m.geometry.coordinates.length>0&&(T=[m.geometry.coordinates[0][0],m.geometry.coordinates[0][1]]);break;case"Polygon":case"MultiPolygon":const S=m.geometry.type==="Polygon"?m.geometry.coordinates[0]:m.geometry.coordinates[0][0];if(S&&S.length>0){const P=S.reduce((R,L)=>R+L[0],0),M=S.reduce((R,L)=>R+L[1],0);T=[P/S.length,M/S.length]}break;case"LineString":const p=m.geometry.coordinates;if(p.length>0){const P=Math.floor(p.length/2);T=[p[P][0],p[P][1]]}break;default:return}if(T){let S=1;if(d&&m.properties){const p=m.properties[d];if(typeof p=="number")S=p;else if(typeof p=="string"){const P=parseFloat(p);isNaN(P)||(S=P)}}u.push({type:"Feature",geometry:{type:"Point",coordinates:T},properties:{weight:S,...m.properties}})}}),{type:"FeatureCollection",features:u}},[n,d]);return g.useEffect(()=>()=>{if(e)try{e.getLayer(y)&&e.removeLayer(y),e.getSource(h)&&e.removeSource(h)}catch{}},[e,y,h]),g.useEffect(()=>{if(!e)return;const u=()=>{try{if(e.getLayer(y)&&e.removeLayer(y),e.getSource(h)&&e.removeSource(h),!i||f.features.length===0)return;e.addSource(h,{type:"geojson",data:f}),e.addLayer({id:y,type:"heatmap",source:h,paint:{"heatmap-weight":["interpolate",["linear"],["get","weight"],0,0,10,1],"heatmap-intensity":l,"heatmap-radius":x,"heatmap-opacity":a,"heatmap-color":["interpolate",["linear"],["heatmap-density"],0,"rgba(0, 255, 0, 0)",.2,"rgba(0, 255, 0, 0.5)",.4,"rgba(255, 255, 0, 0.7)",.6,"rgba(255, 165, 0, 0.8)",.8,"rgba(255, 69, 0, 0.9)",1,"rgba(255, 0, 0, 1)"]},layout:{visibility:"visible"}}),c.current=!0}catch(m){console.error("Error adding Mapbox heatmap layer:",m)}};e.isStyleLoaded()?u():e.once("styledata",u)},[e,y,h,f,i,l,x,a]),g.useEffect(()=>{if(!(!e||!c.current))try{e.getLayer(y)&&(e.setPaintProperty(y,"heatmap-intensity",l),e.setPaintProperty(y,"heatmap-radius",x),e.setPaintProperty(y,"heatmap-opacity",a))}catch{}},[e,y,l,x,a]),null};function Kc(e,n,o){const r=o/111320,i=o/(111320*Math.cos(n*Math.PI/180)),a=[];for(let l=0;l<6;l++){const x=Math.PI/3*l+Math.PI/6,d=e+i*Math.cos(x),h=n+r*Math.sin(x);a.push([d,h])}return a.push(a[0]),a}const Qc=({map:e,data:n,selectedLayerId:o="hexbin-layer",dataset:r,fillColor:i="#3b82f6",opacity:a=.8,visible:l=!0,radius:x=1e4,extruded:d=!0,elevationScale:h=1,coverage:y=.9,onClick:c,colorField:f,colorMapping:u,heightField:m})=>{const T=g.useRef(null),S=g.useRef(o),p=g.useRef(null),P=g.useRef(c),M=de.use.tooltipFields(),R=de.use.datasetTooltipFields();g.useEffect(()=>{P.current=c},[c]),g.useEffect(()=>{Ot()},[]);const L=g.useMemo(()=>{if(!n||n.length===0)return{type:"FeatureCollection",features:[]};const b=[],w=x*y;return n.forEach((v,k)=>{if(!v.geometry)return;let I=[];switch(v.geometry.type){case"Point":I=[[v.geometry.coordinates[0],v.geometry.coordinates[1]]];break;case"MultiPoint":I=v.geometry.coordinates.map(N=>[N[0],N[1]]);break;case"Polygon":const D=v.geometry.coordinates[0],B=D.reduce((N,$)=>N+$[0],0)/D.length,O=D.reduce((N,$)=>N+$[1],0)/D.length;I=[[B,O]];break;default:return}I.forEach(([D,B],O)=>{const N=Kc(D,B,w);b.push({type:"Feature",geometry:{type:"Polygon",coordinates:[N]},properties:{...v.properties,_index:k,_coordIndex:O,_centerLng:D,_centerLat:B}})})}),{type:"FeatureCollection",features:b}},[n,x,y]),F=(b,w)=>{const k=(b.startsWith("#")?b:`#${b}`).replace("#",""),I=parseInt(k.slice(0,2),16)||0,D=parseInt(k.slice(2,4),16)||0,B=parseInt(k.slice(4,6),16)||0;return[I,D,B,Math.round(w*255)]},C=g.useMemo(()=>f&&u&&Object.keys(u).length>0?b=>{const w=b.properties||{};let v=w[f];if(v==null){const k=f.toLowerCase();for(const I in w)if(I.toLowerCase()===k){v=w[I];break}}if(v!=null){const k=String(v).trim();let I=u[k];if(!I){for(const D in u)if(D.toLowerCase()===k.toLowerCase()){I=u[D];break}}if(I)return F(I,a)}return F(i,a)}:F(i,a),[f,u,i,a]),j=g.useMemo(()=>m?b=>{const w=b.properties||{};let v=w[m];if(v==null){const k=m.toLowerCase();for(const I in w)if(I.toLowerCase()===k){v=w[I];break}}if(v!=null){const k=typeof v=="number"?v:parseFloat(v);return isNaN(k)?100:k}return 100}:100,[m]);g.useEffect(()=>{o&&(S.current=o)},[o]);const z=g.useCallback(b=>{var N,$;if(P.current&&P.current(b),!b||!b.object)return p.current&&(p.current.remove(),p.current=null),!1;const w=((N=b.object)==null?void 0:N.properties)||{};if(!e)return!1;p.current&&(p.current.remove(),p.current=null);let v=null;if(b.coordinate&&b.coordinate.length>=2?v=[b.coordinate[0],b.coordinate[1]]:w._centerLng&&w._centerLat&&(v=[w._centerLng,w._centerLat]),!v)return!1;const k={};Object.keys(w).forEach(_=>{_.startsWith("_")||(k[_]=w[_])});const I=r!=null&&r.id&&R[r.id]&&R[r.id].length>0?R[r.id]:M,D=($=b.object)==null?void 0:$.geometry,B=Nt(k,D,r,I.length>0?I:void 0),O=new Bt.Popup({closeButton:!0,closeOnClick:!1,className:"map-tooltip-popup",offset:15}).setLngLat(v).setDOMContent(B).addTo(e);return O.on("close",()=>{p.current=null}),p.current=O,!1},[e,r,M,R]);return g.useEffect(()=>{if(e)return()=>{const b=S.current;b&&(ce(b,null),T.current=null,S.current=void 0),p.current&&(p.current.remove(),p.current=null)}},[e]),g.useEffect(()=>{if(!e||!o)return;const b=new st.GeoJsonLayer({id:o,data:l&&L.features.length>0?L:{type:"FeatureCollection",features:[]},getFillColor:C,getLineColor:[255,255,255,100],getElevation:j,extruded:d,elevationScale:h,stroked:!0,filled:!0,lineWidthMinPixels:1,pickable:!0,visible:l&&L.features.length>0,opacity:a,onClick:z,updateTriggers:{getFillColor:[f,u?JSON.stringify(u):"",i,a],getElevation:[m]}});T.current=b,ce(o,b)},[e,o,L,l,C,j,a,d,h,z,f,u,i,m]),null},ed=({map:e,data:n,selectedLayerId:o="column-layer",dataset:r,fillColor:i="#3b82f6",strokeColor:a="#ffffff",opacity:l=.8,visible:x=!0,diskResolution:d=12,radius:h=100,extruded:y=!0,elevationScale:c=1,stroked:f=!0,lineWidthMinPixels:u=1,onClick:m,colorField:T,colorMapping:S,heightField:p})=>{const P=g.useRef(null),M=g.useRef(o),R=g.useRef(null),L=g.useRef(m),F=de.use.tooltipFields(),C=de.use.datasetTooltipFields();g.useEffect(()=>{L.current=m},[m]),g.useEffect(()=>{Ot()},[]);const j=g.useMemo(()=>{if(!n||n.length===0)return[];const k=[];return n.forEach(I=>{if(!I.geometry)return;let D=[];switch(I.geometry.type){case"Point":D=[[I.geometry.coordinates[0],I.geometry.coordinates[1]]];break;case"MultiPoint":D=I.geometry.coordinates.map($=>[$[0],$[1]]);break;case"Polygon":const B=I.geometry.coordinates[0],O=B.reduce(($,_)=>$+_[0],0)/B.length,N=B.reduce(($,_)=>$+_[1],0)/B.length;D=[[O,N]];break;default:return}D.forEach(([B,O])=>{k.push({position:[B,O],properties:I.properties||{}})})}),k},[n]),z=(k,I)=>{const B=(k.startsWith("#")?k:`#${k}`).replace("#",""),O=parseInt(B.slice(0,2),16),N=parseInt(B.slice(2,4),16),$=parseInt(B.slice(4,6),16);return[O,N,$,Math.round(I*255)]},b=g.useMemo(()=>T&&S&&Object.keys(S).length>0?k=>{var D;const I=(D=k.properties)==null?void 0:D[T];return I!==void 0&&S[String(I)]?z(S[String(I)],l):z(i,l)}:z(i,l),[T,S,i,l]),w=g.useMemo(()=>p?k=>{var B;const I=(B=k.properties)==null?void 0:B[p];if(typeof I=="number")return I;const D=parseFloat(I);return isNaN(D)?100:D}:100,[p]);g.useEffect(()=>{o&&(M.current=o)},[o]);const v=g.useCallback(k=>{var _,U,H;if(L.current&&L.current(k),!k||!k.object)return R.current&&(R.current.remove(),R.current=null),!1;const I=((_=k.object)==null?void 0:_.properties)||{};if(!e)return!1;R.current&&(R.current.remove(),R.current=null);let D=null;if(k.coordinate&&k.coordinate.length>=2?D=[k.coordinate[0],k.coordinate[1]]:(U=k.object)!=null&&U.position&&(D=[k.object.position[0],k.object.position[1]]),!D)return!1;const B=r!=null&&r.id&&C[r.id]&&C[r.id].length>0?C[r.id]:F,O=(H=k.object)!=null&&H.position?{type:"Point",coordinates:k.object.position}:void 0,N=Nt(I,O,r,B.length>0?B:void 0),$=new Bt.Popup({closeButton:!0,closeOnClick:!1,className:"map-tooltip-popup",offset:15}).setLngLat(D).setDOMContent(N).addTo(e);return $.on("close",()=>{R.current=null}),R.current=$,!1},[e,r,F,C]);return g.useEffect(()=>{if(e)return()=>{const k=M.current;k&&(ce(k,null),P.current=null,M.current=void 0),R.current&&(R.current.remove(),R.current=null)}},[e]),g.useEffect(()=>{if(!e||!o)return;const k=new st.ColumnLayer({id:o,data:x&&j.length>0?j:[],getPosition:I=>I.position,getFillColor:b,getLineColor:z(a,l),getElevation:w,diskResolution:d,radius:h,extruded:y,elevationScale:c,stroked:f,lineWidthMinPixels:u,pickable:!0,visible:x&&j.length>0,opacity:l,onClick:v,updateTriggers:{getFillColor:[T,S?JSON.stringify(S):"",i,l],getElevation:[p]}});P.current=k,ce(o,k)},[e,o,j,x,b,w,a,l,d,h,y,c,f,u,v,T,S,i,p]),null},td=({map:e,data:n,selectedLayerId:o="arc-layer",dataset:r,sourceColor:i="#3b82f6",targetColor:a="#ef4444",opacity:l=.8,visible:x=!0,getWidth:d=2,widthMinPixels:h=1,widthMaxPixels:y=10,greatCircle:c=!0,onClick:f,colorField:u,colorMapping:m})=>{const T=g.useRef(null),S=g.useRef(o),p=F=>{const C=F.reduce((z,b)=>z+b[0],0),j=F.reduce((z,b)=>z+b[1],0);return[C/F.length,j/F.length]},P=g.useMemo(()=>{if(!n||n.length===0)return[];const F=[],C=[];if(n.forEach(j=>{if(!j.geometry)return;const z=j.geometry.type,b=j.properties||{};if(z==="Point")C.push({coords:[j.geometry.coordinates[0],j.geometry.coordinates[1]],properties:b});else if(z==="MultiPoint")j.geometry.coordinates.forEach(w=>{C.push({coords:[w[0],w[1]],properties:b})});else if(z==="Polygon"){const w=p(j.geometry.coordinates[0]);C.push({coords:w,properties:b})}else z==="MultiPolygon"&&j.geometry.coordinates.forEach(w=>{const v=p(w[0]);C.push({coords:v,properties:b})})}),n.forEach(j=>{if(!j.geometry)return;const z=j.geometry.type,b=j.properties||{};if(z==="LineString"&&j.geometry.coordinates.length>=2){const w=j.geometry.coordinates;F.push({source:[w[0][0],w[0][1]],target:[w[w.length-1][0],w[w.length-1][1]],properties:b})}else if(z==="MultiLineString")j.geometry.coordinates.forEach(w=>{w.length>=2&&F.push({source:[w[0][0],w[0][1]],target:[w[w.length-1][0],w[w.length-1][1]],properties:b})});else if(z==="Point"){const w=b.targetLng||b.target_lng||b.dest_lng||b.destLng||b.toLng||b.to_lng,v=b.targetLat||b.target_lat||b.dest_lat||b.destLat||b.toLat||b.to_lat;w!==void 0&&v!==void 0&&F.push({source:[j.geometry.coordinates[0],j.geometry.coordinates[1]],target:[parseFloat(w),parseFloat(v)],properties:b})}}),F.length===0&&C.length>=2)for(let j=0;j<C.length-1;j++)F.push({source:C[j].coords,target:C[j+1].coords,properties:C[j].properties});return F},[n]),M=(F,C)=>{const z=(F.startsWith("#")?F:`#${F}`).replace("#",""),b=parseInt(z.slice(0,2),16),w=parseInt(z.slice(2,4),16),v=parseInt(z.slice(4,6),16);return[b,w,v,Math.round(C*255)]},R=g.useMemo(()=>u&&m&&Object.keys(m).length>0?F=>{const C=F.properties||{};let j=C[u];if(j==null){const z=u.toLowerCase();for(const b in C)if(b.toLowerCase()===z){j=C[b];break}}if(j!=null){const z=String(j).trim();if(m[z])return M(m[z],l);for(const b in m)if(b.toLowerCase()===z.toLowerCase())return M(m[b],l)}return M(i,l)}:M(i,l),[u,m,i,l]),L=g.useMemo(()=>M(a,l),[a,l]);return g.useEffect(()=>{o&&(S.current=o)},[o]),g.useEffect(()=>{if(e)return()=>{const F=S.current;F&&(ce(F,null),T.current=null,S.current=void 0)}},[e]),g.useEffect(()=>{if(!e||!o)return;const F=new st.ArcLayer({id:o,data:x&&P.length>0?P:[],getSourcePosition:C=>C.source,getTargetPosition:C=>C.target,getSourceColor:R,getTargetColor:L,getWidth:d,widthMinPixels:h,widthMaxPixels:y,greatCircle:c,pickable:!0,visible:x&&P.length>0,opacity:l,onClick:f,updateTriggers:{getSourceColor:[u,m?JSON.stringify(m):"",i,l],getTargetColor:[a,l]}});T.current=F,ce(o,F)},[e,o,P,x,R,L,l,d,h,y,c,f,u,m,i,a]),null},od=({map:e,data:n,selectedLayerId:o="contour-layer",dataset:r,fillColor:i="#3b82f6",opacity:a=.8,visible:l=!0,cellSize:x=500,contours:d,onClick:h,weightField:y})=>{const c=g.useRef(null),f=g.useRef(o),u=(P,M)=>{const L=(P.startsWith("#")?P:`#${P}`).replace("#",""),F=parseInt(L.slice(0,2),16),C=parseInt(L.slice(2,4),16),j=parseInt(L.slice(4,6),16);return[F,C,j,Math.round(M*255)]},m=g.useMemo(()=>{const P=u(i,1),[M,R,L]=P;return[[M,R,L,80],[M,R,L,120],[M,R,L,160],[M,R,L,200],[M,R,L,255]]},[i]),T=g.useMemo(()=>{if(!n||n.length===0)return[];const P=[];return n.forEach(M=>{if(!M.geometry)return;let R=[];switch(M.geometry.type){case"Point":R=[[M.geometry.coordinates[0],M.geometry.coordinates[1]]];break;case"MultiPoint":R=M.geometry.coordinates.map(z=>[z[0],z[1]]);break;case"Polygon":const L=M.geometry.coordinates[0],F=L.reduce((z,b)=>z+b[0],0)/L.length,C=L.reduce((z,b)=>z+b[1],0)/L.length;R=[[F,C]];break;case"MultiPolygon":M.geometry.coordinates.forEach(z=>{const b=z[0],w=b.reduce((k,I)=>k+I[0],0)/b.length,v=b.reduce((k,I)=>k+I[1],0)/b.length;R.push([w,v])});break;case"LineString":const j=M.geometry.coordinates;if(j.length>0){const z=Math.floor(j.length/2);R=[[j[z][0],j[z][1]]]}break;default:return}R.forEach(([L,F])=>{P.push({position:[L,F],properties:M.properties||{}})})}),P},[n]),S=g.useMemo(()=>y?P=>{const M=P.properties||{};let R=M[y];if(R==null){const F=y.toLowerCase();for(const C in M)if(C.toLowerCase()===F){R=M[C];break}}if(typeof R=="number")return Math.max(1,R);const L=parseFloat(R);return isNaN(L)?1:Math.max(1,L)}:1,[y]),p=g.useMemo(()=>{const P=T.length;let M;return P>1e3?M=[1,5,10,25,50]:P>500?M=[1,3,7,15,30]:P>100?M=[1,2,4,8,15]:P>20?M=[1,2,3,5,8]:M=[1,2,3,4,5],M.map((R,L)=>({threshold:R,color:m[L]||m[m.length-1],strokeWidth:L===M.length-1?2:1}))},[T.length,m]);return g.useEffect(()=>{o&&(f.current=o)},[o]),g.useEffect(()=>{if(e)return()=>{const P=f.current;P&&(ce(P,null),c.current=null,f.current=void 0)}},[e]),g.useEffect(()=>{if(!e||!o)return;const P=d||p,M=new $o.ContourLayer({id:o,data:l&&T.length>0?T:[],getPosition:R=>R.position,getWeight:S,cellSize:x,contours:P,aggregation:"SUM",pickable:!0,visible:l&&T.length>0,opacity:a,onClick:h,updateTriggers:{getWeight:[y],contours:[JSON.stringify(P),i]}});c.current=M,ce(o,M)},[e,o,T,l,S,a,x,d,p,m,i,h,y]),null},To=(e,n)=>{if(typeof document>"u")return null;const o=document.createElement("canvas");o.width=64,o.height=64;const r=o.getContext("2d");if(!r)return null;switch(r.fillStyle=n,r.strokeStyle="#ffffff",r.lineWidth=2,e){case"circle":r.beginPath(),r.arc(32,32,28,0,Math.PI*2),r.fill(),r.stroke();break;case"marker":r.beginPath(),r.moveTo(32,4),r.bezierCurveTo(12,4,4,20,4,28),r.bezierCurveTo(4,44,32,60,32,60),r.bezierCurveTo(32,60,60,44,60,28),r.bezierCurveTo(60,20,52,4,32,4),r.fill(),r.stroke(),r.fillStyle="#ffffff",r.beginPath(),r.arc(32,26,10,0,Math.PI*2),r.fill();break;case"square":r.fillRect(8,8,48,48),r.strokeRect(8,8,48,48);break;case"diamond":r.beginPath(),r.moveTo(32,4),r.lineTo(60,32),r.lineTo(32,60),r.lineTo(4,32),r.closePath(),r.fill(),r.stroke();break;case"triangle":r.beginPath(),r.moveTo(32,8),r.lineTo(58,56),r.lineTo(6,56),r.closePath(),r.fill(),r.stroke();break;case"star":r.beginPath();for(let i=0;i<5;i++){const a=(i*72-90)*Math.PI/180,l=(i*72+36-90)*Math.PI/180,x=32+28*Math.cos(a),d=32+28*Math.sin(a),h=32+12*Math.cos(l),y=32+12*Math.sin(l);i===0?r.moveTo(x,d):r.lineTo(x,d),r.lineTo(h,y)}r.closePath(),r.fill(),r.stroke();break;case"hospital":r.fillRect(8,8,48,48),r.strokeRect(8,8,48,48),r.fillStyle="#ffffff",r.fillRect(26,16,12,32),r.fillRect(16,26,32,12);break;case"school":r.beginPath(),r.moveTo(32,8),r.lineTo(56,24),r.lineTo(56,40),r.lineTo(32,56),r.lineTo(8,40),r.lineTo(8,24),r.closePath(),r.fill(),r.stroke();break;case"home":r.beginPath(),r.moveTo(32,8),r.lineTo(56,32),r.lineTo(48,32),r.lineTo(48,56),r.lineTo(16,56),r.lineTo(16,32),r.lineTo(8,32),r.closePath(),r.fill(),r.stroke(),r.fillStyle="#ffffff",r.fillRect(26,40,12,16);break;case"flag":r.fillRect(12,8,4,48),r.beginPath(),r.moveTo(16,8),r.lineTo(52,20),r.lineTo(16,32),r.closePath(),r.fill();break;default:r.beginPath(),r.arc(32,32,28,0,Math.PI*2),r.fill(),r.stroke()}return o},rd={marker:{x:0,y:0,width:64,height:64,mask:!1}},nd=({map:e,data:n,selectedLayerId:o="icon-layer",dataset:r,iconAtlas:i,iconMapping:a,opacity:l=1,visible:x=!0,sizeScale:d=10,sizeMinPixels:h=10,sizeMaxPixels:y=100,billboard:c=!0,onClick:f,iconField:u,sizeField:m,colorField:T,colorMapping:S,iconType:p="marker",fillColor:P="#3388FF"})=>{const M=g.useRef(null),R=g.useRef(o),[L,F]=g.useState(null),[C,j]=g.useState(null),[z,b]=g.useState({});g.useEffect(()=>{if(T&&S&&Object.keys(S).length>0){const D=Object.values(S),B=Array.from(new Set(D)),O=64,N=B.includes(P)?B.length:B.length+1,$=Math.ceil(Math.sqrt(N)),_=$*O,U=document.createElement("canvas");U.width=_,U.height=_;const H=U.getContext("2d");if(!H){j(null),b({});return}const q={},ae={};B.forEach((ie,Me)=>{const we=Math.floor(Me/$),Ie=Me%$*O,be=we*O,je=To(p,ie);je&&H.drawImage(je,Ie,be),ae[ie]={x:Ie,y:be}}),Object.keys(S).forEach(ie=>{const Me=S[ie],we=ae[Me];we&&(q[ie]={x:we.x,y:we.y,width:O,height:O,mask:!1})});const xe=To(p,P);if(xe&&!ae[P]){const ie=B.length,Me=Math.floor(ie/$),me=ie%$*O,Ie=Me*O;H.drawImage(xe,me,Ie),q.default={x:me,y:Ie,width:O,height:O,mask:!1}}else if(ae[P]){const ie=ae[P];q.default={x:ie.x,y:ie.y,width:O,height:O,mask:!1}}j(U),b(q)}else{const D=To(p,P);F(D),j(null),b({})}},[p,P,T,S]);const w=g.useMemo(()=>{if(!n||n.length===0)return[];const D=[];return n.forEach(B=>{if(!B.geometry)return;let O=[];switch(B.geometry.type){case"Point":O=[[B.geometry.coordinates[0],B.geometry.coordinates[1]]];break;case"MultiPoint":O=B.geometry.coordinates.map(U=>[U[0],U[1]]);break;case"Polygon":const N=B.geometry.coordinates[0],$=N.reduce((U,H)=>U+H[0],0)/N.length,_=N.reduce((U,H)=>U+H[1],0)/N.length;O=[[$,_]];break;default:return}O.forEach(([N,$])=>{D.push({position:[N,$],properties:B.properties||{}})})}),D},[n]),v=(D,B)=>{const N=(D.startsWith("#")?D:`#${D}`).replace("#",""),$=parseInt(N.slice(0,2),16),_=parseInt(N.slice(2,4),16),U=parseInt(N.slice(4,6),16);return[$,_,U,Math.round(B*255)]};g.useMemo(()=>{const D=v(P,l);return T&&S&&Object.keys(S).length>0?B=>{const O=B.properties||{};let N=O[T];if(N==null){const $=T.toLowerCase();for(const _ in O)if(_.toLowerCase()===$){N=O[_];break}}if(N!=null){const $=String(N).trim();if(S[$])return v(S[$],l);for(const _ in S)if(_.toLowerCase()===$.toLowerCase())return v(S[_],l)}return D}:D},[T,S,l,P]);const k=g.useMemo(()=>m?D=>{const B=D.properties||{};let O=B[m];if(O==null){const $=m.toLowerCase();for(const _ in B)if(_.toLowerCase()===$){O=B[_];break}}if(typeof O=="number")return Math.max(1,O);const N=parseFloat(O);return isNaN(N)?d:Math.max(1,N)}:d,[m,d]),I=g.useMemo(()=>T&&S&&Object.keys(S).length>0?D=>{const B=D.properties||{};let O=B[T];if(O==null){const N=T.toLowerCase();for(const $ in B)if($.toLowerCase()===N){O=B[$];break}}if(O!=null){const N=String(O).trim();if(S[N]&&z[N])return N;for(const $ in S)if($.toLowerCase()===N.toLowerCase()&&z[$])return $}return"default"}:u?D=>{var O;const B=(O=D.properties)==null?void 0:O[u];return String(B||"marker")}:"marker",[u,T,S,z]);return g.useEffect(()=>{o&&(R.current=o)},[o]),g.useEffect(()=>{if(e)return()=>{const D=R.current;D&&(ce(D,null),M.current=null,R.current=void 0)}},[e]),g.useEffect(()=>{if(!e||!o||!L&&!C)return;const D=C||L,B=T&&S&&Object.keys(S).length>0&&Object.keys(z).length>0?z:a||rd,O=new st.IconLayer({id:o,data:x&&w.length>0?w:[],getPosition:N=>N.position,getIcon:I,getSize:k,getColor:[255,255,255,255],iconAtlas:i||D,iconMapping:B,sizeScale:1,sizeMinPixels:1,sizeMaxPixels:200,billboard:c,pickable:!0,visible:x&&w.length>0,opacity:l,onClick:f,updateTriggers:{getIcon:[p,T,S],getSize:[m,d]}});M.current=O,ce(o,O)},[e,o,w,x,k,I,i,a,L,C,z,p,P,l,d,h,y,c,f,m,T,S]),null},id=({map:e,data:n,selectedLayerId:o="text-layer",dataset:r,textColor:i="#000000",backgroundColor:a="#ffffff",opacity:l=1,visible:x=!0,sizeScale:d=1,sizeMinPixels:h=10,sizeMaxPixels:y=50,billboard:c=!0,fontFamily:f="Monaco, monospace",fontWeight:u="normal",characterSet:m="auto",onClick:T,textField:S,sizeField:p,colorField:P,colorMapping:M})=>{const R=g.useRef(null),L=g.useRef(o),F=g.useMemo(()=>{if(!n||n.length===0)return[];const w=[];return n.forEach(v=>{if(!v.geometry)return;let k=[];switch(v.geometry.type){case"Point":k=[[v.geometry.coordinates[0],v.geometry.coordinates[1]]];break;case"MultiPoint":k=v.geometry.coordinates.map(O=>[O[0],O[1]]);break;case"Polygon":const I=v.geometry.coordinates[0],D=I.reduce((O,N)=>O+N[0],0)/I.length,B=I.reduce((O,N)=>O+N[1],0)/I.length;k=[[D,B]];break;default:return}k.forEach(([I,D])=>{w.push({position:[I,D],properties:v.properties||{}})})}),w},[n]),C=(w,v)=>{const I=(w.startsWith("#")?w:`#${w}`).replace("#",""),D=parseInt(I.slice(0,2),16),B=parseInt(I.slice(2,4),16),O=parseInt(I.slice(4,6),16);return[D,B,O,Math.round(v*255)]},j=g.useMemo(()=>S?w=>{var k;const v=(k=w.properties)==null?void 0:k[S];return String(v??"")}:w=>{const v=w.properties||{};return String(v.name||v.label||v.title||v.id||"")},[S]),z=g.useMemo(()=>P&&M&&Object.keys(M).length>0?w=>{var k;const v=(k=w.properties)==null?void 0:k[P];return v!==void 0&&M[String(v)]?C(M[String(v)],l):C(i,l)}:C(i,l),[P,M,i,l]),b=g.useMemo(()=>p?w=>{var I;const v=(I=w.properties)==null?void 0:I[p];if(typeof v=="number")return v;const k=parseFloat(v);return isNaN(k)?16:k}:16,[p]);return g.useEffect(()=>{o&&(L.current=o)},[o]),g.useEffect(()=>{if(e)return()=>{const w=L.current;w&&(ce(w,null),R.current=null,L.current=void 0)}},[e]),g.useEffect(()=>{if(!e||!o)return;const w=new st.TextLayer({id:o,data:x&&F.length>0?F:[],getPosition:v=>v.position,getText:j,getSize:b,getColor:z,getBackgroundColor:C(a,.8),background:!0,backgroundPadding:[4,2],sizeScale:d,sizeMinPixels:h,sizeMaxPixels:y,billboard:c,fontFamily:f,fontWeight:u,characterSet:m,pickable:!0,visible:x&&F.length>0,opacity:l,onClick:T,updateTriggers:{getText:[S],getSize:[p],getColor:[P,M?JSON.stringify(M):"",i,l]}});R.current=w,ce(o,w)},[e,o,F,x,j,b,z,a,l,d,h,y,c,f,u,m,T,S,p,P,M,i]),null},Li=[Int8Array,Uint8Array,Uint8ClampedArray,Int16Array,Uint16Array,Int32Array,Uint32Array,Float32Array,Float64Array],Po=1,Kt=8;class qo{static from(n){if(!(n instanceof ArrayBuffer))throw new Error("Data must be an instance of ArrayBuffer.");const[o,r]=new Uint8Array(n,0,2);if(o!==219)throw new Error("Data does not appear to be in a KDBush format.");const i=r>>4;if(i!==Po)throw new Error(`Got v${i} data when expected v${Po}.`);const a=Li[r&15];if(!a)throw new Error("Unrecognized array type.");const[l]=new Uint16Array(n,2,1),[x]=new Uint32Array(n,4,1);return new qo(x,l,a,n)}constructor(n,o=64,r=Float64Array,i){if(isNaN(n)||n<0)throw new Error(`Unpexpected numItems value: ${n}.`);this.numItems=+n,this.nodeSize=Math.min(Math.max(+o,2),65535),this.ArrayType=r,this.IndexArrayType=n<65536?Uint16Array:Uint32Array;const a=Li.indexOf(this.ArrayType),l=n*2*this.ArrayType.BYTES_PER_ELEMENT,x=n*this.IndexArrayType.BYTES_PER_ELEMENT,d=(8-x%8)%8;if(a<0)throw new Error(`Unexpected typed array class: ${r}.`);i&&i instanceof ArrayBuffer?(this.data=i,this.ids=new this.IndexArrayType(this.data,Kt,n),this.coords=new this.ArrayType(this.data,Kt+x+d,n*2),this._pos=n*2,this._finished=!0):(this.data=new ArrayBuffer(Kt+l+x+d),this.ids=new this.IndexArrayType(this.data,Kt,n),this.coords=new this.ArrayType(this.data,Kt+x+d,n*2),this._pos=0,this._finished=!1,new Uint8Array(this.data,0,2).set([219,(Po<<4)+a]),new Uint16Array(this.data,2,1)[0]=o,new Uint32Array(this.data,4,1)[0]=n)}add(n,o){const r=this._pos>>1;return this.ids[r]=r,this.coords[this._pos++]=n,this.coords[this._pos++]=o,r}finish(){const n=this._pos>>1;if(n!==this.numItems)throw new Error(`Added ${n} items when expected ${this.numItems}.`);return Wo(this.ids,this.coords,this.nodeSize,0,this.numItems-1,0),this._finished=!0,this}range(n,o,r,i){if(!this._finished)throw new Error("Data not yet indexed - call index.finish().");const{ids:a,coords:l,nodeSize:x}=this,d=[0,a.length-1,0],h=[];for(;d.length;){const y=d.pop()||0,c=d.pop()||0,f=d.pop()||0;if(c-f<=x){for(let S=f;S<=c;S++){const p=l[2*S],P=l[2*S+1];p>=n&&p<=r&&P>=o&&P<=i&&h.push(a[S])}continue}const u=f+c>>1,m=l[2*u],T=l[2*u+1];m>=n&&m<=r&&T>=o&&T<=i&&h.push(a[u]),(y===0?n<=m:o<=T)&&(d.push(f),d.push(u-1),d.push(1-y)),(y===0?r>=m:i>=T)&&(d.push(u+1),d.push(c),d.push(1-y))}return h}within(n,o,r){if(!this._finished)throw new Error("Data not yet indexed - call index.finish().");const{ids:i,coords:a,nodeSize:l}=this,x=[0,i.length-1,0],d=[],h=r*r;for(;x.length;){const y=x.pop()||0,c=x.pop()||0,f=x.pop()||0;if(c-f<=l){for(let S=f;S<=c;S++)Ti(a[2*S],a[2*S+1],n,o)<=h&&d.push(i[S]);continue}const u=f+c>>1,m=a[2*u],T=a[2*u+1];Ti(m,T,n,o)<=h&&d.push(i[u]),(y===0?n-r<=m:o-r<=T)&&(x.push(f),x.push(u-1),x.push(1-y)),(y===0?n+r>=m:o+r>=T)&&(x.push(u+1),x.push(c),x.push(1-y))}return d}}function Wo(e,n,o,r,i,a){if(i-r<=o)return;const l=r+i>>1;Rs(e,n,l,r,i,a),Wo(e,n,o,r,l-1,1-a),Wo(e,n,o,l+1,i,1-a)}function Rs(e,n,o,r,i,a){for(;i>r;){if(i-r>600){const h=i-r+1,y=o-r+1,c=Math.log(h),f=.5*Math.exp(2*c/3),u=.5*Math.sqrt(c*f*(h-f)/h)*(y-h/2<0?-1:1),m=Math.max(r,Math.floor(o-y*f/h+u)),T=Math.min(i,Math.floor(o+(h-y)*f/h+u));Rs(e,n,o,m,T,a)}const l=n[2*o+a];let x=r,d=i;for(Qt(e,n,r,o),n[2*i+a]>l&&Qt(e,n,r,i);x<d;){for(Qt(e,n,x,d),x++,d--;n[2*x+a]<l;)x++;for(;n[2*d+a]>l;)d--}n[2*r+a]===l?Qt(e,n,r,d):(d++,Qt(e,n,d,i)),d<=o&&(r=d+1),o<=d&&(i=d-1)}}function Qt(e,n,o,r){Mo(e,o,r),Mo(n,2*o,2*r),Mo(n,2*o+1,2*r+1)}function Mo(e,n,o){const r=e[n];e[n]=e[o],e[o]=r}function Ti(e,n,o,r){const i=e-o,a=n-r;return i*i+a*a}const sd={minZoom:0,maxZoom:16,minPoints:2,radius:40,extent:512,nodeSize:64,log:!1,generateId:!1,reduce:null,map:e=>e},Pi=Math.fround||(e=>(n=>(e[0]=+n,e[0])))(new Float32Array(1)),Wt=2,At=3,Fo=4,Dt=5,Ds=6;class ad{constructor(n){this.options=Object.assign(Object.create(sd),n),this.trees=new Array(this.options.maxZoom+1),this.stride=this.options.reduce?7:6,this.clusterProps=[]}load(n){const{log:o,minZoom:r,maxZoom:i}=this.options;o&&console.time("total time");const a=`prepare ${n.length} points`;o&&console.time(a),this.points=n;const l=[];for(let d=0;d<n.length;d++){const h=n[d];if(!h.geometry)continue;const[y,c]=h.geometry.coordinates,f=Pi(xo(y)),u=Pi(yo(c));l.push(f,u,1/0,d,-1,1),this.options.reduce&&l.push(0)}let x=this.trees[i+1]=this._createTree(l);o&&console.timeEnd(a);for(let d=i;d>=r;d--){const h=+Date.now();x=this.trees[d]=this._createTree(this._cluster(x,d)),o&&console.log("z%d: %d clusters in %dms",d,x.numItems,+Date.now()-h)}return o&&console.timeEnd("total time"),this}getClusters(n,o){let r=((n[0]+180)%360+360)%360-180;const i=Math.max(-90,Math.min(90,n[1]));let a=n[2]===180?180:((n[2]+180)%360+360)%360-180;const l=Math.max(-90,Math.min(90,n[3]));if(n[2]-n[0]>=360)r=-180,a=180;else if(r>a){const c=this.getClusters([r,i,180,l],o),f=this.getClusters([-180,i,a,l],o);return c.concat(f)}const x=this.trees[this._limitZoom(o)],d=x.range(xo(r),yo(l),xo(a),yo(i)),h=x.data,y=[];for(const c of d){const f=this.stride*c;y.push(h[f+Dt]>1?Mi(h,f,this.clusterProps):this.points[h[f+At]])}return y}getChildren(n){const o=this._getOriginId(n),r=this._getOriginZoom(n),i="No cluster with the specified id.",a=this.trees[r];if(!a)throw new Error(i);const l=a.data;if(o*this.stride>=l.length)throw new Error(i);const x=this.options.radius/(this.options.extent*Math.pow(2,r-1)),d=l[o*this.stride],h=l[o*this.stride+1],y=a.within(d,h,x),c=[];for(const f of y){const u=f*this.stride;l[u+Fo]===n&&c.push(l[u+Dt]>1?Mi(l,u,this.clusterProps):this.points[l[u+At]])}if(c.length===0)throw new Error(i);return c}getLeaves(n,o,r){o=o||10,r=r||0;const i=[];return this._appendLeaves(i,n,o,r,0),i}getTile(n,o,r){const i=this.trees[this._limitZoom(n)],a=Math.pow(2,n),{extent:l,radius:x}=this.options,d=x/l,h=(r-d)/a,y=(r+1+d)/a,c={features:[]};return this._addTileFeatures(i.range((o-d)/a,h,(o+1+d)/a,y),i.data,o,r,a,c),o===0&&this._addTileFeatures(i.range(1-d/a,h,1,y),i.data,a,r,a,c),o===a-1&&this._addTileFeatures(i.range(0,h,d/a,y),i.data,-1,r,a,c),c.features.length?c:null}getClusterExpansionZoom(n){let o=this._getOriginZoom(n)-1;for(;o<=this.options.maxZoom;){const r=this.getChildren(n);if(o++,r.length!==1)break;n=r[0].properties.cluster_id}return o}_appendLeaves(n,o,r,i,a){const l=this.getChildren(o);for(const x of l){const d=x.properties;if(d&&d.cluster?a+d.point_count<=i?a+=d.point_count:a=this._appendLeaves(n,d.cluster_id,r,i,a):a<i?a++:n.push(x),n.length===r)break}return a}_createTree(n){const o=new qo(n.length/this.stride|0,this.options.nodeSize,Float32Array);for(let r=0;r<n.length;r+=this.stride)o.add(n[r],n[r+1]);return o.finish(),o.data=n,o}_addTileFeatures(n,o,r,i,a,l){for(const x of n){const d=x*this.stride,h=o[d+Dt]>1;let y,c,f;if(h)y=As(o,d,this.clusterProps),c=o[d],f=o[d+1];else{const T=this.points[o[d+At]];y=T.properties;const[S,p]=T.geometry.coordinates;c=xo(S),f=yo(p)}const u={type:1,geometry:[[Math.round(this.options.extent*(c*a-r)),Math.round(this.options.extent*(f*a-i))]],tags:y};let m;h||this.options.generateId?m=o[d+At]:m=this.points[o[d+At]].id,m!==void 0&&(u.id=m),l.features.push(u)}}_limitZoom(n){return Math.max(this.options.minZoom,Math.min(Math.floor(+n),this.options.maxZoom+1))}_cluster(n,o){const{radius:r,extent:i,reduce:a,minPoints:l}=this.options,x=r/(i*Math.pow(2,o)),d=n.data,h=[],y=this.stride;for(let c=0;c<d.length;c+=y){if(d[c+Wt]<=o)continue;d[c+Wt]=o;const f=d[c],u=d[c+1],m=n.within(d[c],d[c+1],x),T=d[c+Dt];let S=T;for(const p of m){const P=p*y;d[P+Wt]>o&&(S+=d[P+Dt])}if(S>T&&S>=l){let p=f*T,P=u*T,M,R=-1;const L=((c/y|0)<<5)+(o+1)+this.points.length;for(const F of m){const C=F*y;if(d[C+Wt]<=o)continue;d[C+Wt]=o;const j=d[C+Dt];p+=d[C]*j,P+=d[C+1]*j,d[C+Fo]=L,a&&(M||(M=this._map(d,c,!0),R=this.clusterProps.length,this.clusterProps.push(M)),a(M,this._map(d,C)))}d[c+Fo]=L,h.push(p/S,P/S,1/0,L,-1,S),a&&h.push(R)}else{for(let p=0;p<y;p++)h.push(d[c+p]);if(S>1)for(const p of m){const P=p*y;if(!(d[P+Wt]<=o)){d[P+Wt]=o;for(let M=0;M<y;M++)h.push(d[P+M])}}}}return h}_getOriginId(n){return n-this.points.length>>5}_getOriginZoom(n){return(n-this.points.length)%32}_map(n,o,r){if(n[o+Dt]>1){const l=this.clusterProps[n[o+Ds]];return r?Object.assign({},l):l}const i=this.points[n[o+At]].properties,a=this.options.map(i);return r&&a===i?Object.assign({},a):a}}function Mi(e,n,o){return{type:"Feature",id:e[n+At],properties:As(e,n,o),geometry:{type:"Point",coordinates:[ld(e[n]),cd(e[n+1])]}}}function As(e,n,o){const r=e[n+Dt],i=r>=1e4?`${Math.round(r/1e3)}k`:r>=1e3?`${Math.round(r/100)/10}k`:r,a=e[n+Ds],l=a===-1?{}:Object.assign({},o[a]);return Object.assign(l,{cluster:!0,cluster_id:e[n+At],point_count:r,point_count_abbreviated:i})}function xo(e){return e/360+.5}function yo(e){const n=Math.sin(e*Math.PI/180),o=.5-.25*Math.log((1+n)/(1-n))/Math.PI;return o<0?0:o>1?1:o}function ld(e){return(e-.5)*360}function cd(e){const n=(180-e*360)*Math.PI/180;return 360*Math.atan(Math.exp(n))/Math.PI-90}const dd=({map:e,data:n,selectedLayerId:o="cluster-layer",dataset:r,fillColor:i="#3b82f6",strokeColor:a="#ffffff",opacity:l=.8,visible:x=!0,clusterRadius:d=50,clusterMaxZoom:h=16,radiusMinPixels:y=5,radiusMaxPixels:c=50,onClick:f,colorField:u,colorMapping:m})=>{const T=g.useRef(null),S=g.useRef(o),p=g.useRef(null),P=g.useMemo(()=>{if(!n||n.length===0)return[];const C=[];return n.forEach(j=>{if(!j.geometry)return;let z=[];switch(j.geometry.type){case"Point":z=[[j.geometry.coordinates[0],j.geometry.coordinates[1]]];break;case"MultiPoint":z=j.geometry.coordinates.map(k=>[k[0],k[1]]);break;case"Polygon":const b=j.geometry.coordinates[0],w=b.reduce((k,I)=>k+I[0],0)/b.length,v=b.reduce((k,I)=>k+I[1],0)/b.length;z=[[w,v]];break;default:return}z.forEach(([b,w])=>{C.push({type:"Feature",geometry:{type:"Point",coordinates:[b,w]},properties:j.properties||{}})})}),C},[n]);g.useEffect(()=>{if(P.length>0){const C=new ad({radius:d,maxZoom:h});C.load(P),p.current=C}},[P,d,h]);const M=g.useMemo(()=>{if(!p.current||!e)return[];try{const C=e.getZoom?Math.floor(e.getZoom()):10,j=e.getBounds?e.getBounds().toArray().flat():[-180,-90,180,90];return p.current.getClusters(j,C).map(b=>({position:b.geometry.coordinates,properties:b.properties,isCluster:!!b.properties.cluster,pointCount:b.properties.point_count||1,clusterId:b.properties.cluster_id}))}catch{return[]}},[e,P,p.current]),R=(C,j)=>{const b=(C.startsWith("#")?C:`#${C}`).replace("#",""),w=parseInt(b.slice(0,2),16),v=parseInt(b.slice(2,4),16),k=parseInt(b.slice(4,6),16);return[w,v,k,Math.round(j*255)]},L=g.useMemo(()=>C=>{var j;if(C.isCluster){const z=R(i,l);return[Math.max(0,z[0]-30),Math.max(0,z[1]-30),Math.max(0,z[2]-30),z[3]]}if(u&&m&&Object.keys(m).length>0){const z=(j=C.properties)==null?void 0:j[u];if(z!==void 0&&m[String(z)])return R(m[String(z)],l)}return R(i,l)},[u,m,i,l]),F=g.useMemo(()=>C=>C.isCluster?Math.min(50,10+Math.log2(C.pointCount)*5):8,[]);return g.useEffect(()=>{o&&(S.current=o)},[o]),g.useEffect(()=>{if(e)return()=>{const C=S.current;C&&(ce(C,null),T.current=null,S.current=void 0)}},[e]),g.useEffect(()=>{if(!e||!o)return;const C=new st.ScatterplotLayer({id:o,data:x&&M.length>0?M:[],getPosition:j=>j.position,getFillColor:L,getLineColor:R(a,l),getRadius:F,radiusMinPixels:y,radiusMaxPixels:c,stroked:!0,filled:!0,lineWidthMinPixels:2,pickable:!0,visible:x&&M.length>0,opacity:l,onClick:f,updateTriggers:{getFillColor:[u,m?JSON.stringify(m):"",i,l],getRadius:[]}});T.current=C,ce(o,C)},[e,o,M,x,L,F,a,l,y,c,f,u,m,i]),null},Io=(e,n)=>{const r=(e.startsWith("#")?e:`#${e}`).replace("#",""),i=parseInt(r.slice(0,2),16)||0,a=parseInt(r.slice(2,4),16)||0,l=parseInt(r.slice(4,6),16)||0;return[i,a,l,Math.round(n*255)]},ud=({map:e,data:n,selectedLayerId:o="h3cluster-layer",dataset:r,fillColor:i="#ff8c00",strokeColor:a="#000000",opacity:l=.8,visible:x=!0,resolution:d=7,stroked:h=!0,filled:y=!0,extruded:c=!1,elevationScale:f=1,onClick:u,colorField:m,colorMapping:T,heightField:S})=>{const p=g.useRef(null),P=g.useRef(void 0),M=g.useMemo(()=>{if(!n||n.length===0)return[];const R=new Map;return n.forEach(L=>{if(!L.geometry)return;let F=[];switch(L.geometry.type){case"Point":{const C=L.geometry.coordinates;C&&C.length>=2&&F.push([C[1],C[0]]);break}case"MultiPoint":L.geometry.coordinates.forEach(C=>{C&&C.length>=2&&F.push([C[1],C[0]])});break;case"Polygon":{const C=L.geometry.coordinates[0];if(C&&C.length>0){const j=C.reduce((b,w)=>b+w[0],0)/C.length,z=C.reduce((b,w)=>b+w[1],0)/C.length;F.push([z,j])}break}case"MultiPolygon":L.geometry.coordinates.forEach(C=>{if(C[0]&&C[0].length>0){const j=C[0].reduce((b,w)=>b+w[0],0)/C[0].length,z=C[0].reduce((b,w)=>b+w[1],0)/C[0].length;F.push([z,j])}});break;case"LineString":{const C=L.geometry.coordinates;if(C&&C.length>0){const j=Math.floor(C.length/2),z=C[j];z&&z.length>=2&&F.push([z[1],z[0]])}break}}F.forEach(([C,j])=>{try{const z=bo.latLngToCell(C,j,d),b=Math.max(0,d-2),w=bo.latLngToCell(C,j,b);if(R.has(w)){const v=R.get(w);v.hexagons.includes(z)||v.hexagons.push(z),v.count+=1}else{const[v,k]=bo.cellToLatLng(w);R.set(w,{hexagons:[z],properties:L.properties||{},count:1,center:[k,v]})}}catch{}})}),Array.from(R.values()).map((L,F)=>({id:F,hexagons:L.hexagons,properties:L.properties,count:L.count,center:L.center}))},[n,d]);return g.useEffect(()=>{if(!e||!o)return;const R=`${o}-${i.replace("#","")}-${d}-${l}`;P.current&&P.current!==R&&ce(P.current,null),P.current=R;const L=Io(i,l),F=Io(a,1),C=m&&T&&Object.keys(T).length>0?b=>{var k;const w=(k=b.properties)==null?void 0:k[m];if(w!==void 0&&T[String(w)])return Io(T[String(w)],l);const v=Math.min(1,b.count/10);return[L[0],L[1],L[2],Math.round((.5+v*.5)*255)]}:b=>{const w=Math.min(1,b.count/10);return[L[0],L[1],L[2],Math.round((.5+w*.5)*255)]},j=S?b=>{var v;const w=(v=b.properties)==null?void 0:v[S];return typeof w=="number"?w:parseFloat(w)||b.count*100}:b=>b.count*100,z=new So.H3ClusterLayer({id:R,data:x&&M.length>0?M:[],getHexagons:b=>b.hexagons,getFillColor:C,getLineColor:F,getLineWidth:2,lineWidthMinPixels:1,lineWidthMaxPixels:3,stroked:h,filled:y,extruded:c,getElevation:c?j:void 0,elevationScale:c?f:void 0,pickable:!0,visible:x&&M.length>0,opacity:l,onClick:u,updateTriggers:{getFillColor:[i,l,m,T],getElevation:[S]}});return p.current=z,ce(R,z),()=>{R&&ce(R,null)}},[e,o,M,x,i,a,l,d,h,y,c,f,u,m,T,S]),null},Bs="0123456789bcdefghjkmnpqrstuvwxyz";function pd(e,n,o=6){let r=-90,i=90,a=-180,l=180,x="",d=!0,h=0,y=0;for(;x.length<o;){if(d){const c=(a+l)/2;n>=c?(y|=1<<4-h,a=c):l=c}else{const c=(r+i)/2;e>=c?(y|=1<<4-h,r=c):i=c}d=!d,h<4?h++:(x+=Bs[y],h=0,y=0)}return x}function fd(e){let n=-90,o=90,r=-180,i=180,a=!0;for(const l of e){const x=Bs.indexOf(l);for(let d=4;d>=0;d--){const h=1<<d;a?x&h?r=(r+i)/2:i=(r+i)/2:x&h?n=(n+o)/2:o=(n+o)/2,a=!a}}return[n,r,o,i]}const gd=({map:e,data:n,selectedLayerId:o="geohash-layer",dataset:r,fillColor:i="#3b82f6",strokeColor:a="#ffffff",opacity:l=.7,visible:x=!0,precision:d=5,extruded:h=!1,elevationScale:y=1,stroked:c=!0,lineWidthMinPixels:f=1,onClick:u,colorField:m,colorMapping:T,heightField:S})=>{const p=g.useRef(null),P=g.useRef(o),M=g.useMemo(()=>{if(!n||n.length===0)return{type:"FeatureCollection",features:[]};const F=new Map;n.forEach(j=>{if(!j.geometry)return;let z=[];switch(j.geometry.type){case"Point":z=[[j.geometry.coordinates[0],j.geometry.coordinates[1]]];break;case"MultiPoint":z=j.geometry.coordinates.map(k=>[k[0],k[1]]);break;case"Polygon":const b=j.geometry.coordinates[0],w=b.reduce((k,I)=>k+I[0],0)/b.length,v=b.reduce((k,I)=>k+I[1],0)/b.length;z=[[w,v]];break;default:return}z.forEach(([b,w])=>{var v,k;try{const I=pd(w,b,d);F.has(I)||F.set(I,{count:0,sum:0,properties:[],colorFieldValues:new Map});const D=F.get(I);if(D.count++,D.properties.push(j.properties||{}),m&&((v=j.properties)==null?void 0:v[m])!==void 0){const B=String(j.properties[m]);D.colorFieldValues.set(B,(D.colorFieldValues.get(B)||0)+1)}if(S&&((k=j.properties)!=null&&k[S])){const B=parseFloat(j.properties[S]);isNaN(B)||(D.sum+=B)}}catch{}})});const C=[];return F.forEach((j,z)=>{try{const b=fd(z),w={type:"Polygon",coordinates:[[[b[1],b[0]],[b[3],b[0]],[b[3],b[2]],[b[1],b[2]],[b[1],b[0]]]]};let v;if(m&&j.colorFieldValues.size>0){let k=0;j.colorFieldValues.forEach((I,D)=>{I>k&&(k=I,v=D)})}C.push({type:"Feature",geometry:w,properties:{geohash:z,count:j.count,sum:j.sum,average:j.count>0?j.sum/j.count:0,...v!==void 0&&m?{[m]:v}:{}}})}catch{}}),{type:"FeatureCollection",features:C}},[n,d,S,m]),R=(F,C)=>{const z=(F.startsWith("#")?F:`#${F}`).replace("#",""),b=parseInt(z.slice(0,2),16),w=parseInt(z.slice(2,4),16),v=parseInt(z.slice(4,6),16);return[b,w,v,Math.round(C*255)]},L=g.useMemo(()=>S?F=>{var C,j;return((C=F.properties)==null?void 0:C.sum)||((j=F.properties)==null?void 0:j.count)*100||100}:F=>{var C;return((C=F.properties)==null?void 0:C.count)*100||100},[S]);return g.useEffect(()=>{if(!e||!o)return;const F=m&&T?`${m}-${JSON.stringify(T)}`:i.replace("#",""),C=`${o}-${F}`;P.current&&P.current!==C&&ce(P.current,null),P.current=C;const j=R(i,l),z=M.features.map(k=>{var I;return((I=k.properties)==null?void 0:I.count)||1}),b=Math.max(...z,1),w=k=>{var B,O;if(m&&T&&Object.keys(T).length>0){const N=(B=k.properties)==null?void 0:B[m];if(N!=null){const $=String(N);let _=T[$];if(!_){for(const U in T)if(U.toLowerCase()===$.toLowerCase()){_=T[U];break}}if(_)return R(_,l)}}const I=((O=k.properties)==null?void 0:O.count)||1,D=Math.min(1,I/b);return[Math.round(j[0]*(.4+D*.6)),Math.round(j[1]*(.4+D*.6)),Math.round(j[2]*(.4+D*.6)),j[3]]},v=new st.GeoJsonLayer({id:C,data:x&&M.features.length>0?M:{type:"FeatureCollection",features:[]},getFillColor:w,getLineColor:R(a,1),getElevation:L,extruded:h,elevationScale:y,stroked:c,lineWidthMinPixels:f,pickable:!0,visible:x&&M.features.length>0,opacity:l,onClick:u,updateTriggers:{getFillColor:[i,l,m,T],getElevation:[S]}});return p.current=v,ce(C,v),()=>{C&&ce(C,null)}},[e,o,M,x,L,a,l,h,y,c,f,u,i,S,m,T]),null};function hd(e,n,o){const r=Math.max(-85.05112878,Math.min(85.05112878,e));let i="";const a=Math.pow(2,o);let l=Math.floor((n+180)/360*a);const x=r*Math.PI/180;let d=Math.floor((1-Math.log(Math.tan(x)+1/Math.cos(x))/Math.PI)/2*a);l=Math.max(0,Math.min(a-1,l)),d=Math.max(0,Math.min(a-1,d));for(let h=o;h>0;h--){let y=0;const c=1<<h-1;(l&c)!==0&&(y+=1),(d&c)!==0&&(y+=2),i+=y}return i}function md(e){const n=e.length;let o=0,r=0;for(let c=0;c<n;c++){const f=1<<n-c-1,u=parseInt(e[c],10);u&1&&(o+=f),u&2&&(r+=f)}const i=Math.pow(2,n),a=o/i*360-180,l=(o+1)/i*360-180,x=Math.atan(Math.sinh(Math.PI*(1-2*(r+1)/i))),d=Math.atan(Math.sinh(Math.PI*(1-2*r/i))),h=x*180/Math.PI,y=d*180/Math.PI;return[a,h,l,y]}const Fi=(e,n)=>{const r=(e.startsWith("#")?e:`#${e}`).replace("#",""),i=parseInt(r.slice(0,2),16)||0,a=parseInt(r.slice(2,4),16)||0,l=parseInt(r.slice(4,6),16)||0;return[i,a,l,Math.round(n*255)]},xd=({map:e,data:n,selectedLayerId:o="quadkey-layer",dataset:r,fillColor:i="#3b82f6",strokeColor:a="#ffffff",opacity:l=.7,visible:x=!0,precision:d=6,extruded:h=!1,elevationScale:y=1,stroked:c=!0,lineWidthMinPixels:f=1,onClick:u,colorField:m,colorMapping:T,heightField:S})=>{const p=g.useRef(null),P=g.useRef(void 0),M=g.useMemo(()=>{if(!n||n.length===0)return{type:"FeatureCollection",features:[]};const L=new Map;n.forEach(C=>{if(!C.geometry)return;let j=[];switch(C.geometry.type){case"Point":j=[[C.geometry.coordinates[0],C.geometry.coordinates[1]]];break;case"MultiPoint":j=C.geometry.coordinates.map(b=>[b[0],b[1]]);break;case"Polygon":const z=C.geometry.coordinates[0];if(z&&z.length>0){const b=z.reduce((v,k)=>v+k[0],0)/z.length,w=z.reduce((v,k)=>v+k[1],0)/z.length;j=[[b,w]]}break;case"MultiPolygon":C.geometry.coordinates.forEach(b=>{if(b[0]&&b[0].length>0){const w=b[0].reduce((k,I)=>k+I[0],0)/b[0].length,v=b[0].reduce((k,I)=>k+I[1],0)/b[0].length;j.push([w,v])}});break;case"LineString":if(C.geometry.coordinates.length>0){const b=Math.floor(C.geometry.coordinates.length/2);j=[[C.geometry.coordinates[b][0],C.geometry.coordinates[b][1]]]}break;default:return}j.forEach(([z,b])=>{var w;try{if(isNaN(b)||isNaN(z)||b<-85.05||b>85.05||z<-180||z>180)return;const v=hd(b,z,d);L.has(v)||L.set(v,{count:0,sum:0,properties:[]});const k=L.get(v);if(k.count++,k.properties.push(C.properties||{}),S&&((w=C.properties)!=null&&w[S])){const I=parseFloat(C.properties[S]);isNaN(I)||(k.sum+=I)}}catch{}})});const F=[];return L.forEach((C,j)=>{try{const[z,b,w,v]=md(j);if(isNaN(z)||isNaN(b)||isNaN(w)||isNaN(v))return;const k={type:"Polygon",coordinates:[[[z,b],[w,b],[w,v],[z,v],[z,b]]]};F.push({type:"Feature",geometry:k,properties:{quadkey:j,count:C.count,sum:C.sum,average:C.count>0?C.sum/C.count:0}})}catch{}}),{type:"FeatureCollection",features:F}},[n,d,S]),R=g.useMemo(()=>S?L=>{var F,C;return((F=L.properties)==null?void 0:F.sum)||((C=L.properties)==null?void 0:C.count)*100||100}:L=>{var F;return((F=L.properties)==null?void 0:F.count)*100||100},[S]);return g.useEffect(()=>{if(!e||!o)return;const L=`${o}-${i.replace("#","")}`;P.current&&P.current!==L&&ce(P.current,null),P.current=L;const F=Fi(i,l),C=M.features.map(b=>{var w;return((w=b.properties)==null?void 0:w.count)||1}),j=Math.max(...C,1),z=new st.GeoJsonLayer({id:L,data:x&&M.features.length>0?M:{type:"FeatureCollection",features:[]},getFillColor:b=>{var k;const w=((k=b.properties)==null?void 0:k.count)||1,v=Math.min(1,w/j);return[Math.round(F[0]*(.4+v*.6)),Math.round(F[1]*(.4+v*.6)),Math.round(F[2]*(.4+v*.6)),F[3]]},getLineColor:Fi(a,1),getElevation:R,extruded:h,elevationScale:y,stroked:c,lineWidthMinPixels:f,pickable:!0,visible:x&&M.features.length>0,opacity:l,onClick:u,updateTriggers:{getFillColor:[i,l],getElevation:[S]}});return p.current=z,ce(L,z),()=>{L&&ce(L,null)}},[e,o,M,x,R,a,l,h,y,c,f,u,i,S,m,T]),null};function yd(e,n,o){const r=Math.pow(2,o),i=Math.floor((e+90)/180*r),a=Math.floor((n+180)/360*r);return`${o}_${i}_${a}`}function bd(e){const n=e.split("_"),o=parseInt(n[0],10),r=parseInt(n[1],10),i=parseInt(n[2],10),a=Math.pow(2,o),l=180/a,x=360/a,d=r*l-90,h=(r+1)*l-90,y=i*x-180,c=(i+1)*x-180;return[y,d,c,h]}const Ii=(e,n)=>{const r=(e.startsWith("#")?e:`#${e}`).replace("#",""),i=parseInt(r.slice(0,2),16)||0,a=parseInt(r.slice(2,4),16)||0,l=parseInt(r.slice(4,6),16)||0;return[i,a,l,Math.round(n*255)]},Cd=({map:e,data:n,selectedLayerId:o="s2-layer",dataset:r,fillColor:i="#3b82f6",strokeColor:a="#ffffff",opacity:l=.7,visible:x=!0,level:d=6,extruded:h=!1,elevationScale:y=1,stroked:c=!0,lineWidthMinPixels:f=1,onClick:u,colorField:m,colorMapping:T,heightField:S})=>{const p=g.useRef(null),P=g.useRef(void 0),M=g.useMemo(()=>{if(!n||n.length===0)return{type:"FeatureCollection",features:[]};const L=new Map;n.forEach(C=>{if(!C.geometry)return;let j=[];switch(C.geometry.type){case"Point":j=[[C.geometry.coordinates[0],C.geometry.coordinates[1]]];break;case"MultiPoint":j=C.geometry.coordinates.map(b=>[b[0],b[1]]);break;case"Polygon":const z=C.geometry.coordinates[0];if(z&&z.length>0){const b=z.reduce((v,k)=>v+k[0],0)/z.length,w=z.reduce((v,k)=>v+k[1],0)/z.length;j=[[b,w]]}break;case"MultiPolygon":C.geometry.coordinates.forEach(b=>{if(b[0]&&b[0].length>0){const w=b[0].reduce((k,I)=>k+I[0],0)/b[0].length,v=b[0].reduce((k,I)=>k+I[1],0)/b[0].length;j.push([w,v])}});break;case"LineString":if(C.geometry.coordinates.length>0){const b=Math.floor(C.geometry.coordinates.length/2);j=[[C.geometry.coordinates[b][0],C.geometry.coordinates[b][1]]]}break;default:return}j.forEach(([z,b])=>{var w;try{if(isNaN(b)||isNaN(z)||b<-90||b>90||z<-180||z>180)return;const v=yd(b,z,d);L.has(v)||L.set(v,{count:0,sum:0,properties:[]});const k=L.get(v);if(k.count++,k.properties.push(C.properties||{}),S&&((w=C.properties)!=null&&w[S])){const I=parseFloat(C.properties[S]);isNaN(I)||(k.sum+=I)}}catch{}})});const F=[];return L.forEach((C,j)=>{try{const[z,b,w,v]=bd(j);if(isNaN(z)||isNaN(b)||isNaN(w)||isNaN(v))return;const k={type:"Polygon",coordinates:[[[z,b],[w,b],[w,v],[z,v],[z,b]]]};F.push({type:"Feature",geometry:k,properties:{s2CellId:j,count:C.count,sum:C.sum,average:C.count>0?C.sum/C.count:0}})}catch{}}),{type:"FeatureCollection",features:F}},[n,d,S]),R=g.useMemo(()=>S?L=>{var F,C;return((F=L.properties)==null?void 0:F.sum)||((C=L.properties)==null?void 0:C.count)*100||100}:L=>{var F;return((F=L.properties)==null?void 0:F.count)*100||100},[S]);return g.useEffect(()=>{if(!e||!o)return;const L=`${o}-${i.replace("#","")}`;P.current&&P.current!==L&&ce(P.current,null),P.current=L;const F=Ii(i,l),C=M.features.map(b=>{var w;return((w=b.properties)==null?void 0:w.count)||1}),j=Math.max(...C,1),z=new st.GeoJsonLayer({id:L,data:x&&M.features.length>0?M:{type:"FeatureCollection",features:[]},getFillColor:b=>{var k;const w=((k=b.properties)==null?void 0:k.count)||1,v=Math.min(1,w/j);return[Math.round(F[0]*(.4+v*.6)),Math.round(F[1]*(.4+v*.6)),Math.round(F[2]*(.4+v*.6)),F[3]]},getLineColor:Ii(a,1),getElevation:R,extruded:h,elevationScale:y,stroked:c,lineWidthMinPixels:f,pickable:!0,visible:x&&M.features.length>0,opacity:l,onClick:u,updateTriggers:{getFillColor:[i,l],getElevation:[S]}});return p.current=z,ce(L,z),()=>{L&&ce(L,null)}},[e,o,M,x,R,a,l,h,y,c,f,u,i,S,m,T]),null},zi=(e,n)=>{const r=(e.startsWith("#")?e:`#${e}`).replace("#",""),i=parseInt(r.slice(0,2),16)||0,a=parseInt(r.slice(2,4),16)||0,l=parseInt(r.slice(4,6),16)||0;return[i,a,l,Math.round(n*255)]},vd=({map:e,data:n,selectedLayerId:o="line-layer",dataset:r,fillColor:i="#3b82f6",opacity:a=.8,visible:l=!0,widthScale:x=1,widthMinPixels:d=1,widthMaxPixels:h=10,onClick:y,colorField:c,colorMapping:f,widthField:u})=>{const m=g.useRef(null),T=g.useRef(void 0),S=g.useMemo(()=>{if(!n||n.length===0)return[];const M=[];return n.forEach(R=>{var L,F;if(R.geometry)switch(R.geometry.type){case"LineString":const C=R.geometry.coordinates;for(let j=0;j<C.length-1;j++)M.push({sourcePosition:[C[j][0],C[j][1],C[j][2]||0],targetPosition:[C[j+1][0],C[j+1][1],C[j+1][2]||0],properties:R.properties||{}});break;case"MultiLineString":R.geometry.coordinates.forEach(j=>{for(let z=0;z<j.length-1;z++)M.push({sourcePosition:[j[z][0],j[z][1],j[z][2]||0],targetPosition:[j[z+1][0],j[z+1][1],j[z+1][2]||0],properties:R.properties||{}})});break;case"Point":(L=R.properties)!=null&&L.targetLng&&((F=R.properties)!=null&&F.targetLat)&&M.push({sourcePosition:[R.geometry.coordinates[0],R.geometry.coordinates[1],0],targetPosition:[R.properties.targetLng,R.properties.targetLat,0],properties:R.properties});break}}),M},[n]),p=g.useMemo(()=>{const M=zi(i,a);return c&&f&&Object.keys(f).length>0?R=>{var F;const L=(F=R.properties)==null?void 0:F[c];return L!==void 0&&f[String(L)]?zi(f[String(L)],a):M}:M},[i,a,c,f]),P=g.useMemo(()=>u?M=>{var F;const R=(F=M.properties)==null?void 0:F[u];if(typeof R=="number")return Math.max(1,R);const L=parseFloat(R);return isNaN(L)?1:Math.max(1,L)}:1,[u]);return g.useEffect(()=>{if(!e||!o)return;const M=`${o}-${i.replace("#","")}`;T.current&&T.current!==M&&ce(T.current,null),T.current=M;const R=new st.LineLayer({id:M,data:l&&S.length>0?S:[],getSourcePosition:L=>L.sourcePosition,getTargetPosition:L=>L.targetPosition,getColor:p,getWidth:P,widthScale:x,widthMinPixels:d,widthMaxPixels:h,pickable:!0,visible:l&&S.length>0,opacity:a,onClick:y,updateTriggers:{getColor:[i,a,c,f],getWidth:[u]}});return m.current=R,ce(M,R),()=>{M&&ce(M,null)}},[e,o,S,l,i,a,p,P,x,d,h,y,c,f,u]),null},Ei=(e,n)=>{const r=(e.startsWith("#")?e:`#${e}`).replace("#",""),i=parseInt(r.slice(0,2),16)||0,a=parseInt(r.slice(2,4),16)||0,l=parseInt(r.slice(4,6),16)||0;return[i,a,l,Math.round(n*255)]},wd=({map:e,data:n,selectedLayerId:o="pointcloud-layer",dataset:r,fillColor:i="#3b82f6",opacity:a=.8,visible:l=!0,pointSize:x=10,sizeUnits:d="pixels",onClick:h,colorField:y,colorMapping:c,sizeField:f})=>{const u=g.useRef(null),m=g.useRef(void 0),T=g.useMemo(()=>{if(!n||n.length===0)return[];const p=[];return n.forEach(P=>{if(P.geometry)switch(P.geometry.type){case"Point":const M=P.geometry.coordinates;p.push({position:[M[0],M[1],M[2]||0],normal:[0,0,1],properties:P.properties||{}});break;case"MultiPoint":P.geometry.coordinates.forEach(L=>{p.push({position:[L[0],L[1],L[2]||0],normal:[0,0,1],properties:P.properties||{}})});break;case"Polygon":const R=P.geometry.coordinates[0];if(R&&R.length>0){const L=R.reduce((C,j)=>C+j[0],0)/R.length,F=R.reduce((C,j)=>C+j[1],0)/R.length;p.push({position:[L,F,0],normal:[0,0,1],properties:P.properties||{}})}break}}),p},[n]),S=g.useMemo(()=>{const p=Ei(i,a);return y&&c&&Object.keys(c).length>0?P=>{var R;const M=(R=P.properties)==null?void 0:R[y];return M!==void 0&&c[String(M)]?Ei(c[String(M)],a):p}:p},[i,a,y,c]);return g.useEffect(()=>{if(!e||!o)return;const p=`${o}-${i.replace("#","")}-${x}`;m.current&&m.current!==p&&ce(m.current,null),m.current=p;const P=new st.PointCloudLayer({id:p,data:l&&T.length>0?T:[],getPosition:M=>M.position,getNormal:M=>M.normal,getColor:S,pointSize:x,sizeUnits:d,pickable:!0,visible:l&&T.length>0,opacity:a,onClick:h,updateTriggers:{getColor:[i,a,y,c]}});return u.current=P,ce(p,P),()=>{p&&ce(p,null)}},[e,o,T,l,i,a,S,x,d,h,y,c]),null},zo=(e,n)=>{const r=(e.startsWith("#")?e:`#${e}`).replace("#",""),i=parseInt(r.slice(0,2),16)||0,a=parseInt(r.slice(2,4),16)||0,l=parseInt(r.slice(4,6),16)||0;return[i,a,l,Math.round(n*255)]},jd=({map:e,data:n,selectedLayerId:o="polygon-layer",dataset:r,fillColor:i="#3b82f6",strokeColor:a="#ffffff",opacity:l=.7,visible:x=!0,extruded:d=!1,elevationScale:h=1,wireframe:y=!1,lineWidthMinPixels:c=1,onClick:f,colorField:u,colorMapping:m,heightField:T})=>{const S=g.useRef(null),p=g.useRef(void 0),P=g.useRef(null),M=g.useRef(f),R=de.use.tooltipFields(),L=de.use.datasetTooltipFields();g.useEffect(()=>{M.current=f},[f]),g.useEffect(()=>{Ot()},[]);const F=g.useMemo(()=>{if(!n||n.length===0)return[];const b=[];return n.forEach(w=>{if(w.geometry)switch(w.geometry.type){case"Polygon":b.push({contour:w.geometry.coordinates[0],holes:w.geometry.coordinates.slice(1),properties:w.properties||{}});break;case"MultiPolygon":w.geometry.coordinates.forEach(v=>{b.push({contour:v[0],holes:v.slice(1),properties:w.properties||{}})});break}}),b},[n]),C=g.useMemo(()=>{const b=zo(i,l);return u&&m&&Object.keys(m).length>0?w=>{var k;const v=(k=w.properties)==null?void 0:k[u];return v!==void 0&&m[String(v)]?zo(m[String(v)],l):b}:b},[i,l,u,m]),j=g.useMemo(()=>T?b=>{var k;const w=(k=b.properties)==null?void 0:k[T];if(typeof w=="number")return w;const v=parseFloat(w);return isNaN(v)?100:v}:100,[T]),z=g.useCallback(b=>{var O,N;if(M.current&&M.current(b),!b||!b.object)return P.current&&(P.current.remove(),P.current=null),!1;const w=((O=b.object)==null?void 0:O.properties)||{};if(!e)return!1;P.current&&(P.current.remove(),P.current=null);let v=null;if(b.coordinate&&b.coordinate.length>=2&&(v=[b.coordinate[0],b.coordinate[1]]),!v)return!1;const k=r!=null&&r.id&&L[r.id]&&L[r.id].length>0?L[r.id]:R,I=(N=b.object)!=null&&N.contour?{type:"Polygon",coordinates:[b.object.contour]}:void 0,D=Nt(w,I,r,k),B=new Bt.Popup({closeButton:!0,closeOnClick:!1,className:"map-tooltip-popup",offset:15}).setLngLat(v).setDOMContent(D).addTo(e);return B.on("close",()=>{P.current=null}),P.current=B,!1},[e,r,R,L]);return g.useEffect(()=>{if(!e||!o)return;const b=`${o}-${i.replace("#","")}`;p.current&&p.current!==b&&ce(p.current,null),p.current=b;const w=new st.PolygonLayer({id:b,data:x&&F.length>0?F:[],getPolygon:v=>v.contour,getFillColor:C,getLineColor:zo(a,1),getElevation:j,extruded:d,elevationScale:h,wireframe:y,lineWidthMinPixels:c,stroked:!0,filled:!0,pickable:!0,visible:x&&F.length>0,opacity:l,onClick:z,updateTriggers:{getFillColor:[i,l,u,m],getElevation:[T]}});return S.current=w,ce(b,w),()=>{b&&ce(b,null),P.current&&(P.current.remove(),P.current=null)}},[e,o,F,x,i,a,l,C,j,d,h,y,c,z,u,m,T]),null},Eo=(e,n)=>{const r=(e.startsWith("#")?e:`#${e}`).replace("#",""),i=parseInt(r.slice(0,2),16)||0,a=parseInt(r.slice(2,4),16)||0,l=parseInt(r.slice(4,6),16)||0;return[i,a,l,Math.round(n*255)]},Sd=({map:e,data:n,selectedLayerId:o="solid-polygon-layer",dataset:r,fillColor:i="#3b82f6",lineColor:a="#505050",opacity:l=.8,visible:x=!0,extruded:d=!1,elevationScale:h=1,wireframe:y=!1,filled:c=!0,onClick:f,colorField:u,colorMapping:m,heightField:T})=>{const S=g.useRef(null),p=g.useRef(void 0),P=g.useMemo(()=>{if(!n||n.length===0)return[];const L=[];return n.forEach((F,C)=>{if(F.geometry)switch(F.geometry.type){case"Polygon":L.push({polygon:F.geometry.coordinates,properties:F.properties||{},index:C});break;case"MultiPolygon":F.geometry.coordinates.forEach((j,z)=>{L.push({polygon:j,properties:F.properties||{},index:C*1e3+z})});break}}),L},[n]),M=g.useMemo(()=>{const L=Eo(i,l);return u&&m&&Object.keys(m).length>0?F=>{var j;const C=(j=F.properties)==null?void 0:j[u];return C!==void 0&&m[String(C)]?Eo(m[String(C)],l):L}:L},[i,l,u,m]),R=g.useMemo(()=>T?L=>{var j;const F=(j=L.properties)==null?void 0:j[T];if(typeof F=="number")return F;const C=parseFloat(F);return isNaN(C)?1e3:C}:1e3,[T]);return g.useEffect(()=>{if(!e||!o)return;const L=`${o}-solidpoly`;p.current&&p.current!==L&&ce(p.current,null),p.current=L;const F=new st.SolidPolygonLayer({id:L,data:x&&P.length>0?P:[],getPolygon:C=>C.polygon,getFillColor:M,getLineColor:Eo(a,1),getElevation:R,extruded:d,elevationScale:h,wireframe:y,filled:c,pickable:!0,visible:x&&P.length>0,opacity:l,material:d?{ambient:.35,diffuse:.6,shininess:32,specularColor:[60,60,60]}:void 0,onClick:f,updateTriggers:{getFillColor:[i,l,u,m],getLineColor:[a],getElevation:[T]}});return S.current=F,ce(L,F),()=>{L&&ce(L,null)}},[e,o,P,x,i,a,l,M,R,d,h,y,c,f,u,m,T]),null},kd=(e,n)=>{const r=(e.startsWith("#")?e:`#${e}`).replace("#",""),i=parseInt(r.slice(0,2),16)||0,a=parseInt(r.slice(2,4),16)||0,l=parseInt(r.slice(4,6),16)||0;return[i,a,l,Math.round(n*255)]},Ld=({map:e,data:n,selectedLayerId:o="screengrid-layer",dataset:r,fillColor:i="#3b82f6",opacity:a=.8,visible:l=!0,cellSizePixels:x=20,colorRange:d,gpuAggregation:h=!0,aggregation:y="SUM",onClick:c,weightField:f})=>{const u=g.useRef(null),m=g.useRef(void 0),T=g.useMemo(()=>{if(!n||n.length===0)return[];const S=[];return n.forEach(p=>{var P,M;if(p.geometry)switch(p.geometry.type){case"Point":S.push({position:[p.geometry.coordinates[0],p.geometry.coordinates[1]],weight:f&&((P=p.properties)!=null&&P[f])&&parseFloat(p.properties[f])||1,properties:p.properties||{}});break;case"MultiPoint":p.geometry.coordinates.forEach(L=>{var F;S.push({position:[L[0],L[1]],weight:f&&((F=p.properties)!=null&&F[f])&&parseFloat(p.properties[f])||1,properties:p.properties||{}})});break;case"Polygon":const R=p.geometry.coordinates[0];if(R&&R.length>0){const L=R.reduce((C,j)=>C+j[0],0)/R.length,F=R.reduce((C,j)=>C+j[1],0)/R.length;S.push({position:[L,F],weight:f&&((M=p.properties)!=null&&M[f])&&parseFloat(p.properties[f])||1,properties:p.properties||{}})}break}}),S},[n,f]);return g.useEffect(()=>{if(!e||!o)return;const S=`${o}-${i.replace("#","")}-${x}`;m.current&&m.current!==S&&ce(m.current,null),m.current=S;const p=kd(i,1),[P,M,R]=p,L=d||[[P,M,R,25],[P,M,R,85],[P,M,R,127],[P,M,R,170],[P,M,R,212],[P,M,R,255]],F=new $o.ScreenGridLayer({id:S,data:l&&T.length>0?T:[],getPosition:C=>C.position,getWeight:C=>C.weight,cellSizePixels:x,colorRange:L,gpuAggregation:h,aggregation:y,pickable:!0,visible:l&&T.length>0,opacity:a,onClick:c,updateTriggers:{getWeight:[f],colorRange:[i]}});return u.current=F,ce(S,F),()=>{S&&ce(S,null)}},[e,o,T,l,i,a,x,d,h,y,c,f]),null},Ro=(e,n)=>{const r=(e.startsWith("#")?e:`#${e}`).replace("#",""),i=parseInt(r.slice(0,2),16)||0,a=parseInt(r.slice(2,4),16)||0,l=parseInt(r.slice(4,6),16)||0;return[i,a,l,Math.round(n*255)]},Td=({map:e,data:n,selectedLayerId:o="greatcircle-layer",dataset:r,sourceColor:i="#3b82f6",targetColor:a="#ef4444",opacity:l=.8,visible:x=!0,widthScale:d=1,widthMinPixels:h=1,widthMaxPixels:y=10,numSegments:c=50,onClick:f,colorField:u,colorMapping:m,widthField:T})=>{const S=g.useRef(null),p=g.useRef(void 0),P=g.useMemo(()=>{if(!n||n.length===0)return[];const F=[],C=[];if(n.forEach(j=>{if(j.geometry)switch(j.geometry.type){case"Point":C.push({coords:[j.geometry.coordinates[0],j.geometry.coordinates[1]],properties:j.properties||{}});break;case"Polygon":case"MultiPolygon":const z=j.geometry.type==="Polygon"?j.geometry.coordinates[0]:j.geometry.coordinates[0][0];if(z&&z.length>0){const b=z.reduce((v,k)=>v+k[0],0)/z.length,w=z.reduce((v,k)=>v+k[1],0)/z.length;C.push({coords:[b,w],properties:j.properties||{}})}break}}),n.forEach(j=>{if(j.geometry)switch(j.geometry.type){case"LineString":const z=j.geometry.coordinates;z.length>=2&&F.push({source:[z[0][0],z[0][1]],target:[z[z.length-1][0],z[z.length-1][1]],properties:j.properties||{}});break;case"MultiLineString":j.geometry.coordinates.forEach(w=>{w.length>=2&&F.push({source:[w[0][0],w[0][1]],target:[w[w.length-1][0],w[w.length-1][1]],properties:j.properties||{}})});break;case"Point":const b=j.properties||{};b.targetLng!==void 0&&b.targetLat!==void 0?F.push({source:[j.geometry.coordinates[0],j.geometry.coordinates[1]],target:[b.targetLng,b.targetLat],properties:b}):b.target_lng!==void 0&&b.target_lat!==void 0&&F.push({source:[j.geometry.coordinates[0],j.geometry.coordinates[1]],target:[b.target_lng,b.target_lat],properties:b});break}}),F.length===0&&C.length>=2)for(let j=0;j<C.length-1;j++)F.push({source:C[j].coords,target:C[j+1].coords,properties:C[j].properties});return F},[n]),M=g.useMemo(()=>{const F=Ro(i,l);return u&&m&&Object.keys(m).length>0?C=>{var z;const j=(z=C.properties)==null?void 0:z[u];return j!==void 0&&m[String(j)]?Ro(m[String(j)],l):F}:F},[i,l,u,m]),R=g.useMemo(()=>Ro(a,l),[a,l]),L=g.useMemo(()=>T?F=>{var z;const C=(z=F.properties)==null?void 0:z[T];if(typeof C=="number")return Math.max(1,C);const j=parseFloat(C);return isNaN(j)?2:Math.max(1,j)}:2,[T]);return g.useEffect(()=>{if(!e||!o)return;const F=`${o}-${i.replace("#","")}-${a.replace("#","")}`;p.current&&p.current!==F&&ce(p.current,null),p.current=F;const C=new So.GreatCircleLayer({id:F,data:x&&P.length>0?P:[],getSourcePosition:j=>j.source,getTargetPosition:j=>j.target,getSourceColor:M,getTargetColor:R,getWidth:L,widthScale:d,widthMinPixels:h,widthMaxPixels:y,numSegments:c,pickable:!0,visible:x&&P.length>0,opacity:l,onClick:f,updateTriggers:{getSourceColor:[i,l,u,m],getTargetColor:[a,l],getWidth:[T]}});return S.current=C,ce(F,C),()=>{F&&ce(F,null)}},[e,o,P,x,i,a,l,M,R,L,d,h,y,c,f,u,m,T]),null},Ri=(e,n)=>{const r=(e.startsWith("#")?e:`#${e}`).replace("#",""),i=parseInt(r.slice(0,2),16)||0,a=parseInt(r.slice(2,4),16)||0,l=parseInt(r.slice(4,6),16)||0;return[i,a,l,Math.round(n*255)]},Pd="https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/humanoid_quad.obj",Md=({map:e,data:n,selectedLayerId:o="simplemesh-layer",dataset:r,fillColor:i="#3b82f6",opacity:a=.8,visible:l=!0,sizeScale:x=200,wireframe:d=!1,onClick:h,colorField:y,colorMapping:c,sizeField:f})=>{const u=g.useRef(null),m=g.useRef(void 0),T=g.useMemo(()=>{if(!n||n.length===0)return[];const S=[];return n.forEach((p,P)=>{if(p.geometry)switch(p.geometry.type){case"Point":{const M=p.geometry.coordinates;M&&M.length>=2&&S.push({position:[M[0],M[1],M[2]||0],properties:p.properties||{},index:P});break}case"MultiPoint":p.geometry.coordinates.forEach((M,R)=>{M&&M.length>=2&&S.push({position:[M[0],M[1],M[2]||0],properties:p.properties||{},index:P*1e3+R})});break;case"Polygon":{const M=p.geometry.coordinates[0];if(M&&M.length>0){const R=M.reduce((F,C)=>F+C[0],0)/M.length,L=M.reduce((F,C)=>F+C[1],0)/M.length;S.push({position:[R,L,0],properties:p.properties||{},index:P})}break}case"MultiPolygon":p.geometry.coordinates.forEach((M,R)=>{if(M[0]&&M[0].length>0){const L=M[0].reduce((C,j)=>C+j[0],0)/M[0].length,F=M[0].reduce((C,j)=>C+j[1],0)/M[0].length;S.push({position:[L,F,0],properties:p.properties||{},index:P*1e3+R})}});break;case"LineString":{const M=p.geometry.coordinates;if(M&&M.length>0){const R=Math.floor(M.length/2),L=M[R];L&&L.length>=2&&S.push({position:[L[0],L[1],L[2]||0],properties:p.properties||{},index:P})}break}}}),S},[n]);return g.useEffect(()=>{if(!e||!o)return;const S=`${o}-${i.replace("#","")}-${x}`;m.current&&m.current!==S&&ce(m.current,null),m.current=S;const p=Ri(i,1),P=y&&c&&Object.keys(c).length>0?L=>{var C;const F=(C=L.properties)==null?void 0:C[y];return F!==void 0&&c[String(F)]?Ri(c[String(F)],1):p}:p,M=f?L=>{var z;const F=(z=L.properties)==null?void 0:z[f],C=typeof F=="number"?F:parseFloat(F)||1,j=Math.max(.1,Math.min(10,C));return[j,j,j]}:[1,1,1],R=new Gi.SimpleMeshLayer({id:S,data:l&&T.length>0?T:[],mesh:Pd,loaders:[$s.OBJLoader],getPosition:L=>L.position,getColor:P,getScale:M,getOrientation:L=>[0,L.index*45%360,0],sizeScale:x,wireframe:d,material:{ambient:.4,diffuse:.7,shininess:32,specularColor:[60,60,60]},pickable:!0,visible:l&&T.length>0,opacity:a,onClick:h,updateTriggers:{getColor:[i,y,c],getScale:[f]}});return u.current=R,ce(S,R),()=>{S&&ce(S,null)}},[e,o,T,l,i,a,x,d,h,y,c,f]),null},Di=(e,n)=>{const r=(e.startsWith("#")?e:`#${e}`).replace("#",""),i=parseInt(r.slice(0,2),16)||0,a=parseInt(r.slice(2,4),16)||0,l=parseInt(r.slice(4,6),16)||0;return[i,a,l,Math.round(n*255)]},Fd={boxAnimated:"https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/BoxAnimated/glTF-Binary/BoxAnimated.glb"},Id=Fd.boxAnimated,zd=({map:e,data:n,selectedLayerId:o="scenegraph-layer",dataset:r,fillColor:i="#ffffff",opacity:a=1,visible:l=!0,sizeScale:x=500,scenegraph:d=Id,onClick:h,colorField:y,colorMapping:c,sizeField:f,animations:u=!0,animationSpeed:m=5})=>{const T=g.useRef(null),S=g.useRef(void 0),p=g.useMemo(()=>{if(!n||n.length===0)return[];const P=[];return n.forEach((M,R)=>{if(M.geometry)switch(M.geometry.type){case"Point":{const L=M.geometry.coordinates;L&&L.length>=2&&P.push({position:[L[0],L[1],L[2]||0],properties:M.properties||{},index:R});break}case"MultiPoint":M.geometry.coordinates.forEach((L,F)=>{L&&L.length>=2&&P.push({position:[L[0],L[1],L[2]||0],properties:M.properties||{},index:R*1e3+F})});break;case"Polygon":{const L=M.geometry.coordinates[0];if(L&&L.length>0){const F=L.reduce((j,z)=>j+z[0],0)/L.length,C=L.reduce((j,z)=>j+z[1],0)/L.length;P.push({position:[F,C,0],properties:M.properties||{},index:R})}break}case"MultiPolygon":M.geometry.coordinates.forEach((L,F)=>{if(L[0]&&L[0].length>0){const C=L[0].reduce((z,b)=>z+b[0],0)/L[0].length,j=L[0].reduce((z,b)=>z+b[1],0)/L[0].length;P.push({position:[C,j,0],properties:M.properties||{},index:R*1e3+F})}});break;case"LineString":{const L=M.geometry.coordinates;if(L&&L.length>0){const F=Math.floor(L.length/2),C=L[F];C&&C.length>=2&&P.push({position:[C[0],C[1],C[2]||0],properties:M.properties||{},index:R})}break}}}),P},[n]);return g.useEffect(()=>{if(!e||!o)return;const P=`${o}-${i.replace("#","")}-${x}`;S.current&&S.current!==P&&ce(S.current,null),S.current=P;const M=Di(i,1),R=y&&c&&Object.keys(c).length>0?j=>{var b;const z=(b=j.properties)==null?void 0:b[y];return z!==void 0&&c[String(z)]?Di(c[String(z)],1):M}:M,L=f?j=>{var v;const z=(v=j.properties)==null?void 0:v[f],b=typeof z=="number"?z:parseFloat(z)||1,w=Math.max(.1,Math.min(10,b));return[w,w,w]}:[1,1,1],F=j=>[0,j.index*37%360,90],C=new Gi.ScenegraphLayer({id:P,data:l&&p.length>0?p:[],scenegraph:d,getPosition:j=>j.position,getColor:R,getScale:L,getOrientation:F,sizeScale:x,sizeMinPixels:0,sizeMaxPixels:Number.MAX_SAFE_INTEGER,_animations:u?{"*":{speed:m}}:void 0,_lighting:"pbr",pickable:!0,visible:l&&p.length>0,opacity:a,onClick:h,updateTriggers:{getColor:[i,y,c],getScale:[f],getOrientation:[]}});return T.current=C,ce(P,C),()=>{P&&ce(P,null)}},[e,o,p,l,i,a,x,d,h,y,c,f,u,m]),null},Ai=e=>{const o=(e.startsWith("#")?e:`#${e}`).replace("#",""),r=parseInt(o.slice(0,2),16)||253,i=parseInt(o.slice(2,4),16)||128,a=parseInt(o.slice(4,6),16)||93;return[r,i,a]},Ed=({map:e,data:n,selectedLayerId:o="animated-trips-layer",dataset:r,fillColor:i="#fd805d",opacity:a=.8,visible:l=!0,trailLength:x=600,widthMinPixels:d=8,widthMaxPixels:h=12,capRounded:y=!0,jointRounded:c=!0,fadeTrail:f=!0,animationSpeed:u=5,onClick:m,colorField:T,colorMapping:S})=>{const p=g.useRef(null),P=g.useRef(void 0),[M,R]=g.useState(0),L=g.useRef(null),F=g.useRef(Date.now()),{trips:C,loopLength:j}=g.useMemo(()=>{if(!n||n.length===0)return{trips:[],loopLength:1800};const z=[];let b=0;return n.forEach((w,v)=>{const k=w==null?void 0:w.geometry;if(!k)return;let I=[];if(k.type==="LineString"&&k.coordinates?I=k.coordinates:k.type==="MultiLineString"&&Array.isArray(k.coordinates)?k.coordinates.forEach(D=>{I=I.concat(D)}):k.type==="Polygon"&&k.coordinates&&k.coordinates[0]?I=k.coordinates[0]:k.type==="MultiPolygon"&&Array.isArray(k.coordinates)&&k.coordinates[0]&&k.coordinates[0][0]&&(I=k.coordinates[0][0]),I.length>=2){const D=I.map((O,N)=>({coordinates:[O[0],O[1]],timestamp:N*30})),B=D[D.length-1].timestamp;B>b&&(b=B),z.push({waypoints:D,properties:w.properties||{},index:v})}}),{trips:z,loopLength:b+x}},[n,x]);return g.useEffect(()=>{if(!l||C.length===0||!e)return;const z=()=>{const w=(Date.now()-F.current)*u/100%j;R(w),L.current=requestAnimationFrame(z)};return F.current=Date.now(),L.current=requestAnimationFrame(z),()=>{L.current&&cancelAnimationFrame(L.current)}},[l,C.length,e,j,u]),g.useEffect(()=>{if(!e||!o||C.length===0)return;const z=`${o}-trips`;P.current&&P.current!==z&&ce(P.current,null),P.current=z;const b=Ai(i),w=T&&S&&Object.keys(S).length>0?k=>{var D;const I=(D=k.properties)==null?void 0:D[T];return I!==void 0&&S[String(I)]?Ai(S[String(I)]):b}:b,v=new So.TripsLayer({id:z,data:l?C:[],getPath:k=>k.waypoints.map(I=>I.coordinates),getTimestamps:k=>k.waypoints.map(I=>I.timestamp),getColor:w,currentTime:M,trailLength:x,fadeTrail:f,capRounded:y,jointRounded:c,widthMinPixels:d,widthMaxPixels:h,opacity:a,pickable:!0,onClick:m,updateTriggers:{getColor:[i,T,S]}});p.current=v,ce(z,v)},[e,o,C,l,i,a,M,x,f,y,c,d,h,m,T,S]),g.useEffect(()=>()=>{L.current&&cancelAnimationFrame(L.current),P.current&&ce(P.current,null)},[]),null},Rd=()=>{const e=de.use.uploadedDatasets(),n=de.use.map(),{layerConfigs:o}=oo();return n?t.jsx(t.Fragment,{children:e.map(r=>{var x,d,h,y,c,f,u,m,T,S,p,P,M,R,L,F,C,j,z,b,w,v,k,I,D,B,O,N,$,_,U,H,q,ae,xe,ie,Me,we,me,Ie,be,je,ue,Xe,Ve,Qe,He,xt,Le,Je,St,bt,Ct,at,A,ee,oe,te,le,Fe,he,G,fe,ne,pe,Ee,ke,V,W,X,K,ge,Re,ye,Se,$e,Te,_e,qe,Be,Oe,Pe,Ke,rt,ot,nt,lt,vt,kt,wt,re,Ae,Ne,se,Ge,E,Y,Q,J,Z,De,Ce,Ye,Ze,it,We,ct,dt,ft,Ft,gt,tt,ht,Lt,It,Tt,yt,zt,io,Yo,Zo,Xo,Ko,Qo,er,tr,or,rr,nr,ir,sr,ar,lr,cr,dr,ur,pr,fr,gr,hr,mr,xr,yr,br,Cr,vr,wr,jr,Sr,kr,Lr,Tr,Pr,Mr,Fr,Ir,zr,Er,Rr,Dr,Ar,Br,Nr,Or,Wr,Gr,$r,Hr,Vr,_r,Ur,Jr,qr,Yr,Zr,Xr,Kr,Qr,en,tn,on,rn,nn,sn,an,ln,cn,dn,un,pn,fn,gn,hn,mn,xn,yn,bn,Cn,vn,wn,jn,Sn,kn,Ln,Tn,Pn,Mn,Fn,In,zn,En,Rn,Dn,An,Bn,Nn,On,Wn,Gn,$n,Hn,Vn,_n,Un,Jn,qn,Yn,Zn,Xn;const i=o[r.id];if(!i)return null;const a=i.visualizationType||"geojson",l=i.visible??!0;return t.jsxs("div",{style:{display:"none"},children:[a==="grid"&&r.geojson&&t.jsx(Yc,{map:n,data:r.geojson.features||[],selectedLayerId:`grid-layer-${r.id}`,dataset:r,fillColor:((x=i.styleConfig)==null?void 0:x.fillColor)||r.color,visible:l,opacity:((d=i.styleConfig)==null?void 0:d.opacity)??.7,cellSize:((h=i.styleConfig)==null?void 0:h.cellSize)??1e3,extruded:((y=i.styleConfig)==null?void 0:y.extruded)??!0,elevationScale:((c=i.styleConfig)==null?void 0:c.elevationScale)??((f=i.colorConfig)!=null&&f.heightField?.1:1),colorField:(u=i.colorConfig)==null?void 0:u.colorField,colorMapping:(m=i.colorConfig)==null?void 0:m.colorMapping,heightField:(T=i.colorConfig)==null?void 0:T.heightField}),a==="h3"&&r.geojson&&t.jsx(Gc,{map:n,data:r.geojson.features||[],selectedLayerId:`h3-layer-${r.id}`,dataset:r,fillColor:((S=i.styleConfig)==null?void 0:S.fillColor)||r.color,visible:l,opacity:((p=i.styleConfig)==null?void 0:p.opacity)??.7,elevationScale:((P=i.styleConfig)==null?void 0:P.elevationScale)??1,colorField:(M=i.colorConfig)==null?void 0:M.colorField,colorMapping:(R=i.colorConfig)==null?void 0:R.colorMapping,heightField:(L=i.colorConfig)==null?void 0:L.heightField}),(a==="path"||a==="line")&&r.geojson&&t.jsx(_c,{map:n,data:r.geojson.features||[],selectedLayerId:`path-layer-${r.id}-${((F=i.styleConfig)==null?void 0:F.dashPattern)||"solid"}`,dataset:r,fillColor:(C=i.styleConfig)==null?void 0:C.fillColor,strokeColor:(j=i.styleConfig)==null?void 0:j.strokeColor,visible:l,opacity:((z=i.styleConfig)==null?void 0:z.opacity)??.8,strokeWidth:((b=i.styleConfig)==null?void 0:b.strokeWidth)??1,colorField:(w=i.colorConfig)==null?void 0:w.colorField,colorMapping:(v=i.colorConfig)==null?void 0:v.colorMapping,dashPattern:(k=i.styleConfig)==null?void 0:k.dashPattern},`path-layer-${r.id}-${((I=i.styleConfig)==null?void 0:I.strokeColor)||"default"}-${((D=i.styleConfig)==null?void 0:D.fillColor)||"default"}-${((B=i.styleConfig)==null?void 0:B.dashPattern)||"solid"}`),a==="geojson"&&r.geojson&&t.jsx(Jc,{map:n,data:r.geojson,selectedLayerId:`geojson-layer-${r.id}`,dataset:r,fillColor:((O=i.styleConfig)==null?void 0:O.fillColor)||r.color,strokeColor:(N=i.styleConfig)==null?void 0:N.strokeColor,visible:l,opacity:(($=i.styleConfig)==null?void 0:$.opacity)??.8,strokeWidth:((_=i.styleConfig)==null?void 0:_.strokeWidth)??3,pointRadius:((U=i.styleConfig)==null?void 0:U.pointRadius)??5,colorField:(H=i.colorConfig)==null?void 0:H.colorField,colorMapping:(q=i.colorConfig)==null?void 0:q.colorMapping},`geojson-layer-${r.id}-${((ae=i.styleConfig)==null?void 0:ae.strokeColor)||"default"}-${((xe=i.styleConfig)==null?void 0:xe.fillColor)||r.color||"default"}`),(a==="point"||a==="scatterplot")&&r.geojson&&t.jsx(Zc,{map:n,data:r.geojson.features||[],selectedLayerId:`scatterplot-layer-${r.id}`,dataset:r,fillColor:((ie=i.styleConfig)==null?void 0:ie.fillColor)||r.color,strokeColor:((Me=i.styleConfig)==null?void 0:Me.strokeColor)||"#ffffff",visible:l,opacity:((we=i.styleConfig)==null?void 0:we.opacity)??.8,radius:((me=i.styleConfig)==null?void 0:me.pointRadius)??5,radiusScale:1,radiusMinPixels:1,radiusMaxPixels:100,colorField:(Ie=i.colorConfig)==null?void 0:Ie.colorField,colorMapping:(be=i.colorConfig)==null?void 0:be.colorMapping,radiusField:(je=i.colorConfig)==null?void 0:je.heightField},`scatterplot-${r.id}-${((ue=i.styleConfig)==null?void 0:ue.fillColor)||"default"}-${((Xe=i.styleConfig)==null?void 0:Xe.pointRadius)??5}-${((Ve=i.colorConfig)==null?void 0:Ve.colorField)||"none"}`),a==="heatmap"&&r.geojson&&t.jsx(Xc,{map:n,data:r.geojson.features||[],selectedLayerId:`heatmap-layer-${r.id}`,dataset:r,visible:l,opacity:((Qe=i.styleConfig)==null?void 0:Qe.opacity)??.8,radius:((He=i.styleConfig)==null?void 0:He.pointRadius)??50,intensity:((xt=i.styleConfig)==null?void 0:xt.intensity)??1,weightField:(Le=i.colorConfig)==null?void 0:Le.heightField},`heatmap-${r.id}-${((Je=i.styleConfig)==null?void 0:Je.pointRadius)??50}-${((St=i.styleConfig)==null?void 0:St.intensity)??1}`),a==="hexbin"&&r.geojson&&t.jsx(Qc,{map:n,data:r.geojson.features||[],selectedLayerId:`hexbin-layer-${r.id}`,dataset:r,fillColor:((bt=i.styleConfig)==null?void 0:bt.fillColor)||r.color,visible:l,opacity:((Ct=i.styleConfig)==null?void 0:Ct.opacity)??.8,radius:(((at=i.styleConfig)==null?void 0:at.pointRadius)??5)*100,extruded:!0,elevationScale:((A=i.styleConfig)==null?void 0:A.elevationScale)??1,colorField:(ee=i.colorConfig)==null?void 0:ee.colorField,colorMapping:(oe=i.colorConfig)==null?void 0:oe.colorMapping,heightField:(te=i.colorConfig)==null?void 0:te.heightField},`hexbin-${r.id}-${((le=i.styleConfig)==null?void 0:le.fillColor)||"default"}-${((Fe=i.colorConfig)==null?void 0:Fe.colorField)||"none"}-${((he=i.styleConfig)==null?void 0:he.elevationScale)??1}-${((G=i.styleConfig)==null?void 0:G.pointRadius)??5}`),a==="column"&&r.geojson&&t.jsx(ed,{map:n,data:r.geojson.features||[],selectedLayerId:`column-layer-${r.id}`,dataset:r,fillColor:((fe=i.styleConfig)==null?void 0:fe.fillColor)||r.color,strokeColor:((ne=i.styleConfig)==null?void 0:ne.strokeColor)||"#ffffff",visible:l,opacity:((pe=i.styleConfig)==null?void 0:pe.opacity)??.8,radius:((Ee=i.styleConfig)==null?void 0:Ee.pointRadius)??100,extruded:!0,elevationScale:((ke=i.styleConfig)==null?void 0:ke.elevationScale)??1,colorField:(V=i.colorConfig)==null?void 0:V.colorField,colorMapping:(W=i.colorConfig)==null?void 0:W.colorMapping,heightField:(X=i.colorConfig)==null?void 0:X.heightField},`column-${r.id}-${((K=i.styleConfig)==null?void 0:K.fillColor)||"default"}-${((ge=i.styleConfig)==null?void 0:ge.elevationScale)??1}`),a==="arc"&&r.geojson&&t.jsx(td,{map:n,data:r.geojson.features||[],selectedLayerId:`arc-layer-${r.id}`,dataset:r,sourceColor:((Re=i.styleConfig)==null?void 0:Re.fillColor)||r.color,targetColor:((ye=i.styleConfig)==null?void 0:ye.strokeColor)||"#ef4444",visible:l,opacity:((Se=i.styleConfig)==null?void 0:Se.opacity)??.8,getWidth:(($e=i.styleConfig)==null?void 0:$e.strokeWidth)??2,widthMinPixels:1,widthMaxPixels:20,colorField:(Te=i.colorConfig)==null?void 0:Te.colorField,colorMapping:(_e=i.colorConfig)==null?void 0:_e.colorMapping},`arc-${r.id}-${((qe=i.styleConfig)==null?void 0:qe.fillColor)||"default"}-${((Be=i.styleConfig)==null?void 0:Be.strokeWidth)??2}-${((Oe=i.colorConfig)==null?void 0:Oe.colorField)||"none"}`),a==="contour"&&r.geojson&&t.jsx(od,{map:n,data:r.geojson.features||[],selectedLayerId:`contour-layer-${r.id}`,dataset:r,fillColor:((Pe=i.styleConfig)==null?void 0:Pe.fillColor)||r.color,visible:l,opacity:((Ke=i.styleConfig)==null?void 0:Ke.opacity)??.8,cellSize:(rt=i.styleConfig)!=null&&rt.pointRadius?i.styleConfig.pointRadius*50:500,weightField:(ot=i.colorConfig)==null?void 0:ot.heightField},`contour-${r.id}-${((nt=i.styleConfig)==null?void 0:nt.pointRadius)??10}-${((lt=i.styleConfig)==null?void 0:lt.fillColor)||r.color}-${((vt=i.colorConfig)==null?void 0:vt.heightField)||"none"}`),a==="icon"&&r.geojson&&t.jsx(nd,{map:n,data:r.geojson.features||[],selectedLayerId:`icon-layer-${r.id}`,dataset:r,visible:l,opacity:((kt=i.styleConfig)==null?void 0:kt.opacity)??1,sizeScale:(wt=i.styleConfig)!=null&&wt.pointRadius?Math.max(5,Math.min(i.styleConfig.pointRadius,50)):15,fillColor:((re=i.styleConfig)==null?void 0:re.fillColor)||r.color,iconType:((Ae=i.styleConfig)==null?void 0:Ae.iconType)||"marker",colorField:(Ne=i.colorConfig)==null?void 0:Ne.colorField,colorMapping:(se=i.colorConfig)==null?void 0:se.colorMapping,sizeField:(Ge=i.colorConfig)==null?void 0:Ge.heightField},`icon-${r.id}-${((E=i.styleConfig)==null?void 0:E.iconType)||"marker"}-${((Y=i.styleConfig)==null?void 0:Y.fillColor)||"default"}-${((Q=i.styleConfig)==null?void 0:Q.pointRadius)??20}`),a==="text"&&r.geojson&&t.jsx(id,{map:n,data:r.geojson.features||[],selectedLayerId:`text-layer-${r.id}`,dataset:r,textColor:((J=i.styleConfig)==null?void 0:J.fillColor)||"#000000",visible:l,opacity:((Z=i.styleConfig)==null?void 0:Z.opacity)??1,sizeScale:(De=i.styleConfig)!=null&&De.pointRadius?i.styleConfig.pointRadius/10:1,textField:(Ce=i.colorConfig)==null?void 0:Ce.colorField,sizeField:(Ye=i.colorConfig)==null?void 0:Ye.heightField,colorField:(Ze=i.colorConfig)==null?void 0:Ze.colorField,colorMapping:(it=i.colorConfig)==null?void 0:it.colorMapping}),a==="cluster"&&r.geojson&&t.jsx(dd,{map:n,data:r.geojson.features||[],selectedLayerId:`cluster-layer-${r.id}`,dataset:r,fillColor:((We=i.styleConfig)==null?void 0:We.fillColor)||r.color,strokeColor:((ct=i.styleConfig)==null?void 0:ct.strokeColor)||"#ffffff",visible:l,opacity:((dt=i.styleConfig)==null?void 0:dt.opacity)??.8,clusterRadius:((ft=i.styleConfig)==null?void 0:ft.pointRadius)??50,colorField:(Ft=i.colorConfig)==null?void 0:Ft.colorField,colorMapping:(gt=i.colorConfig)==null?void 0:gt.colorMapping}),a==="h3cluster"&&r.geojson&&t.jsx(ud,{map:n,data:r.geojson.features||[],selectedLayerId:`h3cluster-layer-${r.id}`,dataset:r,fillColor:((tt=i.styleConfig)==null?void 0:tt.fillColor)||r.color,strokeColor:((ht=i.styleConfig)==null?void 0:ht.strokeColor)||"#ffffff",visible:l,opacity:((Lt=i.styleConfig)==null?void 0:Lt.opacity)??.8,resolution:7,colorField:(It=i.colorConfig)==null?void 0:It.colorField,colorMapping:(Tt=i.colorConfig)==null?void 0:Tt.colorMapping,heightField:(yt=i.colorConfig)==null?void 0:yt.heightField},`h3cluster-${r.id}-${((zt=i.styleConfig)==null?void 0:zt.fillColor)||r.color}-${((io=i.styleConfig)==null?void 0:io.opacity)??.8}`),a==="geohash"&&r.geojson&&t.jsx(gd,{map:n,data:r.geojson.features||[],selectedLayerId:`geohash-layer-${r.id}`,dataset:r,fillColor:((Yo=i.styleConfig)==null?void 0:Yo.fillColor)||r.color,strokeColor:((Zo=i.styleConfig)==null?void 0:Zo.strokeColor)||"#ffffff",visible:l,opacity:((Xo=i.styleConfig)==null?void 0:Xo.opacity)??.7,extruded:!0,elevationScale:((Ko=i.styleConfig)==null?void 0:Ko.elevationScale)??1,colorField:(Qo=i.colorConfig)==null?void 0:Qo.colorField,colorMapping:(er=i.colorConfig)==null?void 0:er.colorMapping,heightField:(tr=i.colorConfig)==null?void 0:tr.heightField},`geohash-${r.id}-${((or=i.styleConfig)==null?void 0:or.fillColor)||r.color}-${((rr=i.styleConfig)==null?void 0:rr.opacity)??.7}-${((nr=i.styleConfig)==null?void 0:nr.elevationScale)??1}-${((ir=i.colorConfig)==null?void 0:ir.colorField)||""}-${JSON.stringify(((sr=i.colorConfig)==null?void 0:sr.colorMapping)||{})}`),a==="quadkey"&&r.geojson&&t.jsx(xd,{map:n,data:r.geojson.features||[],selectedLayerId:`quadkey-layer-${r.id}`,dataset:r,fillColor:((ar=i.styleConfig)==null?void 0:ar.fillColor)||r.color,strokeColor:((lr=i.styleConfig)==null?void 0:lr.strokeColor)||"#ffffff",visible:l,opacity:((cr=i.styleConfig)==null?void 0:cr.opacity)??.7,precision:6,extruded:!0,elevationScale:((dr=i.styleConfig)==null?void 0:dr.elevationScale)??1,colorField:(ur=i.colorConfig)==null?void 0:ur.colorField,colorMapping:(pr=i.colorConfig)==null?void 0:pr.colorMapping,heightField:(fr=i.colorConfig)==null?void 0:fr.heightField},`quadkey-${r.id}-${((gr=i.styleConfig)==null?void 0:gr.fillColor)||r.color}-${((hr=i.styleConfig)==null?void 0:hr.opacity)??.7}-${((mr=i.styleConfig)==null?void 0:mr.elevationScale)??1}`),a==="s2"&&r.geojson&&t.jsx(Cd,{map:n,data:r.geojson.features||[],selectedLayerId:`s2-layer-${r.id}`,dataset:r,fillColor:((xr=i.styleConfig)==null?void 0:xr.fillColor)||r.color,strokeColor:((yr=i.styleConfig)==null?void 0:yr.strokeColor)||"#ffffff",visible:l,opacity:((br=i.styleConfig)==null?void 0:br.opacity)??.7,level:6,extruded:!0,elevationScale:((Cr=i.styleConfig)==null?void 0:Cr.elevationScale)??1,colorField:(vr=i.colorConfig)==null?void 0:vr.colorField,colorMapping:(wr=i.colorConfig)==null?void 0:wr.colorMapping,heightField:(jr=i.colorConfig)==null?void 0:jr.heightField},`s2-${r.id}-${((Sr=i.styleConfig)==null?void 0:Sr.fillColor)||r.color}-${((kr=i.styleConfig)==null?void 0:kr.opacity)??.7}-${((Lr=i.styleConfig)==null?void 0:Lr.elevationScale)??1}`),a==="line"&&r.geojson&&t.jsx(vd,{map:n,data:r.geojson.features||[],selectedLayerId:`line-layer-${r.id}`,dataset:r,fillColor:((Tr=i.styleConfig)==null?void 0:Tr.fillColor)||r.color,visible:l,opacity:((Pr=i.styleConfig)==null?void 0:Pr.opacity)??.8,widthScale:1,widthMinPixels:1,widthMaxPixels:10,colorField:(Mr=i.colorConfig)==null?void 0:Mr.colorField,colorMapping:(Fr=i.colorConfig)==null?void 0:Fr.colorMapping,widthField:(Ir=i.colorConfig)==null?void 0:Ir.heightField},`line-${r.id}-${((zr=i.styleConfig)==null?void 0:zr.fillColor)||r.color}-${((Er=i.styleConfig)==null?void 0:Er.opacity)??.8}`),a==="pointcloud"&&r.geojson&&t.jsx(wd,{map:n,data:r.geojson.features||[],selectedLayerId:`pointcloud-layer-${r.id}`,dataset:r,fillColor:((Rr=i.styleConfig)==null?void 0:Rr.fillColor)||r.color,visible:l,opacity:((Dr=i.styleConfig)==null?void 0:Dr.opacity)??.8,pointSize:((Ar=i.styleConfig)==null?void 0:Ar.pointRadius)??10,sizeUnits:"pixels",colorField:(Br=i.colorConfig)==null?void 0:Br.colorField,colorMapping:(Nr=i.colorConfig)==null?void 0:Nr.colorMapping,sizeField:(Or=i.colorConfig)==null?void 0:Or.heightField},`pointcloud-${r.id}-${((Wr=i.styleConfig)==null?void 0:Wr.fillColor)||r.color}-${((Gr=i.styleConfig)==null?void 0:Gr.pointRadius)??10}`),a==="polygon"&&r.geojson&&t.jsx(jd,{map:n,data:r.geojson.features||[],selectedLayerId:`polygon-layer-${r.id}`,dataset:r,fillColor:(($r=i.styleConfig)==null?void 0:$r.fillColor)||r.color,strokeColor:((Hr=i.styleConfig)==null?void 0:Hr.strokeColor)||"#ffffff",visible:l,opacity:((Vr=i.styleConfig)==null?void 0:Vr.opacity)??.7,extruded:!!((_r=i.colorConfig)!=null&&_r.heightField)||((Ur=i.styleConfig)==null?void 0:Ur.extruded),elevationScale:((Jr=i.styleConfig)==null?void 0:Jr.elevationScale)??1,colorField:(qr=i.colorConfig)==null?void 0:qr.colorField,colorMapping:(Yr=i.colorConfig)==null?void 0:Yr.colorMapping,heightField:(Zr=i.colorConfig)==null?void 0:Zr.heightField},`polygon-${r.id}-${((Xr=i.styleConfig)==null?void 0:Xr.fillColor)||r.color}-${((Kr=i.styleConfig)==null?void 0:Kr.opacity)??.7}`),a==="solidpolygon"&&r.geojson&&t.jsx(Sd,{map:n,data:r.geojson.features||[],selectedLayerId:`solidpolygon-layer-${r.id}`,dataset:r,fillColor:((Qr=i.styleConfig)==null?void 0:Qr.fillColor)||r.color,lineColor:((en=i.styleConfig)==null?void 0:en.strokeColor)||"#505050",visible:l,opacity:((tn=i.styleConfig)==null?void 0:tn.opacity)??.8,extruded:!!((on=i.colorConfig)!=null&&on.heightField)||((rn=i.styleConfig)==null?void 0:rn.extruded),elevationScale:((nn=i.styleConfig)==null?void 0:nn.elevationScale)??1,wireframe:((sn=i.styleConfig)==null?void 0:sn.wireframe)??!1,colorField:(an=i.colorConfig)==null?void 0:an.colorField,colorMapping:(ln=i.colorConfig)==null?void 0:ln.colorMapping,heightField:(cn=i.colorConfig)==null?void 0:cn.heightField},`solidpolygon-${r.id}-${((dn=i.styleConfig)==null?void 0:dn.fillColor)||r.color}-${((un=i.styleConfig)==null?void 0:un.opacity)??.8}-${((pn=i.colorConfig)==null?void 0:pn.heightField)||""}`),a==="screengrid"&&r.geojson&&t.jsx(Ld,{map:n,data:r.geojson.features||[],selectedLayerId:`screengrid-layer-${r.id}`,dataset:r,fillColor:((fn=i.styleConfig)==null?void 0:fn.fillColor)||r.color,visible:l,opacity:((gn=i.styleConfig)==null?void 0:gn.opacity)??.8,cellSizePixels:((hn=i.styleConfig)==null?void 0:hn.pointRadius)??20,weightField:(mn=i.colorConfig)==null?void 0:mn.heightField},`screengrid-${r.id}-${((xn=i.styleConfig)==null?void 0:xn.fillColor)||r.color}-${((yn=i.styleConfig)==null?void 0:yn.opacity)??.8}-${((bn=i.styleConfig)==null?void 0:bn.pointRadius)??20}`),a==="greatcircle"&&r.geojson&&t.jsx(Td,{map:n,data:r.geojson.features||[],selectedLayerId:`greatcircle-layer-${r.id}`,dataset:r,sourceColor:((Cn=i.styleConfig)==null?void 0:Cn.fillColor)||r.color,targetColor:((vn=i.styleConfig)==null?void 0:vn.strokeColor)||"#ef4444",visible:l,opacity:((wn=i.styleConfig)==null?void 0:wn.opacity)??.8,widthScale:1,widthMinPixels:1,widthMaxPixels:10,colorField:(jn=i.colorConfig)==null?void 0:jn.colorField,colorMapping:(Sn=i.colorConfig)==null?void 0:Sn.colorMapping,widthField:(kn=i.colorConfig)==null?void 0:kn.heightField},`greatcircle-${r.id}-${((Ln=i.styleConfig)==null?void 0:Ln.fillColor)||r.color}-${((Tn=i.styleConfig)==null?void 0:Tn.strokeColor)||"#ef4444"}`),a==="mesh"&&r.geojson&&t.jsx(Md,{map:n,data:r.geojson.features||[],selectedLayerId:`mesh-layer-${r.id}`,dataset:r,fillColor:((Pn=i.styleConfig)==null?void 0:Pn.fillColor)||r.color,visible:l,opacity:((Mn=i.styleConfig)==null?void 0:Mn.opacity)??.8,sizeScale:((Fn=i.styleConfig)==null?void 0:Fn.pointRadius)??200,colorField:(In=i.colorConfig)==null?void 0:In.colorField,colorMapping:(zn=i.colorConfig)==null?void 0:zn.colorMapping,sizeField:(En=i.colorConfig)==null?void 0:En.heightField},`mesh-${r.id}-${((Rn=i.styleConfig)==null?void 0:Rn.fillColor)||r.color}-${((Dn=i.styleConfig)==null?void 0:Dn.pointRadius)??200}-${((An=i.styleConfig)==null?void 0:An.opacity)??.8}`),a==="scenegraph"&&r.geojson&&t.jsx(zd,{map:n,data:r.geojson.features||[],selectedLayerId:`scenegraph-layer-${r.id}`,dataset:r,fillColor:((Bn=i.styleConfig)==null?void 0:Bn.fillColor)||r.color,visible:l,opacity:((Nn=i.styleConfig)==null?void 0:Nn.opacity)??1,sizeScale:((On=i.styleConfig)==null?void 0:On.pointRadius)??500,colorField:(Wn=i.colorConfig)==null?void 0:Wn.colorField,colorMapping:(Gn=i.colorConfig)==null?void 0:Gn.colorMapping,sizeField:($n=i.colorConfig)==null?void 0:$n.heightField,animations:!0,animationSpeed:5},`scenegraph-${r.id}-${((Hn=i.styleConfig)==null?void 0:Hn.fillColor)||r.color}-${((Vn=i.styleConfig)==null?void 0:Vn.pointRadius)??500}-${((_n=i.styleConfig)==null?void 0:_n.opacity)??1}`),a==="animatedtrip"&&r.geojson&&t.jsx(Ed,{map:n,data:r.geojson.features||[],selectedLayerId:`animatedtrip-layer-${r.id}`,dataset:r,fillColor:((Un=i.styleConfig)==null?void 0:Un.fillColor)||r.color,visible:l,opacity:((Jn=i.styleConfig)==null?void 0:Jn.opacity)??.8,trailLength:600,widthMinPixels:8,capRounded:!0,jointRounded:!0,fadeTrail:!0,animationSpeed:1,colorField:(qn=i.colorConfig)==null?void 0:qn.colorField,colorMapping:(Yn=i.colorConfig)==null?void 0:Yn.colorMapping},`animatedtrip-${r.id}-${((Zn=i.styleConfig)==null?void 0:Zn.fillColor)||r.color}-${((Xn=i.styleConfig)==null?void 0:Xn.opacity)??.8}`)]},`persistent-layer-${r.id}`)})}):null},Dd=({widget:e,onRemove:n})=>{const o=de.use.map(),r=de.use.uploadedDatasets(),[i,a]=g.useState(null),l=g.useMemo(()=>no().find(y=>y.id===e.datasetId),[e.datasetId,r]);g.useEffect(()=>{(async()=>{var y,c,f,u;if(l){if(l.type==="geojson")a(l.geojson);else if(l.type==="wms"){const m=e.mode==="viewport"&&o?Mt(o):null,T=(u=(f=(c=(y=m==null?void 0:m.features)==null?void 0:y[0])==null?void 0:c.geometry)==null?void 0:f.coordinates)==null?void 0:u[0];if(T&&T.length>0){const p=T.map(M=>M[0]),P=T.map(M=>M[1]);Math.min(...p),Math.min(...P),Math.max(...p),Math.max(...P)}const S=await qt(l);a(S)}}})()},[l,e.mode,o,r]);const x=g.useMemo(()=>{var y;if(!i)return 0;let h=i;if(e.mode==="viewport"&&o&&(l==null?void 0:l.type)==="geojson"){const c=Mt(o);if(c){const f=(y=i.features)==null?void 0:y.filter(u=>u.geometry?et.booleanPointInPolygon(et.centroid(u.geometry),c.features[0].geometry):!1);h={...i,features:f||[]}}}return e.filter,Ps(h,e.operation,e.column)},[i,e.operation,e.column,e.mode,e.filter,o,l]),d=g.useMemo(()=>eo(x,e.format||"auto"),[x,e.format]);return t.jsxs(s.Box,{style:{padding:"16px",border:"1px solid #e5e7eb",borderRadius:"8px",backgroundColor:"white"},children:[t.jsxs(s.Group,{justify:"space-between",mb:"xs",children:[t.jsx(s.Text,{size:"sm",fw:600,children:e.name}),t.jsx(s.Group,{gap:4,children:t.jsxs(s.Menu,{position:"bottom-end",children:[t.jsx(s.Menu.Target,{children:t.jsx(s.ActionIcon,{variant:"subtle",size:"sm",children:t.jsx(Jt,{size:16})})}),t.jsx(s.Menu.Dropdown,{children:t.jsx(s.Menu.Item,{onClick:n,color:"red",children:"Remove"})})]})})]}),t.jsx(s.Text,{size:"xl",fw:700,style:{color:"var(--project-primary, #f1871c)"},children:d}),e.notes&&t.jsx(s.Text,{size:"xs",style:{color:"#6b7280",marginTop:"8px"},children:e.notes})]})},Ad=({widget:e,onRemove:n})=>{const o=de.use.uploadedDatasets(),r=de.use.map(),i=pt.use.updateWidget(),[a,l]=g.useState(!1),x=o.find(m=>m.id===e.datasetId),d=g.useMemo(()=>{var T;if(!(x!=null&&x.geojson)||!e.categoryField)return[];let m=x.geojson;if(e.mode==="viewport"&&r){const S=Mt(r);if(S){const p=(T=x.geojson.features)==null?void 0:T.filter(P=>P.geometry?et.booleanPointInPolygon(et.centroid(P.geometry),S.features[0].geometry):!1);m={...x.geojson,features:p||[]}}}return Jo(m,e.categoryField,e.column,e.operation)},[x,e,r]),h=d.reduce((m,T)=>{const S=e.column&&e.operation!=="COUNT"&&T.value!==void 0?T.value:T.count;return m+S},0),y=m=>e.column&&e.operation!=="COUNT"&&m.value!==void 0?m.value:m.count,c=10,f=a?d:d.slice(0,c),u=d.length-c;return t.jsxs(s.Box,{style:{padding:"16px",border:"1px solid #e5e7eb",borderRadius:"8px",backgroundColor:"white"},children:[t.jsxs(s.Group,{justify:"space-between",mb:"md",children:[t.jsx(s.Text,{size:"sm",fw:600,children:e.name}),t.jsxs(s.Menu,{position:"bottom-end",children:[t.jsx(s.Menu.Target,{children:t.jsx(s.ActionIcon,{variant:"subtle",size:"sm",children:t.jsx(Jt,{size:16})})}),t.jsx(s.Menu.Dropdown,{children:t.jsx(s.Menu.Item,{onClick:n,color:"red",children:"Remove"})})]})]}),t.jsxs(s.Stack,{gap:"xs",children:[f.map((m,T)=>t.jsxs(s.Box,{onClick:()=>{e.crossFiltering&&e.categoryField&&i(e.id,{filter:{field:e.categoryField,values:[m.category]}})},style:{cursor:e.crossFiltering?"pointer":"default",padding:"4px",borderRadius:"4px",transition:"background-color 0.2s"},onMouseEnter:S=>{e.crossFiltering&&(S.currentTarget.style.backgroundColor="#f3f4f6")},onMouseLeave:S=>{S.currentTarget.style.backgroundColor="transparent"},children:[t.jsxs(s.Group,{justify:"space-between",mb:4,children:[t.jsx(s.Text,{size:"xs",style:{flex:1,overflow:"hidden",textOverflow:"ellipsis"},children:m.category}),t.jsx(s.Text,{size:"xs",fw:600,children:y(m)})]}),t.jsx(s.Progress,{value:y(m)/(h||1)*100,size:"sm",color:"blue",style:{borderRadius:"4px"}})]},T)),u>0&&!a&&t.jsxs(s.Text,{size:"xs",style:{color:"var(--project-primary, #f1871c)",textAlign:"center",cursor:"pointer",textDecoration:"underline"},onClick:()=>l(!0),onMouseEnter:m=>{m.currentTarget.style.color="var(--project-primary-hover, #e0781a)"},onMouseLeave:m=>{m.currentTarget.style.color="var(--project-primary, #f1871c)"},children:["+",u," more categor",u===1?"y":"ies"]}),a&&u>0&&t.jsx(s.Text,{size:"xs",style:{color:"var(--project-primary, #f1871c)",textAlign:"center",cursor:"pointer",textDecoration:"underline"},onClick:()=>l(!1),onMouseEnter:m=>{m.currentTarget.style.color="var(--project-primary-hover, #e0781a)"},onMouseLeave:m=>{m.currentTarget.style.color="var(--project-primary, #f1871c)"},children:"Show less"})]})]})},Bi=["#f1871c","#639a49","#09314d","#ef4444","#8b5cf6","#06b6d4","#f97316","#84cc16","#ec4899","#6366f1"],Bd=({widget:e,onRemove:n})=>{const o=de.use.map(),[r,i]=g.useState(null),l=no().find(f=>f.id===e.datasetId);g.useEffect(()=>{(async()=>{var u,m,T,S;if(!l){i(null);return}if(l.type==="geojson")i(l.geojson);else if(l.type==="wms"){const p=e.mode==="viewport"&&o?Mt(o):null,P=(S=(T=(m=(u=p==null?void 0:p.features)==null?void 0:u[0])==null?void 0:m.geometry)==null?void 0:T.coordinates)==null?void 0:S[0];if(P&&P.length>0){const R=P.map(F=>F[0]),L=P.map(F=>F[1]);Math.min(...R),Math.min(...L),Math.max(...R),Math.max(...L)}const M=await qt(l);i(M)}})()},[l,e.mode,o]);const x=g.useMemo(()=>{var u;if(!r||!e.categoryField)return[];let f=r;if(e.mode==="viewport"&&o&&(l==null?void 0:l.type)==="geojson"){const m=Mt(o);if(m){const T=(u=r.features)==null?void 0:u.filter(S=>S.geometry?et.booleanPointInPolygon(et.centroid(S.geometry),m.features[0].geometry):!1);f={...r,features:T||[]}}}return Jo(f,e.categoryField,e.valueField,e.valueField?e.operation:"COUNT")},[r,e.categoryField,e.valueField,e.operation,e.mode,o,l]),d=x.reduce((f,u)=>f+(e.valueField&&u.value!==void 0?u.value:u.count),0),h=g.useMemo(()=>{if(d===0||x.length===0)return[];const f=60,u=80,m=80,T=8,S=x.slice(0,T),p=S.reduce((L,F)=>L+(e.valueField&&F.value!==void 0?F.value:F.count),0),P=d-p,M=[...S];P>0&&x.length>T&&M.push({category:`Others (${x.length-T})`,count:P,isOthers:!0});let R=-90;return M.map((L,F)=>{const j=(e.valueField&&L.value!==void 0?L.value:L.count)/d*100,z=Math.max(j/100*360,.5),b=R,w=R+z,v=b*Math.PI/180,k=w*Math.PI/180,I=u+f*Math.cos(v),D=m+f*Math.sin(v),B=u+f*Math.cos(k),O=m+f*Math.sin(k),N=z>180?1:0,$=[`M ${u} ${m}`,`L ${I} ${D}`,`A ${f} ${f} 0 ${N} 1 ${B} ${O}`,"Z"].join(" ");R=w;const _=L.isOthers?"#9ca3af":Bi[F%Bi.length];return{...L,pathData:$,percentage:j,color:_}})},[x,d]),y=!r&&l,c=h.length===0&&!y;return t.jsxs(s.Box,{style:{padding:"16px",border:"1px solid #e5e7eb",borderRadius:"8px",backgroundColor:"white"},children:[t.jsxs(s.Group,{justify:"space-between",mb:"sm",children:[t.jsx(s.Text,{size:"sm",fw:600,children:e.name}),t.jsxs(s.Menu,{position:"bottom-end",children:[t.jsx(s.Menu.Target,{children:t.jsx(s.ActionIcon,{variant:"subtle",size:"sm",children:t.jsx(Jt,{size:16})})}),t.jsx(s.Menu.Dropdown,{children:t.jsx(s.Menu.Item,{onClick:n,color:"red",children:"Remove"})})]})]}),t.jsxs(s.Text,{size:"xs",c:"dimmed",mb:"sm",children:[e.mode==="viewport"?"Viewport data":"All data"," •"," ",d.toLocaleString()," total"]}),y&&t.jsx(s.Box,{style:{textAlign:"center",padding:"20px"},children:t.jsx(s.Text,{size:"sm",c:"dimmed",children:"Loading data..."})}),c&&t.jsx(s.Box,{style:{textAlign:"center",padding:"20px"},children:t.jsx(s.Text,{size:"sm",c:"dimmed",children:"No data available"})}),h.length>0&&t.jsxs(t.Fragment,{children:[t.jsx(s.Box,{style:{display:"flex",justifyContent:"center",marginBottom:"12px",minHeight:"160px"},children:t.jsxs("svg",{width:"160",height:"160",viewBox:"0 0 160 160",style:{overflow:"visible"},children:[t.jsx("circle",{cx:"80",cy:"80",r:"60",fill:"#f3f4f6"}),h.map((f,u)=>{const m=e.valueField&&f.value!==void 0?f.value:f.count;return t.jsx("path",{d:f.pathData,fill:f.color,stroke:"#ffffff",strokeWidth:"1.5",style:{cursor:"pointer",transition:"opacity 0.2s ease"},onMouseEnter:T=>{T.currentTarget.style.opacity="0.7",T.currentTarget.style.transform="scale(1.02)",T.currentTarget.style.transformOrigin="80px 80px"},onMouseLeave:T=>{T.currentTarget.style.opacity="1",T.currentTarget.style.transform="scale(1)"},children:t.jsx("title",{children:`${f.category}: ${m.toLocaleString()} (${f.percentage.toFixed(1)}%)`})},u)}),t.jsx("circle",{cx:"80",cy:"80",r:"30",fill:"white"}),t.jsx("text",{x:"80",y:"76",textAnchor:"middle",fontSize:"10",fill:"#6b7280",children:"Total"}),t.jsx("text",{x:"80",y:"90",textAnchor:"middle",fontSize:"12",fontWeight:"bold",fill:"#374151",children:d.toLocaleString()})]})}),t.jsx(s.Stack,{gap:4,children:h.map((f,u)=>{const m=e.valueField&&f.value!==void 0?f.value:f.count;return t.jsxs(s.Group,{justify:"space-between",wrap:"nowrap",children:[t.jsxs(s.Group,{gap:6,wrap:"nowrap",style:{minWidth:0,flex:1},children:[t.jsx(s.Box,{style:{width:"10px",height:"10px",minWidth:"10px",backgroundColor:f.color,borderRadius:"50%"}}),t.jsx(s.Text,{size:"xs",style:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",fontStyle:f.isOthers?"italic":"normal",color:f.isOthers?"#6b7280":"inherit"},children:String(f.category).length>20?String(f.category).substring(0,18)+"...":f.category})]}),t.jsxs(s.Group,{gap:4,wrap:"nowrap",children:[t.jsx(s.Text,{size:"xs",fw:500,children:m.toLocaleString()}),t.jsxs(s.Text,{size:"xs",c:"dimmed",children:["(",f.percentage.toFixed(1),"%)"]})]})]},u)})})]})]})},Nd=({widget:e,onRemove:n})=>{var f;const o=de.use.map(),r=pt.use.updateWidget(),[i,a]=g.useState(null),l=g.useRef(""),d=no().find(u=>u.id===e.datasetId);g.useEffect(()=>{(async()=>{var m,T,S,p;if(!d){a(null);return}if(d.type==="geojson")a(d.geojson);else if(d.type==="wms"){const P=e.mode==="viewport"&&o?Mt(o):null,M=(p=(S=(T=(m=P==null?void 0:P.features)==null?void 0:m[0])==null?void 0:T.geometry)==null?void 0:S.coordinates)==null?void 0:p[0];if(M&&M.length>0){const L=M.map(C=>C[0]),F=M.map(C=>C[1]);Math.min(...L),Math.min(...F),Math.max(...L),Math.max(...F)}const R=await qt(d);a(R)}})()},[d,e.mode,o]);const h=g.useMemo(()=>{var m;if(!i||!e.histogramField)return[];let u=i;if(e.mode==="viewport"&&o&&(d==null?void 0:d.type)==="geojson"){const T=Mt(o);if(T){const S=(m=i.features)==null?void 0:m.filter(p=>p.geometry?et.booleanPointInPolygon(et.centroid(p.geometry),T.features[0].geometry):!1);u={...i,features:S||[]}}}return Ms(u,e.histogramField,e.bins||30,e.histogramMin,e.histogramMax)},[i,e.histogramField,e.bins,e.histogramMin,e.histogramMax,e.mode,o,d]),y=Math.max(...h.map(u=>u.count),1),c=u=>{e.crossFiltering&&e.histogramField&&(l.current="",r(e.id,{filter:{field:e.histogramField,range:{min:u.min,max:u.max}}}))};return g.useEffect(()=>{var P;if(!e.crossFiltering||!e.histogramField||h.length===0)return;const u=e.histogramMin!==void 0?e.histogramMin:Math.min(...h.map(M=>M.min)),m=e.histogramMax!==void 0?e.histogramMax:Math.max(...h.map(M=>M.max)),T=`${e.bins}-${u}-${m}`,S=(P=e.filter)==null?void 0:P.range;!(S&&(Math.abs(S.min-u)>.01||Math.abs(S.max-m)>.01))&&l.current!==T&&(r(e.id,{filter:{field:e.histogramField,range:{min:u,max:m}}}),l.current=T)},[e.bins,e.histogramMin,e.histogramMax,e.histogramField,e.crossFiltering,h.length,(f=e.filter)==null?void 0:f.range,e.id,r]),t.jsxs(s.Box,{style:{padding:"16px",border:"1px solid #e5e7eb",borderRadius:"8px",backgroundColor:"white"},children:[t.jsxs(s.Group,{justify:"space-between",mb:"md",children:[t.jsx(s.Text,{size:"sm",fw:600,children:e.name}),t.jsxs(s.Menu,{position:"bottom-end",children:[t.jsx(s.Menu.Target,{children:t.jsx(s.ActionIcon,{variant:"subtle",size:"sm",children:t.jsx(Jt,{size:16})})}),t.jsx(s.Menu.Dropdown,{children:t.jsx(s.Menu.Item,{onClick:n,color:"red",children:"Remove"})})]})]}),t.jsxs(s.Box,{style:{marginBottom:"16px",padding:"12px",backgroundColor:"#f9fafb",borderRadius:"8px"},children:[t.jsx(s.Text,{size:"xs",style:{color:"#6b7280",marginBottom:"8px"},children:"All selected"}),t.jsx(s.Box,{style:{display:"flex",alignItems:"flex-end",gap:"2px",height:"120px",padding:"8px 0"},children:h.map((u,m)=>{const T=y>0?u.count/y*100:0;return t.jsx(s.Box,{onClick:()=>c(u),style:{flex:1,height:`${T}%`,minHeight:T>0?"2px":"0",backgroundColor:"#10b981",borderRadius:"2px 2px 0 0",cursor:e.crossFiltering?"pointer":"default",transition:"background-color 0.2s"},onMouseEnter:S=>{e.crossFiltering&&(S.currentTarget.style.backgroundColor="#059669")},onMouseLeave:S=>{S.currentTarget.style.backgroundColor="#10b981"},title:`${u.bin}: ${u.count}`},m)})}),t.jsx(s.Box,{style:{display:"flex",justifyContent:"space-between",marginTop:"4px",fontSize:"10px",color:"#6b7280"},children:h.length>0&&t.jsxs(t.Fragment,{children:[t.jsx(s.Text,{size:"xs",style:{color:"#6b7280"},children:eo(h[0].min,e.format||"number-2dec")}),t.jsx(s.Text,{size:"xs",style:{color:"#6b7280"},children:eo(h[h.length-1].max,e.format||"number-2dec")})]})})]}),t.jsx(s.Text,{size:"xs",style:{color:"#6b7280",textAlign:"right",marginBottom:"8px"},children:eo(y,e.format||"auto")})]})},Od=800,Wd=({widget:e,onRemove:n})=>{var B,O,N,$,_,U;const o=de.use.uploadedDatasets(),r=de.use.map(),i=pt.use.updateWidget(),[a,l]=g.useState(null),[x,d]=g.useState(!1),h=g.useRef(null),y=g.useRef(0),c=o.find(H=>H.id===e.datasetId),f=e.timeField,u=e.timeInterval||"month",m=g.useMemo(()=>{var q;if(!(c!=null&&c.geojson)||!f)return[];let H=c.geojson;if(e.mode==="viewport"&&r){const ae=Mt(r);if(ae){const xe=(q=c.geojson.features)==null?void 0:q.filter(ie=>ie.geometry?et.booleanPointInPolygon(et.centroid(ie.geometry),ae.features[0].geometry):!1);H={...c.geojson,features:xe||[]}}}return Hl(H,f,u)},[c==null?void 0:c.geojson,c==null?void 0:c.id,f,u,e.mode,r]),T=Math.max(...m.map(H=>H.count),1),S=g.useMemo(()=>{if(m.length===0)return 0;if(a!==null){const H=m.findIndex(q=>q.time===a);return H>=0?H:0}return 0},[a,m]),p=g.useCallback(H=>{if(f){if(!H){i(e.id,{filter:void 0});return}if(H.startsWith("Month ")){const q=parseInt(H.replace("Month ",""),10);if(!Number.isNaN(q)){i(e.id,{filter:{field:f,values:[q]}});return}}try{const{minMs:q,maxMs:ae}=Ci(H,u);i(e.id,{filter:{field:f,range:{min:q,max:ae}}})}catch{}}},[e.id,f,u,i]);g.useEffect(()=>{if(m.length>0&&a===null&&!e.filter){const H=m[0].time;l(H),p(H)}},[m.length,a,e.filter,p]),g.useEffect(()=>{if(!f||m.length===0)return;if(!e.filter||e.filter.field!==f){e.filter===void 0&&l(null);return}if(e.filter.values&&e.filter.values.length===1){const xe=e.filter.values[0],ie=typeof xe=="number"&&xe>=1&&xe<=12?`Month ${xe}`:null;if(ie&&m.some(Me=>Me.time===ie)){l(we=>we===ie?we:ie);const Me=m.findIndex(we=>we.time===ie);Me>=0&&(y.current=Me)}return}if(!e.filter.range)return;const{minMs:H,maxMs:q}=e.filter.range,ae=m.find(xe=>{if(xe.time.startsWith("Month "))return!1;try{const ie=Ci(xe.time,u);return Math.abs(ie.minMs-H)<1e3&&Math.abs(ie.maxMs-q)<1e3}catch{return!1}});if(ae){l(ie=>ie===ae.time?ie:ae.time);const xe=m.findIndex(ie=>ie.time===ae.time);xe>=0&&(y.current=xe)}},[(O=(B=e.filter)==null?void 0:B.range)==null?void 0:O.min,($=(N=e.filter)==null?void 0:N.range)==null?void 0:$.max,(_=e.filter)==null?void 0:_.values,(U=e.filter)==null?void 0:U.field,f,u,m]);const P=g.useCallback(H=>{l(H),p(H)},[p]);g.useCallback(()=>{l(null),p(null)},[p]);const M=g.useCallback(()=>{if(m.length===0)return;const H=a?m.findIndex(xe=>xe.time===a):-1,q=H<m.length-1?H+1:0;y.current=q;const ae=m[q].time;l(ae),p(ae),d(!0)},[m,a,p]),R=g.useCallback(()=>{d(!1),h.current&&(clearInterval(h.current),h.current=null)},[]),L=g.useCallback(()=>{d(!1),h.current&&(clearInterval(h.current),h.current=null),l(null),p(null)},[p]);g.useEffect(()=>{if(!(!x||m.length===0))return h.current=setInterval(()=>{const H=y.current<m.length-1?y.current+1:0;y.current=H;const q=m[H].time;l(q),p(q)},Od),()=>{h.current&&(clearInterval(h.current),h.current=null)}},[x,m,p]);const F=H=>{if(u==="year")return H;if(u==="month"){const[q,ae]=H.split("-").map(Number);return new Date(q,ae-1,1).toLocaleDateString(void 0,{month:"short",year:"numeric"})}return u==="week"?`Week of ${new Date(H).toLocaleDateString(void 0,{day:"2-digit",month:"2-digit",year:"numeric"})}`:H},C=140,j=280,z={top:8,right:8,bottom:24,left:32},b=j-z.left-z.right,w=C-z.top-z.bottom,v=m.length>0?m.map((H,q)=>({time:H.time,count:H.count,x:z.left+(m.length===1?.5:q/(m.length-1))*b,y:z.top+w-H.count/T*w})):[],k=v.length>0?v.map((H,q)=>`${q===0?"M":"L"} ${H.x} ${H.y}`).join(" "):"",I=a?m.findIndex(H=>H.time===a):-1,D=I>=0&&v[I]!=null?v[I].x:null;return t.jsxs(s.Box,{style:{padding:"16px",border:"1px solid #e5e7eb",borderRadius:"8px",backgroundColor:"white"},children:[t.jsxs(s.Group,{justify:"space-between",mb:4,children:[t.jsx(s.Text,{size:"sm",fw:600,children:e.name}),t.jsxs(s.Menu,{position:"bottom-end",children:[t.jsx(s.Menu.Target,{children:t.jsx(s.ActionIcon,{variant:"subtle",size:"sm",children:t.jsx(Jt,{size:16})})}),t.jsx(s.Menu.Dropdown,{children:t.jsx(s.Menu.Item,{onClick:n,color:"red",children:"Remove"})})]})]}),t.jsx(s.Text,{size:"xs",c:"dimmed",mb:"xs",style:{lineHeight:1.3},children:"Groups features into time intervals and allows to play an animation that filters the features displayed based on the current interval."}),t.jsxs(s.Group,{gap:6,mb:"xs",align:"center",children:[t.jsx(s.Tooltip,{label:"Play",children:t.jsx(s.ActionIcon,{variant:"light",size:"sm",onClick:M,disabled:m.length===0,color:x?"orange":"gray",children:t.jsx(ha,{size:14})})}),t.jsx(s.Tooltip,{label:"Pause",children:t.jsx(s.ActionIcon,{variant:"light",size:"sm",onClick:R,disabled:!x,color:"gray",children:t.jsx(fa,{size:14})})}),t.jsx(s.Tooltip,{label:"Stop (clear filter)",children:t.jsx(s.ActionIcon,{variant:"light",size:"sm",onClick:L,disabled:!a&&!x,color:"gray",children:t.jsx(xa,{size:14})})}),a&&t.jsxs(s.Text,{size:"xs",c:"dimmed",style:{flex:1,overflow:"hidden",textOverflow:"ellipsis"},children:[F(a)," — map filtered"]})]}),m.length>0?t.jsx(s.Box,{style:{width:j,height:C,position:"relative",marginBottom:4},children:t.jsxs("svg",{width:j,height:C,style:{display:"block",cursor:"pointer"},onClick:H=>{const q=H.currentTarget.getBoundingClientRect(),ae=H.clientX-q.left,xe=Math.round((ae-z.left)/b*(m.length-1)),ie=Math.max(0,Math.min(xe,m.length-1));P(m[ie].time)},children:[t.jsx("defs",{children:t.jsxs("linearGradient",{id:`timeseries-line-${e.id}`,x1:"0",y1:"0",x2:"0",y2:"1",children:[t.jsx("stop",{offset:"0%",stopColor:"#f1871c",stopOpacity:.35}),t.jsx("stop",{offset:"100%",stopColor:"#f1871c",stopOpacity:0})]})}),t.jsx("text",{x:z.left-4,y:z.top+4,textAnchor:"end",dominantBaseline:"hanging",fill:"#64748b",fontSize:10,children:T}),k&&v.length>1?t.jsxs(t.Fragment,{children:[t.jsx("path",{d:`${k} L ${v[v.length-1].x} ${z.top+w} L ${v[0].x} ${z.top+w} Z`,fill:`url(#timeseries-line-${e.id})`}),t.jsx("path",{d:k,fill:"none",stroke:"#f1871c",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"})]}):v.length===1?t.jsxs(t.Fragment,{children:[t.jsx("circle",{cx:v[0].x,cy:v[0].y,r:4,fill:"#f1871c",stroke:"#fff",strokeWidth:2}),t.jsx("line",{x1:v[0].x,y1:v[0].y,x2:v[0].x,y2:z.top+w,stroke:"#f1871c",strokeWidth:2,strokeDasharray:"4 4",opacity:.3})]}):null,D!=null&&t.jsx("line",{x1:D,y1:z.top,x2:D,y2:z.top+w,stroke:"#3b82f6",strokeWidth:2,strokeDasharray:"none"}),v.length>0&&t.jsxs(t.Fragment,{children:[t.jsx("text",{x:v[0].x,y:C-6,textAnchor:"start",fill:"#64748b",fontSize:9,children:m[0].time}),m.length>1&&t.jsx("text",{x:v[v.length-1].x,y:C-6,textAnchor:"end",fill:"#64748b",fontSize:9,children:m[m.length-1].time})]})]})}):null,m.length>1&&t.jsx(s.Box,{mt:"sm",children:t.jsx(s.Slider,{value:S,onChange:H=>{const q=Math.round(H);q>=0&&q<m.length&&P(m[q].time)},min:0,max:m.length-1,step:1,marks:m.length<=12?m.map((H,q)=>({value:q,label:q===0||q===m.length-1||m.length<=6?H.time:""})):[{value:0,label:m[0].time},{value:m.length-1,label:m[m.length-1].time}],label:H=>{const q=Math.round(H);return q>=0&&q<m.length?F(m[q].time):""},styles:{track:{backgroundColor:"#e5e7eb"},bar:{backgroundColor:"var(--project-primary, #f1871c)"},thumb:{backgroundColor:"#3b82f6",borderColor:"#3b82f6",borderWidth:2},mark:{display:m.length<=12?"block":"none",fontSize:"9px"},markLabel:{fontSize:"9px",marginTop:"4px"}}})}),m.length===0&&t.jsx(s.Text,{size:"xs",c:"dimmed",children:"No time data. Select a time field in widget settings."})]})},Gd=({widget:e,onRemove:n})=>{de.use.uploadedDatasets(),de.use.layersAddedFromCatalogue();const o=de.use.map();pt.use.updateWidget();const[r,i]=g.useState(""),[a,l]=g.useState({column:null,direction:null}),[x,d]=g.useState(1),[h,y]=g.useState(null),[c,f]=g.useState(null),m=no().find(v=>v.id===e.datasetId);g.useEffect(()=>{(async()=>{var k,I,D,B;if(!m){f(null);return}if(m.type==="geojson")f(m.geojson);else if(m.type==="wms"){const O=e.mode==="viewport"&&o?Mt(o):null,N=(B=(D=(I=(k=O==null?void 0:O.features)==null?void 0:k[0])==null?void 0:I.geometry)==null?void 0:D.coordinates)==null?void 0:B[0];if(N&&N.length>0){const _=N.map(H=>H[0]),U=N.map(H=>H[1]);Math.min(..._),Math.min(...U),Math.max(..._),Math.max(...U)}const $=await qt(m);f($)}})()},[m,e.mode,o]);const{tableData:T,totalRows:S}=g.useMemo(()=>{if(!(c!=null&&c.features))return{tableData:[],totalRows:0};let v=c;if(e.mode==="viewport"&&o){const _=Mt(o);if(_){const U=c.features.filter(H=>H.geometry?et.booleanPointInPolygon(et.centroid(H.geometry),_.features[0].geometry):!1);v={...c,features:U}}}const k=e.tableColumns||$t(v).slice(0,5);if(k.length===0)return{tableData:[],totalRows:0};let I=v.features.map((_,U)=>{const H={_index:U,_feature:_};return k.forEach(q=>{var ae;H[q]=((ae=_.properties)==null?void 0:ae[q])??"-"}),H});if(r.trim()){const _=r.toLowerCase();I=I.filter(U=>k.some(H=>String(U[H]??"").toLowerCase().includes(_)))}a.column&&a.direction&&I.sort((_,U)=>{const H=_[a.column],q=U[a.column];if(H==null&&q==null)return 0;if(H==null)return 1;if(q==null)return-1;const ae=typeof H=="number"?H:parseFloat(String(H)),xe=typeof q=="number"?q:parseFloat(String(q));let ie=0;return!isNaN(ae)&&!isNaN(xe)?ie=ae-xe:ie=String(H).localeCompare(String(q)),a.direction==="asc"?ie:-ie});const D=I.length,B=e.rowsPerPage||5,O=(x-1)*B,N=O+B;return{tableData:I.slice(O,N),totalRows:D}},[c,e.mode,e.tableColumns,e.rowsPerPage,o,r,a,x]),p=e.tableColumns||(c?$t(c).slice(0,5):[]),P=e.rowsPerPage||5,M=Math.ceil(S/P),R=v=>{l(k=>{if(k.column===v){if(k.direction==="asc")return{column:v,direction:"desc"};if(k.direction==="desc")return{column:null,direction:null}}return{column:v,direction:"asc"}}),d(1)},L=g.useCallback(v=>{if(!(!o||!(v!=null&&v.geometry)))try{const k=et.bbox(v.geometry);o.fitBounds([[k[0],k[1]],[k[2],k[3]]],{padding:{top:50,bottom:50,left:50,right:50},duration:500})}catch(k){console.error("Error zooming to feature:",k)}},[o]),F=v=>{var k;return((k=e.tableColumnLabels)==null?void 0:k[v])||v},C=g.useMemo(()=>{if(!(c!=null&&c.features))return[];let v=c;if(e.mode==="viewport"&&o){const D=Mt(o);if(D){const B=c.features.filter(O=>O.geometry?et.booleanPointInPolygon(et.centroid(O.geometry),D.features[0].geometry):!1);v={...c,features:B}}}const k=e.tableColumns||$t(v).slice(0,5);if(k.length===0)return[];let I=v.features.map((D,B)=>{const O={_index:B,_feature:D};return k.forEach(N=>{var $;O[N]=(($=D.properties)==null?void 0:$[N])??"-"}),O});if(r.trim()){const D=r.toLowerCase();I=I.filter(B=>k.some(O=>String(B[O]??"").toLowerCase().includes(D)))}return a.column&&a.direction&&I.sort((D,B)=>{const O=D[a.column],N=B[a.column];if(O==null&&N==null)return 0;if(O==null)return 1;if(N==null)return-1;const $=typeof O=="number"?O:parseFloat(String(O)),_=typeof N=="number"?N:parseFloat(String(N));let U=0;return!isNaN($)&&!isNaN(_)?U=$-_:U=String(O).localeCompare(String(N)),a.direction==="asc"?U:-U}),I},[c,e.mode,e.tableColumns,o,r,a]),j=g.useCallback(()=>{try{const v=C,k=e.tableColumns||(c?$t(c).slice(0,5):[]);if(v.length===0){alert("No data to export");return}if(k.length===0){alert("No columns selected for export");return}const I=k.map(N=>({key:N,displayLabel:F(N)})),D=Vt.mkConfig({columnHeaders:I,filename:`${e.name||"table"}_${new Date().toISOString().split("T")[0]}`}),B=v.map(N=>{const $={};return k.forEach(_=>{$[_]=N[_]}),$}),O=Vt.generateCsv(D)(B);Vt.download(D)(O)}catch(v){console.error("Error exporting CSV:",v),alert("Failed to export CSV. Please try again.")}},[C,e.tableColumns,c,e.name]),z=g.useCallback(async()=>{try{const v=C,k=e.tableColumns||(c?$t(c).slice(0,5):[]);if(v.length===0){alert("No data to export");return}if(k.length===0){alert("No columns selected for export");return}const I=v.map($=>{const _={};return k.forEach(U=>{_[U]=$[U]}),_}),D=k.map($=>{var U;const _=(U=I[0])==null?void 0:U[$];return{column:F($),value:H=>H[$],type:typeof _=="number"?Number:String,align:"center",alignVertical:"center",height:20,wrap:!0,width:20}}),B=await Hs(I,{schema:D}),O=URL.createObjectURL(B),N=document.createElement("a");N.href=O,N.download=`${e.name||"table"}_${new Date().toISOString().split("T")[0]}.xlsx`,N.style.visibility="hidden",document.body.appendChild(N),N.click(),URL.revokeObjectURL(O),N.remove()}catch(v){console.error("Error exporting to Excel:",v),alert("Failed to export Excel. Please try again.")}},[C,e.tableColumns,c,e.name]),b=g.useRef(null),w=g.useCallback(async()=>{if(!b.current){alert("Table not ready for export");return}try{const v=new Oi("landscape","pt","a4"),k=await Vs(b.current,{scale:2,useCORS:!0,logging:!1,backgroundColor:"#ffffff"}),I=k.toDataURL("image/png"),D=v.internal.pageSize.getWidth(),B=k.height*D/k.width;v.addImage(I,"PNG",0,0,D,B);let O=B,N=0;for(;O>0;)N=O-v.internal.pageSize.getHeight(),v.addPage(),v.addImage(I,"PNG",0,N,D,B),O-=v.internal.pageSize.getHeight();v.save(`${e.name||"table"}_${new Date().toISOString().split("T")[0]}.pdf`)}catch(v){console.error("Error exporting to PDF:",v),alert("PDF export failed. Please try CSV or Excel export instead.")}},[e.name]);return t.jsxs(s.Box,{style:{padding:"16px",border:"1px solid #e5e7eb",borderRadius:"8px",backgroundColor:"white"},children:[t.jsxs(s.Group,{justify:"space-between",mb:"md",children:[t.jsx(s.Text,{size:"sm",fw:600,children:e.name}),t.jsxs(s.Group,{gap:4,children:[C.length>0&&t.jsxs(s.Menu,{position:"bottom-end",withinPortal:!0,zIndex:10001,shadow:"md",width:200,children:[t.jsx(s.Menu.Target,{children:t.jsx(s.ActionIcon,{variant:"light",size:"md",color:"blue",style:{cursor:"pointer"},title:"Download table data",children:t.jsx(sa,{size:18})})}),t.jsxs(s.Menu.Dropdown,{children:[t.jsx(s.Menu.Label,{children:"Export Options"}),t.jsx(s.Menu.Item,{onClick:v=>{v.stopPropagation(),console.log("Export CSV clicked, data length:",C.length),j()},leftSection:t.jsx("span",{children:"📄"}),children:"Download as CSV"}),t.jsx(s.Menu.Item,{onClick:v=>{v.stopPropagation(),console.log("Export Excel clicked, data length:",C.length),z()},leftSection:t.jsx("span",{children:"📊"}),children:"Download as Excel"}),t.jsx(s.Menu.Item,{onClick:v=>{v.stopPropagation(),console.log("Export PDF clicked"),w()},leftSection:t.jsx("span",{children:"📑"}),children:"Download as PDF"})]})]}),t.jsxs(s.Menu,{position:"bottom-end",withinPortal:!0,zIndex:10001,children:[t.jsx(s.Menu.Target,{children:t.jsx(s.ActionIcon,{variant:"subtle",size:"sm",children:t.jsx(Jt,{size:16})})}),t.jsx(s.Menu.Dropdown,{children:t.jsx(s.Menu.Item,{onClick:n,color:"red",children:"Remove"})})]})]})]}),t.jsx(s.TextInput,{placeholder:"Search",value:r,onChange:v=>{i(v.target.value),d(1)},leftSection:t.jsx(ma,{size:16}),mb:"md",size:"sm"}),p.length>0?t.jsxs(t.Fragment,{children:[t.jsx(s.ScrollArea,{h:300,children:t.jsx("div",{ref:b,children:t.jsxs(s.Table,{striped:!0,highlightOnHover:!0,withTableBorder:!0,withColumnBorders:!0,children:[t.jsx(s.Table.Thead,{children:t.jsx(s.Table.Tr,{children:p.map(v=>t.jsx(s.Table.Th,{style:{fontSize:"12px",cursor:"pointer",userSelect:"none",backgroundColor:a.column===v?"#f3f4f6":"transparent"},onClick:()=>R(v),children:t.jsxs(s.Group,{gap:4,children:[t.jsx(s.Text,{size:"xs",fw:600,children:F(v)}),a.column===v&&(a.direction==="asc"?t.jsx(Vi,{size:14}):t.jsx(Gt,{size:14}))]})},v))})}),t.jsx(s.Table.Tbody,{children:T.map((v,k)=>t.jsx(s.Table.Tr,{style:{backgroundColor:h===v._index?"var(--project-primary-muted, #fff7ed)":void 0,cursor:"pointer"},onClick:()=>{y(v._index),L(v._feature)},onMouseEnter:I=>{I.currentTarget.style.backgroundColor=h===v._index?"#ffedd5":"#f9fafb"},onMouseLeave:I=>{I.currentTarget.style.backgroundColor=h===v._index?"var(--project-primary-muted, #fff7ed)":void 0},children:p.map(I=>t.jsx(s.Table.Td,{style:{fontSize:"12px"},children:String(v[I]??"-")},I))},v._index))})]})})}),S>0&&t.jsxs(s.Group,{justify:"space-between",mt:"md",children:[t.jsxs(s.Text,{size:"xs",style:{color:"#6b7280"},children:["Rows per page ",P]}),t.jsxs(s.Group,{gap:8,children:[t.jsxs(s.Text,{size:"xs",style:{color:"#6b7280"},children:[S===0?0:(x-1)*P+1,"-",Math.min(x*P,S)," of ",S]}),t.jsx(s.Pagination,{total:M,value:x,onChange:d,size:"xs"})]})]})]}):t.jsx(s.Text,{size:"xs",style:{color:"#6b7280",textAlign:"center",padding:"20px"},children:"No columns selected. Please configure columns in the widget settings."}),T.length===0&&p.length>0&&t.jsx(s.Text,{size:"xs",style:{color:"#6b7280",textAlign:"center",padding:"20px"},children:r?"No results found":"No data available"})]})},$d=({widget:e})=>{const n=pt.use.removeWidget(),o=()=>{n(e.id)};switch(e.type){case"formula":return t.jsx(Dd,{widget:e,onRemove:o});case"category":return t.jsx(Ad,{widget:e,onRemove:o});case"pie":return t.jsx(Bd,{widget:e,onRemove:o});case"histogram":return t.jsx(Nd,{widget:e,onRemove:o});case"timeSeries":return t.jsx(Wd,{widget:e,onRemove:o});case"table":return t.jsx(Gd,{widget:e,onRemove:o});default:return null}},Hd=()=>{const e=pt.use.widgets(),n=pt.use.selectedWidgetType(),o=pt.use.resetAllWidgets(),r=de.use.uploadedDatasets(),i=de.use.layersAddedFromCatalogue(),a=de.use.map(),l=()=>{e.length!==0&&window.confirm(`Are you sure you want to remove all ${e.length} widgets?`)&&o()},x=g.useMemo(()=>{const c=[];return r.forEach(f=>{c.push({id:f.id,name:f.name,type:"geojson",sourceId:f.sourceId,layerId:f.layerId,geojson:f.geojson})}),i.forEach(f=>{const u=a==null?void 0:a.getLayer(f.id),m=(u==null?void 0:u.metadata)||{};c.push({id:f.id,name:f.label||f.value||f.id,type:"wms",sourceId:f.id,layerId:f.id,publishName:f.value,metadata:{...m,...f}})}),c},[r,i,a]),d=g.useMemo(()=>n?e.filter(c=>c.type===n):e,[e,n]),h=x.map(c=>({source:c,widgets:d.filter(f=>f.datasetId===c.id)})).filter(({widgets:c})=>c.length>0),y=h.flatMap(({widgets:c})=>c);return t.jsxs(s.Box,{style:{display:"flex",flexDirection:"column",height:"100%"},children:[y.length>0&&t.jsxs(s.Group,{justify:"space-between",px:"md",py:"xs",style:{borderBottom:"1px solid #e5e7eb"},children:[t.jsxs(s.Text,{size:"xs",c:"dimmed",children:[y.length," widget",y.length!==1?"s":""]}),t.jsx(s.Tooltip,{label:"Reset all widgets",position:"left",children:t.jsx(s.ActionIcon,{variant:"subtle",color:"red",size:"sm",onClick:l,children:t.jsx(_i,{size:14})})})]}),t.jsx(s.ScrollArea,{style:{flex:1,padding:"16px"},children:y.length===0?t.jsxs(s.Box,{style:{padding:"32px 16px",textAlign:"center"},children:[t.jsx(s.Text,{size:"xs",style:{color:"#9ca3af"},children:"No widgets added yet."}),t.jsx(s.Text,{size:"xs",style:{color:"#9ca3af",marginTop:"8px"},children:"Add widgets from the Filters tab to see analyses here."})]}):t.jsx(s.Stack,{gap:"md",children:h.map(({source:c,widgets:f})=>t.jsxs(s.Box,{children:[t.jsxs(s.Group,{gap:"xs",mb:"xs",children:[t.jsx(s.Text,{size:"xs",fw:600,style:{color:"#6b7280"},children:c.name}),t.jsxs(s.Text,{size:"xs",style:{color:"#9ca3af"},children:["(",c.type==="geojson"?"Dataset":"Layer",")"]})]}),t.jsx(s.Stack,{gap:"sm",children:f.map(u=>t.jsx($d,{widget:u},u.id))})]},c.id))})})]})},Vd=({onCollapse:e,collapsed:n=!1})=>{const[o,{open:r,close:i}]=Kn.useDisclosure(!1),[a,{open:l,close:x}]=Kn.useDisclosure(!1),[d,h]=g.useState("layers"),[y,c]=g.useState(!1),f=T=>{h(T),c(T==="filters")};g.useEffect(()=>{d!=="filters"&&c(!1)},[d]);const u=T=>d===T,m=()=>{r()};return n?t.jsx(s.Box,{className:ve.collapsedContainer,children:t.jsx(s.Tooltip,{label:"Expand Layers Panel",position:"right",withinPortal:!0,children:t.jsx(s.ActionIcon,{variant:"subtle",size:"md",onClick:e,className:ve.expandButton,style:{width:"40px",height:"40px"},children:t.jsx(wo,{size:20})})})}):t.jsxs(qi,{children:[t.jsx(Rd,{}),t.jsxs(s.Box,{className:ve.container,children:[t.jsxs(s.Group,{justify:"space-between",className:ve.header,children:[t.jsx(s.Group,{gap:"xs",children:t.jsxs(s.Box,{className:ve.logoContainer,children:[t.jsx(s.Box,{className:ve.diamondLeft}),t.jsx(s.Box,{className:ve.diamondRight})]})}),t.jsxs(s.Group,{gap:"xs",className:ve.utilityIcons,children:[t.jsx(s.Tooltip,{label:"Export Data",position:"bottom",withinPortal:!0,children:t.jsx(s.ActionIcon,{variant:"subtle",size:"md",className:ve.utilityIcon,onClick:l,style:{width:"40px",height:"40px"},children:t.jsx(ia,{size:20})})}),t.jsx(s.Tooltip,{label:n?"Expand Sidebar":"Collapse Sidebar",position:"bottom",withinPortal:!0,children:t.jsx(s.ActionIcon,{variant:"subtle",size:"md",onClick:e,className:ve.collapseButton,children:t.jsx(ba,{size:20,style:{transform:n?"rotate(180deg)":"rotate(0deg)",transition:"transform 0.2s ease"}})})})]})]}),t.jsxs(s.Group,{gap:0,className:ve.navIcons,children:[t.jsx(s.Tooltip,{label:"Layers",position:"bottom",withinPortal:!0,children:t.jsxs(s.Box,{className:`${ve.navIconContainer} ${u("layers")?ve.activeNavIcon:""}`,onClick:()=>f("layers"),children:[t.jsx(da,{size:18,className:ve.navIcon}),u("layers")&&t.jsx(s.Box,{className:ve.activeIndicator})]})}),t.jsx(s.Tooltip,{label:"Filters",position:"bottom",withinPortal:!0,children:t.jsxs(s.Box,{className:`${ve.navIconContainer} ${u("filters")?ve.activeNavIcon:""}`,onClick:()=>f("filters"),children:[t.jsx(aa,{size:18,className:ve.navIcon}),u("filters")&&t.jsx(s.Box,{className:ve.activeIndicator})]})}),t.jsx(s.Tooltip,{label:"Base Map",position:"bottom",withinPortal:!0,children:t.jsxs(s.Box,{className:`${ve.navIconContainer} ${u("basemap")?ve.activeNavIcon:""}`,onClick:()=>f("basemap"),children:[t.jsx(pa,{size:18,className:ve.navIcon}),u("basemap")&&t.jsx(s.Box,{className:ve.activeIndicator})]})})]}),t.jsxs(s.Box,{className:ve.datasetsScrollArea,style:{overflowY:"auto",flex:1},children:[u("layers")&&t.jsx(Wl,{onAddData:m}),u("filters")&&t.jsx(Ul,{}),u("basemap")&&t.jsx(Jl,{})]}),t.jsx(vc,{opened:o,onClose:i}),t.jsx(Oc,{opened:a,onClose:x})]}),y&&t.jsxs(s.Box,{className:ve.rightSidebarWidgets,children:[t.jsxs(s.Group,{justify:"space-between",className:ve.rightSidebarHeader,children:[t.jsx(s.Text,{size:"sm",fw:600,className:ve.rightSidebarTitle,children:"Widgets"}),t.jsx(s.Tooltip,{label:"Collapse",position:"left",withinPortal:!0,children:t.jsx(s.ActionIcon,{variant:"subtle",size:"sm",onClick:()=>c(!1),className:ve.rightSidebarCollapse,children:t.jsx(wo,{size:18})})})]}),t.jsx(Hd,{})]}),!y&&t.jsx(s.Box,{className:ve.collapsedRightSidebarContainer,children:t.jsx(s.Tooltip,{label:"Open Widgets Panel",position:"left",withinPortal:!0,children:t.jsx("button",{onClick:()=>c(!0),className:ve.expandRightSidebarButton,title:"Open Widgets Panel",children:t.jsx(la,{size:20})})})})]})};exports.BisagSidebar=Vd;exports.DeckGlOverlayManager=Fc;exports.LayerConfigProvider=qi;exports.getLayerRegistry=Is;exports.getSharedOverlay=Fs;exports.useMapStore=de;exports.useWidgetStore=pt;
|