Filterable legend

MuckRock · Jan 3, 2024 · 6ddb0bf · 6ddb0bf
1 parent b6b5bb6
commit 6ddb0bf
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 11 deletions.
diff --git a/src/App.svelte b/src/App.svelte
@@ -13,6 +13,8 @@
 
   let container;
   let map;
+  let visible = "all";
+  let loaded = false;
 
   const decades = [1980, 1990, 2000, 2010, 2020];
   const colors = ["#ffffb2", "#fecc5c", "#fd8d3c", "#e31a1c", "#e31a1c"];
@@ -22,6 +24,8 @@
     return m;
   }, []);
 
+  $: filter(map, visible, loaded);
+
   onMount(() => {
     map = new maplibregl.Map({
       container,
@@ -71,7 +75,7 @@
         layout: {},
         paint: {
           "fill-color": ["case", ...scale, "#ddd"],
-          "fill-opacity": 0.5,
+          "fill-opacity": 0.35,
         },
       },
       firstSymbolLayer.id
@@ -99,6 +103,18 @@
       },
       firstSymbolLayer.id
     );
+
+    loaded = true;
+  }
+
+  function filter(map, visible, loaded) {
+    if (!map || !loaded) return;
+
+    // setting "all" clears filters
+    const expression =
+      visible === "all" ? null : ["==", ["get", "decade"], visible];
+
+    map.setFilter("fires-fill", expression);
   }
 </script>
 
@@ -118,10 +134,19 @@
     </p>
 
     <ol>
-      {#each text.legend.items as [color, label]}
-        <li>
-          <div class="box" style="background-color: {color}"></div>
-          <span>{label}</span>
+      <li class:selected={visible === "all"}>
+        <label>
+          <input type="radio" value="all" bind:group={visible} />
+          <span>Show all</span>
+        </label>
+      </li>
+      {#each text.legend.items as { color, label, value }}
+        <li class:selected={visible.toString() === value.toString()}>
+          <label>
+            <input type="radio" {value} bind:group={visible} />
+            <div class="box" style:background-color={color}></div>
+            <span>{label}</span>
+          </label>
         </li>
       {/each}
     </ol>
@@ -161,10 +186,29 @@
   }
 
   :global(.legend) ol li {
+    list-style: none;
+    margin-bottom: 0.25em;
+  }
+
+  :global(.legend) ol li label {
+    border: 1px solid transparent;
+    border-radius: 5px;
+    cursor: pointer;
     display: flex;
     gap: 0.5em;
-    list-style: none;
-    margin-bottom: 0.75em;
+    padding: 0.25em;
+  }
+
+  :global(.legend) ol li label:hover {
+    border: 1px solid rgba(255, 255, 255, 0.5);
+  }
+
+  :global(.legend) ol li.selected label {
+    border: 1px solid #ddd;
+  }
+
+  :global(.legend) ol li label input {
+    display: none;
   }
 
   :global(.legend) ol li .box {

diff --git a/src/text.json b/src/text.json
@@ -5,10 +5,10 @@
     "title": "Burned areas",
     "description": "This map shows the perimeters of all wildfires in the United States between 1980 and 2021. Zoom in and click any individual fire for details. Click a decade in the legend to filter by decade.",
     "items": [
-      ["#ffffb2", "1980 to 1990"],
-      ["#fecc5c", "1990 to 2000"],
-      ["#fd8d3c", "2000 to 2010"],
-      ["#e31a1c", "2010 to 2020"]
+      { "color": "#ffffb2", "label": "1980 to 1990", "value": 1980 },
+      { "color": "#fecc5c", "label": "1990 to 2000", "value": 1990 },
+      { "color": "#fd8d3c", "label": "2000 to 2010", "value": 2000 },
+      { "color": "#e31a1c", "label": "2010 to 2020", "value": 2010 }
     ]
   }
 }