diff --git a/src/collections/Works.ts b/src/collections/Works.ts
index ae9653b..4a1e768 100644
--- 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
new file mode 100644
index 0000000..3a43f9f
--- /dev/null
+++ 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
Invalid URL
;
+ }
+
+ return (
+
+
+
+ );
+};
+
+export default DynamicMap;
diff --git a/src/components/Map/googleMap.tsx b/src/components/Map/googleMap.tsx
new file mode 100644
index 0000000..0789a99
--- /dev/null
+++ 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 (
+
+
+
+
+
+ )
+};
+
+export { MapComponent };
\ No newline at end of file
diff --git a/src/components/Map/index.tsx b/src/components/Map/index.tsx
index 49f4077..708556f 100644
--- 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) &&
-
-
)
+ work.mapUrl &&
+
+
+ )
};
+// props.hasCoordinates(props.work?.coordenadas) &&
+//
+//
+
+
export default Map
\ No newline at end of file
diff --git a/src/components/Map/mapProvider.tsx b/src/components/Map/mapProvider.tsx
new file mode 100644
index 0000000..6751c15
--- /dev/null
+++ b/src/components/Map/mapProvider.tsx
@@ -0,0 +1,26 @@
+//Since the map will be laoded and displayed on client side
+'use client';
+
+// Import necessary modules and functions from external libraries and our own project
+import { Libraries, useJsApiLoader } from '@react-google-maps/api';
+import { ReactNode } from 'react';
+
+// Define a list of libraries to load from the Google Maps API
+const libraries = ['places', 'drawing', 'geometry'];
+
+// Define a function component called MapProvider that takes a children prop
+export function MapProvider({ children }: { children: ReactNode }) {
+
+ // Load the Google Maps JavaScript API asynchronously
+ const { isLoaded: scriptLoaded, loadError } = useJsApiLoader({
+ googleMapsApiKey: process.env.NEXT_PUBLIC_GOOGLE_MAP_API as string,
+ libraries: libraries as Libraries,
+ });
+
+ if (loadError) return
Parece que hou um problema para carregar o map :(
+
+ if (!scriptLoaded) return
Procurando o local no mapa ...
+
+ // Return the children prop wrapped by this MapProvider component
+ return children;
+}
\ No newline at end of file
diff --git a/src/payload-types.ts b/src/payload-types.ts
index 51be9f2..9847996 100644
--- a/src/payload-types.ts
+++ b/src/payload-types.ts
@@ -174,11 +174,12 @@ export interface Work {
id?: string | null;
}[]
| null;
+ category?: (number | null) | CategoryWork;
+ mapUrl?: string | null;
coordenadas?: {
longitude?: string | null;
latitude?: string | null;
};
- category?: (number | null) | CategoryWork;
updatedAt: string;
createdAt: string;
}