diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 26cbaed..aacab40 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -13,15 +13,13 @@
"@emotion/styled": "^11.10.6",
"@mui/material": "5.x",
"express": "^4.18.2",
- "leaflet": "^1.9.4",
- "maplibre-gl": "^4.5.0",
+ "maplibre-gl": "4.7.x",
"p-queue": "^8.0.1",
"react": "18.x",
"react-calendar": "^4.6.1",
"react-date-picker": "^8.4.0",
"react-dom": "18.x",
"react-dropdown": "^1.11.0",
- "react-leaflet": "^4.2.1",
"react-map-gl": "^7.1.7",
"react-notifications": "^1.7.4",
"react-refresh": "^0.11.0",
@@ -2519,16 +2517,6 @@
"url": "https://opencollective.com/popperjs"
}
},
- "node_modules/@react-leaflet/core": {
- "version": "2.1.0",
- "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-2.1.0.tgz",
- "integrity": "sha512-Qk7Pfu8BSarKGqILj4x7bCSZ1pjuAPZ+qmRwH5S7mDS91VSbVVsJSrW4qA+GPrro8t69gFYVMWb1Zc4yFmPiVg==",
- "peerDependencies": {
- "leaflet": "^1.9.0",
- "react": "^18.0.0",
- "react-dom": "^18.0.0"
- }
- },
"node_modules/@types/estree": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
@@ -2570,11 +2558,6 @@
"integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
"dev": true
},
- "node_modules/@types/junit-report-builder": {
- "version": "3.0.2",
- "resolved": "https://registry.npmjs.org/@types/junit-report-builder/-/junit-report-builder-3.0.2.tgz",
- "integrity": "sha512-R5M+SYhMbwBeQcNXYWNCZkl09vkVfAtcPIaCGdzIkkbeaTrVbGQ7HVgi4s+EmM/M1K4ZuWQH0jGcvMvNePfxYA=="
- },
"node_modules/@types/mapbox__point-geometry": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/@types/mapbox__point-geometry/-/mapbox__point-geometry-0.1.4.tgz",
@@ -4005,9 +3988,9 @@
}
},
"node_modules/earcut": {
- "version": "2.2.4",
- "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.4.tgz",
- "integrity": "sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ=="
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/earcut/-/earcut-3.0.1.tgz",
+ "integrity": "sha512-0l1/0gOjESMeQyYaK5IDiPNvFeu93Z/cO0TjZh9eZ1vyCtZnA7KMZ8rQggpsJHIbGSdrqYq9OhuveadOVHCshw=="
},
"node_modules/ee-first": {
"version": "1.1.1",
@@ -5065,27 +5048,38 @@
"dev": true
},
"node_modules/global-prefix": {
- "version": "3.0.0",
- "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-3.0.0.tgz",
- "integrity": "sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==",
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-4.0.0.tgz",
+ "integrity": "sha512-w0Uf9Y9/nyHinEk5vMJKRie+wa4kR5hmDbEhGGds/kG1PwGLLHKRoNMeJOyCQjjBkANlnScqgzcFwGHgmgLkVA==",
"dependencies": {
- "ini": "^1.3.5",
- "kind-of": "^6.0.2",
- "which": "^1.3.1"
+ "ini": "^4.1.3",
+ "kind-of": "^6.0.3",
+ "which": "^4.0.0"
},
"engines": {
- "node": ">=6"
+ "node": ">=16"
+ }
+ },
+ "node_modules/global-prefix/node_modules/isexe": {
+ "version": "3.1.1",
+ "resolved": "https://registry.npmjs.org/isexe/-/isexe-3.1.1.tgz",
+ "integrity": "sha512-LpB/54B+/2J5hqQ7imZHfdU31OlgQqx7ZicVlkm9kzg9/w8GKLEcFfJl/t7DCEDueOyBAD6zCCwTO6Fzs0NoEQ==",
+ "engines": {
+ "node": ">=16"
}
},
"node_modules/global-prefix/node_modules/which": {
- "version": "1.3.1",
- "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
- "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/which/-/which-4.0.0.tgz",
+ "integrity": "sha512-GlaYyEb07DPxYCKhKzplCWBJtvxZcZMrL+4UkrTSJHHPyZU4mYYTv3qaOe77H7EODLSSopAUFAc6W8U4yqvscg==",
"dependencies": {
- "isexe": "^2.0.0"
+ "isexe": "^3.1.1"
},
"bin": {
- "which": "bin/which"
+ "node-which": "bin/which.js"
+ },
+ "engines": {
+ "node": "^16.13.0 || >=18.0.0"
}
},
"node_modules/globals": {
@@ -5484,9 +5478,12 @@
"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
},
"node_modules/ini": {
- "version": "1.3.8",
- "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
- "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
+ "version": "4.1.3",
+ "resolved": "https://registry.npmjs.org/ini/-/ini-4.1.3.tgz",
+ "integrity": "sha512-X7rqawQBvfdjS10YU1y1YVreA3SsLrW9dX2CewP2EbBJM4ypVNLDkO5y04gejPwKIY9lR+7r9gn3rFPt/kmWFg==",
+ "engines": {
+ "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+ }
},
"node_modules/internal-slot": {
"version": "1.0.7",
@@ -5939,7 +5936,8 @@
"node_modules/isexe": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
- "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
+ "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+ "dev": true
},
"node_modules/isobject": {
"version": "3.0.1",
@@ -6105,11 +6103,6 @@
"node": ">=0.10.0"
}
},
- "node_modules/leaflet": {
- "version": "1.9.4",
- "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
- "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA=="
- },
"node_modules/less": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/less/-/less-4.2.0.tgz",
@@ -6330,9 +6323,9 @@
}
},
"node_modules/maplibre-gl": {
- "version": "4.5.0",
- "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-4.5.0.tgz",
- "integrity": "sha512-qOS1hn4d/pn2i0uva4S5Oz+fACzTkgBKq+NpwT/Tqzi4MSyzcWNtDELzLUSgWqHfNIkGCl5CZ/w7dtis+t4RCw==",
+ "version": "4.7.1",
+ "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-4.7.1.tgz",
+ "integrity": "sha512-lgL7XpIwsgICiL82ITplfS7IGwrB1OJIw/pCvprDp2dhmSSEBgmPzYRvwYYYvJGJD7fxUv1Tvpih4nZ6VrLuaA==",
"dependencies": {
"@mapbox/geojson-rewind": "^0.5.2",
"@mapbox/jsonlint-lines-primitives": "^2.0.2",
@@ -6341,25 +6334,24 @@
"@mapbox/unitbezier": "^0.0.1",
"@mapbox/vector-tile": "^1.3.1",
"@mapbox/whoots-js": "^3.1.0",
- "@maplibre/maplibre-gl-style-spec": "^20.3.0",
+ "@maplibre/maplibre-gl-style-spec": "^20.3.1",
"@types/geojson": "^7946.0.14",
"@types/geojson-vt": "3.2.5",
- "@types/junit-report-builder": "^3.0.2",
"@types/mapbox__point-geometry": "^0.1.4",
"@types/mapbox__vector-tile": "^1.3.4",
"@types/pbf": "^3.0.5",
"@types/supercluster": "^7.1.3",
- "earcut": "^2.2.4",
+ "earcut": "^3.0.0",
"geojson-vt": "^4.0.2",
"gl-matrix": "^3.4.3",
- "global-prefix": "^3.0.0",
+ "global-prefix": "^4.0.0",
"kdbush": "^4.0.2",
"murmurhash-js": "^1.0.0",
- "pbf": "^3.2.1",
+ "pbf": "^3.3.0",
"potpack": "^2.0.0",
- "quickselect": "^2.0.0",
+ "quickselect": "^3.0.0",
"supercluster": "^8.0.1",
- "tinyqueue": "^2.0.3",
+ "tinyqueue": "^3.0.0",
"vt-pbf": "^3.1.3"
},
"engines": {
@@ -6371,9 +6363,9 @@
}
},
"node_modules/maplibre-gl/node_modules/@maplibre/maplibre-gl-style-spec": {
- "version": "20.3.0",
- "resolved": "https://registry.npmjs.org/@maplibre/maplibre-gl-style-spec/-/maplibre-gl-style-spec-20.3.0.tgz",
- "integrity": "sha512-eSiQ3E5LUSxAOY9ABXGyfNhout2iEa6mUxKeaQ9nJ8NL1NuaQYU7zKqzx/LEYcXe1neT4uYAgM1wYZj3fTSXtA==",
+ "version": "20.4.0",
+ "resolved": "https://registry.npmjs.org/@maplibre/maplibre-gl-style-spec/-/maplibre-gl-style-spec-20.4.0.tgz",
+ "integrity": "sha512-AzBy3095fTFPjDjmWpR2w6HVRAZJ6hQZUCwk5Plz6EyfnfuQW1odeW5i2Ai47Y6TBA2hQnC+azscjBSALpaWgw==",
"dependencies": {
"@mapbox/jsonlint-lines-primitives": "~2.0.2",
"@mapbox/unitbezier": "^0.0.1",
@@ -6381,8 +6373,7 @@
"minimist": "^1.2.8",
"quickselect": "^2.0.0",
"rw": "^1.3.3",
- "sort-object": "^3.0.3",
- "tinyqueue": "^2.0.3"
+ "tinyqueue": "^3.0.0"
},
"bin": {
"gl-style-format": "dist/gl-style-format.mjs",
@@ -6390,6 +6381,11 @@
"gl-style-validate": "dist/gl-style-validate.mjs"
}
},
+ "node_modules/maplibre-gl/node_modules/@maplibre/maplibre-gl-style-spec/node_modules/quickselect": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz",
+ "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw=="
+ },
"node_modules/maplibre-gl/node_modules/json-stringify-pretty-compact": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/json-stringify-pretty-compact/-/json-stringify-pretty-compact-4.0.0.tgz",
@@ -7342,9 +7338,9 @@
]
},
"node_modules/quickselect": {
- "version": "2.0.0",
- "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz",
- "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw=="
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-3.0.0.tgz",
+ "integrity": "sha512-XdjUArbK4Bm5fLLvlm5KpTFOiOThgfWWI4axAZDWg4E/0mKdZyI9tNEfds27qCi1ze/vwTR16kvmmGhRra3c2g=="
},
"node_modules/randombytes": {
"version": "2.1.0",
@@ -7551,19 +7547,6 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
"integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="
},
- "node_modules/react-leaflet": {
- "version": "4.2.1",
- "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-4.2.1.tgz",
- "integrity": "sha512-p9chkvhcKrWn/H/1FFeVSqLdReGwn2qmiobOQGO3BifX+/vV/39qhY8dGqbdcPh1e6jxh/QHriLXr7a4eLFK4Q==",
- "dependencies": {
- "@react-leaflet/core": "^2.1.0"
- },
- "peerDependencies": {
- "leaflet": "^1.9.0",
- "react": "^18.0.0",
- "react-dom": "^18.0.0"
- }
- },
"node_modules/react-map-gl": {
"version": "7.1.7",
"resolved": "https://registry.npmjs.org/react-map-gl/-/react-map-gl-7.1.7.tgz",
@@ -8543,9 +8526,9 @@
"integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
},
"node_modules/tinyqueue": {
- "version": "2.0.3",
- "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-2.0.3.tgz",
- "integrity": "sha512-ppJZNDuKGgxzkHihX8v9v9G5f+18gzaTfrukGrq6ueg0lmH4nqVnA2IPG0AEH3jKEk2GRJCUhDoqpoiw3PHLBA=="
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-3.0.0.tgz",
+ "integrity": "sha512-gRa9gwYU3ECmQYv3lslts5hxuIa90veaEcxDYuu3QGOIAEM2mOZkVHp48ANJuu1CURtRdHKUBY5Lm1tHV+sD4g=="
},
"node_modules/to-fast-properties": {
"version": "2.0.0",
diff --git a/frontend/package.json b/frontend/package.json
index f1e5071..7ec08d3 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -45,15 +45,13 @@
"@emotion/styled": "^11.10.6",
"@mui/material": "5.x",
"express": "^4.18.2",
- "leaflet": "^1.9.4",
- "maplibre-gl": "^4.5.0",
+ "maplibre-gl": "4.7.x",
"p-queue": "^8.0.1",
"react": "18.x",
"react-calendar": "^4.6.1",
"react-date-picker": "^8.4.0",
"react-dom": "18.x",
"react-dropdown": "^1.11.0",
- "react-leaflet": "^4.2.1",
"react-map-gl": "^7.1.7",
"react-notifications": "^1.7.4",
"react-refresh": "^0.11.0",
diff --git a/frontend/src/Map/index.jsx b/frontend/src/Map/index.jsx
index dde17b0..f52c5d6 100644
--- a/frontend/src/Map/index.jsx
+++ b/frontend/src/Map/index.jsx
@@ -1,22 +1,20 @@
-import {CircleMarker, LayerGroup} from 'react-leaflet'
-import {Map, useMap, Source, Layer} from 'react-map-gl/maplibre'
-import { useContext, useState } from 'react'
+import { Map as MapGL, useMap, Source, Layer } from 'react-map-gl/maplibre'
+import { useContext, useState, useEffect } from 'react'
import { DataContext } from '../Layout'
-import { useMapEvent } from 'react-leaflet/hooks'
import { domain } from '../domain.js'
import { Intersection } from '../intersection.js'
-import 'leaflet/dist/leaflet.css'
export default function CartoMap(){
return (
-
+
+
)
}
@@ -24,6 +22,7 @@ function DataLayer(){
const { logActivity, data } = useContext(DataContext)
const activeCorridor = data.activeCorridor
const map = useMap()
+ // TODO: should only be set up as needed
map.current.once('click', (event) => { // add an intersection
if( activeCorridor?.intersections?.length < 2 ){
fetch(`${domain}/nodes-within/50/${event.lngLat.lng}/${event.lngLat.lat}`)
@@ -81,32 +80,47 @@ function DataLayer(){
function NodeLayer(){
// briefly shows locations of nearby clickable nodes on double-click
const [ nodes, setNodes ] = useState( new Map() )
- useMapEvent('dblclick', (event) => {
- fetch(`${domain}/nodes-within/1000/${event.latlng.lng}/${event.latlng.lat}`)
- .then( resp => resp.json() )
- .then( intersections => {
- setNodes( n => { // add intersections
- intersections.forEach( i => n.set(i.node_id,i) )
- return new Map(n)
- } )
- setTimeout( // remove them
- () => setNodes( n => {
- intersections.forEach( i => n.delete(i.node_id) )
+ const map = useMap()
+ useEffect(()=>{
+ map.current.on('dblclick', event => {
+ fetch(`${domain}/nodes-within/1000/${event.lngLat.lng}/${event.lngLat.lat}`)
+ .then( resp => resp.json() )
+ .then( intersections => {
+ setNodes( n => { // add intersections
+ intersections.forEach( i => n.set(i.node_id,i) )
return new Map(n)
- } ),
- 5000
- )
- } )
- } )
+ } )
+ setTimeout( // remove them
+ () => setNodes( n => {
+ intersections.forEach( i => n.delete(i.node_id) )
+ return new Map(n)
+ } ),
+ 5000
+ )
+ } )
+ })
+ },[])
+ const nodesGeoJSON = {
+ type: 'FeatureCollection',
+ features: [...nodes.values()].map( node => ({
+ type: 'Feature',
+ geometry: node.geometry
+ }) )
+ }
+ const style = {
+ id:'nodes',
+ type:'circle',
+ paint:{
+ 'circle-radius': 3,
+ 'circle-color': 'grey',
+ 'circle-opacity': 0.5,
+ 'circle-stroke-width': 2,
+ 'circle-stroke-color': 'grey'
+ }
+ }
return (
-
- {[...nodes.values()].map( (node,i) => (
-
- ) ) }
-
+
+
+
)
}
\ No newline at end of file