Prune the block vs bundle legend

web/src/street-explorer/LanePopup.svelte

@@ -2,7 +2,7 @@
   import type { Polygon } from "geojson";
   import type { FeatureWithProps } from "../common/utils";
   import { network } from "../common";
-  import { blockGj } from "./stores";
+  import { blockGj, showingBundles } from "./stores";
 
   // Note the input is maplibre's GeoJSONFeature, which stringifies nested properties
   export let data: FeatureWithProps<Polygon> | undefined;
@@ -27,6 +27,7 @@
   function findBlock(left: boolean, sidewalks: boolean) {
     try {
       blockGj.set(JSON.parse($network!.findBlock(props.road, left, sidewalks)));
+      showingBundles.set(sidewalks);
       close();
     } catch (err) {
       window.alert(err);

web/src/street-explorer/RenderBlock.svelte

@@ -1,7 +1,13 @@
 <script lang="ts">
   import { caseHelper, layerId, emptyGeojson } from "../common/utils";
-  import { hoverStateFilter, Popup, LineLayer, FillLayer, GeoJSON } from "svelte-maplibre";
-  import { blockGj } from "./stores";
+  import {
+    hoverStateFilter,
+    Popup,
+    LineLayer,
+    FillLayer,
+    GeoJSON,
+  } from "svelte-maplibre";
+  import { showingBundles, blockGj } from "./stores";
   import { network, Legend } from "../common";
 
   $: active = $blockGj.features.length > 0;
@@ -12,19 +18,24 @@
 
   function findAll(sidewalks: boolean) {
     blockGj.set(JSON.parse($network!.findAllBlocks(sidewalks)));
+    showingBundles.set(sidewalks);
   }
 
-  let colors = {
+  let blockColors = {
     LandUseBlock: "grey",
     RoadAndSidewalk: "green",
     RoadAndCycleLane: "orange",
     CycleLaneAndSidewalk: "yellow",
     DualCarriageway: "purple",
-    // Can reuse colors because we won't display blocks and bundles at the same time
+    Unknown: "blue",
+  };
+  let bundleColors = {
+    LandUseBlock: "grey",
     RoadBundle: "green",
     IntersectionBundle: "orange",
-    Unknown: "blue",
   };
+
+  $: colors = $showingBundles ? bundleColors : blockColors;
 </script>
 
 <GeoJSON data={$blockGj} generateId>

web/src/street-explorer/stores.ts

@@ -4,6 +4,8 @@ import { emptyGeojson } from "../common/utils";
 import { network } from "../common";
 
 export const blockGj: Writable<FeatureCollection> = writable(emptyGeojson());
+// Does blockGj currently represent blocks or bundles?
+export const showingBundles = writable(false);
 
 // TODO Need to unsubscribe
 // Unset when the network changes