Skip to content

Commit

Permalink
Integrated new states and map markers (#141)
Browse files Browse the repository at this point in the history
  • Loading branch information
Corgam authored May 21, 2024
2 parents dd03d92 + 8ad58f1 commit aee5b8d
Show file tree
Hide file tree
Showing 7 changed files with 224 additions and 33 deletions.
13 changes: 11 additions & 2 deletions frontend/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

12 changes: 7 additions & 5 deletions frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,16 +12,18 @@
"dependencies": {
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.5",
"@fontsource/roboto": "^5.0.13",
"@mui/icons-material": "^5.15.17",
"@mui/lab": "^5.0.0-alpha.170",
"@mui/material": "^5.15.17",
"leaflet": "^1.9.4",
"react-leaflet": "^4.2.1",
"@fontsource/roboto": "^5.0.13",
"@mui/x-data-grid": "^7.4.0",
"@mui/lab": "^5.0.0-alpha.170",
"@phosphor-icons/react": "^2.1.5",
"@types/geojson": "^7946.0.14",
"geojson": "^0.5.0",
"leaflet": "^1.9.4",
"react": "^18.2.0",
"react-dom": "^18.2.0"
"react-dom": "^18.2.0",
"react-leaflet": "^4.2.1"
},
"devDependencies": {
"@types/leaflet": "^1.9.12",
Expand Down
32 changes: 32 additions & 0 deletions frontend/src/components/MapView/DataFetch.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import { FeatureCollection, Geometry } from "geojson";
import data from "./FeatureCollection.json";
import { LatLngBounds } from "leaflet";
import { useEffect, useState } from "react";
const geojsonData: FeatureCollection = data as FeatureCollection;

const useGeoData = (
bounds: LatLngBounds,
zoom: number
): FeatureCollection<Geometry> | undefined => {
const [data, setData] = useState<FeatureCollection<Geometry>>();

useEffect(() => {
/* eslint-disable */ const fetchData = async (_bounds: LatLngBounds) => {
/* eslint-enable */
// Uncomment and adjust the following lines to fetch data from an API
// const url = `https://example.com/api/geo?bounds=${bounds.toBBoxString()}&zoom=${zoom}`;
// const response = await fetch(url);
// const result = await response.json();
setData(geojsonData as FeatureCollection<Geometry>);
};

fetchData(bounds);
console.log(
`Data fetched for bounds: ${bounds.toBBoxString()} and zoom: ${zoom}`
);
}, [bounds, zoom]);

return data;
};

export default useGeoData;
121 changes: 121 additions & 0 deletions frontend/src/components/MapView/FeatureCollection.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"name": "Berlin",
"amenity": "Capital City",
"popupContent": "This is Berlin, the capital of Germany!"
},
"geometry": {
"type": "Point",
"coordinates": [13.4050, 52.5200]
}
},
{
"type": "Feature",
"properties": {
"name": "Munich",
"amenity": "City",
"popupContent": "This is Munich, known for Oktoberfest!"
},
"geometry": {
"type": "Point",
"coordinates": [11.5820, 48.1351]
}
},
{
"type": "Feature",
"properties": {
"name": "Hamburg",
"amenity": "City",
"popupContent": "This is Hamburg, a major port city in northern Germany!"
},
"geometry": {
"type": "Point",
"coordinates": [9.9937, 53.5511]
}
},
{
"type": "Feature",
"properties": {
"name": "Frankfurt",
"amenity": "City",
"popupContent": "This is Frankfurt, a major financial hub in Germany!"
},
"geometry": {
"type": "Point",
"coordinates": [8.6821, 50.1109]
}
},
{
"type": "Feature",
"properties": {
"name": "Dortmund",
"amenity": "City",
"popupContent": "This is Dortmund, known for its football team!"
},
"geometry": {
"type": "Point",
"coordinates": [7.4660, 51.5149]
}
},
{
"type": "Feature",
"properties": {
"name": "Cologne",
"amenity": "City",
"popupContent": "This is Cologne, known for its impressive cathedral!"
}
},
{
"type": "Feature",
"properties": {
"name": "Leipzig",
"amenity": "City",
"popupContent": "This is Leipzig, known for its vibrant cultural scene!"
},
"geometry": {
"type": "Point",
"coordinates": [12.3731, 51.3397]
}
},
{
"type": "Feature",
"properties": {
"name": "Hannover",
"amenity": "City",
"popupContent": "This is Hannover, known for its trade fairs!"
},
"geometry": {
"type": "Point",
"coordinates": [9.7320, 52.3759]
}
},
{
"type": "Feature",
"properties": {
"name": "Würzburg",
"amenity": "City",
"popupContent": "This is Würzburg, known for its baroque and rococo architecture!"
},
"geometry": {
"type": "Point",
"coordinates": [9.9937, 49.7945]
}
},
{
"type": "Feature",
"properties": {
"name": "Augsburg",
"amenity": "City",
"popupContent": "This is Augsburg, one of Germany's oldest cities!"
},
"geometry": {
"type": "Point",
"coordinates": [10.8983, 48.3715]
}
}
]
}
46 changes: 21 additions & 25 deletions frontend/src/components/MapView/MapView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,11 @@ import "leaflet/dist/leaflet.css";
import "./MapView.css";
import { useMap, useMapEvents } from "react-leaflet/hooks";
import L from "leaflet";
import Button from "@mui/material/Button";
import icon from "leaflet/dist/images/marker-icon.png";
import iconShadow from "leaflet/dist/images/marker-shadow.png";
import MapOptions from "./MapOptions";
import useGeoData from "./DataFetch";
import { GeoJSON } from "react-leaflet";
import { MapContext } from "../../contexts/MapContext";

const DefaultIcon = L.icon({
Expand All @@ -21,24 +22,22 @@ const DefaultIcon = L.icon({

L.Marker.prototype.options.icon = DefaultIcon;

function Btn() {
const map = useMap();
return (
<Button
variant="text"
onClick={() => {
map.locate().on("locationfound", function (e) {
map.flyTo(e.latlng, map.getZoom());
});
}}
>
Text
</Button>
);
}
const svgIcon = L.divIcon({
html: `
<svg width="34" height="34" viewBox="0 0 34 34" xmlns="http://www.w3.org/2000/svg">
<circle cx="17" cy="17" r="14" stroke="white" stroke-width="2" fill="transparent"/>
<circle cx="17" cy="17" r="12" stroke="red" stroke-width="3" fill="transparent"/>
<circle cx="17" cy="17" r="9" stroke="white" stroke-width="1" fill="transparent"/>
</svg>
`,
className: "", // Optional: add a custom class name
iconSize: [34, 34],
iconAnchor: [17, 17], // Adjust the anchor point as needed
});

const MapView: React.FC = () => {
const { currentMapCache, setCurrentMapCache } = useContext(MapContext);
const geoData = useGeoData(currentMapCache.mapBounds, currentMapCache.zoom);

const MapEventsHandler = () => {
const map = useMap();
Expand All @@ -50,21 +49,17 @@ const MapView: React.FC = () => {
selectedCoordinates: event.latlng,
});
},
zoomend: (event) => {
setCurrentMapCache({
...currentMapCache,
zoom: event.target.getZoom(),
});
},
dragend: (event) => {
moveend: (event) => {
setCurrentMapCache({
...currentMapCache,
mapCenter: event.target.getCenter(),
mapBounds: event.target.getBounds(),
zoom: event.target.getZoom(),
});
},
});
return (
<Marker position={currentMapCache.selectedCoordinates}>
<Marker position={currentMapCache.selectedCoordinates} icon={svgIcon}>
<Popup>
<span
// Get the current location of the user
Expand Down Expand Up @@ -105,12 +100,13 @@ const MapView: React.FC = () => {
zoom={currentMapCache.zoom}
className="map"
>
{geoData && <GeoJSON data={geoData} />}

<MapEventsHandler />
<TileLayer
attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Btn />
</MapContainer>
</div>
);
Expand Down
4 changes: 3 additions & 1 deletion frontend/src/contexts/MapContext.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import L, { LatLng } from "leaflet";
import L, { LatLng, LatLngBounds } from "leaflet";
import React, { createContext, useState, ReactNode } from "react";

//// TYPES ////
Expand All @@ -7,6 +7,7 @@ import React, { createContext, useState, ReactNode } from "react";
export type MapCacheProps = {
selectedCoordinates: LatLng;
mapCenter: LatLng;
mapBounds: LatLngBounds;
zoom: number;
};

Expand All @@ -27,6 +28,7 @@ type MapContextProviderProps = {
const defaultMapCache: MapCacheProps = {
selectedCoordinates: L.latLng([49.5732, 11.0288]),
mapCenter: L.latLng([49.5732, 11.0288]),
mapBounds: L.latLngBounds([49.5732, 11.0288], [49.5732, 11.0288]),
zoom: 13,
};

Expand Down
29 changes: 29 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit aee5b8d

Please sign in to comment.