diff --git a/frontend/src/Map/index.jsx b/frontend/src/Map/index.jsx
index e7fb153..82da717 100644
--- a/frontend/src/Map/index.jsx
+++ b/frontend/src/Map/index.jsx
@@ -4,7 +4,7 @@ import {
Polyline,
LayerGroup
} from 'react-leaflet'
-import Map from 'react-map-gl/maplibre'
+import {Map, useMap} from 'react-map-gl/maplibre'
import { useContext, useState } from 'react'
import { DataContext } from '../Layout'
import { useMapEvent } from 'react-leaflet/hooks'
@@ -19,7 +19,7 @@ export default function CartoMap(){
style={{height:'100vh'}}
mapStyle="https://api.maptiler.com/maps/streets-v2/style.json?key=0qLDQrWKpxpwWHjpSoeG"
>
- {false && }
+
{false && }
)
@@ -28,9 +28,10 @@ export default function CartoMap(){
function DataLayer(){
const { logActivity, data } = useContext(DataContext)
const activeCorridor = data.activeCorridor
- useMapEvent('click', (event) => { // add an intersection
+ const map = useMap()
+ map.current.once('click', (event) => { // add an intersection
if( activeCorridor?.intersections?.length < 2 ){
- fetch(`${domain}/nodes-within/50/${event.latlng.lng}/${event.latlng.lat}`)
+ fetch(`${domain}/nodes-within/50/${event.lngLat.lng}/${event.lngLat.lat}`)
.then( resp => resp.json() )
.then( node => {
const data = node[0]
@@ -45,6 +46,7 @@ function DataLayer(){
} )
}
} )
+ return <>>
return data.corridors.filter( c => c.isComplete || c.isActive ).map( (corridor,i) => {
// red: active not complete; green: active complete: grey: inactive
const color = corridor.isActive ? corridor.isComplete ? 'green' : 'red' : '#0005'