louis/oktopus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): map save last place visited and zoom

Browse Source
This commit is contained in:
leandrofars 2024-07-08 21:01:19 -03:00
parent 2424c1d49e
commit 3de7288014
1 changed files with 57 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
frontend/src/pages/map.js
View File

@ -3,6 +3,7 @@ import { GoogleMap, useLoadScript, Marker, OverlayView } from "@react-google-map
import { Layout as DashboardLayout } from 'src/layouts/dashboard/layout'; import { Layout as DashboardLayout } from 'src/layouts/dashboard/layout';
import { useEffect, useMemo, useState } from 'react'; import { useEffect, useMemo, useState } from 'react';
import mapStyles from '../utils/mapStyles.json'; import mapStyles from '../utils/mapStyles.json';
import { useRouter } from 'next/router';
const getPixelPositionOffset = pixelOffset => (width, height) => ({ const getPixelPositionOffset = pixelOffset => (width, height) => ({
x: -(width / 2) + pixelOffset.x, x: -(width / 2) + pixelOffset.x,
@ -29,10 +30,35 @@ const Page = () => {
const libraries = useMemo(() => ['places'], []); const libraries = useMemo(() => ['places'], []);
const router = useRouter();
const [mapRef, setMapRef] = useState(null);
const [mapCenter, setMapCenter] = useState(null); const [mapCenter, setMapCenter] = useState(null);
const [markers, setMarkers] = useState([]); const [markers, setMarkers] = useState([]);
const [activeMarker, setActiveMarker] = useState(null); const [activeMarker, setActiveMarker] = useState(null);
const [activeMarkerdata, setActiveMarkerdata] = useState(null); const [activeMarkerdata, setActiveMarkerdata] = useState(null);
const [zoom, setZoom] = useState(null)
const handleDragEnd = () => {
if (mapRef) {
const newCenter = mapRef.getCenter();
console.log("newCenter:",newCenter.lat(), newCenter.lng());
localStorage.setItem("mapCenter", JSON.stringify({"lat":newCenter.lat(),"lng":newCenter.lng()}))
}
}
const handleZoomChange = () => {
if (mapRef) {
const newZoom = mapRef.getZoom();
console.log("new zoom", newZoom)
localStorage.setItem("zoom", newZoom)
}
}
const handleOnLoad = map => {
setMapRef(map);
};
const fetchMarkers = async () => { const fetchMarkers = async () => {
@ -58,9 +84,8 @@ const Page = () => {
console.log("taix nem autenticado, sai fora oh") console.log("taix nem autenticado, sai fora oh")
return router.push("/auth/login") return router.push("/auth/login")
} else { } else {
console.log("agora quebrasse ux córno mô quiridu") setMarkers([])
const content = await result.json() console.log("error to get map markers")
throw new Error(content);
} }
} }
@ -92,6 +117,24 @@ const Page = () => {
useEffect(()=> { useEffect(()=> {
fetchMarkers(); fetchMarkers();
let zoomFromLocalStorage = localStorage.getItem("zoom")
if (zoomFromLocalStorage) {
setZoom(Number(zoomFromLocalStorage))
}else{
setZoom(25)
}
let mapCenterFromLocalStorage = localStorage.getItem("mapCenter")
if (mapCenterFromLocalStorage){
let fmtMapCenter = JSON.parse(localStorage.getItem("mapCenter"))
console.log("mapCenterFromLocalStorage:", fmtMapCenter)
setMapCenter({
lat: Number(fmtMapCenter.lat),
lng: Number(fmtMapCenter.lng),
})
return
}
// Check if geolocation is supported by the browser // Check if geolocation is supported by the browser
if ("geolocation" in navigator) { if ("geolocation" in navigator) {
// Prompt user for permission to access their location // Prompt user for permission to access their location
@ -108,12 +151,12 @@ const Page = () => {
// Error callback function // Error callback function
function(error) { function(error) {
// Handle errors, e.g. user denied location sharing permissions // Handle errors, e.g. user denied location sharing permissions
console.error("Error getting user location:", error); console.log("Error getting user location:", error);
} }
); );
} else { } else {
// Geolocation is not supported by the browser // Geolocation is not supported by the browser
console.error("Geolocation is not supported by this browser."); console.log("Geolocation is not supported by this browser, or the user denied access");
} }
},[]) },[])
@ -140,7 +183,7 @@ const Page = () => {
return <p>Loading...</p>; return <p>Loading...</p>;
} }
return ( mapCenter && markers && return ( markers && zoom &&
<> <>
<Head> <Head>
<title> <title>
@ -149,11 +192,16 @@ const Page = () => {
</Head> </Head>
<GoogleMap <GoogleMap
options={mapOptions} options={mapOptions}
zoom={14} zoom={zoom}
center={mapCenter} center={mapCenter ? mapCenter : {
lat: 0.0,
lng: 0.0,
}}
mapContainerStyle={{ width: '100%', height: '100%' }} mapContainerStyle={{ width: '100%', height: '100%' }}
onLoad={() => console.log('Map Component Loaded...')} onLoad={handleOnLoad}
clickableIcons={false} clickableIcons={false}
onDragEnd={handleDragEnd}
onZoomChanged={handleZoomChange}
> >
{ {
markers.map((marker, index) => ( markers.map((marker, index) => (