Fit the map to the data

Create a GeoJSON FeatureCollection from the data that we can pass to
D3's fitSize method to zoom the map to the data.

I tried using d3.extent to find the range of the longitude and latitude
in the data from which I created a FeatureCollection with just 2 points,
but the longitude range ended up being nearly [-180, 180], so it never
actually zoomed the map. Seems like maybe D3 is doing something smart to
handle collections that wrap around the globe, or possibly there's some
unaccounted for weirdness in the data.

src/unified_graphics/static/js/component/ChartMap.js

@@ -201,7 +201,26 @@ export default class ChartMap extends ChartElement {
 
     if (!(borders || observations)) return;
 
-    this.#projection.fitSize([width, height], borders);
+    if (observations) {
+      // Build a GeoJSON object to provide D3's fitSize method so that we can always
+      // zoom the map to the available data.
+      const points = {
+        type: "FeatureCollection",
+        features: observations.map((obs) => {
+          return {
+            type: "Feature",
+            geometry: {
+              type: "Point",
+              coordinates: [obs.longitude, obs.latitude],
+            },
+          };
+        }),
+      };
+
+      this.#projection.fitSize([width, height], points);
+    } else {
+      this.#projection.fitSize([width, height], borders);
+    }
 
     const ctx = canvas.getContext("2d");
     if (!ctx) return;