new map

denisprado · Jul 18, 2024 · 783b1d6 · 783b1d6
1 parent 264ac0c
commit 783b1d6
Show file tree

Hide file tree

Showing 11 changed files with 227 additions and 23 deletions.
diff --git a/global.d.ts b/global.d.ts
@@ -0,0 +1,3 @@
+interface Window {
+  google: any;
+}
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
     "standalone-script": "node ./src/scripts/standalone-script.js"
   },
   "dependencies": {
+    "@googlemaps/js-api-loader": "^1.16.6",
     "@payloadcms/db-postgres": "3.0.0-beta.65",
     "@payloadcms/email-nodemailer": "3.0.0-beta.65",
     "@payloadcms/next": "3.0.0-beta.65",
@@ -27,6 +28,7 @@
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-navigation-menu": "^1.2.0",
     "@radix-ui/react-slot": "^1.1.0",
+    "@react-google-maps/api": "^2.19.3",
     "babel-plugin-react-compiler": "^0.0.0-experimental-592953e-20240517",
     "class-variance-authority": "^0.7.0",
     "classnames": "^2.5.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/(app)/[works]/[slug]/page.tsx b/src/app/(app)/[works]/[slug]/page.tsx
@@ -46,7 +46,7 @@ export default async function Work({ params }: { params: { slug: string } }) {
 							{serializeLexical({ nodes: description!.root?.children })}
 						</div>
 						<div className={"col-span-full"}>
-							<Map hasCoordinates={hasCoordinates} work={work} height="800"></Map>
+							<Map work={work} height="800px"></Map>
 						</div>
 					</div>
 

diff --git a/src/app/(app)/layout.tsx b/src/app/(app)/layout.tsx
@@ -30,7 +30,6 @@ export default function RootLayout({
 }>) {
 	return (
 		<html lang="pt">
-
 			<body className={montserrat.className + ' overflow-x-hidden ' + lato.className}>
 				<div className="grid min-h-[100dvh] grid-rows-[auto_1fr_auto]">
 					<Header />

diff --git a/src/collections/Works.ts b/src/collections/Works.ts
@@ -33,6 +33,12 @@ export const Works: CollectionConfig = {
         },
       ],
     },
+    {
+      name: "category",
+      type: "relationship",
+      relationTo: "categoryWork",
+    },
+    { name: "mapUrl", type: "text" },
     {
       name: "coordenadas",
       type: "group",
@@ -52,10 +58,5 @@ export const Works: CollectionConfig = {
         },
       ],
     },
-    {
-      name: "category",
-      type: "relationship",
-      relationTo: "categoryWork",
-    },
   ],
 };
diff --git a/src/components/Map/dinamycMap.tsx b/src/components/Map/dinamycMap.tsx
@@ -0,0 +1,45 @@
+'use client'
+
+import { MapComponent } from "./googleMap";
+import { MapProvider } from "./mapProvider";
+
+
+
+function extractMapParametersFromUrl(url: string) {
+	const regex = /@(-?\d+\.\d+),(-?\d+\.\d+),(\d+)a,(\d+\.\d+)y,(\d+\.\d+)h,(\d+\.\d+)t/;
+	console.log("url", url)
+
+	const matches = url.match(regex);
+	console.log("matches", matches)
+	if (matches) {
+		return {
+			lat: parseFloat(matches[1]),
+			lng: parseFloat(matches[2]),
+			zoom: parseInt(matches[3]),
+			pitch: parseFloat(matches[4]),
+			heading: parseFloat(matches[5]),
+			tilt: parseFloat(matches[6]),
+		};
+	} else {
+		return null;
+	}
+}
+
+const DynamicMap = ({ mapUrl }: { mapUrl: string }) => {
+
+	const mapParameters = extractMapParametersFromUrl(mapUrl);
+
+	console.log("mapParameters", mapParameters)
+
+	if (!mapParameters) {
+		return <p>Invalid URL</p>;
+	}
+
+	return (
+		<MapProvider>
+			<MapComponent lat={mapParameters.lat} lng={mapParameters.lng} zoom={mapParameters.zoom} tilt={mapParameters.tilt}></MapComponent>
+		</MapProvider>
+	);
+};
+
+export default DynamicMap;
diff --git a/src/components/Map/googleMap.tsx b/src/components/Map/googleMap.tsx
@@ -0,0 +1,49 @@
+/*Since the map was loaded on client side, 
+we need to make this component client rendered as well*/
+'use client'
+
+//Map component Component from library
+import { GoogleMap, useJsApiLoader } from "@react-google-maps/api";
+
+
+const MapComponent = ({ lat, lng, zoom, tilt }: { lat: number, lng: number, zoom: number, tilt: number }) => {
+	//Map's styling
+	const defaultMapContainerStyle = {
+		width: '100%',
+		height: '100vh',
+		borderRadius: '32px 0px 0px 32px',
+	};
+
+	//K2's coordinates
+	const defaultMapCenter = {
+		lat: lat,
+		lng: lng
+	}
+
+	//Default zoom level, can be adjusted
+	const defaultMapZoom = zoom
+
+	//Map options
+	const defaultMapOptions = {
+		zoomControl: false,
+		tilt: tilt,
+	};
+
+
+
+	return (
+		<div className="w-full">
+			<GoogleMap
+				mapContainerStyle={defaultMapContainerStyle}
+				center={defaultMapCenter}
+				zoom={defaultMapZoom}
+				options={defaultMapOptions}
+
+			>
+			</GoogleMap>
+		</div>
+
+	)
+};
+
+export { MapComponent };
diff --git a/src/components/Map/index.tsx b/src/components/Map/index.tsx
@@ -1,20 +1,26 @@
-const Map = (props:
+
+import { Work } from "@/payload-types";
+import DynamicMap from "./dinamycMap";
+
+const Map = ({ work, height = '800' }:
 	{
-		hasCoordinates: (arg0: any) => any;
-		work: {
-			coordenadas: {
-				longitude: any;
-				latitude: any;
-			};
-		};
+		// hasCoordinates: (arg0: any) => any;
+		work: Work;
 		height?: string;
 	}) => {
-	const height = props.height ?? '450'
+
+
 	return (
-		props.hasCoordinates(props.work?.coordenadas) && <div className="w-full">
-			<iframe src={`https://www.google.com/maps/embed/v1/streetview?key=AIzaSyBFQ2XvHhidZ5rCrKnJ9GZMzldlkTUsRKQ&location=${props.work?.coordenadas?.longitude!},${props.work?.coordenadas?.latitude!}&heading=161&pitch=10&fov=35&`} width="100%" height={height} allowFullScreen={true} loading="lazy" referrerPolicy="no-referrer-when-downgrade"></iframe>
-		</div>)
+		work.mapUrl &&
+		<DynamicMap mapUrl={work.mapUrl} />
+
+	)
 };
 
+// props.hasCoordinates(props.work?.coordenadas) && <div className="w-full">
+// 	<iframe src={`https://www.google.com/maps/embed/v1/streetview?key=AIzaSyBFQ2XvHhidZ5rCrKnJ9GZMzldlkTUsRKQ&location=${props.work?.coordenadas?.longitude!},${props.work?.coordenadas?.latitude!}&heading=161&pitch=10&fov=35&`} width="100%" height={height} allowFullScreen={true} loading="lazy" referrerPolicy="no-referrer-when-downgrade"></iframe>
+// </div>
+
+
 
 export default Map