@xyo-network/react-map 2.78.0 → 2.78.2

package/dist/browser/index.js

@@ -1,3 +1,1308 @@
-var A=()=>({debugLayer:{devMode:!0,field:"debugLayer",hidden:!0,label:"Debug Layer",value:!1},debugLogging:{devMode:!0,field:"debugLogging",hidden:!0,label:"Debug Logging",value:!1},dynamicMapResize:{devMode:!0,field:"dynamicMapResize",hidden:!0,label:"Auto Map Resize",value:!0},enableControls:{devMode:!0,field:"enableControls",hidden:!0,label:"Map Controls",value:!1},fitToPoints:{devMode:!0,field:"fitToPoints",hidden:!0,label:"Fit To Points",value:!1},preferDark:{devMode:!1,field:"preferDark",hidden:!0,label:"Prefer dark",value:!1},scrollToZoom:{devMode:!0,field:"scrollToZoom",hidden:!0,label:"Scroll To Zoom",value:!1}});var K=A(),{debugLayer:We,scrollToZoom:qe,fitToPoints:Ze,preferDark:Ue}=K;We.hidden=!1;qe.value=!0;Ze.value=!1;Ue.value=!0;import{darken as oo,useTheme as ro}from"@mui/material";import{FlexCol as ao}from"@xylabs/react-flexbox";import{useState as no}from"react";import{forget as Ht}from"@xylabs/forget";import{useEffect as D,useState as kt}from"react";import{useEffect as ne,useMemo as Ke,useState as Xe}from"react";var ie=(r,e,o,t=!0)=>{let[a,n]=Xe(!1),i=Ke(()=>new ResizeObserver(()=>{let s=r.current?.getBoundingClientRect().width;s&&e.current&&(e.current.style.width=`${s}px`,setTimeout(()=>o?.resize()))}),[e,r,o]);ne(()=>{let s=!!(t&&o&&r?.current&&e.current);n(s)},[t,e,r,o]),ne(()=>{if(a)return r.current&&i.observe(r.current),()=>{i.disconnect()}},[t,a,e,r,o,i])};import{useWindowSize as Ye}from"@xylabs/react-shared";import{useEffect as Ve,useState as je}from"react";var et=1.6,tt=[.5,2],ot=[.9121644205263664,1.71785031559439],rt=[-81.4742014851959,12.788958675506933],se=(r,e,o)=>{let[t,a]=e,[n,i]=o||tt,s=i-n,c=a-t;return(r-n)/s*c+t},ce=()=>{let[r,e]=je({}),{width:o,height:t}=Ye();return Ve(()=>{if(o&&t){let a=o/t;e({center:[se(a,rt),se(a,ot)],zoom:et})}},[t,o]),{options:r}};import{useNetwork as at}from"@xyo-network/react-network";import{useMemo as nt}from"react";var it=["79af071f451fc7af10d009dc63236ef9a9b211732c1ee0c06f028fcecf2336c5","531bfba6d8dfefd3bcc888aca54cdbbd4574ed2b3ec551b230845a1f9a608898","c874412b4faa4947de81372fd1ba12fdd6f43f5e408622b7f357cb2bcb3f17cb","29d3f8b882c61a82a1a1675782a27e797ea7196f45a23b4409680ab8b8d5f14e","cfd20f80ac073fd9518f4ef3f43d2a1f5e4e56e40c2677f38d6f6fecd05df60c","1354fa73497519a39aed19fc99bdbae78a880a1eafb2f7898d607e07db36528d","1043b0d25eacfc5013ae9dba780305a6fbf01a43543bd871d7c00537fca142a9","973dfc5df142851ced258d52d0ac2784e814000ac22e35776f772256b0d4dde9","463808eb74d3d87e6563970e0301a493577f8cd1b501e6e0ffa5e027ad2cea95","15b21acea2e3fd9d1ace3768a72636ee7bdf67a6f8e0807bfa2273dea2207555","32d377bfe7ebe382598c54dd13f8af7510e0a1e2fd2e913311fdd58e517e5e2e,"],st="c7bbf61f61cfd4a1b2def160c28136fc1d100d39fbdb67b227a2c6e558d9d3a5",le=()=>{let{network:r}=at(),e=r?.nodes?.find(n=>n.type==="archivist")?.explorerMapHashes,o=e?.animatedAnswerHashes||it,t=e?.staticAnswerHash||st;return nt(()=>[t,...o],[o,t])};import{useTheme as ct}from"@mui/material";var pe=()=>{let r=ct(),e="#FFFF75",o="#FF0000",t={highUsageColor:o,lowUsageColor:"#FFB3B3",staticMapColor:e},a={endColor:o,endLabel:"High",heading:"Network Usage",startColor:e,startLabel:"Low",textColor:r.palette.common.white};return{heatMapColorProps:t,legendProps:a}};import{compact as lt}from"@xylabs/lodash";import{GeoJson as pt}from"@xyo-network/sdk-geo";import{useEffect as mt,useState as X}from"react";var me=({density:r,quadkey:e})=>{let o=new pt(e).polygonFeature();return o.properties={count:r,density:r},o},ue=r=>(r.properties&&(r.properties.value=r.properties.density/5),r),de=r=>{let[e,o]=X([[]]),[t,a]=X([]),[n,i]=X();return mt(()=>{if(Array.isArray(r))if(lt(r).length>0){let s=r?.map(c=>c?.result.map(me));o(s.map(c=>c?.map(ue)??[]))}else i(new Error("Cannot find payloads for provided hashes"));if(r&&r.result){let c=r.result.map(me);a(c.map(ue))}},[r]),{error:n,features:t,multipleFeatureSets:e}};import{assertEx as ut}from"@xylabs/assert";import{GeoJson as fe}from"@xyo-network/sdk-geo";var P=class{_config;constructor(e){this._config={requestLocation:!0,zoom:2,...e}}get isMapReady(){return!!this._config.map}initializeMapSource(e){let o=()=>{let n=fe.featureCollection(this._config.features);return fe.featuresSource(n)},t=this._config.map.getSource(e.source),a=o();return t?t.setData(ut(a.data)):this._config.map.addSource(e.source,a),e.update(this._config.map,!0),this}};import{assertEx as ge}from"@xylabs/assert";import{delay as Y}from"@xylabs/delay";import{forget as ye}from"@xylabs/forget";import{GeoJson as B}from"@xyo-network/sdk-geo";import{LngLatBounds as dt}from"mapbox-gl";var C=class extends P{static animationStarted=!1;config;constructor(e){super(e),this.config=e}static initialMapPositioning(e,o,t,a){if(!t)return;let n;return a?n=a:(n=new dt,t.forEach(i=>{for(let s of i.geometry.coordinates)for(let c of s)n.extend(c)})),o.setCenter(n.getCenter()),o.fitBounds(n,e),this}static async initializeAnimatedHeatMapSource(e,o,t,a,n){this.animationStarted=!0;let i=0,s=0,c=o.map(y=>{let L=B.featureCollection(y);return B.featuresSource(L)});this.updateLayer(t,e[0],c[0]),this.updateLayer(t,e[1],c[1]);for(let y of e)t.setPaintProperty(y.id,"fill-opacity",0);let l=3e3,m=.5,g=10,p=30,u=l/p,d=a??"#FFB3B3",f=n??"#FF0000",b=(y,L,M)=>{let U=Math.sin(M/p*Math.PI/2),Je=Math.cos(M/p*Math.PI/2),$e=y+y*U,Qe=L*Je;return["let","density",["+",["/",["number",["get","value"]],$e],Qe],["interpolate",["linear"],["var","density"],0,d,.5,f]]},S=e.map(y=>!1),Ee=async(y,L)=>{for(let M=p;M>=1;M--)t.setPaintProperty(y,"fill-color",b(g,m,M*(180/u))),await Y(u);S[L]=!0},_e=async(y,L)=>{for(let M=1;M<=p;M++)t.setPaintProperty(y,"fill-color",b(g,m,M*(180/u))),await Y(u);S[L]=!1},ae=!1;await(async()=>{for(ge(!ae,()=>"Animation Already Started"),ae=!0;this.animationStarted;){let y=i%e.length,L=(i+1)%e.length,M=s%o.length,U=(s+1)%o.length;for(S[y]&&(this.updateLayer(t,e[y],c[M]),ye(_e(e[y].id,y))),S[L]||(this.updateLayer(t,e[L],c[U]),ye(Ee(e[L].id,L)));(S[y]||!S[L])&&this.animationStarted;)await Y(1e3);i++,s++}})()}static updateLayer(e,o,t){let a=e.getSource(o.source);a&&t.data?a.setData(t.data):t&&e.addSource(o.source,t),o.update(e,!0)}initializeHeatMapSource(e){let o=t=>{let a=B.featureCollection(this.config.features);return B.featuresSource(a)};for(let[t,a]of e.entries()){let n=this.config.map.getSource(a.source),i=o(t);n?n.setData(ge(i.data)):this.config.map.addSource(a.source,i),a.update(this.config.map,!0)}return this}};import{LngLatBounds as ft}from"mapbox-gl";var T=class extends P{config;constructor(e){super(e),this.config=e}initialMapPositioning(e,o){let t;return o?t=o:(t=new ft,this.config.features.forEach(a=>{t.extend(a.geometry.coordinates)})),this.config.map.setCenter(t.getCenter()),this.config.map.fitBounds(t,e),this.config.map}};import{GeolocateControl as gt,NavigationControl as yt}from"mapbox-gl";var I=class r{static geoLocateControl;static mapListeners={logData:(e,o)=>{let t=o||e?.target;t&&(console.log("zoom",t.getZoom()),console.log("center",t.getCenter()))}};static navControl;static requestLocation;static toggleControls(e,o,t,a){return e?r.addControls(o,t,a):r.removeControls(o),this}static toggleDebugLayer(e,o,t){return o.getLayer(t)&&(e?o.setLayoutProperty(t,"visibility","visible"):o.setLayoutProperty(t,"visibility","none")),this}static toggleDebugLogging(e,o){let t=["resize","zoomend","dragend"];if(e){this.mapListeners.logData(void 0,o);for(let a of t)o.on(a,this.mapListeners.logData)}else for(let a of t)o.off(a,this.mapListeners.logData)}static toggleScrollToZoom(e,o){return e?o.scrollZoom.enable():o.scrollZoom.disable(),this}static updateSettings(e){let{settings:o,map:t,zoom:a,requestLocation:n,debugLayerName:i=""}=e,{scrollToZoom:s,enableControls:c,debugLayer:l,debugLogging:m}=o;r.toggleControls(c?.value,t,a,n).toggleScrollToZoom(s?.value,t).toggleDebugLayer(l?.value,t,i).toggleDebugLogging(m.value,t)}static addControls(e,o,t){let a=new gt({fitBoundsOptions:{zoom:o||2},positionOptions:{enableHighAccuracy:!0},trackUserLocation:!0}),n=new yt({showCompass:!1});return this.geoLocateControl=this.geoLocateControl||a,this.navControl=this.navControl||n,!e.hasControl(this.geoLocateControl)&&t&&e.addControl(this.geoLocateControl),e.hasControl(this.navControl)||e.addControl(this.navControl,"top-left"),this}static removeControls(e){return this.geoLocateControl&&e.hasControl(this.geoLocateControl)&&this.requestLocation&&e.removeControl(this.geoLocateControl),this.navControl&&e.hasControl(this.navControl)&&e.removeControl(this.navControl),this}};import{useEffect as Mt,useState as Le}from"react";import{createContext as Lt}from"react";var N=Lt({});import{jsx as ht}from"react/jsx-runtime";var Me=({children:r})=>{let[e,o]=Le(),[t,a]=Le(!1),n={map:e,mapInitialized:t,setMapBoxInstance:o};return Mt(()=>{!t&&e&&e?.on("load",()=>{a(!0)})},[e,t,a]),ht(N.Provider,{value:n,children:r})};import{assertEx as xt}from"@xylabs/assert";import{useContext as bt}from"react";var x=()=>{let r=bt(N);return xt("map"in r,()=>"useMapBoxInstance must be used within a MapBoxInstanceContext"),r};import{useEffect as St,useState as Pt}from"react";import{createContext as Ct}from"react";var O=Ct({});import{jsx as Ft}from"react/jsx-runtime";var he=({children:r,debugLayerName:e,defaultMapSettings:o,requestLocation:t,zoom:a=1})=>{let[n,i]=Pt(o||{}),{map:s,mapInitialized:c}=x(),l={mapSettings:n,setMapSettings:i};return St(()=>{n&&s&&c&&I.updateSettings({debugLayerName:e,map:s,requestLocation:t,settings:n,zoom:a})},[e,s,c,n,t,a]),Ft(O.Provider,{value:l,children:r})};import{useContext as wt}from"react";var h=()=>wt(O);import{createContext as vt}from"react";var G=vt({});import{jsx as At}from"react/jsx-runtime";var xe=({children:r,featureSets:e,featureSetsLayers:o,features:t,fitToPadding:a,heatMapColorProps:n,layers:i,zoom:s})=>{let[c,l]=kt(),{options:m}=ce(),{mapSettings:g}=h(),{map:p,mapInitialized:u}=x(),d={MapHeat:c,heatMapColorProps:n};return D(()=>{if(u&&e?.length&&e[0].length>0&&p&&o?.length){let{lowUsageColor:f,highUsageColor:b}=n;Ht(C.initializeAnimatedHeatMapSource(o,e,p,f,b))}return()=>{C.animationStarted=!1}},[e,o,u,p,n]),D(()=>{c&&u&&t?.length&&i?.length&&c.initializeHeatMapSource(i)},[c,t?.length,i,u]),D(()=>{if(u){let{fitToPoints:f}=g||{};p&&(f?.value===!0?C.initialMapPositioning({padding:a},p,t):m.zoom&&m.center&&(p.setZoom(m.zoom),p.setCenter(m.center)))}},[c,p,g,a,m,u,t]),D(()=>{p&&t?.length&&l(new C({features:t,map:p,zoom:s}))},[p,t,s]),At(G.Provider,{value:d,children:r})};import{assertEx as Bt}from"@xylabs/assert";import{useContext as Tt}from"react";var ia=()=>{let r=Tt(G);return Bt("heatMapInitialized"in r,()=>"useHeatMapInitializer must be used within a HeatMapInitializerContext"),r};import{createContextEx as It}from"@xyo-network/react-shared";var R=It();import{useState as Nt}from"react";import{jsx as Ot}from"react/jsx-runtime";var ua=({defaultAccessToken:r,...e})=>{let[o,t]=Nt();return Ot(R.Provider,{value:{accessToken:o??r,provided:!0,setAccessToken:t},...e})};import{useContextEx as Gt}from"@xyo-network/react-shared";var La=(r=!1)=>Gt(R,"MapboxAccessToken",r);var z=r=>({paint:{"fill-color":r,"fill-opacity":["let","density",["+",["/",["number",["get","value"]],4],.125],["interpolate",["linear"],["var","density"],.8,["var","density"],1,.85]]}});var be=r=>({layout:{visibility:"none"},paint:{"line-color":r,"line-opacity":["let","density",0,["interpolate",["linear"],["var","density"],.8,["var","density"],1,.85]],"line-width":.5}});var Ce=r=>({layout:{"text-anchor":"center","text-field":["concat","value: ",["to-string",["+",["/",["number",["get","value"]],2],.25]],`
-`,"count: ",["to-string",["get","count"]]],"text-size":10,visibility:"none"},paint:{"text-color":r}});var Se=(r,e,o)=>({paint:{"circle-color":r,"circle-opacity":o,"circle-radius":e}});import{LayerBase as Dt}from"@xyo-network/sdk-geo";var F=class extends Dt{FillLayerOptions;type="fill";constructor(e,o,t){super(e,o),this.FillLayerOptions=t||{id:this.id,source:this.source}}buildLayer(){return{...this.FillLayerOptions,id:this.id,source:this.source,type:this.type}}};import{LayerBase as Rt}from"@xyo-network/sdk-geo";var E=class extends Rt{LineLayerOptions;type="line";constructor(e,o,t){super(e,o),this.LineLayerOptions=t||{id:this.id,source:this.source}}buildLayer(){return{...this.LineLayerOptions,id:this.id,layout:{},source:this.source,type:this.type}}};import{LayerBase as zt}from"@xyo-network/sdk-geo";var _=class extends zt{SymbolLayerOptions;type="symbol";constructor(e,o,t){super(e,o),this.SymbolLayerOptions=t||{id:this.id,source:this.source}}buildLayer(){return{...this.SymbolLayerOptions,id:this.id,source:this.source,type:this.type}}};var V={LocationDebugLayerId:"location-debug-id",LocationDebugLayerSource:"location-debug-source",LocationFillLayerId:"location-fill-id",LocationFillLayerSource:"location-fill-source",LocationLineLayerId:"location-line-id",LocationLineLayerSource:"location-line-source"},Ia=(r,e="#000")=>{let{LocationFillLayerId:o,LocationFillLayerSource:t,LocationLineLayerId:a,LocationLineLayerSource:n,LocationDebugLayerId:i,LocationDebugLayerSource:s}=V,c=z(r),l=be(r),m=Ce(e),g=new F(o,t,c),p=new E(a,n,l),u=new _(i,s,m);return[g,p,u]};var Et=(r,e)=>({LocationDebugLayerId:`location-${e}-debug-id-${r}`,LocationDebugLayerSource:`location-${e}-debug-source-${r}`,LocationFillLayerId:`location-${e}-fill-id-${r}`,LocationFillLayerSource:`location-${e}-fill-source-${r}`,LocationLineLayerId:`location-${e}-line-id-${r}`,LocationLineLayerSource:`location-${e}-line-source-${r}`}),J=(r,e,o="")=>{let{LocationFillLayerId:t,LocationFillLayerSource:a}=Et(e,o),n=z(r);return new F(t,a,n)};import{LayerBase as _t}from"@xyo-network/sdk-geo";var $=class extends _t{CircleLayerOptions;type="circle";constructor(e,o,t){super(e,o),this.CircleLayerOptions=t||{id:this.id,source:this.source,type:"circle"}}buildLayer(){return{filter:["==","$type","Point"],layout:{},paint:{"circle-color":"#ff0000","circle-radius":6},type:this.type,...this.CircleLayerOptions,id:this.id,source:this.source}}};var Jt={LocationDotsLayerId:"location-dots",LocationDotsLayerSource:"location-dots-source"},Ja=(r,e=6,o=.8)=>{let{LocationDotsLayerId:t,LocationDotsLayerSource:a}=Jt,n=Se(r,e,o);return[new $(t,a,n)]};import{FlexCol as eo}from"@xylabs/react-flexbox";import"mapbox-gl/dist/mapbox-gl.css";import{Map as Qt}from"mapbox-gl";import{useEffect as Pe,useRef as Fe,useState as Wt}from"react";var $t=(i=>(i.Dark="mapbox/dark-v10",i.Light="mapbox/light-v10",i.Outdoors="mapbox/outdoors-v11",i.Satellite="mapbox/satellite-v9",i.SatelliteStreets="mapbox/satellite-streets-v11",i.Streets="mapbox/streets-v11",i))($t||{});import{jsx as qt}from"react/jsx-runtime";var Q=({accessToken:r,darkMode:e=!1,options:o,zoom:t=2,...a})=>{let[n,i]=Wt(),s=Fe(null),c=Fe(null),{setMapBoxInstance:l,map:m}=x(),{mapSettings:g}=h(),p=g?.dynamicMapResize.value;return ie(s,c,m,p),Pe(()=>{g?.preferDark?.value===!0?n?.setStyle("mapbox://styles/mapbox/dark-v10"):n?.setStyle(`mapbox://styles/${e?"mapbox/dark-v10":"mapbox/light-v10"}`)},[n,e,g]),Pe(()=>{let u=new Qt({accessToken:r,center:[0,0],container:s.current??"",style:"mapbox://styles/mapbox/light-v10",zoom:t,...o});return l?.(u),i(u),c.current=document.querySelector(".mapboxgl-canvas"),console.log("Created Map"),()=>{console.log("Removing Map"),u.remove()}},[s,i,o,t,l,r]),qt("div",{ref:u=>s.current=u,style:{bottom:0,left:0,position:"absolute",right:0,top:0,...a}})};import{FormControlLabel as Zt,Switch as Ut}from"@mui/material";import{jsx as we}from"react/jsx-runtime";var ve=({developerMode:r,field:e,...o})=>{let{mapSettings:t,setMapSettings:a}=h(),n=t?.[e],i=s=>{n&&a?.(c=>(c[n.field].value=s.target.checked,{...c}))};return n?.devMode&&r===!1||n?.hidden?null:we(Zt,{label:n?.label,control:we(Ut,{checked:n?.value,onChange:i,...o})})};import{Paper as Kt,Stack as Xt}from"@mui/material";import{FlexGrowRow as Yt,FlexRow as Vt}from"@xylabs/react-flexbox";import{useAppSettings as jt}from"@xyo-network/react-app-settings";import{jsx as v}from"react/jsx-runtime";var W=({developerMode:r,...e})=>{let{mapSettings:o}=h(),{developerMode:t}=jt();return o&&(r??t)?v(Yt,{bottom:36,left:10,position:"absolute",...e,children:v(Vt,{paddingX:2,children:v(Kt,{children:v(Xt,{direction:"row",spacing:1,marginX:1,children:Object.keys(o).map((n,i)=>v(ve,{field:o[n].field,developerMode:r},i))})})})}):null};import{jsx as He,jsxs as to}from"react/jsx-runtime";var ke=({accessToken:r,children:e,mapBoxOptions:o,zoom:t,legend:a,developerMode:n,...i})=>to(eo,{...i,children:[He(Q,{accessToken:r,options:o,zoom:t}),He(W,{developerMode:n}),a,e]});import{jsx as H}from"react/jsx-runtime";var Ae=({accessToken:r,animatedFeatureSets:e,defaultMapSettings:o,heatMapColorProps:t,staticFeatureSet:a,...n})=>{let i=ro(),{staticMapColor:s,lowUsageColor:c,highUsageColor:l}=t||{},m=s??i.palette.primary.light,[g]=no([J(m,0,"static"),J(c||m,0,"animated"),J(l||oo(m,.9),1,"animated")]);return e?.length?H(Me,{children:H(he,{defaultMapSettings:o,debugLayerName:V.LocationDebugLayerId,children:H(xe,{features:a,layers:[g[0]],featureSets:e,featureSetsLayers:g.slice(1,3),heatMapColorProps:t,children:H(ke,{accessToken:r,...n})})})}):H(ao,{minHeight:160,minWidth:160,busy:!0})};import{Alert as Oe,AlertTitle as mo}from"@mui/material";import{FlexCol as uo}from"@xylabs/react-flexbox";import{useWeakArchivistFromNode as fo,useWeakArchivistGet as go}from"@xyo-network/react-archivist";import{useMediaQuery as co,useTheme as lo}from"@mui/material";import{FlexCol as po}from"@xylabs/react-flexbox";import{Typography as j,useTheme as io}from"@mui/material";import{FlexCol as ee,FlexRow as so}from"@xylabs/react-flexbox";import{jsx as k,jsxs as Be}from"react/jsx-runtime";var Te=({startColor:r,endColor:e,startLabel:o,endLabel:t,heading:a,textColor:n,...i})=>{let s=io();return Be(ee,{...i,children:[k(j,{mb:s.spacing(.25),color:n,variant:"caption",textAlign:"center",children:a}),k(ee,{flexGrow:1,alignItems:"stretch",paddingX:s.spacing(1),mb:s.spacing(.25),children:k(ee,{height:s.spacing(.75),border:`1px solid ${n}`,sx:{backgroundImage:`linear-gradient(to right, ${r},${e})`}})}),Be(so,{flexGrow:1,justifyContent:"space-between",children:[k(j,{color:n,variant:"caption",children:o}),k(j,{color:n,variant:"caption",children:t})]})]})};import{jsx as Ie}from"react/jsx-runtime";var Ne=({...r})=>{let{startColor:e,endColor:o,startLabel:t,endLabel:a,heading:n,textColor:i}=r,s=lo(),c=co(s.breakpoints.down("sm"));return Ie(po,{position:"absolute",bottom:0,right:0,children:Ie(Te,{startColor:e,endColor:o,startLabel:t,endLabel:a,heading:n,textColor:i,alignItems:"stretch",marginBottom:s.spacing(4),marginLeft:c?s.spacing(3):0,marginRight:c?s.spacing(2):s.spacing(3),width:c?"40vw":s.spacing(18)})})};import{jsx as q,jsxs as Ge}from"react/jsx-runtime";var Qn=({accessToken:r,archivistNameOrAddress:e,...o})=>{let t=le(),[a]=fo(e),[n,i]=go(a,t),{multipleFeatureSets:s}=de(n),{heatMapColorProps:c,legendProps:l}=pe(),m={flexGrow:1,legend:l?q(Ne,{...l}):null};return Ge(uo,{alignItems:"stretch",...o,children:[i?Ge(Oe,{sx:{mt:2},children:[q(mo,{children:"Error Loading Map"}),i.message?`Error: ${i.message}`:null,"You might try authenticating again."]}):null,t===void 0?q(Oe,{children:"Missing answer hash for heat map query"}):q(Ae,{accessToken:r,defaultMapSettings:K,animatedFeatureSets:s.slice(1,s.length),staticFeatureSet:s[0],heatMapColorProps:c,...m})]})};var yo=A(),{debugLayer:Lo,scrollToZoom:Mo,fitToPoints:ho}=yo;Lo.hidden=!1;Mo.value=!0;ho.value=!0;import{useInterval as xo}from"@xylabs/react-shared";import{useCallback as w,useEffect as De,useRef as bo,useState as Co}from"react";import{Fragment as So,jsx as Po}from"react/jsx-runtime";var te=2e3,Re=3,Vn=({animateLayers:r,children:e,layers:o,layersInitialized:t,map:a})=>{let[n,i]=Co([]),s=bo([]),c=w(d=>(n[d]?s.current.push(d):s.current.push(0),s.current.at(-1)),[n]),l=w(()=>{let d=s.current.at(-1);return d===void 0?(c(0),0):d},[c]),m=w(()=>{s.current.shift()},[]),g=w(()=>{let d=n[l()];return c(l()+1),d},[n,c,l]),p=w(d=>{d?(a?.setPaintProperty(d.id,"fill-opacity",.85),setTimeout(()=>{a?.setPaintProperty(d.id,"fill-opacity",0),m()},te*2)):console.warn("tried to queue an empty layer")},[a,m]);De(()=>{o?.length&&a&&t&&i(o.filter(d=>{let f=d.id.startsWith("location-fill");return f&&a.setPaintProperty(d.id,"fill-opacity-transition",{delay:0,duration:4e3}),f}))},[o,t,a]);let u=w(()=>{let d=[];for(let f=0;f<Re;f++)d.push(g());for(let[f,b]of d.entries())f===0?p(b):setTimeout(()=>{p(b)},te*f)},[g,p]);return De(()=>{r&&t&&a&&n.length>0&&u()},[r,n.length,t,a,u]),xo(()=>{r&&t&&a&&n.length>0&&u()},te*Re),Po(So,{children:e})};import{Alert as Fo}from"@mui/material";import{FlexCol as wo}from"@xylabs/react-flexbox";import{useCallback as oe,useEffect as ze,useState as vo}from"react";import{Fragment as Ho,jsx as Z,jsxs as ko}from"react/jsx-runtime";var ci=({accessToken:r,features:e,fitToPointsPadding:o=20,layers:t,zoom:a,...n})=>{let[i,s]=vo(),{mapSettings:c}=h(),{map:l,mapInitialized:m}=x(),g=f=>f!==void 0?{maxZoom:f}:{},p=oe(()=>{if(i?.isMapReady&&e?.length&&t)for(let f of t)i.initializeMapSource(f)},[i,e,t]),u=oe(()=>{let{fitToPoints:f}=c||{};i&&l&&f?.value===!0&&i.initialMapPositioning({padding:o,...g(a)})},[c,i,l,o,a]),d=oe(()=>{i?.initialMapPositioning({padding:o,...g(a)}),p()},[i,o,p,a]);return ze(()=>{l&&e?.length&&s(new T({features:e,map:l,zoom:a}))},[l,e,a]),ze(()=>{m&&(u(),d())},[m,d,u]),Z(wo,{alignItems:"stretch",id:"xyo-mapbox-wrap",...n,children:e?ko(Ho,{children:[Z(Q,{accessToken:r,zoom:a}),Z(W,{})]}):Z(Fo,{severity:"error",children:"No data to show"})})};import{isPayloadOfSchemaType as re}from"@xyo-network/payload-model";var Ao="network.xyo.location.range.answer",di=re(Ao),Bo="network.xyo.location.heatmap.answer",fi=re(Bo),To="network.xyo.location.heatmap.quadkey.answer",gi=re(To);export{Ae as AnimatedHeatMap,Ne as AnimatedHeatMapLegend,Qn as AnimatedHeatMapLoaded,K as AnimatedHeatMapSettings,$ as CircleLayerBuilder,Te as ColorGradientLegend,A as DefaultMapSettings,F as FillLayerBuilder,z as HeatMapFillLayerConfig,xe as HeatMapInitializerProvider,be as HeatMapLineLayerConfig,yo as HeatMapSettings,Ce as HeatMapSymbolLayerConfig,Vn as LayerAnimator,E as LineLayerBuilder,Ia as LocationHeatMapLayerBuilder,J as LocationHeatMapLayerBuilderAnimated,Se as LocationPointLayerConfig,Ja as LocationPointsMapLayerBuilder,P as MapBase,Q as MapBox,Me as MapBoxInstanceProvider,C as MapHeat,V as MapHeatConstants,T as MapPoints,Jt as MapPointsConstants,ve as MapSettingSwitch,I as MapSettings,W as MapSettingsBox,he as MapSettingsProvider,$t as MapStyle,R as MapboxAccessTokenContext,ua as MapboxAccessTokenProvider,ke as MapboxHeatFlexBox,ci as MapboxPointsFlexBox,Ao as NetworkLocationAnswerSchema,Bo as NetworkLocationHeatmapAnswerSchema,To as NetworkLocationHeatmapQuadkeyAnswerSchema,_ as SymbolLayerBuilder,di as isNetworkLocationAnswer,fi as isNetworkLocationHeatmapAnswer,gi as isNetworkLocationHeatmapQuadkeyAnswer,ie as useDynamicMapResize,ce as useDynamicPositioning,le as useFindHashes,pe as useHeatMapColors,ia as useHeatMapInitializer,x as useMapBoxInstance,h as useMapSettings,La as useMapboxAccessToken,de as useQuadKeyPayloadsToFeatures};
+// src/Settings/DefaultMapSettings.ts
+var DefaultMapSettings = () => ({
+  debugLayer: {
+    devMode: true,
+    field: "debugLayer",
+    hidden: true,
+    label: "Debug Layer",
+    value: false
+  },
+  debugLogging: {
+    devMode: true,
+    field: "debugLogging",
+    hidden: true,
+    label: "Debug Logging",
+    value: false
+  },
+  dynamicMapResize: {
+    devMode: true,
+    field: "dynamicMapResize",
+    hidden: true,
+    label: "Auto Map Resize",
+    value: true
+  },
+  enableControls: {
+    devMode: true,
+    field: "enableControls",
+    hidden: true,
+    label: "Map Controls",
+    value: false
+  },
+  fitToPoints: {
+    devMode: true,
+    field: "fitToPoints",
+    hidden: true,
+    label: "Fit To Points",
+    value: false
+  },
+  preferDark: {
+    devMode: false,
+    field: "preferDark",
+    hidden: true,
+    label: "Prefer dark",
+    value: false
+  },
+  scrollToZoom: {
+    devMode: true,
+    field: "scrollToZoom",
+    hidden: true,
+    label: "Scroll To Zoom",
+    value: false
+  }
+});
+
+// src/AnimatedHeatMapSettings.ts
+var AnimatedHeatMapSettings = DefaultMapSettings();
+var { debugLayer, scrollToZoom, fitToPoints, preferDark } = AnimatedHeatMapSettings;
+debugLayer.hidden = false;
+scrollToZoom.value = true;
+fitToPoints.value = false;
+preferDark.value = true;
+
+// src/Components/AnimatedHeatMap.tsx
+import { darken, useTheme as useTheme2 } from "@mui/material";
+import { FlexCol as FlexCol2 } from "@xylabs/react-flexbox";
+import { useState as useState9 } from "react";
+
+// src/Contexts/HeatMapInitializer/Provider.tsx
+import { forget as forget2 } from "@xylabs/forget";
+import { useEffect as useEffect6, useState as useState6 } from "react";
+
+// src/hooks/useDynamicMapResize.tsx
+import { useEffect, useMemo, useState } from "react";
+var useDynamicMapResize = (mapContainerRef, mapCanvasRef, mapInstance, active = true) => {
+  const [dependenciesReady, setDependenciesReady] = useState(false);
+  const resizer = useMemo(
+    () => new ResizeObserver(() => {
+      const width = mapContainerRef.current?.getBoundingClientRect().width;
+      if (width && mapCanvasRef.current) {
+        mapCanvasRef.current.style.width = `${width}px`;
+        setTimeout(() => mapInstance?.resize());
+      }
+    }),
+    [mapCanvasRef, mapContainerRef, mapInstance]
+  );
+  useEffect(() => {
+    const dependenciesReady2 = !!(active && mapInstance && mapContainerRef?.current && mapCanvasRef.current);
+    setDependenciesReady(dependenciesReady2);
+  }, [active, mapCanvasRef, mapContainerRef, mapInstance]);
+  useEffect(() => {
+    if (dependenciesReady) {
+      if (mapContainerRef.current) {
+        resizer.observe(mapContainerRef.current);
+      }
+      return () => {
+        resizer.disconnect();
+      };
+    }
+  }, [active, dependenciesReady, mapCanvasRef, mapContainerRef, mapInstance, resizer]);
+};
+
+// src/hooks/useDynamicPositioning.tsx
+import { useWindowSize } from "@xylabs/react-shared";
+import { useEffect as useEffect2, useState as useState2 } from "react";
+var defaultZoom = 1.6;
+var defaultAspectRatioRange = [0.5, 2];
+var latRange = [0.9121644205263664, 1.71785031559439];
+var lngRange = [-81.4742014851959, 12.788958675506933];
+var linearInterpolate = (aspectRatio, degreeRange, aspectRatioRange) => {
+  const [degreeMin, degreeMax] = degreeRange;
+  const [aspectRatioMin, aspectRatioMax] = aspectRatioRange || defaultAspectRatioRange;
+  const aspectRatioRangeSpan = aspectRatioMax - aspectRatioMin;
+  const degreeRangeSpan = degreeMax - degreeMin;
+  const percent = (aspectRatio - aspectRatioMin) / aspectRatioRangeSpan;
+  const scaledDegree = percent * degreeRangeSpan + degreeMin;
+  return scaledDegree;
+};
+var useDynamicPositioning = () => {
+  const [options, setOptions] = useState2({});
+  const { width, height } = useWindowSize();
+  useEffect2(() => {
+    if (width && height) {
+      const aspectRatio = width / height;
+      setOptions({
+        center: [linearInterpolate(aspectRatio, lngRange), linearInterpolate(aspectRatio, latRange)],
+        zoom: defaultZoom
+      });
+    }
+  }, [height, width]);
+  return { options };
+};
+
+// src/hooks/useFindHashes.tsx
+import { useNetwork } from "@xyo-network/react-network";
+import { useMemo as useMemo2 } from "react";
+var animatedAnswerHashesConst = [
+  "79af071f451fc7af10d009dc63236ef9a9b211732c1ee0c06f028fcecf2336c5",
+  "531bfba6d8dfefd3bcc888aca54cdbbd4574ed2b3ec551b230845a1f9a608898",
+  "c874412b4faa4947de81372fd1ba12fdd6f43f5e408622b7f357cb2bcb3f17cb",
+  "29d3f8b882c61a82a1a1675782a27e797ea7196f45a23b4409680ab8b8d5f14e",
+  "cfd20f80ac073fd9518f4ef3f43d2a1f5e4e56e40c2677f38d6f6fecd05df60c",
+  "1354fa73497519a39aed19fc99bdbae78a880a1eafb2f7898d607e07db36528d",
+  "1043b0d25eacfc5013ae9dba780305a6fbf01a43543bd871d7c00537fca142a9",
+  "973dfc5df142851ced258d52d0ac2784e814000ac22e35776f772256b0d4dde9",
+  "463808eb74d3d87e6563970e0301a493577f8cd1b501e6e0ffa5e027ad2cea95",
+  "15b21acea2e3fd9d1ace3768a72636ee7bdf67a6f8e0807bfa2273dea2207555",
+  "32d377bfe7ebe382598c54dd13f8af7510e0a1e2fd2e913311fdd58e517e5e2e,"
+];
+var staticAnswerHashConst = "c7bbf61f61cfd4a1b2def160c28136fc1d100d39fbdb67b227a2c6e558d9d3a5";
+var useFindHashes = () => {
+  const { network } = useNetwork();
+  const exploreMapHashes = network?.nodes?.find((node) => node.type === "archivist")?.explorerMapHashes;
+  const animatedAnswerHashes = exploreMapHashes?.animatedAnswerHashes || animatedAnswerHashesConst;
+  const staticAnswerHash = exploreMapHashes?.staticAnswerHash || staticAnswerHashConst;
+  const foundHashes = useMemo2(() => [staticAnswerHash, ...animatedAnswerHashes], [animatedAnswerHashes, staticAnswerHash]);
+  return foundHashes;
+};
+
+// src/hooks/useHeatMapColors.tsx
+import { useTheme } from "@mui/material";
+var useHeatMapColors = () => {
+  const theme = useTheme();
+  const staticMapColor = "#FFFF75";
+  const highUsageColor = "#FF0000";
+  const heatMapColorProps = {
+    highUsageColor,
+    lowUsageColor: "#FFB3B3",
+    staticMapColor
+  };
+  const legendProps = {
+    endColor: highUsageColor,
+    endLabel: "High",
+    heading: "Network Usage",
+    startColor: staticMapColor,
+    startLabel: "Low",
+    textColor: theme.palette.common.white
+  };
+  return { heatMapColorProps, legendProps };
+};
+
+// src/hooks/useQuadKeyPayloadsToFeatures.tsx
+import { compact } from "@xylabs/lodash";
+import { GeoJson } from "@xyo-network/sdk-geo";
+import { useEffect as useEffect3, useState as useState3 } from "react";
+var quadKeyToFeature = ({ density, quadkey }) => {
+  const polygonFeature = new GeoJson(quadkey).polygonFeature();
+  polygonFeature.properties = {
+    count: density,
+    density
+  };
+  return polygonFeature;
+};
+var setDensity = (feature) => {
+  if (feature.properties) {
+    feature.properties.value = feature.properties.density / 5;
+  }
+  return feature;
+};
+var useQuadKeyPayloadsToFeatures = (payloads) => {
+  const [multipleFeatureSets, setMultipleFeatureSets] = useState3([[]]);
+  const [features, setFeatures] = useState3([]);
+  const [error, setError] = useState3();
+  useEffect3(() => {
+    if (Array.isArray(payloads)) {
+      if (compact(payloads).length > 0) {
+        const mappedFeatures = payloads?.map((payload) => payload?.result.map(quadKeyToFeature));
+        setMultipleFeatureSets(mappedFeatures.map((features2) => features2?.map(setDensity) ?? []));
+      } else {
+        setError(new Error("Cannot find payloads for provided hashes"));
+      }
+    }
+    if (payloads && payloads.result) {
+      const singlePayload = payloads;
+      const mappedFeatures = singlePayload.result.map(quadKeyToFeature);
+      setFeatures(mappedFeatures.map(setDensity));
+    }
+  }, [payloads]);
+  return { error, features, multipleFeatureSets };
+};
+
+// src/MapBoxClasses/MapBase.ts
+import { assertEx } from "@xylabs/assert";
+import { GeoJson as GeoJson2 } from "@xyo-network/sdk-geo";
+var MapBase = class {
+  _config;
+  constructor(config) {
+    this._config = { requestLocation: true, zoom: 2, ...config };
+  }
+  get isMapReady() {
+    return !!this._config.map;
+  }
+  initializeMapSource(layer) {
+    const getSource = () => {
+      const featuresCollection = GeoJson2.featureCollection(this._config.features);
+      return GeoJson2.featuresSource(featuresCollection);
+    };
+    const existingSource = this._config.map.getSource(layer.source);
+    const source = getSource();
+    if (existingSource) {
+      existingSource.setData(assertEx(source.data));
+    } else {
+      this._config.map.addSource(layer.source, source);
+    }
+    layer.update(this._config.map, true);
+    return this;
+  }
+};
+
+// src/MapBoxClasses/MapHeat.ts
+import { assertEx as assertEx2 } from "@xylabs/assert";
+import { delay } from "@xylabs/delay";
+import { forget } from "@xylabs/forget";
+import { GeoJson as GeoJson3 } from "@xyo-network/sdk-geo";
+import { LngLatBounds } from "mapbox-gl";
+var MapHeat = class extends MapBase {
+  static animationStarted = false;
+  config;
+  constructor(config) {
+    super(config);
+    this.config = config;
+  }
+  static initialMapPositioning(options, map, features, initialBounds) {
+    if (!features) {
+      return;
+    }
+    let bounds;
+    if (initialBounds) {
+      bounds = initialBounds;
+    } else {
+      bounds = new LngLatBounds();
+      features.forEach((feature) => {
+        for (const coordinates of feature.geometry.coordinates) {
+          for (const position of coordinates) {
+            bounds.extend(position);
+          }
+        }
+      });
+    }
+    map.setCenter(bounds.getCenter());
+    map.fitBounds(bounds, options);
+    return this;
+  }
+  static async initializeAnimatedHeatMapSource(layers, featureSet, map, startColor, endColor) {
+    this.animationStarted = true;
+    let layerTick = 0;
+    let sourceTick = 0;
+    const sources = featureSet.map((feature) => {
+      const featuresCollection = GeoJson3.featureCollection(feature);
+      return GeoJson3.featuresSource(featuresCollection);
+    });
+    this.updateLayer(map, layers[0], sources[0]);
+    this.updateLayer(map, layers[1], sources[1]);
+    for (const layer of layers) {
+      map.setPaintProperty(layer.id, "fill-opacity", 0);
+    }
+    const frameLength = 3e3;
+    const initialPad = 0.5;
+    const factor = 10;
+    const steps = 30;
+    const stepLength = frameLength / steps;
+    const lowUsageColor = startColor ?? "#FFB3B3";
+    const highUsageColor = endColor ?? "#FF0000";
+    const dynamicFillColor = (factor2, initialPad2, i) => {
+      const sinFade = Math.sin(i / steps * Math.PI / 2);
+      const cosFade = Math.cos(i / steps * Math.PI / 2);
+      const divisor = factor2 + factor2 * sinFade;
+      const offset = initialPad2 * cosFade;
+      return [
+        "let",
+        "density",
+        ["+", ["/", ["number", ["get", "value"]], divisor], offset],
+        ["interpolate", ["linear"], ["var", "density"], 0, lowUsageColor, 0.5, highUsageColor]
+      ];
+    };
+    const fadedIn = layers.map((_) => false);
+    const fadeIn = async (id, index) => {
+      for (let i = steps; i >= 1; i--) {
+        map.setPaintProperty(id, "fill-color", dynamicFillColor(factor, initialPad, i * (180 / stepLength)));
+        await delay(stepLength);
+      }
+      fadedIn[index] = true;
+    };
+    const fadeOut = async (id, index) => {
+      for (let i = 1; i <= steps; i++) {
+        map.setPaintProperty(id, "fill-color", dynamicFillColor(factor, initialPad, i * (180 / stepLength)));
+        await delay(stepLength);
+      }
+      fadedIn[index] = false;
+    };
+    let started = false;
+    const startAnimation = async () => {
+      assertEx2(!started, () => "Animation Already Started");
+      started = true;
+      while (this.animationStarted) {
+        const upLayer = layerTick % layers.length;
+        const downLayer = (layerTick + 1) % layers.length;
+        const incomingSource = sourceTick % featureSet.length;
+        const outgoingSource = (sourceTick + 1) % featureSet.length;
+        if (fadedIn[upLayer]) {
+          this.updateLayer(map, layers[upLayer], sources[incomingSource]);
+          forget(fadeOut(layers[upLayer].id, upLayer));
+        }
+        if (!fadedIn[downLayer]) {
+          this.updateLayer(map, layers[downLayer], sources[outgoingSource]);
+          forget(fadeIn(layers[downLayer].id, downLayer));
+        }
+        while ((fadedIn[upLayer] || !fadedIn[downLayer]) && this.animationStarted) {
+          await delay(1e3);
+        }
+        layerTick++;
+        sourceTick++;
+      }
+    };
+    await startAnimation();
+  }
+  static updateLayer(map, layer, source) {
+    const existingSource = map.getSource(layer.source);
+    if (existingSource && source.data) {
+      existingSource.setData(source.data);
+    } else if (source) {
+      map.addSource(layer.source, source);
+    }
+    layer.update(map, true);
+  }
+  // Build layers each with the same features
+  initializeHeatMapSource(layers) {
+    const getSource = (_) => {
+      const featuresCollection = GeoJson3.featureCollection(this.config.features);
+      return GeoJson3.featuresSource(featuresCollection);
+    };
+    for (const [index, layer] of layers.entries()) {
+      const existingSource = this.config.map.getSource(layer.source);
+      const source = getSource(index);
+      if (existingSource) {
+        existingSource.setData(assertEx2(source.data));
+      } else {
+        this.config.map.addSource(layer.source, source);
+      }
+      layer.update(this.config.map, true);
+    }
+    return this;
+  }
+};
+
+// src/MapBoxClasses/MapPoints.ts
+import { LngLatBounds as LngLatBounds2 } from "mapbox-gl";
+var MapPoints = class extends MapBase {
+  config;
+  constructor(config) {
+    super(config);
+    this.config = config;
+  }
+  initialMapPositioning(options, initialBounds) {
+    let bounds;
+    if (initialBounds) {
+      bounds = initialBounds;
+    } else {
+      bounds = new LngLatBounds2();
+      this.config.features.forEach((feature) => {
+        bounds.extend(feature.geometry.coordinates);
+      });
+    }
+    this.config.map.setCenter(bounds.getCenter());
+    this.config.map.fitBounds(bounds, options);
+    return this.config.map;
+  }
+};
+
+// src/MapBoxClasses/MapSettings.ts
+import { GeolocateControl, NavigationControl } from "mapbox-gl";
+var MapSettings = class _MapSettings {
+  static geoLocateControl;
+  static mapListeners = {
+    logData: (ev, map) => {
+      const target = map || ev?.target;
+      if (target) {
+        console.log("zoom", target.getZoom());
+        console.log("center", target.getCenter());
+      }
+    }
+  };
+  static navControl;
+  static requestLocation;
+  static toggleControls(value, map, zoom, requestLocation) {
+    if (value) {
+      _MapSettings.addControls(map, zoom, requestLocation);
+    } else {
+      _MapSettings.removeControls(map);
+    }
+    return this;
+  }
+  static toggleDebugLayer(value, map, layerName) {
+    const debugLayer3 = map.getLayer(layerName);
+    if (debugLayer3) {
+      if (value) {
+        map.setLayoutProperty(layerName, "visibility", "visible");
+      } else {
+        map.setLayoutProperty(layerName, "visibility", "none");
+      }
+    }
+    return this;
+  }
+  static toggleDebugLogging(value, map) {
+    const debugEvents = ["resize", "zoomend", "dragend"];
+    if (value) {
+      this.mapListeners.logData(void 0, map);
+      for (const event of debugEvents) map.on(event, this.mapListeners.logData);
+    } else {
+      for (const event of debugEvents) map.off(event, this.mapListeners.logData);
+    }
+  }
+  static toggleScrollToZoom(value, map) {
+    if (value) {
+      map.scrollZoom.enable();
+    } else {
+      map.scrollZoom.disable();
+    }
+    return this;
+  }
+  static updateSettings(config) {
+    const { settings, map, zoom, requestLocation, debugLayerName = "" } = config;
+    const { scrollToZoom: scrollToZoom3, enableControls, debugLayer: debugLayer3, debugLogging } = settings;
+    _MapSettings.toggleControls(enableControls?.value, map, zoom, requestLocation).toggleScrollToZoom(scrollToZoom3?.value, map).toggleDebugLayer(debugLayer3?.value, map, debugLayerName).toggleDebugLogging(debugLogging.value, map);
+  }
+  // Needs to be static so we ensure controls are only instantiated once
+  static addControls(map, zoom, requestLocation) {
+    const geolocateControl = new GeolocateControl({
+      fitBoundsOptions: {
+        zoom: zoom || 2
+      },
+      positionOptions: {
+        enableHighAccuracy: true
+      },
+      trackUserLocation: true
+    });
+    const navControl = new NavigationControl({
+      showCompass: false
+    });
+    this.geoLocateControl = this.geoLocateControl || geolocateControl;
+    this.navControl = this.navControl || navControl;
+    if (!map.hasControl(this.geoLocateControl) && requestLocation) {
+      map.addControl(this.geoLocateControl);
+    }
+    if (!map.hasControl(this.navControl)) {
+      map.addControl(this.navControl, "top-left");
+    }
+    return this;
+  }
+  static removeControls(map) {
+    if (this.geoLocateControl && map.hasControl(this.geoLocateControl) && this.requestLocation) {
+      map.removeControl(this.geoLocateControl);
+    }
+    if (this.navControl && map.hasControl(this.navControl)) {
+      map.removeControl(this.navControl);
+    }
+    return this;
+  }
+};
+
+// src/Contexts/MapBoxInstance/Provider.tsx
+import { useEffect as useEffect4, useState as useState4 } from "react";
+
+// src/Contexts/MapBoxInstance/Context.ts
+import { createContext } from "react";
+var MapBoxInstanceContext = createContext({});
+
+// src/Contexts/MapBoxInstance/Provider.tsx
+import { jsx } from "react/jsx-runtime";
+var MapBoxInstanceProvider = ({ children }) => {
+  const [map, setMapBoxInstance] = useState4();
+  const [mapInitialized, setMapInitialized] = useState4(false);
+  const value = { map, mapInitialized, setMapBoxInstance };
+  useEffect4(() => {
+    if (!mapInitialized && map) {
+      map?.on("load", () => {
+        setMapInitialized(true);
+      });
+    }
+  }, [map, mapInitialized, setMapInitialized]);
+  return /* @__PURE__ */ jsx(MapBoxInstanceContext.Provider, { value, children });
+};
+
+// src/Contexts/MapBoxInstance/useMapBoxInstance.tsx
+import { assertEx as assertEx3 } from "@xylabs/assert";
+import { useContext } from "react";
+var useMapBoxInstance = () => {
+  const context = useContext(MapBoxInstanceContext);
+  assertEx3("map" in context, () => "useMapBoxInstance must be used within a MapBoxInstanceContext");
+  return context;
+};
+
+// src/Contexts/MapSettings/Provider.tsx
+import { useEffect as useEffect5, useState as useState5 } from "react";
+
+// src/Contexts/MapSettings/Context.ts
+import { createContext as createContext2 } from "react";
+var MapSettingsContext = createContext2({});
+
+// src/Contexts/MapSettings/Provider.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var MapSettingsProvider = ({
+  children,
+  debugLayerName,
+  defaultMapSettings,
+  requestLocation,
+  zoom = 1
+}) => {
+  const [mapSettings, setMapSettings] = useState5(defaultMapSettings || {});
+  const { map, mapInitialized } = useMapBoxInstance();
+  const value = {
+    mapSettings,
+    setMapSettings
+  };
+  useEffect5(() => {
+    if (mapSettings && map && mapInitialized) {
+      MapSettings.updateSettings({ debugLayerName, map, requestLocation, settings: mapSettings, zoom });
+    }
+  }, [debugLayerName, map, mapInitialized, mapSettings, requestLocation, zoom]);
+  return /* @__PURE__ */ jsx2(MapSettingsContext.Provider, { value, children });
+};
+
+// src/Contexts/MapSettings/useMapSettings.tsx
+import { useContext as useContext2 } from "react";
+var useMapSettings = () => {
+  const context = useContext2(MapSettingsContext);
+  return context;
+};
+
+// src/Contexts/HeatMapInitializer/Context.ts
+import { createContext as createContext3 } from "react";
+var HeatMapInitializerContext = createContext3({});
+
+// src/Contexts/HeatMapInitializer/Provider.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var HeatMapInitializerProvider = ({
+  children,
+  featureSets,
+  featureSetsLayers,
+  features,
+  fitToPadding,
+  heatMapColorProps,
+  layers,
+  zoom
+}) => {
+  const [mapHeat, setMapHeat] = useState6();
+  const { options } = useDynamicPositioning();
+  const { mapSettings } = useMapSettings();
+  const { map, mapInitialized } = useMapBoxInstance();
+  const value = {
+    MapHeat: mapHeat,
+    heatMapColorProps
+  };
+  useEffect6(() => {
+    if (mapInitialized && featureSets?.length && featureSets[0].length > 0 && map && featureSetsLayers?.length) {
+      const { lowUsageColor, highUsageColor } = heatMapColorProps;
+      forget2(MapHeat.initializeAnimatedHeatMapSource(featureSetsLayers, featureSets, map, lowUsageColor, highUsageColor));
+    }
+    return () => {
+      MapHeat.animationStarted = false;
+    };
+  }, [featureSets, featureSetsLayers, mapInitialized, map, heatMapColorProps]);
+  useEffect6(() => {
+    if (mapHeat && mapInitialized && features?.length && layers?.length) {
+      mapHeat.initializeHeatMapSource(layers);
+    }
+  }, [mapHeat, features?.length, layers, mapInitialized]);
+  useEffect6(() => {
+    if (mapInitialized) {
+      const { fitToPoints: fitToPoints3 } = mapSettings || {};
+      if (map) {
+        if (fitToPoints3?.value === true) {
+          MapHeat.initialMapPositioning({ padding: fitToPadding }, map, features);
+        } else if (options.zoom && options.center) {
+          map.setZoom(options.zoom);
+          map.setCenter(options.center);
+        }
+      }
+    }
+  }, [mapHeat, map, mapSettings, fitToPadding, options, mapInitialized, features]);
+  useEffect6(() => {
+    if (map && features?.length) {
+      setMapHeat(new MapHeat({ features, map, zoom }));
+    }
+  }, [map, features, zoom]);
+  return /* @__PURE__ */ jsx3(HeatMapInitializerContext.Provider, { value, children });
+};
+
+// src/Contexts/HeatMapInitializer/useHeatMapInitializer.tsx
+import { assertEx as assertEx4 } from "@xylabs/assert";
+import { useContext as useContext3 } from "react";
+var useHeatMapInitializer = () => {
+  const context = useContext3(HeatMapInitializerContext);
+  assertEx4("heatMapInitialized" in context, () => "useHeatMapInitializer must be used within a HeatMapInitializerContext");
+  return context;
+};
+
+// src/Contexts/MapboxAccessToken/Context.ts
+import { createContextEx } from "@xyo-network/react-shared";
+var MapboxAccessTokenContext = createContextEx();
+
+// src/Contexts/MapboxAccessToken/Provider.tsx
+import { useState as useState7 } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var MapboxAccessTokenProvider = ({ defaultAccessToken, ...props }) => {
+  const [accessToken, setAccessToken] = useState7();
+  return /* @__PURE__ */ jsx4(MapboxAccessTokenContext.Provider, { value: { accessToken: accessToken ?? defaultAccessToken, provided: true, setAccessToken }, ...props });
+};
+
+// src/Contexts/MapboxAccessToken/use.ts
+import { useContextEx } from "@xyo-network/react-shared";
+var useMapboxAccessToken = (required = false) => {
+  return useContextEx(MapboxAccessTokenContext, "MapboxAccessToken", required);
+};
+
+// src/Layers/Configs/HeatMapFillLayerConfig.ts
+var HeatMapFillLayerConfig = (color) => ({
+  paint: {
+    "fill-color": color,
+    "fill-opacity": [
+      "let",
+      "density",
+      ["+", ["/", ["number", ["get", "value"]], 4], 0.125],
+      ["interpolate", ["linear"], ["var", "density"], 0.8, ["var", "density"], 1, 0.85]
+    ]
+  }
+});
+
+// src/Layers/Configs/HeatMapLineLayerConfig.ts
+var HeatMapLineLayerConfig = (color) => ({
+  layout: {
+    // Enable for debugging
+    visibility: "none"
+  },
+  paint: {
+    "line-color": color,
+    "line-opacity": ["let", "density", 0, ["interpolate", ["linear"], ["var", "density"], 0.8, ["var", "density"], 1, 0.85]],
+    "line-width": 0.5
+  }
+});
+
+// src/Layers/Configs/HeatMapSymbolLayerConfig.ts
+var HeatMapSymbolLayerConfig = (color) => ({
+  layout: {
+    "text-anchor": "center",
+    "text-field": [
+      "concat",
+      "value: ",
+      ["to-string", ["+", ["/", ["number", ["get", "value"]], 2], 0.25]],
+      "\n",
+      "count: ",
+      ["to-string", ["get", "count"]]
+    ],
+    "text-size": 10,
+    visibility: "none"
+  },
+  paint: {
+    "text-color": color
+  }
+});
+
+// src/Layers/Configs/LocationPointLayerConfig.ts
+var LocationPointLayerConfig = (color, circleRadius, circleOpacity) => {
+  return {
+    paint: {
+      "circle-color": color,
+      "circle-opacity": circleOpacity,
+      "circle-radius": circleRadius
+    }
+  };
+};
+
+// src/Layers/FillLayer.ts
+import { LayerBase } from "@xyo-network/sdk-geo";
+var FillLayerBuilder = class extends LayerBase {
+  FillLayerOptions;
+  // ensures this class passes for `AnyLayer` type in MapBox
+  type = "fill";
+  constructor(id, source, FillLayerOptions) {
+    super(id, source);
+    this.FillLayerOptions = FillLayerOptions || { id: this.id, source: this.source };
+  }
+  buildLayer() {
+    return {
+      ...this.FillLayerOptions,
+      id: this.id,
+      source: this.source,
+      type: this.type
+    };
+  }
+};
+
+// src/Layers/LineLayer.ts
+import { LayerBase as LayerBase2 } from "@xyo-network/sdk-geo";
+var LineLayerBuilder = class extends LayerBase2 {
+  LineLayerOptions;
+  // ensures this class passes for `AnyLayer` type in MapBox
+  type = "line";
+  constructor(id, source, LineLayerOptions) {
+    super(id, source);
+    this.LineLayerOptions = LineLayerOptions || { id: this.id, source: this.source };
+  }
+  buildLayer() {
+    return {
+      ...this.LineLayerOptions,
+      id: this.id,
+      layout: {},
+      source: this.source,
+      type: this.type
+    };
+  }
+};
+
+// src/Layers/SymbolLayer.ts
+import { LayerBase as LayerBase3 } from "@xyo-network/sdk-geo";
+var SymbolLayerBuilder = class extends LayerBase3 {
+  SymbolLayerOptions;
+  // ensures this class passes for `AnyLayer` type in MapBox
+  type = "symbol";
+  constructor(id, source, SymbolLayerOptions) {
+    super(id, source);
+    this.SymbolLayerOptions = SymbolLayerOptions || { id: this.id, source: this.source };
+  }
+  buildLayer() {
+    return {
+      ...this.SymbolLayerOptions,
+      id: this.id,
+      source: this.source,
+      type: this.type
+    };
+  }
+};
+
+// src/Layers/Builders/LocationHeatMapLayerBuilder.ts
+var MapHeatConstants = {
+  LocationDebugLayerId: "location-debug-id",
+  LocationDebugLayerSource: "location-debug-source",
+  LocationFillLayerId: "location-fill-id",
+  LocationFillLayerSource: "location-fill-source",
+  LocationLineLayerId: "location-line-id",
+  LocationLineLayerSource: "location-line-source"
+};
+var LocationHeatMapLayerBuilder = (color, alternateColor = "#000") => {
+  const {
+    LocationFillLayerId,
+    LocationFillLayerSource,
+    LocationLineLayerId,
+    LocationLineLayerSource,
+    LocationDebugLayerId,
+    LocationDebugLayerSource
+  } = MapHeatConstants;
+  const fillLayerConfig = HeatMapFillLayerConfig(color);
+  const lineLayerConfig = HeatMapLineLayerConfig(color);
+  const debugLayerConfig = HeatMapSymbolLayerConfig(alternateColor);
+  const fillLayer = new FillLayerBuilder(LocationFillLayerId, LocationFillLayerSource, fillLayerConfig);
+  const lineLayer = new LineLayerBuilder(LocationLineLayerId, LocationLineLayerSource, lineLayerConfig);
+  const debugLayer3 = new SymbolLayerBuilder(LocationDebugLayerId, LocationDebugLayerSource, debugLayerConfig);
+  return [fillLayer, lineLayer, debugLayer3];
+};
+
+// src/Layers/Builders/LocationHeatMapLayerBuilderAnimated.ts
+var MapHeatConstants2 = (index, type) => ({
+  LocationDebugLayerId: `location-${type}-debug-id-${index}`,
+  LocationDebugLayerSource: `location-${type}-debug-source-${index}`,
+  LocationFillLayerId: `location-${type}-fill-id-${index}`,
+  LocationFillLayerSource: `location-${type}-fill-source-${index}`,
+  LocationLineLayerId: `location-${type}-line-id-${index}`,
+  LocationLineLayerSource: `location-${type}-line-source-${index}`
+});
+var LocationHeatMapLayerBuilderAnimated = (color, index, type = "") => {
+  const { LocationFillLayerId, LocationFillLayerSource } = MapHeatConstants2(index, type);
+  const fillLayerConfig = HeatMapFillLayerConfig(color);
+  const fillLayer = new FillLayerBuilder(LocationFillLayerId, LocationFillLayerSource, fillLayerConfig);
+  return fillLayer;
+};
+
+// src/Layers/CircleLayer.ts
+import { LayerBase as LayerBase4 } from "@xyo-network/sdk-geo";
+var CircleLayerBuilder = class extends LayerBase4 {
+  CircleLayerOptions;
+  // ensures this class passes for `AnyLayer` type in MapBox
+  type = "circle";
+  constructor(id, source, CircleLayerOptions) {
+    super(id, source);
+    this.CircleLayerOptions = CircleLayerOptions || { id: this.id, source: this.source, type: "circle" };
+  }
+  buildLayer() {
+    return {
+      filter: ["==", "$type", "Point"],
+      layout: {},
+      paint: {
+        "circle-color": "#ff0000",
+        "circle-radius": 6
+      },
+      type: this.type,
+      ...this.CircleLayerOptions,
+      id: this.id,
+      source: this.source
+    };
+  }
+};
+
+// src/Layers/Builders/LocationPointsMapLayerBuilder.ts
+var MapPointsConstants = {
+  LocationDotsLayerId: "location-dots",
+  LocationDotsLayerSource: "location-dots-source"
+};
+var LocationPointsMapLayerBuilder = (color, circleRadius = 6, circleOpacity = 0.8) => {
+  const { LocationDotsLayerId, LocationDotsLayerSource } = MapPointsConstants;
+  const dotLayerConfig = LocationPointLayerConfig(color, circleRadius, circleOpacity);
+  const dotLayer = new CircleLayerBuilder(LocationDotsLayerId, LocationDotsLayerSource, dotLayerConfig);
+  return [dotLayer];
+};
+
+// src/Components/MapBoxHeat.tsx
+import { FlexCol } from "@xylabs/react-flexbox";
+
+// src/Components/MapBox.tsx
+import "mapbox-gl/dist/mapbox-gl.css";
+import { Map as Map3 } from "mapbox-gl";
+import { useEffect as useEffect7, useRef, useState as useState8 } from "react";
+
+// src/lib/MapStyle.ts
+var MapStyle = /* @__PURE__ */ ((MapStyle2) => {
+  MapStyle2["Dark"] = "mapbox/dark-v10";
+  MapStyle2["Light"] = "mapbox/light-v10";
+  MapStyle2["Outdoors"] = "mapbox/outdoors-v11";
+  MapStyle2["Satellite"] = "mapbox/satellite-v9";
+  MapStyle2["SatelliteStreets"] = "mapbox/satellite-streets-v11";
+  MapStyle2["Streets"] = "mapbox/streets-v11";
+  return MapStyle2;
+})(MapStyle || {});
+
+// src/Components/MapBox.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var MapBox = ({ accessToken, darkMode = false, options, zoom = 2, ...props }) => {
+  const [map, setMap] = useState8();
+  const mapContainerRef = useRef(null);
+  const mapCanvasRef = useRef(null);
+  const { setMapBoxInstance, map: mapInstance } = useMapBoxInstance();
+  const { mapSettings } = useMapSettings();
+  const activeResize = mapSettings?.dynamicMapResize.value;
+  useDynamicMapResize(mapContainerRef, mapCanvasRef, mapInstance, activeResize);
+  useEffect7(() => {
+    if (mapSettings?.preferDark?.value === true) {
+      map?.setStyle(`mapbox://styles/${"mapbox/dark-v10" /* Dark */}`);
+    } else {
+      map?.setStyle(`mapbox://styles/${darkMode ? "mapbox/dark-v10" /* Dark */ : "mapbox/light-v10" /* Light */}`);
+    }
+  }, [map, darkMode, mapSettings]);
+  useEffect7(() => {
+    const map2 = new Map3({
+      accessToken,
+      center: [0, 0],
+      container: mapContainerRef.current ?? "",
+      style: `mapbox://styles/${"mapbox/light-v10" /* Light */}`,
+      zoom,
+      ...options
+    });
+    setMapBoxInstance?.(map2);
+    setMap(map2);
+    mapCanvasRef.current = document.querySelector(".mapboxgl-canvas");
+    console.log("Created Map");
+    return () => {
+      console.log("Removing Map");
+      map2.remove();
+    };
+  }, [mapContainerRef, setMap, options, zoom, setMapBoxInstance, accessToken]);
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      ref: (el) => mapContainerRef.current = el,
+      style: {
+        bottom: 0,
+        left: 0,
+        position: "absolute",
+        right: 0,
+        top: 0,
+        ...props
+      }
+    }
+  );
+};
+
+// src/Components/MapSettingsComponents/Setting.tsx
+import { FormControlLabel, Switch } from "@mui/material";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var MapSettingSwitch = ({ developerMode, field, ...props }) => {
+  const { mapSettings, setMapSettings } = useMapSettings();
+  const setting = mapSettings?.[field];
+  const onLocalChange = (event) => {
+    if (setting) {
+      setMapSettings?.((previous) => {
+        previous[setting.field].value = event.target.checked;
+        return { ...previous };
+      });
+    }
+  };
+  if (setting?.devMode && developerMode === false) {
+    return null;
+  }
+  return setting?.hidden ? null : /* @__PURE__ */ jsx6(FormControlLabel, { label: setting?.label, control: /* @__PURE__ */ jsx6(Switch, { checked: setting?.value, onChange: onLocalChange, ...props }) });
+};
+
+// src/Components/MapSettingsComponents/SettingsBox.tsx
+import { Paper, Stack } from "@mui/material";
+import { FlexGrowRow, FlexRow } from "@xylabs/react-flexbox";
+import { useAppSettings } from "@xyo-network/react-app-settings";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var MapSettingsBox = ({ developerMode, ...props }) => {
+  const { mapSettings } = useMapSettings();
+  const { developerMode: devModeFromContext } = useAppSettings();
+  const resolveDeveloperMode = developerMode ?? devModeFromContext;
+  return mapSettings && resolveDeveloperMode ? /* @__PURE__ */ jsx7(FlexGrowRow, { bottom: 36, left: 10, position: "absolute", ...props, children: /* @__PURE__ */ jsx7(FlexRow, { paddingX: 2, children: /* @__PURE__ */ jsx7(Paper, { children: /* @__PURE__ */ jsx7(Stack, { direction: "row", spacing: 1, marginX: 1, children: Object.keys(mapSettings).map((key, index) => {
+    return /* @__PURE__ */ jsx7(MapSettingSwitch, { field: mapSettings[key].field, developerMode }, index);
+  }) }) }) }) }) : null;
+};
+
+// src/Components/MapBoxHeat.tsx
+import { jsx as jsx8, jsxs } from "react/jsx-runtime";
+var MapboxHeatFlexBox = ({ accessToken, children, mapBoxOptions, zoom, legend, developerMode, ...props }) => {
+  return /* @__PURE__ */ jsxs(FlexCol, { ...props, children: [
+    /* @__PURE__ */ jsx8(MapBox, { accessToken, options: mapBoxOptions, zoom }),
+    /* @__PURE__ */ jsx8(MapSettingsBox, { developerMode }),
+    legend,
+    children
+  ] });
+};
+
+// src/Components/AnimatedHeatMap.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+var AnimatedHeatMap = ({
+  accessToken,
+  animatedFeatureSets,
+  defaultMapSettings,
+  heatMapColorProps,
+  staticFeatureSet,
+  ...props
+}) => {
+  const theme = useTheme2();
+  const { staticMapColor, lowUsageColor, highUsageColor } = heatMapColorProps || {};
+  const localStaticMapColor = staticMapColor ?? theme.palette.primary.light;
+  const [layers] = useState9([
+    LocationHeatMapLayerBuilderAnimated(localStaticMapColor, 0, "static"),
+    LocationHeatMapLayerBuilderAnimated(lowUsageColor || localStaticMapColor, 0, "animated"),
+    LocationHeatMapLayerBuilderAnimated(highUsageColor || darken(localStaticMapColor, 0.9), 1, "animated")
+  ]);
+  return animatedFeatureSets?.length ? /* @__PURE__ */ jsx9(MapBoxInstanceProvider, { children: /* @__PURE__ */ jsx9(MapSettingsProvider, { defaultMapSettings, debugLayerName: MapHeatConstants.LocationDebugLayerId, children: /* @__PURE__ */ jsx9(
+    HeatMapInitializerProvider,
+    {
+      features: staticFeatureSet,
+      layers: [layers[0]],
+      featureSets: animatedFeatureSets,
+      featureSetsLayers: layers.slice(1, 3),
+      heatMapColorProps,
+      children: /* @__PURE__ */ jsx9(MapboxHeatFlexBox, { accessToken, ...props })
+    }
+  ) }) }) : /* @__PURE__ */ jsx9(FlexCol2, { minHeight: 160, minWidth: 160, busy: true });
+};
+
+// src/Components/AnimatedHeatMapLoaded.tsx
+import { Alert, AlertTitle } from "@mui/material";
+import { FlexCol as FlexCol5 } from "@xylabs/react-flexbox";
+import { useWeakArchivistFromNode, useWeakArchivistGet } from "@xyo-network/react-archivist";
+
+// src/Components/Legend.tsx
+import { useMediaQuery, useTheme as useTheme4 } from "@mui/material";
+import { FlexCol as FlexCol4 } from "@xylabs/react-flexbox";
+
+// src/Components/Legends/ColorGradient.tsx
+import { Typography, useTheme as useTheme3 } from "@mui/material";
+import { FlexCol as FlexCol3, FlexRow as FlexRow2 } from "@xylabs/react-flexbox";
+import { jsx as jsx10, jsxs as jsxs2 } from "react/jsx-runtime";
+var ColorGradientLegend = ({ startColor, endColor, startLabel, endLabel, heading, textColor, ...props }) => {
+  const theme = useTheme3();
+  return /* @__PURE__ */ jsxs2(FlexCol3, { ...props, children: [
+    /* @__PURE__ */ jsx10(Typography, { mb: theme.spacing(0.25), color: textColor, variant: "caption", textAlign: "center", children: heading }),
+    /* @__PURE__ */ jsx10(FlexCol3, { flexGrow: 1, alignItems: "stretch", paddingX: theme.spacing(1), mb: theme.spacing(0.25), children: /* @__PURE__ */ jsx10(
+      FlexCol3,
+      {
+        height: theme.spacing(0.75),
+        border: `1px solid ${textColor}`,
+        sx: { backgroundImage: `linear-gradient(to right, ${startColor},${endColor})` }
+      }
+    ) }),
+    /* @__PURE__ */ jsxs2(FlexRow2, { flexGrow: 1, justifyContent: "space-between", children: [
+      /* @__PURE__ */ jsx10(Typography, { color: textColor, variant: "caption", children: startLabel }),
+      /* @__PURE__ */ jsx10(Typography, { color: textColor, variant: "caption", children: endLabel })
+    ] })
+  ] });
+};
+
+// src/Components/Legend.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+var AnimatedHeatMapLegend = ({ ...legendProps }) => {
+  const { startColor, endColor, startLabel, endLabel, heading, textColor } = legendProps;
+  const theme = useTheme4();
+  const isSmall = useMediaQuery(theme.breakpoints.down("sm"));
+  return /* @__PURE__ */ jsx11(FlexCol4, { position: "absolute", bottom: 0, right: 0, children: /* @__PURE__ */ jsx11(
+    ColorGradientLegend,
+    {
+      startColor,
+      endColor,
+      startLabel,
+      endLabel,
+      heading,
+      textColor,
+      ...{
+        alignItems: "stretch",
+        marginBottom: theme.spacing(4),
+        marginLeft: isSmall ? theme.spacing(3) : 0,
+        marginRight: isSmall ? theme.spacing(2) : theme.spacing(3),
+        width: isSmall ? "40vw" : theme.spacing(18)
+      }
+    }
+  ) });
+};
+
+// src/Components/AnimatedHeatMapLoaded.tsx
+import { jsx as jsx12, jsxs as jsxs3 } from "react/jsx-runtime";
+var AnimatedHeatMapLoaded = ({ accessToken, archivistNameOrAddress, ...props }) => {
+  const hashes = useFindHashes();
+  const [archivist] = useWeakArchivistFromNode(archivistNameOrAddress);
+  const [payloads, xyoError] = useWeakArchivistGet(archivist, hashes);
+  const { multipleFeatureSets } = useQuadKeyPayloadsToFeatures(payloads);
+  const { heatMapColorProps, legendProps } = useHeatMapColors();
+  const MapBoxHeatProps = {
+    flexGrow: 1,
+    legend: legendProps ? /* @__PURE__ */ jsx12(AnimatedHeatMapLegend, { ...legendProps }) : null
+  };
+  return /* @__PURE__ */ jsxs3(FlexCol5, { alignItems: "stretch", ...props, children: [
+    xyoError ? /* @__PURE__ */ jsxs3(Alert, { sx: { mt: 2 }, children: [
+      /* @__PURE__ */ jsx12(AlertTitle, { children: "Error Loading Map" }),
+      xyoError.message ? `Error: ${xyoError.message}` : null,
+      "You might try authenticating again."
+    ] }) : null,
+    hashes === void 0 ? /* @__PURE__ */ jsx12(Alert, { children: "Missing answer hash for heat map query" }) : /* @__PURE__ */ jsx12(
+      AnimatedHeatMap,
+      {
+        accessToken,
+        defaultMapSettings: AnimatedHeatMapSettings,
+        animatedFeatureSets: multipleFeatureSets.slice(1, multipleFeatureSets.length),
+        staticFeatureSet: multipleFeatureSets[0],
+        heatMapColorProps,
+        ...MapBoxHeatProps
+      }
+    )
+  ] });
+};
+
+// src/Components/HeatMapSettings.ts
+var HeatMapSettings = DefaultMapSettings();
+var { debugLayer: debugLayer2, scrollToZoom: scrollToZoom2, fitToPoints: fitToPoints2 } = HeatMapSettings;
+debugLayer2.hidden = false;
+scrollToZoom2.value = true;
+fitToPoints2.value = true;
+
+// src/Components/LayerAnimator.tsx
+import { useInterval } from "@xylabs/react-shared";
+import { useCallback, useEffect as useEffect8, useRef as useRef2, useState as useState10 } from "react";
+import { Fragment, jsx as jsx13 } from "react/jsx-runtime";
+var timeIncrement = 2e3;
+var animatedLayerCount = 3;
+var LayerAnimator = ({ animateLayers, children, layers, layersInitialized, map }) => {
+  const [fillLayers, setFillLayers] = useState10([]);
+  const layerIndexQueue = useRef2([]);
+  const incrementQueue = useCallback(
+    (index) => {
+      if (fillLayers[index]) {
+        layerIndexQueue.current.push(index);
+      } else {
+        layerIndexQueue.current.push(0);
+      }
+      return layerIndexQueue.current.at(-1);
+    },
+    [fillLayers]
+  );
+  const lastQueuedIndex = useCallback(() => {
+    const last = layerIndexQueue.current.at(-1);
+    if (last === void 0) {
+      incrementQueue(0);
+      return 0;
+    } else {
+      return last;
+    }
+  }, [incrementQueue]);
+  const unshiftQueue = useCallback(() => {
+    layerIndexQueue.current.shift();
+  }, []);
+  const getNextLayer = useCallback(() => {
+    const nextLayer = fillLayers[lastQueuedIndex()];
+    incrementQueue(lastQueuedIndex() + 1);
+    return nextLayer;
+  }, [fillLayers, incrementQueue, lastQueuedIndex]);
+  const layerAnimateWorker = useCallback(
+    (layer) => {
+      if (layer) {
+        map?.setPaintProperty(layer.id, "fill-opacity", 0.85);
+        setTimeout(() => {
+          map?.setPaintProperty(layer.id, "fill-opacity", 0);
+          unshiftQueue();
+        }, timeIncrement * 2);
+      } else {
+        console.warn("tried to queue an empty layer");
+      }
+    },
+    [map, unshiftQueue]
+  );
+  useEffect8(() => {
+    if (layers?.length && map && layersInitialized) {
+      setFillLayers(
+        layers.filter((layer) => {
+          const fillLayer = layer.id.startsWith("location-fill");
+          if (fillLayer) {
+            map.setPaintProperty(layer.id, "fill-opacity-transition", { delay: 0, duration: 4e3 });
+          }
+          return fillLayer;
+        })
+      );
+    }
+  }, [layers, layersInitialized, map]);
+  const queueLayerAnimation = useCallback(() => {
+    const animatedLayers = [];
+    for (let i = 0; i < animatedLayerCount; i++) {
+      animatedLayers.push(getNextLayer());
+    }
+    for (const [index, layer] of animatedLayers.entries()) {
+      if (index === 0) {
+        layerAnimateWorker(layer);
+      } else {
+        setTimeout(() => {
+          layerAnimateWorker(layer);
+        }, timeIncrement * index);
+      }
+    }
+  }, [getNextLayer, layerAnimateWorker]);
+  useEffect8(() => {
+    if (animateLayers && layersInitialized && map && fillLayers.length > 0) {
+      queueLayerAnimation();
+    }
+  }, [animateLayers, fillLayers.length, layersInitialized, map, queueLayerAnimation]);
+  useInterval(() => {
+    if (animateLayers && layersInitialized && map && fillLayers.length > 0) {
+      queueLayerAnimation();
+    }
+  }, timeIncrement * animatedLayerCount);
+  return /* @__PURE__ */ jsx13(Fragment, { children });
+};
+
+// src/Components/MapBoxPoints.tsx
+import { Alert as Alert2 } from "@mui/material";
+import { FlexCol as FlexCol6 } from "@xylabs/react-flexbox";
+import { useCallback as useCallback2, useEffect as useEffect9, useState as useState11 } from "react";
+import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs4 } from "react/jsx-runtime";
+var MapboxPointsFlexBox = ({
+  accessToken,
+  features,
+  fitToPointsPadding = 20,
+  layers,
+  zoom,
+  ...props
+}) => {
+  const [mapPoints, setMapPoints] = useState11();
+  const { mapSettings } = useMapSettings();
+  const { map, mapInitialized } = useMapBoxInstance();
+  const customFitToBoundsOptions = (zoom2) => {
+    if (zoom2 !== void 0) {
+      return {
+        maxZoom: zoom2
+      };
+    }
+    return {};
+  };
+  const updateFeatures = useCallback2(() => {
+    if (mapPoints?.isMapReady && features?.length && layers)
+      for (const layer of layers) {
+        mapPoints.initializeMapSource(layer);
+      }
+  }, [mapPoints, features, layers]);
+  const updateMapSetup = useCallback2(() => {
+    const { fitToPoints: fitToPoints3 } = mapSettings || {};
+    if (mapPoints && map && fitToPoints3?.value === true) {
+      mapPoints.initialMapPositioning({ padding: fitToPointsPadding, ...customFitToBoundsOptions(zoom) });
+    }
+  }, [mapSettings, mapPoints, map, fitToPointsPadding, zoom]);
+  const reInitializeMap = useCallback2(() => {
+    mapPoints?.initialMapPositioning({ padding: fitToPointsPadding, ...customFitToBoundsOptions(zoom) });
+    updateFeatures();
+  }, [mapPoints, fitToPointsPadding, updateFeatures, zoom]);
+  useEffect9(() => {
+    if (map && features?.length) {
+      setMapPoints(new MapPoints({ features, map, zoom }));
+    }
+  }, [map, features, zoom]);
+  useEffect9(() => {
+    if (mapInitialized) {
+      updateMapSetup();
+      reInitializeMap();
+    }
+  }, [mapInitialized, reInitializeMap, updateMapSetup]);
+  return /* @__PURE__ */ jsx14(FlexCol6, { alignItems: "stretch", id: "xyo-mapbox-wrap", ...props, children: features ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
+    /* @__PURE__ */ jsx14(MapBox, { accessToken, zoom }),
+    /* @__PURE__ */ jsx14(MapSettingsBox, {})
+  ] }) : /* @__PURE__ */ jsx14(Alert2, { severity: "error", children: "No data to show" }) });
+};
+
+// src/types/NetworkLocationAnswerBase.ts
+import { isPayloadOfSchemaType } from "@xyo-network/payload-model";
+var NetworkLocationAnswerSchema = "network.xyo.location.range.answer";
+var isNetworkLocationAnswer = isPayloadOfSchemaType(NetworkLocationAnswerSchema);
+var NetworkLocationHeatmapAnswerSchema = "network.xyo.location.heatmap.answer";
+var isNetworkLocationHeatmapAnswer = isPayloadOfSchemaType(NetworkLocationHeatmapAnswerSchema);
+var NetworkLocationHeatmapQuadkeyAnswerSchema = "network.xyo.location.heatmap.quadkey.answer";
+var isNetworkLocationHeatmapQuadkeyAnswer = isPayloadOfSchemaType(
+  NetworkLocationHeatmapQuadkeyAnswerSchema
+);
+export {
+  AnimatedHeatMap,
+  AnimatedHeatMapLegend,
+  AnimatedHeatMapLoaded,
+  AnimatedHeatMapSettings,
+  CircleLayerBuilder,
+  ColorGradientLegend,
+  DefaultMapSettings,
+  FillLayerBuilder,
+  HeatMapFillLayerConfig,
+  HeatMapInitializerProvider,
+  HeatMapLineLayerConfig,
+  HeatMapSettings,
+  HeatMapSymbolLayerConfig,
+  LayerAnimator,
+  LineLayerBuilder,
+  LocationHeatMapLayerBuilder,
+  LocationHeatMapLayerBuilderAnimated,
+  LocationPointLayerConfig,
+  LocationPointsMapLayerBuilder,
+  MapBase,
+  MapBox,
+  MapBoxInstanceProvider,
+  MapHeat,
+  MapHeatConstants,
+  MapPoints,
+  MapPointsConstants,
+  MapSettingSwitch,
+  MapSettings,
+  MapSettingsBox,
+  MapSettingsProvider,
+  MapStyle,
+  MapboxAccessTokenContext,
+  MapboxAccessTokenProvider,
+  MapboxHeatFlexBox,
+  MapboxPointsFlexBox,
+  NetworkLocationAnswerSchema,
+  NetworkLocationHeatmapAnswerSchema,
+  NetworkLocationHeatmapQuadkeyAnswerSchema,
+  SymbolLayerBuilder,
+  isNetworkLocationAnswer,
+  isNetworkLocationHeatmapAnswer,
+  isNetworkLocationHeatmapQuadkeyAnswer,
+  useDynamicMapResize,
+  useDynamicPositioning,
+  useFindHashes,
+  useHeatMapColors,
+  useHeatMapInitializer,
+  useMapBoxInstance,
+  useMapSettings,
+  useMapboxAccessToken,
+  useQuadKeyPayloadsToFeatures
+};
 //# sourceMappingURL=index.js.map