Merged Events and Users array in backend and fetching event coordinates with City, State and Country

Author: dhruvilmehta

components/map/Clusters.js

@@ -6,7 +6,7 @@ import UserMarker from "./UserMarker";
 import styles from "./Clusters.module.css";
 import EventMarker from "./EventMarker";
 
-export default function Clusters({users, events}) {
+export default function Clusters({points}) {
   const map = useMap();
   const mapB = map.getBounds();
   const [bounds, setBounds] = useState([
@@ -33,7 +33,7 @@ export default function Clusters({users, events}) {
   })
 
   const { clusters, supercluster } = useSupercluster({
-    points: [...users,...events],
+    points: points,
     bounds,
     zoom,
     options: {
@@ -93,8 +93,10 @@ export default function Clusters({users, events}) {
           }
 
           // we have a single point to render
-          return (
-            cluster.properties.isEvent ? <EventMarker event={cluster} key={name} /> :<UserMarker user={cluster} key={username} />
+          return cluster.properties.isEvent ? (
+            <EventMarker event={cluster} key={name} />
+          ) : (
+            <UserMarker user={cluster} key={username} />
           );
         })}
     </>

components/map/Map.js

@@ -2,7 +2,7 @@ import { MapContainer, TileLayer } from "react-leaflet";
 import Clusters from "./Clusters";
 import "leaflet/dist/leaflet.css";
 
-export default function Map({ users, events }) {
+export default function Map({ points }) {
   const boundsMap = [
     [-90, -180], // Southwest coordinates
     [90, 180], // Northeast coordinates
@@ -23,7 +23,7 @@ export default function Map({ users, events }) {
         attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
         url="https://b.tile.openstreetmap.org/{z}/{x}/{y}.png"
       />
-      <Clusters users={users} events={events} />
+      <Clusters points={points} />
     </MapContainer>
   );
 }

pages/api/system/reload.js

@@ -195,9 +195,9 @@ export default async function handler(req, res) {
       }
 
       // - events
-      async function getCoordinates(city) {
+      async function getCoordinates(city,state,country) {
         const location = await fetch(
-          `https://nominatim.openstreetmap.org/?addressdetails=1&q=${city}&format=json&limit=1`
+          `https://nominatim.openstreetmap.org/?addressdetails=1&city=${city}&state=${state}&country=${country}&format=json&limit=1`
         );
         const coordinates = await location.json();
         const final = {
@@ -213,11 +213,17 @@ export default async function handler(req, res) {
             {
               events: await Promise.all(
                 profile.events.map(async (event, position) => {
-                  let coordinates = event.location
-                    ? event.location.city
-                      ? await getCoordinates(event.location.city)
-                      : ""
-                    : "";
+                  let coordinates =
+                    event.location &&
+                    event.location.city &&
+                    event.location.state &&
+                    event.location.country
+                      ? await getCoordinates(
+                          event.location.city,
+                          event.location.state,
+                          event.location.country
+                        )
+                      : "";
                   return {
                     isVirtual: event.isVirtual,
                     color: event.color,

pages/map.js

@@ -23,6 +23,7 @@ export async function getStaticProps() {
     users: [],
     tags: [],
     events:[],
+    points: []
   };
   try {
     data.users = await getUsers();
@@ -120,16 +121,16 @@ export async function getStaticProps() {
         }
       }
     });
-
+  data.points=[...data.users,...data.events]
   return {
     props: { data },
     revalidate: pageConfig.revalidateSeconds,
   };
 }
 
 export default function Map({ data }) {
-  let { users, tags, events } = data;
-  const [filteredUsers, setFilteredUsers] = useState([]);
+  let { tags, points } = data;
+  const [filteredPoints, setFilteredPoints] = useState([]);
   const [selectedTags, setSelectedTags] = useState(new Set());
 
   let results = [];
@@ -151,12 +152,12 @@ export default function Map({ data }) {
     const valueLower = value.toLowerCase();
     const terms = [...updateSelectedTagsFilter(value)];
 
-    results = users.filter((user) => {
-      if (user.properties.name.toLowerCase().includes(valueLower)) {
+    results = points.filter((point) => {
+      if (point.properties.name.toLowerCase().includes(valueLower)) {
         return true;
       }
 
-      let userTags = user.properties.tags?.map((tag) => tag.toLowerCase());
+      let userTags = point.properties.tags?.map((tag) => tag.toLowerCase());
 
       if (terms.every((keyword) => userTags?.includes(keyword.toLowerCase()))) {
         return true;
@@ -165,11 +166,11 @@ export default function Map({ data }) {
       return false;
     });
 
-    setFilteredUsers(results);
+    setFilteredPoints(results);
   };
 
   const resetFilter = () => {
-    setFilteredUsers([]);
+    setFilteredPoints([]);
     setSelectedTags(new Set());
   };
 
@@ -208,7 +209,7 @@ export default function Map({ data }) {
           <Badge
             disable={selectedTags.size == 0 ? true : false}
             content={
-              filteredUsers.length > 0 ? filteredUsers.length : users.length
+              filteredPoints.length > 0 ? filteredPoints.length : points.length
             }
             >
             <Button
@@ -232,8 +233,7 @@ export default function Map({ data }) {
         </div>
         <div className="h-screen">
           <DynamicMap
-            users={filteredUsers.length > 0 ? filteredUsers : users}
-            events={events}
+            points={filteredPoints.length > 0 ? filteredPoints : points}
           />
         </div>
       </Page>