livemap.html

<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>