{"version":3,"file":"static/js/866.bf649ea5.chunk.js","mappings":"4OA2GA,UAzFqB,WAGnB,IAQA,EAAkCA,EAAAA,SAAe,IAAjD,eAAOC,EAAP,KAAkBC,EAAlB,KACA,EAAoCF,EAAAA,SAAe,MAAnD,eAAOG,EAAP,KAAmBC,EAAnB,KACA,GAA0BC,EAAAA,EAAAA,MAA1B,eAAOC,EAAP,KAAaC,EAAb,KACA,GAAsBC,EAAAA,EAAAA,MAAtB,eAAOC,EAAP,KAAYC,EAAZ,KACA,EAA8BV,EAAAA,UAAe,GAA7C,eAAOW,EAAP,KAAgBC,EAAhB,KAEMC,GAAaC,EAAAA,EAAAA,UACnBd,EAAAA,WAAgB,WACd,IAAIe,EAAMC,EAAAA,EAAAA,UACNC,EAAWR,EAAMS,OAAOC,OAAOV,EAAIQ,UAAY,CAAC,WAAY,UAC5DG,EAAOX,EAAMA,EAAIW,KAAO,GACxBC,EAAMC,EAAAA,IAAM,OAAOC,QAAQN,EAAUG,EAAM,CAAEI,QAAS,KAwC1D,OAvCA,uBAAC,+GACsBC,MAAMV,GAD5B,cACKW,EADL,gBAEkBA,EAASC,OAF3B,OAEKC,EAFL,OAGChB,GAAW,GACPiB,EAAU,IAAIC,EAAAA,mBAAqB,CACrCC,iBAAkB,GAClBC,mBAAoB,SAACC,GACnB,IAvCsBC,EAAQC,EAuC1BN,EAAUI,EAAQG,qBAClBC,EAAeR,EAAQS,MAAK,SAACC,GAAD,0BAAYA,QAAZ,IAAYA,GAAZ,UAAYA,EAAQC,eAApB,iBAAY,EAAiBC,YAA7B,iBAAY,EAAuBD,eAAnC,iBAAY,EAAgCE,eAA5C,aAAY,EAAyCC,SAAS,aAA9D,IAC5BC,EAAef,EAAQS,MAAK,SAACC,GAAD,0BAAYA,QAAZ,IAAYA,GAAZ,UAAYA,EAAQC,eAApB,iBAAY,EAAiBC,YAA7B,iBAAY,EAAuBD,eAAnC,iBAAY,EAAgCE,eAA5C,aAAY,EAAyCC,SAAS,cAA9D,IAE5BE,EAAI,0DA3CcX,EA2C8DG,EA3CtDF,EA2CoES,EA1CvGV,EACM,uBACCC,EACD,wBAEA,wBAqCO,kEAAiKN,EAAQiB,OAAzK,uBACR,OAAOxB,EAAAA,QAAU,CAAEuB,KAAMA,EAAME,UAAW,YAAaC,SAAU1B,EAAAA,MAAQ,GAAI,KAC9E,IAKHM,EAAKqB,WAAWC,SAAQ,SAACC,EAAUC,GACjC,IAvCQC,EAuCJd,EAASjB,EAAAA,OAAS,CAAC6B,EAASG,IAAKH,EAASI,KAAM,CAClDd,MAxCMY,EAwCKF,EAASK,OAvCnBlC,EAAAA,KAAO,CACZoB,QAAQ,eAAD,OAAiBW,EAAjB,QACPL,SAAU,CAAC,GAAI,IACfS,WAAY,CAAC,EAAG,QAqCXC,GAAG,SAAS,kBAAMtD,EAAcgD,EAApB,IACfvB,EAAQ8B,SAASpB,EAClB,IAEA,OAADjB,QAAC,IAADA,GAAA,UAAAA,EAAAA,UAAa,mGACX,CAAC,UADH,SAEMsC,MACFvC,GAEJA,EAAIsC,SAAS9B,GACbR,EAAIqC,GAAG,aAAa,WAClB,IAAItC,EAAOC,EAAIwC,UACX5C,EAAWI,EAAIyC,YAEnBjD,EAAWkD,QAAU,CAAE3C,KAAAA,EAAMH,SAAAA,EAC9B,IACDf,EAAa0B,GArCd,2CAAD,GAuCO,WACLP,EAAI2C,QACL,CAEF,GAAE,CAACvD,IAKJ,OACE,iCACE,iBAAKwD,GAAG,MAAR,WACE,SAAC,IAAD,CAAeC,QANI,SAACC,GACxBzD,EAAOG,EAAWkD,QACnB,IAKMpD,GAAU,SAAC,IAAD,KAAc,4BAE3B,SAAC,IAAD,CACEiB,KAAM3B,EACNgE,GAAI9D,EACJiE,MAAOhE,EACPiE,QAAQ,EACR9D,UAAWA,EACXD,KAAMA,EACNgE,QAAQ,yBAGf,C","sources":["components/CrossingsMap.js"],"sourcesContent":["import * as L from \"leaflet\";\r\nimport * as M from \"leaflet.markercluster\";\r\nimport React, { useRef } from \"react\";\r\nimport Constants from \"../Constants\";\r\nimport DetailCard from \"./DetailCard\";\r\nimport { useDefaultPan, useFavourite } from \"../hooks\";\r\nimport DefaultButton from \"./DefaultButton\";\r\nimport Spinner from \"../Utils/Spinner\";\r\n\r\nfunction createClusterClassName(closed, caution) {\r\n  if(closed) {\r\n    return \"marker-cluster-large\"\r\n  } else if(caution) {\r\n    return \"marker-cluster-medium\"\r\n  } else {\r\n    return \"marker-cluster-small\"\r\n  }\r\n}\r\nconst CrossingsMap = () => {\r\n\r\n\r\n  const Icon = (state) => {\r\n    return L.icon({\r\n      iconUrl: `/static/svg/${state}.png`,\r\n      iconSize: [20, 20],\r\n      iconAnchor: [0, 0],\r\n    });\r\n  };\r\n\r\n  const [crossings, setcrossings] = React.useState([]);\r\n  const [selectedId, setSelectedId] = React.useState(null);\r\n  const [favs, toggleFav] = useFavourite()\r\n  const [pan, setPan] = useDefaultPan()\r\n  const [loading, setLoading] = React.useState(true);\r\n\r\n  const defaultRef = useRef()\r\n  React.useEffect(() => {\r\n    let url = Constants.crossings;\r\n    let position = pan ? Object.values(pan.position) : [30.266666, -97.73333]\r\n    let zoom = pan ? pan.zoom : 10;\r\n    let map = L.map(\"map\").setView(position, zoom, { maxZoom: 18 });\r\n    (async () => {\r\n      let response = await fetch(url);\r\n      let data = await response.json();\r\n      setLoading(false);\r\n      let markers = new M.MarkerClusterGroup({\r\n        maxClusterRadius: 10,\r\n        iconCreateFunction: (cluster) => {\r\n          let markers = cluster.getAllChildMarkers();\r\n          let isAnyClosure = markers.some((marker) => marker?.options?.icon?.options?.iconUrl?.includes('closed.png'))\r\n          let isAnyCaution = markers.some((marker) => marker?.options?.icon?.options?.iconUrl?.includes('caution.png'))\r\n          // console.log(isAnyClosure)\r\n          let html = `<div class=\"leaflet-marker-icon marker-cluster ${createClusterClassName(isAnyClosure, isAnyCaution)} leaflet-zoom-animated leaflet-interactive\"><div><span>${markers.length}</span></div></div>`;\r\n          return L.divIcon({ html: html, className: 'mycluster', iconSize: L.point(32, 32) });\r\n        }\r\n      });\r\n\r\n      // console.log(data);\r\n\r\n      data.attributes.forEach((location, index) => {\r\n        let marker = L.marker([location.lat, location.lon], {\r\n          icon: Icon(location.status),\r\n        }).on(\"click\", () => setSelectedId(index));\r\n        markers.addLayer(marker)\r\n      });\r\n\r\n      L?.tileLayer(\"https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}\",\r\n        {\r\n        })?.addTo(\r\n          map\r\n        );\r\n      map.addLayer(markers)\r\n      map.on(\"mousemove\", () => {\r\n        let zoom = map.getZoom()\r\n        let position = map.getCenter()\r\n\r\n        defaultRef.current = { zoom, position }\r\n      })\r\n      setcrossings(data);\r\n    })();\r\n    return () => {\r\n      map.remove()\r\n    }\r\n\r\n  }, [pan]);\r\n\r\n  const handleSetDefault = (e) => {\r\n    setPan(defaultRef.current)\r\n  }\r\n  return (\r\n    <>\r\n      <div id=\"map\">\r\n        <DefaultButton onClick={handleSetDefault} />\r\n        {loading ? <Spinner /> : <></>}\r\n      </div>\r\n      <DetailCard\r\n        data={crossings}\r\n        id={selectedId}\r\n        setId={setSelectedId}\r\n        header={true}\r\n        toggleFav={toggleFav}\r\n        favs={favs}\r\n        content=\"CROSSINGS ARE OPEN\" />\r\n    </>\r\n  );\r\n};\r\n\r\nexport default CrossingsMap;\r\n"],"names":["React","crossings","setcrossings","selectedId","setSelectedId","useFavourite","favs","toggleFav","useDefaultPan","pan","setPan","loading","setLoading","defaultRef","useRef","url","Constants","position","Object","values","zoom","map","L","setView","maxZoom","fetch","response","json","data","markers","M","maxClusterRadius","iconCreateFunction","cluster","closed","caution","getAllChildMarkers","isAnyClosure","some","marker","options","icon","iconUrl","includes","isAnyCaution","html","length","className","iconSize","attributes","forEach","location","index","state","lat","lon","status","iconAnchor","on","addLayer","addTo","getZoom","getCenter","current","remove","id","onClick","e","setId","header","content"],"sourceRoot":""}