From 8fe710b3e29692996785df69249948e9b0e921dc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kasper=20H=C3=A4gele?= <kasper@picqer.com>
Date: Mon, 7 Sep 2026 19:15:09 +0200
Subject: [PATCH] feat(web-standalone): switch the ranges, links and heat
 layers, off by default on a phone

Once a cluster is locked the map drew, at once, a range polygon per
observer, up to 40 support nodes, 100 or more proven-link lines with
arrows, the clue zone, the heat, the tied region, the observers and the
estimate spots. On a 380 px map the pink wash was what read (#119).

Three chips in the controls card, shown once a cluster is locked like
the manual-mode button: Ranges, Links (with arrows and support nodes)
and Heat, toggled through setLayoutProperty visibility. Under 860 px
Ranges and Links start off; on a desktop everything stays on. The clue
zone, the tied region and the observers are not switchable: they are
the answer, the others are the evidence. Session only.

Verified in the pane. At 412 px: chips hidden before a lock, shown
after it with Ranges and Links off and Heat on; the map shows the clue
zone, the observers and their labels; tapping Ranges turns the polygons
on. At 1280 px: all three on, chips on their own row in the side column.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 web-standalone/changelog.json |  6 ++++
 web-standalone/index.html     | 59 +++++++++++++++++++++++++++++++++++
 2 files changed, 65 insertions(+)

diff --git a/web-standalone/changelog.json b/web-standalone/changelog.json
index 2611c54..427c625 100644
--- a/web-standalone/changelog.json
+++ b/web-standalone/changelog.json
@@ -1,4 +1,10 @@
 [
+  {
+    "id": "2026-09-07-map-layers",
+    "date": "2026-09-07",
+    "title": "Ranges, links and heat can be switched off",
+    "body": "Once a cluster is locked, three chips above the map switch the range polygons, the proven links (with their arrows and support nodes) and the heat on or off. On a phone the ranges and links start off, because on a small map they covered the answer in one pink wash; the clue zone, the tied region and the observers always stay."
+  },
   {
     "id": "2026-09-07-easier-on-a-phone",
     "date": "2026-09-07",
diff --git a/web-standalone/index.html b/web-standalone/index.html
index 417cbce..d764b8d 100644
--- a/web-standalone/index.html
+++ b/web-standalone/index.html
@@ -243,6 +243,19 @@
     /* Meta/product actions (help, changelog) sit apart from the map actions
        so they don't read as part of the Step 1-3 task flow. The first one
        opens the right-aligned group; the rest follow it. */
+    /* Layer switch (#119): the evidence layers can be turned off, and start
+       off on a narrow screen where they hide the answer. */
+    .layer-chips {
+      display: inline-flex;
+      gap: 6px;
+    }
+    .layer-chips[hidden] {
+      display: none;
+    }
+    .controls-card .layer-chip {
+      padding: 6px 10px;
+      font-size: 0.78rem;
+    }
     /* The help and What's new buttons stay together at the right, and wrap
        as one unit. Wrapping them separately left the bell alone at the far
        left of a second row on a phone, with the panel anchored to it opening
@@ -1477,6 +1490,11 @@ <h3>Unknown Node Estimate</h3>
           <button id="clear-map-button" type="button" class="button-muted">Clear Map</button>
           <button id="manual-mode-button" type="button" class="button-secondary" aria-pressed="false" hidden>Resolve on map</button>
           <button id="share-button" type="button" class="button-secondary">Share</button>
+          <div id="layer-chips" class="layer-chips" role="group" aria-label="Map layers" hidden>
+            <button type="button" class="button-muted layer-chip" data-layer="ranges" aria-pressed="true">Ranges</button>
+            <button type="button" class="button-muted layer-chip" data-layer="links" aria-pressed="true">Links</button>
+            <button type="button" class="button-muted layer-chip" data-layer="heat" aria-pressed="true">Heat</button>
+          </div>
           <div class="controls-meta">
           <button id="intro-open-button" type="button" class="button-muted is-icon" aria-label="How this works" title="How this works">?</button>
           <div class="whats-new">
@@ -1768,6 +1786,9 @@ <h3>Unknown Node Estimate</h3>
         manualModeButton.hidden = !hasRegion;
         if (!hasRegion && manualMode) setManualMode(false);
       }
+      // Same rule as the manual-mode button: the evidence layers exist once
+      // a cluster is locked, so the switch appears with them (#119).
+      if (layerChips) layerChips.hidden = !hasRegion;
     }
 
     // ── Share link (#34) ────────────────────────────────────────────────────
@@ -1905,6 +1926,43 @@ <h3>Unknown Node Estimate</h3>
       element.scrollIntoView({ block: "start" });
     }
 
+    // ── Layer switch (#119) ─────────────────────────────────────────────────
+    // Ranges, links (with their arrows and support nodes) and heat can be
+    // switched off. The clue zone and the tied region are always on: they
+    // are the answer, the others are the evidence. On a narrow screen the
+    // evidence starts off, since 13 range polygons and 100 proven links on a
+    // 380 px map hide the answer under a pink wash. Session only.
+    const LAYER_GROUPS = {
+      ranges: ["t3d-ranges-fill", "t3d-ranges-line"],
+      links: ["t3d-links-line", "t3d-links-arrow", "t3d-support-circle"],
+      heat: ["t3d-heat-fill"]
+    };
+    const layerChips = document.getElementById("layer-chips");
+    const layerVisible = { ranges: !narrowScreen(), links: !narrowScreen(), heat: true };
+
+    function applyLayerVisibility() {
+      if (layerChips) {
+        layerChips.querySelectorAll(".layer-chip").forEach((chip) => {
+          chip.setAttribute("aria-pressed", layerVisible[chip.dataset.layer] ? "true" : "false");
+        });
+      }
+      if (!map3d || !map3d.getStyle()) return;
+      Object.entries(LAYER_GROUPS).forEach(([group, ids]) => {
+        ids.forEach((id) => {
+          if (map3d.getLayer(id)) map3d.setLayoutProperty(id, "visibility", layerVisible[group] ? "visible" : "none");
+        });
+      });
+    }
+
+    if (layerChips) {
+      layerChips.addEventListener("click", (event) => {
+        const chip = event.target.closest(".layer-chip");
+        if (!chip) return;
+        layerVisible[chip.dataset.layer] = !layerVisible[chip.dataset.layer];
+        applyLayerVisibility();
+      });
+    }
+
     function fitMapToNodes(nodesList) {
       if (!nodesList.length || !map3d) {
         return;
@@ -5020,6 +5078,7 @@ <h3>Unknown Node Estimate</h3>
     }
 
     function add3dInteractions(m) {
+      applyLayerVisibility();
       const clickable = [
         "t3d-links-line", "t3d-obs-circle", "t3d-candidates-fill",
         "t3d-candidate-pts-circle", "t3d-manual-circle", "t3d-est-circle",