From 6cdb545f1fd0fbe8d86661f43be71bed480a7fb6 Mon Sep 17 00:00:00 2001
From: Jake Walker <hi@jakew.me>
Date: Sat, 25 Jan 2025 16:11:07 +0000
Subject: [PATCH 1/4] add live map

---
 _includes/livemap.html | 84 ++++++++++++++++++++++++++++++++++++++++++
 _sass/_style.scss      |  8 ++++
 pages/index.html       |  7 ++++
 3 files changed, 99 insertions(+)
 create mode 100644 _includes/livemap.html

diff --git a/_includes/livemap.html b/_includes/livemap.html
new file mode 100644
index 0000000..5c006ac
--- /dev/null
+++ b/_includes/livemap.html
@@ -0,0 +1,84 @@
+<p id="map-text">
+  Loading...
+</p>
+<div id="map-container"></div>
+<div id="map-tooltip" class="tooltip"></div>
+
+<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;
+
+  // 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("http://localhost:8787/locations.geojson"),
+    d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson")
+  ]).then(([pointData, worldData]) => {
+    // update map text
+    text.innerText = `${pointData.features.length} hackers online!`;
+
+    // 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;
+    const x = ((x0 + x1) / 2) || 0;
+    const y = ((y0 + y1) / 2) || 0;
+
+    // calculate scale and translation based on the bounds
+    const scale = Math.max(10, Math.min(dx / width, dy / height)) * 100;
+    const translate = [width / 2 - scale * x, height / 2 - scale * y];
+    const padding = 100;
+
+    // create a new projection, centered at the middle of the locations
+    let 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([[0 + padding, 0 + 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) => projection(d.geometry.coordinates)[0])
+      .attr("cy", (d) => projection(d.geometry.coordinates)[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");
+      });
+  });
+</script>
diff --git a/_sass/_style.scss b/_sass/_style.scss
index f5a72a5..2414e2f 100644
--- a/_sass/_style.scss
+++ b/_sass/_style.scss
@@ -368,3 +368,11 @@ ol {
 		}
 	}
 }
+
+.tooltip {
+	position: absolute;
+	background: var(--background-light);
+	color: var(--foreground);
+	padding: 5px;
+	display: none;
+}
diff --git a/pages/index.html b/pages/index.html
index a96ac9d..f5bbb9a 100644
--- a/pages/index.html
+++ b/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>

From 8b29c6b98cb83e56009a5d1b8d775e23a10eab7a Mon Sep 17 00:00:00 2001
From: Jake Walker <hi@jakew.me>
Date: Tue, 4 Feb 2025 19:41:40 +0000
Subject: [PATCH 2/4] add live map api to config

---
 _config.yml            | 5 ++---
 _includes/livemap.html | 3 ++-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/_config.yml b/_config.yml
index a00db2a..fb685f7 100644
--- a/_config.yml
+++ b/_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
diff --git a/_includes/livemap.html b/_includes/livemap.html
index 5c006ac..ad137ec 100644
--- a/_includes/livemap.html
+++ b/_includes/livemap.html
@@ -3,6 +3,7 @@
 </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";
@@ -21,7 +22,7 @@
 
   // grab the data
   Promise.all([
-    d3.json("http://localhost:8787/locations.geojson"),
+    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]) => {
     // update map text

From 0b7498e280096703c5e9260985717ec28b5685d7 Mon Sep 17 00:00:00 2001
From: Jake Walker <hi@jakew.me>
Date: Sat, 28 Feb 2026 14:55:35 +0000
Subject: [PATCH 3/4] update live map error handling and edge cases

---
 _includes/livemap.html | 180 +++++++++++++++++++++++++++--------------
 1 file changed, 118 insertions(+), 62 deletions(-)

diff --git a/_includes/livemap.html b/_includes/livemap.html
index ad137ec..7a83455 100644
--- a/_includes/livemap.html
+++ b/_includes/livemap.html
@@ -1,6 +1,4 @@
-<p id="map-text">
-  Loading...
-</p>
+<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>
@@ -23,63 +21,121 @@
   // 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]) => {
-    // update map text
-    text.innerText = `${pointData.features.length} hackers online!`;
-
-    // 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;
-    const x = ((x0 + x1) / 2) || 0;
-    const y = ((y0 + y1) / 2) || 0;
-
-    // calculate scale and translation based on the bounds
-    const scale = Math.max(10, Math.min(dx / width, dy / height)) * 100;
-    const translate = [width / 2 - scale * x, height / 2 - scale * y];
-    const padding = 100;
-
-    // create a new projection, centered at the middle of the locations
-    let 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([[0 + padding, 0 + 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) => projection(d.geometry.coordinates)[0])
-      .attr("cy", (d) => projection(d.geometry.coordinates)[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");
-      });
-  });
+    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!`;
+
+      // 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>

From 7a6dc7cc6bd5f3f4fab4bf1a834215f259126785 Mon Sep 17 00:00:00 2001
From: Jake Walker <hi@jakew.me>
Date: Sat, 28 Feb 2026 14:55:46 +0000
Subject: [PATCH 4/4] list names above live map

---
 _includes/livemap.html | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/_includes/livemap.html b/_includes/livemap.html
index 7a83455..ef9575a 100644
--- a/_includes/livemap.html
+++ b/_includes/livemap.html
@@ -14,6 +14,12 @@
   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());
@@ -41,7 +47,7 @@
         .filter((name) => name !== null);
 
       // update map text
-      text.innerText = `${pointData.features.length} hackers online!`;
+      text.innerText = `${pointData.features.length} hackers online: ${prettyJoin(nameList)}`;
 
       // get the bounds of locations (min & max coordinates)
       const bounds = d3.geoBounds(pointData);