Legend and text handling

src/App.svelte

@@ -4,6 +4,9 @@
   import * as pmtiles from "pmtiles";
   import layers from "protomaps-themes-base";
 
+  import Legend from "./Legend.svelte";
+  import text from "./text.json";
+
   const protocol = new pmtiles.Protocol();
 
   maplibregl.addProtocol("pmtiles", protocol.tile);
@@ -74,37 +77,84 @@
       firstSymbolLayer.id
     );
 
-    map.addLayer({
-      id: "fires-lines",
-      source: "fires",
-      "source-layer": "all-years",
-      type: "line",
-      paint: {
-        "line-color": "#fff",
-        "line-opacity": 0.5,
-        "line-width": [
-          "interpolate",
-          ["linear", 0.5],
-          ["zoom"],
-          6,
-          0,
-          16,
-          0.75,
-        ],
+    map.addLayer(
+      {
+        id: "fires-lines",
+        source: "fires",
+        "source-layer": "all-years",
+        type: "line",
+        paint: {
+          "line-color": "#fff",
+          "line-opacity": 0.5,
+          "line-width": [
+            "interpolate",
+            ["linear", 0.5],
+            ["zoom"],
+            6,
+            0,
+            16,
+            0.75,
+          ],
+        },
       },
-    });
+      firstSymbolLayer.id
+    );
   }
 </script>
 
 <div bind:this={container} class="container">
   <noscript> This experience requires JavaScript to function. </noscript>
 </div>
 
+{#if map}
+  <Legend {map} dark>
+    <h2>{text.legend.title}</h2>
+    <p>
+      {text.legend.description}
+    </p>
+
+    <ol>
+      {#each text.legend.items as [color, label]}
+        <li>
+          <div class="box" style="background-color: {color}"></div>
+          <span>{label}</span>
+        </li>
+      {/each}
+    </ol>
+  </Legend>
+{/if}
+
 <style>
   .container {
     position: absolute;
     top: 0;
     bottom: 0;
     width: 100%;
   }
+
+  :global(.legend) p,
+  :global(.legend) li {
+    font-size: 14px;
+  }
+
+  :global(.legend) ol {
+    padding: 0;
+  }
+
+  :global(.legend) ol li {
+    display: flex;
+    gap: 0.5em;
+    list-style: none;
+    margin-bottom: 0.75em;
+  }
+
+  :global(.legend) ol li .box {
+    display: inline-block;
+    height: 1.25em;
+    width: 2ch;
+  }
+
+  :global(.legend.dark) .box {
+    border: 0.5px solid white;
+  }
 </style>

src/Legend.svelte

@@ -0,0 +1,49 @@
+<script>
+  import { onMount, onDestroy } from "svelte";
+
+  export let map;
+  export let position = "top-right";
+  export let dark = false;
+
+  let container;
+
+  const control = {
+    onAdd() {
+      return container;
+    },
+    onRemove() {},
+  };
+
+  onMount(() => {
+    map.addControl(control, position);
+  });
+
+  onDestroy(() => {
+    map.removeControl(control);
+  });
+</script>
+
+<div bind:this={container} class="legend" class:dark>
+  <slot />
+</div>
+
+<style>
+  .legend {
+    background-color: white;
+    border-radius: 5px;
+    margin: 2em;
+    max-width: 200px;
+    padding: 1em;
+    pointer-events: all;
+    position: relative;
+    z-index: 10;
+  }
+
+  .legend.dark {
+    background-color: black;
+  }
+
+  .legend.dark :global(*) {
+    color: #fff;
+  }
+</style>

src/app.css

@@ -4,8 +4,8 @@
   font-weight: 400;
 
   color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+  color: #213547;
+  background-color: #ffffff;
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -19,7 +19,7 @@ a {
   text-decoration: inherit;
 }
 a:hover {
-  color: #535bf2;
+  color: #747bff;
 }
 
 body {
@@ -51,27 +51,16 @@ button {
   font-size: 1em;
   font-weight: 500;
   font-family: inherit;
-  background-color: #1a1a1a;
+  background-color: #f9f9f9;
   cursor: pointer;
   transition: border-color 0.25s;
 }
+
 button:hover {
   border-color: #646cff;
 }
+
 button:focus,
 button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
 }
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}

src/text.json

@@ -0,0 +1,14 @@
+{
+  "headline": "Wildfires are becoming more frequent across the West",
+  "source": "National Interagency Fire Center",
+  "legend": {
+    "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"]
+    ]
+  }
+}