From fc611ce71ded58022a8e0ac7f8311b1955a64841 Mon Sep 17 00:00:00 2001 From: Olivier Bouchard Date: Sat, 23 Mar 2024 19:49:35 -0400 Subject: [PATCH] completing map page --- canopeum_frontend/src/App.scss | 16 +- .../src/assets/icons/pins/canopeum-pin.svg | 27 ++++ .../assets/icons/pins/corporate-lot-pin.svg | 28 ++++ .../icons/pins/educational-facility-pin.svg | 28 ++++ .../src/assets/icons/pins/farms-land-pin.svg | 33 ++++ .../icons/pins/indegenious-community-pin.svg | 28 ++++ .../src/assets/icons/pins/park-pin.svg | 28 ++++ canopeum_frontend/src/pages/Map.tsx | 150 +++++++++++++++--- 8 files changed, 319 insertions(+), 19 deletions(-) create mode 100644 canopeum_frontend/src/assets/icons/pins/canopeum-pin.svg create mode 100644 canopeum_frontend/src/assets/icons/pins/corporate-lot-pin.svg create mode 100644 canopeum_frontend/src/assets/icons/pins/educational-facility-pin.svg create mode 100644 canopeum_frontend/src/assets/icons/pins/farms-land-pin.svg create mode 100644 canopeum_frontend/src/assets/icons/pins/indegenious-community-pin.svg create mode 100644 canopeum_frontend/src/assets/icons/pins/park-pin.svg diff --git a/canopeum_frontend/src/App.scss b/canopeum_frontend/src/App.scss index aba961d2e..cebf1f900 100644 --- a/canopeum_frontend/src/App.scss +++ b/canopeum_frontend/src/App.scss @@ -6,12 +6,26 @@ @import "bootstrap/scss/bootstrap"; +::-webkit-scrollbar { + width: 10px; +} + +::-webkit-scrollbar-track { + background-color: transparent; +} + +::-webkit-scrollbar-thumb { + background-color: #f8f9fa; + border-radius: 5px; +} + body { background-image: url('@assets/images/TreeBackground.png'); } .material-symbols-outlined { - color: map-get($theme-colors, primary); + color: inherit; + font-size: inherit; } .navbar { diff --git a/canopeum_frontend/src/assets/icons/pins/canopeum-pin.svg b/canopeum_frontend/src/assets/icons/pins/canopeum-pin.svg new file mode 100644 index 000000000..533ba486a --- /dev/null +++ b/canopeum_frontend/src/assets/icons/pins/canopeum-pin.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/canopeum_frontend/src/assets/icons/pins/corporate-lot-pin.svg b/canopeum_frontend/src/assets/icons/pins/corporate-lot-pin.svg new file mode 100644 index 000000000..5a1bfab82 --- /dev/null +++ b/canopeum_frontend/src/assets/icons/pins/corporate-lot-pin.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/canopeum_frontend/src/assets/icons/pins/educational-facility-pin.svg b/canopeum_frontend/src/assets/icons/pins/educational-facility-pin.svg new file mode 100644 index 000000000..b625b22e7 --- /dev/null +++ b/canopeum_frontend/src/assets/icons/pins/educational-facility-pin.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/canopeum_frontend/src/assets/icons/pins/farms-land-pin.svg b/canopeum_frontend/src/assets/icons/pins/farms-land-pin.svg new file mode 100644 index 000000000..ce2982acd --- /dev/null +++ b/canopeum_frontend/src/assets/icons/pins/farms-land-pin.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/canopeum_frontend/src/assets/icons/pins/indegenious-community-pin.svg b/canopeum_frontend/src/assets/icons/pins/indegenious-community-pin.svg new file mode 100644 index 000000000..3cfd7b1f2 --- /dev/null +++ b/canopeum_frontend/src/assets/icons/pins/indegenious-community-pin.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/canopeum_frontend/src/assets/icons/pins/park-pin.svg b/canopeum_frontend/src/assets/icons/pins/park-pin.svg new file mode 100644 index 000000000..c9fff8c2f --- /dev/null +++ b/canopeum_frontend/src/assets/icons/pins/park-pin.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/canopeum_frontend/src/pages/Map.tsx b/canopeum_frontend/src/pages/Map.tsx index cbcc8fabb..aa221122d 100644 --- a/canopeum_frontend/src/pages/Map.tsx +++ b/canopeum_frontend/src/pages/Map.tsx @@ -1,21 +1,135 @@ -import ReactMap from 'react-map-gl/maplibre' - -const Map = () => ( -
-
-
-
- +import CanopeumPin from '@assets/icons/pins/canopeum-pin.svg' +import CorporateLotPin from '@assets/icons/pins/corporate-lot-pin.svg' +import EducationalFacilityPin from '@assets/icons/pins/educational-facility-pin.svg' +import FarmsLandPin from '@assets/icons/pins/farms-land-pin.svg' +import IndegeniousCommunityPin from '@assets/icons/pins/indegenious-community-pin.svg' +import ParkPin from '@assets/icons/pins/park-pin.svg' +import { useEffect, useState } from 'react' +import ReactMap, { GeolocateControl, Marker, NavigationControl, ScaleControl, type ViewState } from 'react-map-gl/maplibre' +import { Link } from 'react-router-dom' + +import type { SiteMap } from '../services/api' +import api from '../services/apiInterface' + +const pinMap = { + '1': CanopeumPin, + '2': ParkPin, + '3': IndegeniousCommunityPin, + '4': EducationalFacilityPin, + '5': FarmsLandPin, + '6': CorporateLotPin, +} + +type MarkerEvent = { + target: { + _lngLat: { + lat: number, + lng: number, + }, + }, +} + +const Map = () => { + const [sites, setSites] = useState([]) + const [selectedSiteId, setSelectedSiteId] = useState(undefined) + + const [mapViewState, setMapViewState] = useState({ + longitude: -100, + latitude: 40, + zoom: 5, + }) + + const fetchData = async () => { + const response = await api().map.sites() + setSites(response) + } + + const getBrowserLocation = () => + navigator.geolocation.getCurrentPosition(position => { + const { latitude, longitude } = position.coords + setMapViewState({ ...mapViewState, latitude, longitude }) + }) + + const onMarkerClick = (event: MarkerEvent, site: SiteMap) => { + const { lat, lng } = event.target._lngLat + setMapViewState({ + latitude: lat, + longitude: lng, + zoom: 15, + }) + setSelectedSiteId(site.id) + document.getElementById(`${site.id}`)?.scrollIntoView({ behavior: 'smooth' }) + } + + const onMapMove = (viewState: ViewState) => { + setMapViewState(viewState) + setSelectedSiteId(undefined) + } + + useEffect(() => { + void fetchData() + getBrowserLocation() + }, []) + + return ( +
+
+
+
+ {sites.map(site => ( + +
+
+
+ +
+
+
+
{site.name}
+
+ school {site.siteType.en} +
+
+ location_on{' '} + {site.coordinates.address} +
+
+
+
+
+ + ))} +
+
+
+ onMapMove(event_.viewState)} + style={{ width: '100%', height: '100%' }} + > + + + + {sites.map(site => ( + onMarkerClick(event, site)} + style={{ cursor: 'pointer' }} + > + + + ))} + +
-
-) + ) +} export default Map