Skip to content

Commit

Permalink
Search results supports areas now.
Browse files Browse the repository at this point in the history 
Map gets fitted to the bounds of the area

Also a marker appears on top of every search result now

Signed-off-by: Celine Pöhl <[email protected]>
  • Loading branch information
@CelineMP
CelineMP committed Jun 4, 2024
1 parent a033ec2 commit fc07ab0
Show file tree
Hide file tree
Showing 2 changed files with 76 additions and 46 deletions.
31 changes: 26 additions & 5 deletions frontend/src/components/PopUp/SearchBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { debounce } from "@mui/material/utils";
import parse from "autosuggest-highlight/parse";
import { MapSelection, SearchContext } from "../../contexts/SearchContext";
import { OpenStreetMapProvider } from "leaflet-geosearch";
import { LatLng } from "leaflet";
import { LatLng} from "leaflet";
import { MapContext } from "../../contexts/MapContext";


Expand Down Expand Up @@ -43,10 +43,12 @@ const SearchBar: React.FC = () => {
return;
}
const results = await provider.search({ query });
//console.log(results);
console.log(results);
const transformedResults: MapSelection[] = results.map((result) => ({
coordinates: new LatLng(result.y, result.x),
displayName: result.label,
bounds: result.bounds,
area: (result.raw.class === "boundary"),
}));
callback(transformedResults);
}, 400),
Expand Down Expand Up @@ -92,15 +94,28 @@ const SearchBar: React.FC = () => {

const onItemSelected = (item: MapSelection) => {
setTimeout(() => {
flyToLocation(new LatLng(item.coordinates.lat, item.coordinates.lng));
flyToLocation(item);
}, 400);
//console.log(item.raw);
};

const flyToLocation = (targetPosition: LatLng) => {
const flyToLocation = (item: MapSelection) => {

const targetPosition = new LatLng(item.coordinates.lat, item.coordinates.lng);

const { mapInstance } = currentMapCache;
//const {selectedCoordinates} = currentMapCache;

if (mapInstance) {
mapInstance.flyTo(targetPosition, 13, { animate: true, duration: 5 });
//TODO if polygon then flyToBounds
currentMapCache.selectedCoordinates = targetPosition; //Set Marker

if(item.area && item.bounds){
mapInstance.flyToBounds(item.bounds, { animate: true, duration: 5 });
}else{
mapInstance.flyTo(targetPosition, 13, { animate: true, duration: 5 });
}

} else console.log("no map instance");
};

Expand Down Expand Up @@ -137,6 +152,8 @@ const SearchBar: React.FC = () => {
const selectedLocation = {
coordinates: newValue.coordinates,
displayName: newValue.displayName,
bounds: newValue.bounds,
area: newValue.area,
};
onItemSelected(selectedLocation);
}
Expand Down Expand Up @@ -208,10 +225,14 @@ const SearchBar: React.FC = () => {
? removeFromFavourites({
coordinates: option.coordinates,
displayName: option.displayName,
bounds: option.bounds,
area: option.area,
})
: addToFavourites({
coordinates: option.coordinates,
displayName: option.displayName,
bounds: option.bounds,
area: option.area,
})
}
}
Expand Down
91 changes: 50 additions & 41 deletions frontend/src/contexts/SearchContext.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,21 @@
import L, { LatLng } from "leaflet";
//import { RawResult } from "leaflet-geosearch/dist/providers/openStreetMapProvider.js";
import React, { createContext, useState, ReactNode } from "react";
export declare type PointTuple = [number, number];
export declare type LatLngBoundsLiteralBoundsTuple = [PointTuple, PointTuple];


export type LatLngTuple = [number, number, number?];
export type LatLngBoundsLiteral = [LatLngTuple, LatLngTuple];

//// TYPES ////

// Map Selection Type
export type MapSelection = {
coordinates: LatLng;
displayName: string;
//raw? : RawResult;
bounds: LatLngBoundsLiteral | null;
area: boolean; // everything that is not a building is an area
};

// Search Cache Type
Expand Down Expand Up @@ -36,47 +43,49 @@ const defaultSearchCache: SearchCacheProps = {
{
coordinates: L.latLng([49.5732, 12.0288]),
displayName: "Nuremberg",
bounds: [[40,50],[50,60]],
area: false,
},
{
coordinates: L.latLng([49.5732, 13.0288]),
displayName: "Munich",
},
{
coordinates: L.latLng([49.5732, 14.0288]),
displayName: "Andreij Sacharow Platz 1, 90402 Nuremberg",
},
{
coordinates: L.latLng([49.5732, 15.0288]),
displayName: "Main train station Nuremberg",
},
{
coordinates: L.latLng([49.5732, 16.0288]),
displayName: "Walter-Meckauer-Street 20",
},
{
coordinates: L.latLng([49.5732, 17.0288]),
displayName: "49°26'46.6\"N 11°04'33.7\"E",
},
{
coordinates: L.latLng([41.40338, 2.17403]),
displayName: "41°24'12.2\"N 2°10'26.5\"E",
},
{
coordinates: L.latLng([34.05223, -118.24368]),
displayName: "34.05223, -118.24368",
},
{
coordinates: L.latLng([48.858844, 2.294351]),
displayName: "48.858844, 2.294351",
},
{
coordinates: L.latLng([40.748817, -73.985428]),
displayName: "40°44'55.7\"N 73°59'07.5\"W",
},
{
coordinates: L.latLng([51.500729, -0.124625]),
displayName: "51°30'02.6\"N 0°07'28.7\"W",
},
// {
// coordinates: L.latLng([49.5732, 13.0288]),
// displayName: "Munich",
// },
// {
// coordinates: L.latLng([49.5732, 14.0288]),
// displayName: "Andreij Sacharow Platz 1, 90402 Nuremberg",
// },
// {
// coordinates: L.latLng([49.5732, 15.0288]),
// displayName: "Main train station Nuremberg",
// },
// {
// coordinates: L.latLng([49.5732, 16.0288]),
// displayName: "Walter-Meckauer-Street 20",
// },
// {
// coordinates: L.latLng([49.5732, 17.0288]),
// displayName: "49°26'46.6\"N 11°04'33.7\"E",
// },
// {
// coordinates: L.latLng([41.40338, 2.17403]),
// displayName: "41°24'12.2\"N 2°10'26.5\"E",
// },
// {
// coordinates: L.latLng([34.05223, -118.24368]),
// displayName: "34.05223, -118.24368",
// },
// {
// coordinates: L.latLng([48.858844, 2.294351]),
// displayName: "48.858844, 2.294351",
// },
// {
// coordinates: L.latLng([40.748817, -73.985428]),
// displayName: "40°44'55.7\"N 73°59'07.5\"W",
// },
// {
// coordinates: L.latLng([51.500729, -0.124625]),
// displayName: "51°30'02.6\"N 0°07'28.7\"W",
// },
],
favourites: [],
};
Expand Down

0 comments on commit fc07ab0

Please sign in to comment.