Skip to content

Map buttons #26

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
brandonyeu wants to merge 9 commits into
base: master
Choose a base branch
from
Open

Map buttons #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
c92bbbd
Merge remote-tracking branch 'origin/master'
brandonyeu Oct 6, 2024
7e5c5b9
Merge remote-tracking branch 'origin/master'
brandonyeu Oct 6, 2024
b5b1a74
Merge remote-tracking branch 'origin/master'
brandonyeu Oct 7, 2024
13788e7
Changed initial position
brandonyeu Oct 7, 2024
486c580
Map button brings you to the map at coordinates
brandonyeu Oct 7, 2024
ff95e35
Merge remote-tracking branch 'origin/master' into Map-Buttons
brandonyeu Oct 7, 2024
5efb2a5
added suspense
brandonyeu Oct 7, 2024
7e18e86
Fixed latitude and longitude passing
brandonyeu Oct 7, 2024
74a8946
Fixed latitude and longitude passing
brandonyeu Oct 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 2 additions & 4 deletions app/dashboard/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,8 @@ export default function Page() {

const fetchData = async () => {
try {
const [records, user] = await Promise.all([
pb.collection('Post').getFullList<PhotoCard>(),
pb.collection('users').getOne(currentUser.id),
]);
const records = await pb.collection('Post').getFullList<PhotoCard>();
const user = await pb.collection('users').getOne(currentUser.id);
setPhotos(records);
setUserSavedPosts(user.savedposts || []);
} catch (error) {
Expand Down
22 changes: 16 additions & 6 deletions app/full-map/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,25 @@
"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 { 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') ?? 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 (
<div className={""}>
<DashboardNavBar/>
<DashboardNavBar />
<section className={"mt-28 overflow-hidden "}>
<FullMapPage/>
<Suspense fallback={<FullMapPage latitude={undefined} longitude={undefined} />}>
<FullMapPage latitude={latitude} longitude={longitude} /> {/* Pass parameters as props */}
</Suspense>
</section>
</div>
)
}
);
}
252 changes: 205 additions & 47 deletions components/ours/Map/FullMapPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,59 +5,64 @@ 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() {
const mapRef = React.useRef<HTMLDivElement>(null);
export function FullMapPage(props: { latitude?: string; longitude?: string }) {
const mapRef = React.useRef<HTMLDivElement>(null); // Initialize with HTMLDivElement type

useEffect(() => {
const initMap = async () => {
try {
// Fetch all posts with their coordinates
const result = await pb.collection('Post').getFullList<PhotoCard>();

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;

const initialPosition = { lat: 43.642693, lng: -79.3871189 }; // Default center of the map

// Set map options
const mapOptions: google.maps.MapOptions = {
center: initialPosition,
zoom: 10, // 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 latitude = parseFloat(post.latitude);
const longitude = parseFloat(post.longitude);


// Check if latitude and longitude are valid numbers
if (!isNaN(latitude) && !isNaN(longitude)) {
const position = { lat: latitude, lng: longitude };
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<PhotoCard>();

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();
}, []);
}, [props.latitude, props.longitude]); // Add latitude and longitude as dependencies

return (
<div className="h-screen w-screen relative">
Expand All @@ -67,3 +72,156 @@ 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";
//
//
//
// export function FullMapPage(props:{latitude?: string, longitude?: string}) {
// const mapRef = React.useRef<HTMLDivElement>();
//
// useEffect(() => {
// const initMap = async () => {
// try {
// // Fetch all posts with their coordinates
// const result = await pb.collection('Post').getFullList<PhotoCard>();
//
// 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 (
// <div className="h-screen w-screen relative">
// <div className="h-full w-full" ref={mapRef} />
// </div>
// );
// }
//
// 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<HTMLDivElement>(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<PhotoCard>();
//
// 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 (
// <div className="h-screen w-screen relative">
// <div className="h-full w-full" ref={mapRef} />
// </div>
// );
// }
//
// export default FullMapPage;
13 changes: 11 additions & 2 deletions components/ui/focus-cards.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@

"use client";

import Image from "next/image";
import React, { useEffect, useState } from "react";
import { cn } from "@/lib/utils";
Expand Down Expand Up @@ -106,9 +108,16 @@ export const Card = React.memo(
onClick={toggleBookmark}
/>

<Link href={"/full-map"} className={"ml-2"}>
<Globe className={"h-7 w-7 text-blue-500 transition "}/>
<Link
href={`/full-map?lat=${card.latitude || ''}&lng=${card.longitude || ''}`}
className={"ml-2"}
>
<Globe className={"h-7 w-7 text-blue-500 transition "} />
</Link>

{/*<Link href={"/full-map"} className={"ml-2"}>*/}
{/* <Globe className={"h-7 w-7 text-blue-500 transition "}/>*/}
{/*</Link>*/}
</div>
</div>
</div>
Expand Down