From 13788e7bbefb2cc6f793533b96128964ebd6db86 Mon Sep 17 00:00:00 2001 From: brandonyeu Date: Sun, 6 Oct 2024 20:29:45 -0400 Subject: [PATCH 1/5] Changed initial position --- components/ours/Map/FullMapPage.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/ours/Map/FullMapPage.tsx b/components/ours/Map/FullMapPage.tsx index 19f5e6c..958dbd6 100644 --- a/components/ours/Map/FullMapPage.tsx +++ b/components/ours/Map/FullMapPage.tsx @@ -22,12 +22,12 @@ export function FullMapPage() { const { Map } = await loader.importLibrary("maps"); const { Marker } = await loader.importLibrary("marker") as google.maps.MarkerLibrary; - const initialPosition = { lat: 43.642693, lng: -79.3871189 }; // Default center of the map + const initialPosition = { lat: 37.996163, lng: -82.127480 }; // Default center of the map // Set map options const mapOptions: google.maps.MapOptions = { center: initialPosition, - zoom: 10, // Adjust zoom level as needed + zoom: 5, // Adjust zoom level as needed mapId: "MY_NEXTJS_MAPID", }; From 486c58051a543f9aa75d1ba398b23f7aa846124c Mon Sep 17 00:00:00 2001 From: brandonyeu Date: Sun, 6 Oct 2024 21:18:31 -0400 Subject: [PATCH 2/5] Map button brings you to the map at coordinates --- app/dashboard/page.tsx | 6 +- app/full-map/page.tsx | 17 +++-- components/ours/Map/FullMapPage.tsx | 106 +++++++++++++++++++++++++--- components/ui/focus-cards.tsx | 13 +++- 4 files changed, 122 insertions(+), 20 deletions(-) diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx index 25ece0a..6113398 100644 --- a/app/dashboard/page.tsx +++ b/app/dashboard/page.tsx @@ -11,13 +11,13 @@ export default function Page() { // Fetch photos from PocketBase useEffect(() => { const currentUser = pb.authStore.model; - + if (!currentUser) { console.error('User is not authenticated.'); window.location.href = '/'; return; } - + const fetchPhotos = async () => { try { const records = await pb.collection('Post').getFullList(); @@ -29,7 +29,7 @@ export default function Page() { fetchPhotos(); }, []); - + return (
diff --git a/app/full-map/page.tsx b/app/full-map/page.tsx index c4d089b..35f293a 100644 --- a/app/full-map/page.tsx +++ b/app/full-map/page.tsx @@ -1,15 +1,22 @@ "use client"; -import {DashboardNavBar} from "@/app/dashboard/components/DashboardNavbar"; -import FullMapPage from "@/components/ours/Map/FullMapPage"; +import { DashboardNavBar } from "@/app/dashboard/components/DashboardNavbar"; +import FullMapPage from "@/components/ours/Map/FullMapPage"; +import { useSearchParams } from "next/navigation"; // Import the useSearchParams hook export default function Page() { + const searchParams = useSearchParams(); // Get search parameters from the URL + + // Retrieve latitude and longitude from search parameters + const latitude = searchParams.get('lat'); + const longitude = searchParams.get('lng'); + return (
- +
- + {/* Pass parameters as props */}
-) + ); } \ No newline at end of file diff --git a/components/ours/Map/FullMapPage.tsx b/components/ours/Map/FullMapPage.tsx index 958dbd6..e4ca17d 100644 --- a/components/ours/Map/FullMapPage.tsx +++ b/components/ours/Map/FullMapPage.tsx @@ -5,7 +5,12 @@ import { Loader } from "@googlemaps/js-api-loader"; import pb from "../../../lib/pocketbase"; // Assuming this is where PocketBase is initialized import type { PhotoCard } from "@/types/photo"; -export function FullMapPage() { +interface FullMapPageProps { + latitude: string | null; // or use number if you prefer + longitude: string | null; // or use number if you prefer +} + +export function FullMapPage({ latitude, longitude }: FullMapPageProps) { const mapRef = React.useRef(null); useEffect(() => { @@ -22,28 +27,31 @@ export function FullMapPage() { const { Map } = await loader.importLibrary("maps"); const { Marker } = await loader.importLibrary("marker") as google.maps.MarkerLibrary; - const initialPosition = { lat: 37.996163, lng: -82.127480 }; // Default center of the map + // Use provided latitude and longitude or fallback to default position + const lat = latitude ? parseFloat(latitude) : 37.996163; + const lng = longitude ? parseFloat(longitude) : -82.127480; + + const initialPosition = { lat, lng }; // Set map options + const zoomLevel = latitude && longitude ? 10 : 5; // Set zoom level based on validity of coordinates const mapOptions: google.maps.MapOptions = { center: initialPosition, - zoom: 5, // Adjust zoom level as needed + zoom: zoomLevel, // Adjust zoom level based on conditions mapId: "MY_NEXTJS_MAPID", }; // Initialize map const map = new Map(mapRef.current as HTMLDivElement, mapOptions); - // Add markers for each post with valid coordinates result.forEach((post) => { - const latitude = parseFloat(post.latitude); - const longitude = parseFloat(post.longitude); - + const postLatitude = parseFloat(post.latitude); + const postLongitude = parseFloat(post.longitude); // Check if latitude and longitude are valid numbers - if (!isNaN(latitude) && !isNaN(longitude)) { - const position = { lat: latitude, lng: longitude }; + if (!isNaN(postLatitude) && !isNaN(postLongitude)) { + const position = { lat: postLatitude, lng: postLongitude }; new Marker({ map: map, position: position, @@ -57,7 +65,7 @@ export function FullMapPage() { } }; initMap(); - }, []); + }, [latitude, longitude]); // Add latitude and longitude as dependencies return (
@@ -67,3 +75,81 @@ export function FullMapPage() { } export default FullMapPage; + +// "use client"; +// +// import React, { useEffect } from "react"; +// import { Loader } from "@googlemaps/js-api-loader"; +// import pb from "../../../lib/pocketbase"; // Assuming this is where PocketBase is initialized +// import type { PhotoCard } from "@/types/photo"; +// import { useSearchParams } from "next/navigation"; // Import the useSearchParams hook +// +// export function FullMapPage() { +// const mapRef = React.useRef(null); +// const searchParams = useSearchParams(); // Get search parameters from the URL +// +// useEffect(() => { +// const initMap = async () => { +// try { +// // Fetch all posts with their coordinates +// const result = await pb.collection('Post').getFullList(); +// +// const loader = new Loader({ +// apiKey: process.env.NEXT_PUBLIC_MAPS_API_KEY as string, +// version: "weekly", +// }); +// +// const { Map } = await loader.importLibrary("maps"); +// const { Marker } = await loader.importLibrary("marker") as google.maps.MarkerLibrary; +// +// // Get latitude and longitude from search parameters +// const latParam = searchParams.get('lat'); +// const lngParam = searchParams.get('lng'); +// +// // Use provided latitude and longitude or fallback to default position +// const latitude = latParam ? parseFloat(latParam) : 37.996163; +// const longitude = lngParam ? parseFloat(lngParam) : -82.127480; +// +// const initialPosition = { lat: latitude, lng: longitude }; +// +// // Set map options +// const mapOptions: google.maps.MapOptions = { +// center: initialPosition, +// zoom: 5, // Adjust zoom level as needed +// mapId: "MY_NEXTJS_MAPID", +// }; +// +// // Initialize map +// const map = new Map(mapRef.current as HTMLDivElement, mapOptions); +// +// // Add markers for each post with valid coordinates +// result.forEach((post) => { +// const postLatitude = parseFloat(post.latitude); +// const postLongitude = parseFloat(post.longitude); +// +// // Check if latitude and longitude are valid numbers +// if (!isNaN(postLatitude) && !isNaN(postLongitude)) { +// const position = { lat: postLatitude, lng: postLongitude }; +// new Marker({ +// map: map, +// position: position, +// title: post.title, // Optional: show title on hover +// }); +// } +// }); +// +// } catch (error) { +// console.error("Error loading Google Maps API: ", error); +// } +// }; +// initMap(); +// }, [searchParams]); // Add searchParams as a dependency +// +// return ( +//
+//
+//
+// ); +// } +// +// export default FullMapPage; \ No newline at end of file diff --git a/components/ui/focus-cards.tsx b/components/ui/focus-cards.tsx index 3e383ce..8a13dc9 100644 --- a/components/ui/focus-cards.tsx +++ b/components/ui/focus-cards.tsx @@ -1,4 +1,6 @@ + "use client"; + import Image from "next/image"; import React, { useState } from "react"; import { cn } from "@/lib/utils"; @@ -97,9 +99,16 @@ export const Card = React.memo(
- - + + + + {/**/} + {/* */} + {/**/}
From 5efb2a59db46ba9e5c0a1bf2ebe267d29a60e624 Mon Sep 17 00:00:00 2001 From: brandonyeu Date: Sun, 6 Oct 2024 21:29:39 -0400 Subject: [PATCH 3/5] added suspense --- app/full-map/page.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/app/full-map/page.tsx b/app/full-map/page.tsx index 35f293a..a153fd9 100644 --- a/app/full-map/page.tsx +++ b/app/full-map/page.tsx @@ -2,7 +2,8 @@ import { DashboardNavBar } from "@/app/dashboard/components/DashboardNavbar"; import FullMapPage from "@/components/ours/Map/FullMapPage"; -import { useSearchParams } from "next/navigation"; // Import the useSearchParams hook +import { useSearchParams } from "next/navigation"; +import {Suspense} from "react"; // Import the useSearchParams hook export default function Page() { const searchParams = useSearchParams(); // Get search parameters from the URL @@ -15,7 +16,9 @@ export default function Page() {
- {/* Pass parameters as props */} + + {/* Pass parameters as props */} +
); From 7e18e86ff7a9e364df25c04ceab309532fa6d0ed Mon Sep 17 00:00:00 2001 From: brandonyeu Date: Sun, 6 Oct 2024 21:45:45 -0400 Subject: [PATCH 4/5] Fixed latitude and longitude passing --- app/full-map/page.tsx | 10 +++++----- components/ours/Map/FullMapPage.tsx | 17 +++++++---------- 2 files changed, 12 insertions(+), 15 deletions(-) diff --git a/app/full-map/page.tsx b/app/full-map/page.tsx index a153fd9..0934529 100644 --- a/app/full-map/page.tsx +++ b/app/full-map/page.tsx @@ -3,23 +3,23 @@ import { DashboardNavBar } from "@/app/dashboard/components/DashboardNavbar"; import FullMapPage from "@/components/ours/Map/FullMapPage"; import { useSearchParams } from "next/navigation"; -import {Suspense} from "react"; // Import the useSearchParams hook +import { Suspense } from "react"; // Import the useSearchParams hook export default function Page() { const searchParams = useSearchParams(); // Get search parameters from the URL // Retrieve latitude and longitude from search parameters - const latitude = searchParams.get('lat'); - const longitude = searchParams.get('lng'); + const latitude = searchParams.get('lat') ?? undefined; // Use nullish coalescing to set to undefined if null + const longitude = searchParams.get('lng') ?? undefined; // Use nullish coalescing to set to undefined if null return (
- + }> {/* Pass parameters as props */}
); -} \ No newline at end of file +} diff --git a/components/ours/Map/FullMapPage.tsx b/components/ours/Map/FullMapPage.tsx index e4ca17d..ea611ec 100644 --- a/components/ours/Map/FullMapPage.tsx +++ b/components/ours/Map/FullMapPage.tsx @@ -5,13 +5,10 @@ import { Loader } from "@googlemaps/js-api-loader"; import pb from "../../../lib/pocketbase"; // Assuming this is where PocketBase is initialized import type { PhotoCard } from "@/types/photo"; -interface FullMapPageProps { - latitude: string | null; // or use number if you prefer - longitude: string | null; // or use number if you prefer -} -export function FullMapPage({ latitude, longitude }: FullMapPageProps) { - const mapRef = React.useRef(null); + +export function FullMapPage(props:{latitude?: string, longitude?: string}) { + const mapRef = React.useRef(); useEffect(() => { const initMap = async () => { @@ -28,13 +25,13 @@ export function FullMapPage({ latitude, longitude }: FullMapPageProps) { const { Marker } = await loader.importLibrary("marker") as google.maps.MarkerLibrary; // Use provided latitude and longitude or fallback to default position - const lat = latitude ? parseFloat(latitude) : 37.996163; - const lng = longitude ? parseFloat(longitude) : -82.127480; + const lat = props.latitude ? parseFloat(props.latitude) : 37.996163; + const lng = props.longitude ? parseFloat(props.longitude) : -82.127480; const initialPosition = { lat, lng }; // Set map options - const zoomLevel = latitude && longitude ? 10 : 5; // Set zoom level based on validity of coordinates + const zoomLevel = props.latitude && props.longitude ? 10 : 5; // Set zoom level based on validity of coordinates const mapOptions: google.maps.MapOptions = { center: initialPosition, zoom: zoomLevel, // Adjust zoom level based on conditions @@ -65,7 +62,7 @@ export function FullMapPage({ latitude, longitude }: FullMapPageProps) { } }; initMap(); - }, [latitude, longitude]); // Add latitude and longitude as dependencies + }, [props.latitude, props.longitude]); // Add latitude and longitude as dependencies return (
From 74a89467e9716d96b744027096e5dc74ec17292e Mon Sep 17 00:00:00 2001 From: brandonyeu Date: Sun, 6 Oct 2024 21:49:30 -0400 Subject: [PATCH 5/5] Fixed latitude and longitude passing --- components/ours/Map/FullMapPage.tsx | 177 ++++++++++++++++++++-------- 1 file changed, 126 insertions(+), 51 deletions(-) diff --git a/components/ours/Map/FullMapPage.tsx b/components/ours/Map/FullMapPage.tsx index ea611ec..d84ed14 100644 --- a/components/ours/Map/FullMapPage.tsx +++ b/components/ours/Map/FullMapPage.tsx @@ -5,60 +5,60 @@ import { Loader } from "@googlemaps/js-api-loader"; import pb from "../../../lib/pocketbase"; // Assuming this is where PocketBase is initialized import type { PhotoCard } from "@/types/photo"; - - -export function FullMapPage(props:{latitude?: string, longitude?: string}) { - const mapRef = React.useRef(); +export function FullMapPage(props: { latitude?: string; longitude?: string }) { + const mapRef = React.useRef(null); // Initialize with HTMLDivElement type useEffect(() => { const initMap = async () => { - try { - // Fetch all posts with their coordinates - const result = await pb.collection('Post').getFullList(); - - const loader = new Loader({ - apiKey: process.env.NEXT_PUBLIC_MAPS_API_KEY as string, - version: "weekly", - }); - - const { Map } = await loader.importLibrary("maps"); - const { Marker } = await loader.importLibrary("marker") as google.maps.MarkerLibrary; - - // Use provided latitude and longitude or fallback to default position - const lat = props.latitude ? parseFloat(props.latitude) : 37.996163; - const lng = props.longitude ? parseFloat(props.longitude) : -82.127480; - - const initialPosition = { lat, lng }; - - // Set map options - const zoomLevel = props.latitude && props.longitude ? 10 : 5; // Set zoom level based on validity of coordinates - const mapOptions: google.maps.MapOptions = { - center: initialPosition, - zoom: zoomLevel, // Adjust zoom level based on conditions - mapId: "MY_NEXTJS_MAPID", - }; - - // Initialize map - const map = new Map(mapRef.current as HTMLDivElement, mapOptions); - - // Add markers for each post with valid coordinates - result.forEach((post) => { - const postLatitude = parseFloat(post.latitude); - const postLongitude = parseFloat(post.longitude); - - // Check if latitude and longitude are valid numbers - if (!isNaN(postLatitude) && !isNaN(postLongitude)) { - const position = { lat: postLatitude, lng: postLongitude }; - new Marker({ - map: map, - position: position, - title: post.title, // Optional: show title on hover - }); - } - }); - - } catch (error) { - console.error("Error loading Google Maps API: ", error); + if (mapRef.current) { // Ensure mapRef.current is not null before using it + try { + // Fetch all posts with their coordinates + const result = await pb.collection('Post').getFullList(); + + const loader = new Loader({ + apiKey: process.env.NEXT_PUBLIC_MAPS_API_KEY as string, + version: "weekly", + }); + + const { Map } = await loader.importLibrary("maps"); + const { Marker } = await loader.importLibrary("marker") as google.maps.MarkerLibrary; + + // Use provided latitude and longitude or fallback to default position + const lat = props.latitude ? parseFloat(props.latitude) : 37.996163; + const lng = props.longitude ? parseFloat(props.longitude) : -82.127480; + + const initialPosition = { lat, lng }; + + // Set map options + const zoomLevel = props.latitude && props.longitude ? 10 : 5; // Set zoom level based on validity of coordinates + const mapOptions: google.maps.MapOptions = { + center: initialPosition, + zoom: zoomLevel, // Adjust zoom level based on conditions + mapId: "MY_NEXTJS_MAPID", + }; + + // Initialize map + const map = new Map(mapRef.current, mapOptions); // mapRef.current should not be null here + + // Add markers for each post with valid coordinates + result.forEach((post) => { + const postLatitude = parseFloat(post.latitude); + const postLongitude = parseFloat(post.longitude); + + // Check if latitude and longitude are valid numbers + if (!isNaN(postLatitude) && !isNaN(postLongitude)) { + const position = { lat: postLatitude, lng: postLongitude }; + new Marker({ + map: map, + position: position, + title: post.title, // Optional: show title on hover + }); + } + }); + + } catch (error) { + console.error("Error loading Google Maps API: ", error); + } } }; initMap(); @@ -73,6 +73,81 @@ export function FullMapPage(props:{latitude?: string, longitude?: string}) { export default FullMapPage; +// "use client"; +// +// import React, { useEffect } from "react"; +// import { Loader } from "@googlemaps/js-api-loader"; +// import pb from "../../../lib/pocketbase"; // Assuming this is where PocketBase is initialized +// import type { PhotoCard } from "@/types/photo"; +// +// +// +// export function FullMapPage(props:{latitude?: string, longitude?: string}) { +// const mapRef = React.useRef(); +// +// useEffect(() => { +// const initMap = async () => { +// try { +// // Fetch all posts with their coordinates +// const result = await pb.collection('Post').getFullList(); +// +// const loader = new Loader({ +// apiKey: process.env.NEXT_PUBLIC_MAPS_API_KEY as string, +// version: "weekly", +// }); +// +// const { Map } = await loader.importLibrary("maps"); +// const { Marker } = await loader.importLibrary("marker") as google.maps.MarkerLibrary; +// +// // Use provided latitude and longitude or fallback to default position +// const lat = props.latitude ? parseFloat(props.latitude) : 37.996163; +// const lng = props.longitude ? parseFloat(props.longitude) : -82.127480; +// +// const initialPosition = { lat, lng }; +// +// // Set map options +// const zoomLevel = props.latitude && props.longitude ? 10 : 5; // Set zoom level based on validity of coordinates +// const mapOptions: google.maps.MapOptions = { +// center: initialPosition, +// zoom: zoomLevel, // Adjust zoom level based on conditions +// mapId: "MY_NEXTJS_MAPID", +// }; +// +// // Initialize map +// const map = new Map(mapRef.current as HTMLDivElement, mapOptions); +// +// // Add markers for each post with valid coordinates +// result.forEach((post) => { +// const postLatitude = parseFloat(post.latitude); +// const postLongitude = parseFloat(post.longitude); +// +// // Check if latitude and longitude are valid numbers +// if (!isNaN(postLatitude) && !isNaN(postLongitude)) { +// const position = { lat: postLatitude, lng: postLongitude }; +// new Marker({ +// map: map, +// position: position, +// title: post.title, // Optional: show title on hover +// }); +// } +// }); +// +// } catch (error) { +// console.error("Error loading Google Maps API: ", error); +// } +// }; +// initMap(); +// }, [props.latitude, props.longitude]); // Add latitude and longitude as dependencies +// +// return ( +//
+//
+//
+// ); +// } +// +// export default FullMapPage; + // "use client"; // // import React, { useEffect } from "react";