diff --git a/src/App.tsx b/src/App.tsx index 8787eacd..e1fff88c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -44,7 +44,7 @@ interface State { route: FeatureCollection; isGeolocating: boolean; geolocationPosition: LatLng | null; - popupCoordinates: LatLng | null; + popupCoordinates: ElementWithCoordinates | null; snackbar?: ReactText; } @@ -379,21 +379,33 @@ const App: React.FC = () => { setState( (prevState): State => { if (feature?.properties.entrance) { + const element = { + id: feature.properties["@id"], + type: feature.properties["@type"], + lat: feature.geometry.coordinates[1], + lon: feature.geometry.coordinates[0], + tags: feature.properties, + }; // If an entrance was clicked, set it as the destination return { ...prevState, - destination: { - id: feature.properties["@id"], - type: feature.properties["@type"], - lat: feature.geometry.coordinates[1], - lon: feature.geometry.coordinates[0], - }, + destination: element, + popupCoordinates: element, + }; + } + // As a fallback, toggle popup. + if (prevState.popupCoordinates) { + return { + ...prevState, + popupCoordinates: null, }; } - // As a fallback, open a popup. return { ...prevState, - popupCoordinates: [event.lngLat.lat, event.lngLat.lng], + popupCoordinates: latLngToDestination([ + event.lngLat.lat, + event.lngLat.lng, + ]), }; } ); @@ -638,74 +650,90 @@ const App: React.FC = () => { /> )} - {state.popupCoordinates != null && ( - - setState( - (prevState): State => ({ ...prevState, popupCoordinates: null }) - ) - } - > - - + - - )} + ) + } + > + Destination + + + )} + ); diff --git a/src/overpass.ts b/src/overpass.ts index 2ae6e440..4a3192d8 100644 --- a/src/overpass.ts +++ b/src/overpass.ts @@ -32,6 +32,8 @@ export interface Tags { operator?: string; ref?: string; "addr:unit"?: string; + "addr:housenumber"?: string; + "addr:street"?: string; } const buildEntranceQuery = (lat: number, lon: number): string => `