list names above live map

Author: jake-walker

_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);