From 0eb766b2a02a013fd28550246a362a60c3fe9939 Mon Sep 17 00:00:00 2001
From: ClarkLach <102780236+ClarkLach@users.noreply.github.com>
Date: Tue, 9 Apr 2024 15:46:19 -0400
Subject: [PATCH 1/2] Hover effect for map rooms
Hopefully nothing is broken, some formatting still needed
---
README.md | 10 ++---
frontend-next/src/components/app/map/geo.js | 50 +++++++++++++++++----
2 files changed, 46 insertions(+), 14 deletions(-)
diff --git a/README.md b/README.md
index 4172258..c707a00 100644
--- a/README.md
+++ b/README.md
@@ -1,9 +1,9 @@
Main repo for ChatMaps, our COS420 Project.
-ChatMaps is a web-based social networking service that allows users to connect to others in their local geographic area. It implements an interactable mapping utility to show general user locations relative to other users, as well as a chat room feature that allows users to start public conversations based on a specified topic. ChatMaps is primarily intended for use in densely populated areas, such as college campuses or metropolitan areas, so people of similar interests can start conversations. The goal of this project is to create a web app that plots locations, gives a radius of the local area, and connects users into different topic-based chat rooms.
+ChatMaps is a web-based social networking service that allows users to connect to others in their local geographic area. It implements an interactable mapping utility to show general user locations relative to others, as well as a chat room feature that allows users to start public conversations based on any given topic. ChatMaps is primarily intended for use in densely populated areas, such as college campuses or metropolitan areas, so people of similar interests can start new conversations. The goal of this project is to create a web app that plots locations, gives a radius of the local area, and connects users into different topic-based chat rooms.
-This service implements user login and profiles, allowing users to add each other as friends and start private conversations. There are several default chat rooms of varying topics, but users also have the ability to create their own topics that will be viewable by other users. For example, a user at the University of Maine could create a joinable chat room titled “COS420”, which would be visible to others near this campus.
+This service implements user login and profiles, allowing users to add each other as friends and start private conversations. There are several default chat rooms of varying topics, but users also have the ability to create their own rooms that will be visible to other users. For example, a user at the University of Maine could create a joinable chat room titled “COS420”, which would be joinable by others near this campus.
This app shares some similarities to other social networks that implement location-based content. ChatMaps’ novel approach is to utilize user location to facilitate real-time communication with others within a given radius.
@@ -11,15 +11,13 @@ The live version of this app can be found at:
https://chatma.ps/
-A local version can be run with:
+A local version can be run (assuming you have Node installed) with:
cd frontend-next/
npm install
-npm run build
-
-npm run start
+npm run dev
then navigating to:
diff --git a/frontend-next/src/components/app/map/geo.js b/frontend-next/src/components/app/map/geo.js
index d691991..1d1d334 100644
--- a/frontend-next/src/components/app/map/geo.js
+++ b/frontend-next/src/components/app/map/geo.js
@@ -1,11 +1,16 @@
-import { Map, Marker, ZoomControl } from "pigeon-maps";
+import { Map, Marker, ZoomControl, Overlay } from "pigeon-maps";
import { database } from "../../../../firebase-config";
-import { ref, get } from "firebase/database";
+import { ref, get, set } from "firebase/database";
import { useState, useEffect } from "react";
// ONLY nearby markers
-function NearbyRoomMarkers({ loc, user }) {
+function NearbyRoomMarkers({ loc, user, markers }) {
+ if (!markers || !loc || !user) {
+ return [null, null];
+ }
+
const [markerArr, setMarkerArr] = useState([]);
+ const [hoveredRoom, setHoveredRoom] = useState(null);
// Room path in DB
const path =
@@ -20,6 +25,20 @@ function NearbyRoomMarkers({ loc, user }) {
"/chat?room=" + path + roomObj.name + "-" + roomObj.timestamp;
};
+ const handleRoomHover = (roomObj) => {
+ setHoveredRoom(
+
+
+
+ );
+ };
+
+ const handleRoomUnhover = (roomObj) => {
+ setHoveredRoom(null);
+ };
+
// Mostly copied Nick's code from before
useEffect(() => {
if (loc && user) {
@@ -36,7 +55,9 @@ function NearbyRoomMarkers({ loc, user }) {
anchor={[roomObj.latitude, roomObj.longitude]}
color="blue"
onClick={() => handleRoomMarkerClick(roomObj)}
- >
+ onMouseOver={() => handleRoomHover(roomObj)}
+ onMouseOut={() => handleRoomUnhover(roomObj)}
+ />
);
});
setMarkerArr(newMarkers);
@@ -45,7 +66,7 @@ function NearbyRoomMarkers({ loc, user }) {
}
}, []);
- return markerArr;
+ return [markerArr, hoveredRoom];
}
/**
@@ -60,7 +81,12 @@ function NearbyRoomMarkers({ loc, user }) {
export function Geo({ loc, zoom, moveable, markers, user }) {
const handleUserMarkerClick = () => {
window.location.href = "/user?uid=" + user.uid;
- }
+ };
+
+ // SCUFFED AF
+ var rooms = NearbyRoomMarkers({ loc, user, markers });
+ var room_markers = rooms[0];
+ var room_overlay = rooms[1];
if (!loc) {
return Getting Location...
;
@@ -72,11 +98,19 @@ export function Geo({ loc, zoom, moveable, markers, user }) {
defaultZoom={zoom}
mouseEvents={moveable}
touchEvents={moveable}
+ attribution={false}
>
+ {
+ room_overlay /* Renders the room name overlay when you mouse over room */
+ }
{zoom && }
- {markers && NearbyRoomMarkers({ loc, user })}
+ {room_markers /* Renders the actual room markers */}
{user && ( // Shows the user marker
-
+
)}
--
2.52.0
From 1e3c0ce9300f786747117b1630b3a82e71a260e6 Mon Sep 17 00:00:00 2001
From: ClarkLach <102780236+ClarkLach@users.noreply.github.com>
Date: Tue, 9 Apr 2024 20:33:49 -0400
Subject: [PATCH 2/2] Custom Icons POC
Will need to pick out some good icons/styles. Overlay offset needs some work still.
---
frontend-next/src/components/app/map/geo.js | 20 ++++++++++++++------
1 file changed, 14 insertions(+), 6 deletions(-)
diff --git a/frontend-next/src/components/app/map/geo.js b/frontend-next/src/components/app/map/geo.js
index 1d1d334..6611dc6 100644
--- a/frontend-next/src/components/app/map/geo.js
+++ b/frontend-next/src/components/app/map/geo.js
@@ -1,7 +1,10 @@
import { Map, Marker, ZoomControl, Overlay } from "pigeon-maps";
import { database } from "../../../../firebase-config";
-import { ref, get, set } from "firebase/database";
+import { ref, get} from "firebase/database";
import { useState, useEffect } from "react";
+import ChatBubbleTwoToneIcon from '@mui/icons-material/ChatBubbleTwoTone';
+import PersonOutlineTwoToneIcon from '@mui/icons-material/PersonOutlineTwoTone';
+import { red } from '@mui/material/colors';
// ONLY nearby markers
function NearbyRoomMarkers({ loc, user, markers }) {
@@ -27,7 +30,7 @@ function NearbyRoomMarkers({ loc, user, markers }) {
const handleRoomHover = (roomObj) => {
setHoveredRoom(
-
+
@@ -53,13 +56,15 @@ function NearbyRoomMarkers({ loc, user, markers }) {
handleRoomMarkerClick(roomObj)}
onMouseOver={() => handleRoomHover(roomObj)}
onMouseOut={() => handleRoomUnhover(roomObj)}
- />
+ style={{pointerEvents:'auto'} /* So stupid */}
+ >
+
+
);
- });
+ });
setMarkerArr(newMarkers);
}
});
@@ -110,7 +115,10 @@ export function Geo({ loc, zoom, moveable, markers, user }) {
anchor={[loc.latitude, loc.longitude]}
color="red"
onClick={handleUserMarkerClick}
- />
+ style={{pointerEvents:'auto'} /* So stupid */}
+ >
+
+
)}
--
2.52.0