Add live map

_config.yml

@@ -6,14 +6,13 @@ description: >- # this means to ignore newlines until "baseurl:"
 baseurl: "/" # the subpath of your site, e.g. /blog
 url: "https://remotehack.space" # the base hostname & protocol for your site, e.g. http://example.com
 discord_invite_url: https://discord.gg/wNq8uVvQT3
-
-
+live_map_api: https://remotehack-livemap-api.jakew.workers.dev
 
 # Build settings
 plugins:
   - jekyll-redirect-from
   - jekyll-sitemap
-  
+
 timezone: Europe/London
 
 # To ensure that events in the future generate their html pages

_includes/livemap.html

@@ -0,0 +1,147 @@
+<p id="map-text">Loading...</p>
+<div id="map-container"></div>
+<div id="map-tooltip" class="tooltip"></div>
+<p>Join the Discord to add yourself to the map</p>
+
+<script type="module">
+  import * as d3 from "https://cdn.jsdelivr.net/npm/d3@v7/+esm";
+  import escape from "https://cdn.jsdelivr.net/npm/escape-html/+esm";
+
+  const container = document.getElementById("map-container");
+  const text = document.getElementById("map-text");
+  const tooltip = d3.select("#map-tooltip");
+
+  const width = 640;
+  const height = 400;
+
+  const prettyJoin = (strings) => {
+    if (strings.length < 1) return strings;
+    const last = strings.pop();
+    return `${strings.join(", ")} and ${last}`;
+  };
+
+  // create a new svg for d3.js to draw on
+  const svg = d3.create("svg").attr("width", width).attr("height", height);
+  container.append(svg.node());
+
+  // grab the data
+  Promise.all([
+    d3.json("{{ site.live_map_api }}/locations.geojson"),
+    d3.json(
+      "https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson",
+    ),
+  ])
+    .then(([pointData, worldData]) => {
+      // handle empty or invalid data
+      if (
+        !pointData ||
+        !pointData.features ||
+        pointData.features.length === 0
+      ) {
+        text.innerText = "No hackers online yet!";
+        return;
+      }
+
+      const nameList = pointData.features
+        .map((f) => escape(f.properties.name))
+        .filter((name) => name !== null);
+
+      // update map text
+      text.innerText = `${pointData.features.length} hackers online: ${prettyJoin(nameList)}`;
+
+      // get the bounds of locations (min & max coordinates)
+      const bounds = d3.geoBounds(pointData);
+      const [[x0, y0], [x1, y1]] = bounds;
+
+      const dx = x1 - x0;
+      const dy = y1 - y0;
+
+      // check for degenerate case: all points at same or very close locations
+      const isDegenerate = (dx === 0 && dy === 0) || isNaN(dx) || isNaN(dy);
+
+      let projection;
+
+      if (isDegenerate) {
+        // Use the first point's coordinates as center
+        const center = pointData.features[0].geometry.coordinates;
+        projection = d3
+          .geoNaturalEarth1()
+          .center([center[0], center[1]])
+          .scale(2000)
+          .translate([width / 2, height / 2]);
+      } else {
+        const x = (x0 + x1) / 2;
+        const y = (y0 + y1) / 2;
+        const padding = 100;
+
+        // create a new projection, centered at the middle of the locations
+        projection = d3
+          .geoNaturalEarth1()
+          .center([x, y])
+          .translate([width / 2, height / 2]);
+
+        // if there's more than 1 location, fit the map to show all locations nicely
+        if (pointData.features.length > 1) {
+          projection = projection.fitExtent(
+            [
+              [padding, padding],
+              [width - padding, height - padding],
+            ],
+            pointData,
+          );
+        }
+      }
+
+      // clamp the map scaling to 2000 so countries can be seen still
+      projection = projection.scale(Math.min(projection.scale(), 2000));
+
+      const pathGenerator = d3.geoPath(projection).pointRadius(4);
+
+      // draw countries
+      svg
+        .append("path")
+        .datum(worldData)
+        .attr("d", pathGenerator)
+        .attr("fill", "#e6e7e8")
+        .attr("stroke", "white");
+
+      // draw points for each hacker location
+      svg
+        .selectAll("circle")
+        .data(pointData.features)
+        .enter()
+        .append("circle")
+        .attr("cx", (d) => {
+          const coords = d.geometry.coordinates;
+          if (!coords || coords[0] == null || coords[1] == null) return 0;
+          const p = projection(coords);
+          if (!p || isNaN(p[0])) return 0;
+          return p[0];
+        })
+        .attr("cy", (d) => {
+          const coords = d.geometry.coordinates;
+          if (!coords || coords[0] == null || coords[1] == null) return 0;
+          const p = projection(coords);
+          if (!p || isNaN(p[1])) return 0;
+          return p[1];
+        })
+        .attr("r", 4)
+        .attr("fill", "blue")
+        .on("mouseover", (event, d) => {
+          tooltip
+            .style("display", "block")
+            .html(
+              `<b>${escape(d.properties.name || "Anonymous")}</b><br>${escape(d.properties.locationName)}`,
+            )
+            .style("left", event.pageX + 10 + "px")
+            .style("top", event.pageY - 10 + "px");
+        })
+        .on("mouseout", () => {
+          tooltip.style("display", "none");
+        });
+    })
+    .catch((err) => {
+      console.error("Error loading map data:", err);
+      text.innerText = "Unable to load map";
+    });
+</script>

_sass/_style.scss

@@ -368,3 +368,11 @@ ol {
 		}
 	}
 }
+
+.tooltip {
+	position: absolute;
+	background: var(--background-light);
+	color: var(--foreground);
+	padding: 5px;
+	display: none;
+}

pages/index.html

@@ -11,6 +11,13 @@
   An online event where you can meet friends and work on something new
 </p>
 
+<section class="map">
+  <div>
+    <h2>Live Map</h2>
+    {% include livemap.html %}
+  </div>
+</section>
+
 <section class="📅">
   <div>
     <h2>Next event</h2>