From 44f902e9a8ac399dbf1cc674fac4b40b4eb3a989 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/2] 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 216c471..2142a36 100644
--- a/_sass/_style.scss
+++ b/_sass/_style.scss
@@ -353,3 +353,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 95e3d79c6f8a273b7ee1af22e55ed003d1ef331a 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/2] 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