Community events to map

components/map/Clusters.js

@@ -4,8 +4,9 @@ import { Marker, useMap } from "react-leaflet";
 import useSupercluster from "use-supercluster";
 import UserMarker from "./UserMarker";
 import styles from "./Clusters.module.css";
+import EventMarker from "./EventMarker";
 
-export default function Clusters({users}) {
+export default function Clusters({points}) {
   const map = useMap();
   const mapB = map.getBounds();
   const [bounds, setBounds] = useState([
@@ -32,15 +33,14 @@ export default function Clusters({users}) {
   })
 
   const { clusters, supercluster } = useSupercluster({
-    points: users,
+    points: points,
     bounds,
     zoom,
     options: {
       radius: zoom < 17 ? 75 : 50,
       maxZoom: 18
     }
   });
-
   const icons = {};
   const fetchIcon = (count) => {
     const size =
@@ -65,7 +65,8 @@ export default function Clusters({users}) {
           const {
             cluster: isCluster,
             point_count: pointCount,
-            username
+            username,
+            name
           } = cluster.properties;
 
           // we have a cluster to render
@@ -91,7 +92,9 @@ export default function Clusters({users}) {
           }
 
           // we have a single point to render
-          return (
+          return cluster.properties.isEvent ? (
+            <EventMarker event={cluster} key={name} />
+          ) : (
             <UserMarker user={cluster} key={username} />
           );
         })}

components/map/EventMarker.js

@@ -0,0 +1,58 @@
+import L from "leaflet";
+import { Marker, Popup } from "react-leaflet";
+import { ReactMarkdown } from "react-markdown/lib/react-markdown";
+import Link from "@components/Link";
+
+export default function EventMarker({event}) {
+  // Custom component for rendering links within ReactMarkdown
+  const LinkRenderer = ({ href, children }) => (
+    <Link href={href}>
+      {children}
+    </Link>
+  );
+
+  return (
+    <Marker
+      icon={L.divIcon({
+        className: "rounded-full",
+        html: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />
+        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" />
+      </svg>
+      `,
+        popupAnchor: [0, -10],
+        iconSize: [40, 40],
+        iconAnchor: [20, 20],
+      })}
+      position={[event.geometry.coordinates[1], event.geometry.coordinates[0]]}
+    >
+      <Popup>
+        <div className="flex flex-col gap-[5px]">
+          <h1 className="font-[600]">
+            <Link href={event.properties.url}>
+              {event.properties.name}
+            </Link>
+          </h1>
+          <span>
+            {[
+              event.properties.location.city,
+              event.properties.location.state,
+              event.properties.location.country,
+            ]
+              .filter((x) => x)
+              .join(", ")}
+          </span>
+          <span>
+            <ReactMarkdown components={{ a: LinkRenderer }}>
+              {event.properties.description}
+            </ReactMarkdown>
+          </span>
+          <span>
+            {`${new Date(event.properties.date.start).toLocaleDateString()} - 
+              ${new Date(event.properties.date.end).toLocaleDateString()}`}
+          </span>
+        </div>
+      </Popup>
+    </Marker>
+  )
+}

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 }) {
+export default function Map({ points }) {
   const boundsMap = [
     [-90, -180], // Southwest coordinates
     [90, 180], // Northeast coordinates
@@ -23,7 +23,7 @@ export default function Map({ users }) {
         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} />
+      <Clusters points={points} />
     </MapContainer>
   );
 }

models/Profile/Event.js

@@ -34,6 +34,14 @@ const EventSchema = new Schema({
   price: {
     startingFrom: Number,
   },
+  location: {
+    road: String,
+    city: String,
+    state: String,
+    country: String,
+    lat: Number,
+    lon: Number,
+  },
 });
 
 EventSchema.pre("save", () => {

pages/api/events.js

@@ -12,14 +12,29 @@ export default async function handler(req, res) {
   return res.status(200).json(events);
 }
 
-export async function getEvents() {
+export async function getEvents(withLocation = false) {
   let events = [];
   try {
     events = await Profile.aggregate([
       { $project: { username: 1, events: 1, isEnabled: 1 } },
       { $match: { "events.date.start": { $gt: new Date() }, isEnabled: true } },
       { $unwind: "$events" },
       { $match: { "events.date.end": { $gt: new Date() } } },
+      ...(withLocation
+        ? [
+            {
+              $match: {
+                $and: [
+                  { "events.location": { $exists: true } },
+                  { "events.location.lat": { $exists: true } },
+                  { "events.location.lon": { $exists: true } },
+                  { "events.location.lat": { $ne: null } },
+                  { "events.location.lon": { $ne: null } },
+                ],
+              },
+            },
+          ]
+        : []),
       { $sort: { "events.date.start": 1 } },
       {
         $group: {
@@ -31,6 +46,7 @@ export async function getEvents() {
           url: { $first: "$events.url" },
           name: { $first: "$events.name" },
           description: { $first: "$events.description" },
+          location: { $first: "$events.location" },
           isEnabled: { $first: "$isEnabled" },
         },
       },

pages/api/system/reload.js

@@ -234,28 +234,68 @@ export default async function handler(req, res) {
       }
 
       // - events
-      try {
-        if (profile.events) {
+      async function getCoordinates(city, state, country) {
+        let locationDb = {};
+        const provided = [city, state, country].filter((x) => x).join(",");
+        if (locationDb[provided]) {
+          return locationDb[provided];
+        }
+        try {
+          const location = await fetch(
+            `https://nominatim.openstreetmap.org/?addressdetails=1&q=
+            ${encodeURIComponent(provided)}&format=json&limit=1`
+          );
+          const coordinates = await location.json();
+          if (coordinates) {
+            const point = {
+              lat: coordinates[0].lat,
+              lon: coordinates[0].lon,
+            };
+            locationDb[provided] = point;
+            return point;
+          }
+        } catch (e) {
+          return null;
+        }
+        return null;
+      }
+
+      if (profile.events) {
+        try {
+          const events = await Promise.all(
+            profile.events.map(async (event, position) => {
+              let location = {};
+              if (event.location) {
+                location = {
+                  location: { ...event.location },
+                };
+                if (new Date(event.date.start) > Date.now() || new Date(event.date.end) > Date.now()) {
+                  const coordinates = await getCoordinates(
+                    event.location.city,
+                    event.location.state,
+                    event.location.country
+                  );
+                  if (coordinates) {
+                    location.location.lat = coordinates.lat;
+                    location.location.lon = coordinates.lon;
+                  }
+                }
+              }
+              return {
+                order: position,
+                ...event,
+                ...location,
+              };
+            })
+          );
+
           await Profile.findOneAndUpdate(
             { username: profile.username },
-            {
-              events: profile.events.map((event) => ({
-                isVirtual: event.isVirtual,
-                color: event.color,
-                name: event.name,
-                description: event.description,
-                date: {
-                  start: event.date.start,
-                  end: event.date.end,
-                },
-                url: event.url,
-                price: event.price,
-              })),
-            }
+            { events }
           );
+        } catch (e) {
+          logger.error(e,`failed to update events for ${profile.username}`);
         }
-      } catch (e) {
-        logger.error(e, `failed to update events for ${profile.username}`);
       }
     })
   );

pages/map.js

@@ -9,6 +9,7 @@ import Page from "@components/Page";
 import Badge from "@components/Badge";
 import { getTags } from "./api/discover/tags";
 import { getUsers } from "./api/profiles";
+import { getEvents } from "./api/events";
 import config from "@config/app.json";
 
 //this is required as leaflet is not compatible with SSR
@@ -21,6 +22,8 @@ export async function getStaticProps() {
   let data = {
     users: [],
     tags: [],
+    events:[],
+    points: []
   };
   try {
     data.users = await getUsers();
@@ -85,15 +88,47 @@ export async function getStaticProps() {
     logger.error(e, "ERROR loading tags");
   }
 
+  try {
+    data.events = await getEvents(true);
+  } catch (e) {
+    logger.error(e, "ERROR loading Events");
+  }
+
+  data.events = data.events.map((event, index) => {
+    const offset = Math.random() * 0.02; // ~2.2km
+    const offset2 = Math.random() * 0.02; // ~2.2km
+    return {
+      type: "Feature",
+      properties: {
+        cluster: false,
+        isEvent: true,
+        description: event.description,
+        name: event.name,
+        location: event.location,
+        date: event.date,
+        url: event.url || ''
+      },
+      geometry: {
+        type: "Point",
+        coordinates: adjustCoords(
+          [parseFloat(event.location.lon), parseFloat(event.location.lat)],
+          offset,
+          offset2,
+          index
+        ),
+      },
+    };
+  });
+  data.points=[...data.users,...data.events]
   return {
     props: { data },
     revalidate: pageConfig.revalidateSeconds,
   };
 }
 
 export default function Map({ data }) {
-  let { users, tags } = data;
-  const [filteredUsers, setFilteredUsers] = useState([]);
+  let { tags, points } = data;
+  const [filteredPoints, setFilteredPoints] = useState([]);
   const [selectedTags, setSelectedTags] = useState(new Set());
 
   let results = [];
@@ -115,12 +150,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;
@@ -129,11 +164,11 @@ export default function Map({ data }) {
       return false;
     });
 
-    setFilteredUsers(results);
+    setFilteredPoints(results);
   };
 
   const resetFilter = () => {
-    setFilteredUsers([]);
+    setFilteredPoints([]);
     setSelectedTags(new Set());
   };
 
@@ -172,9 +207,9 @@ 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
               onClick={resetFilter}
               primary={true}
@@ -196,7 +231,7 @@ export default function Map({ data }) {
         </div>
         <div className="h-screen">
           <DynamicMap
-            users={filteredUsers.length > 0 ? filteredUsers : users}
+            points={filteredPoints.length > 0 ? filteredPoints : points}
           />
         </div>
       </Page>