Visualize center-with-width changes, to better debug. The output itself

is very broken.

web/src/App.svelte

@@ -11,6 +11,7 @@
     GeoJSON,
     MapLibre,
     hoverStateFilter,
+    CircleLayer,
   } from "svelte-maplibre";
   import type {
     FeatureCollection,
@@ -132,6 +133,31 @@
     };
   }
 
+  function addLinestringEndpoints(
+    input: FeatureCollection<LineString>,
+  ): FeatureCollection<Point> {
+    let output = {
+      type: "FeatureCollection" as const,
+      features: [],
+    };
+    for (let f of input.features) {
+      for (let pt of [
+        f.geometry.coordinates[0],
+        f.geometry.coordinates[f.geometry.coordinates.length - 1],
+      ]) {
+        output.features.push({
+          type: "Feature",
+          properties: {},
+          geometry: {
+            type: "Point",
+            coordinates: JSON.parse(JSON.stringify(pt)),
+          },
+        });
+      }
+    }
+    return output;
+  }
+
   $: if (currentTestCase != "") {
     // @ts-expect-error
     let test = testCases[currentTestCase];
@@ -299,6 +325,17 @@
           </Popup>
         </LineLayer>
       </GeoJSON>
+      <GeoJSON data={addLinestringEndpoints(centerWithWidth)}>
+        <CircleLayer
+          paint={{
+            "circle-opacity": 0,
+            "circle-radius": 10,
+            "circle-stroke-color": "purple",
+            "circle-stroke-width": 2,
+          }}
+          layout={{ visibility: showCenterWithWidth ? "visible" : "none" }}
+        />
+      </GeoJSON>
     </MapLibre>
   </div>
 </Layout>