fix(web): found buildings draw on the map and a click picks one

MapLibre rejected both footprint layers without throwing: the case
condition needed a typed boolean, and the theme's oklch() tokens are
unparseable to its colour parser, so themeColor now bakes the resolved
value to sRGB bytes through a 1x1 canvas. A find also fits the camera to
the nearby candidates (city zoom leaves a footprint smaller than a
pixel), retries the draw if the style is still loading, and a click on a
footprint selects that building instead of dragging the site pin - and
the saved coordinates - to wherever you clicked.

Verified in headless Edge against the live Geotorget service: 39
footprints rendered, map-click selection enables the derive button, pin
coordinates unchanged.

Co-authored-by: HuggeK <48095810+HuggeK@users.noreply.github.com>

Author: claude

.changeset/roof-buildings-on-the-map.md

@@ -0,0 +1,14 @@
+---
+"ftw": patch
+---
+
+Found buildings now actually appear on the map, and clicking one selects it.
+Three defects hid them: MapLibre silently rejected both footprint layers
+because the styling used a value-typed `["get", "selected"]` where a typed
+boolean is required, and — once typed — because the theme's `oklch()` colour
+tokens reached MapLibre's parser unconverted, so the resolved colours are now
+baked to sRGB through a canvas probe. Finally the camera never moved: the map
+sat at city zoom, where a footprint is smaller than a pixel. A find now zooms
+to the nearby candidates, and clicking a footprint selects that building
+without also dragging the site pin (and its saved coordinates) to wherever
+you clicked.

web/index.html

@@ -994,7 +994,7 @@ <h3>Price bars (top of the chart)</h3>
   <script src="/settings/tabs/devices.js?v=catcards2"></script>
   <script src="/settings/tabs/loadpoints.js?v=lp7"></script>
   <script src="/settings/tabs/price.js?v=zones1"></script>
-  <script src="/settings/tabs/weather.js?v=demo5"></script>
+  <script src="/settings/tabs/weather.js?v=demo6"></script>
   <script src="/settings/tabs/batteries.js?v=tabsplit1"></script>
   <script src="/settings/tabs/planner.js?v=inputs1"></script>
   <script src="/settings/tabs/ha.js?v=tabsplit2"></script>

web/settings/tabs/weather.js

@@ -334,6 +334,13 @@
       setCoord(ll.lat, ll.lng);
     });
     map.on("click", function (e) {
+      // A click on a building footprint selects that building (the layer's own
+      // handler). It must not also drag the site pin there and silently
+      // rewrite the saved coordinates.
+      if (map.getLayer("roof-buildings-fill") &&
+          map.queryRenderedFeatures(e.point, { layers: ["roof-buildings-fill"] }).length) {
+        return;
+      }
       marker.setLngLat(e.lngLat);
       setCoord(e.lngLat.lat, e.lngLat.lng);
     });
@@ -556,7 +563,10 @@
         roofSay("Found " + roofState.features.length +
                 " building(s). Pick yours on the map or in the list.");
         drawBuildings();
+        fitToBuildings(d.latitude, d.longitude);
         renderBuildingList(ctx);
+        var mapEl = document.getElementById("weather-map");
+        if (mapEl && mapEl.scrollIntoView) mapEl.scrollIntoView({ block: "nearest" });
       })
       .catch(function (e) { roofSay(ctx.escHtml(String(e && e.message || e)), "bad"); });
   }
@@ -574,9 +584,12 @@
 
   // MapLibre paints with concrete colours and cannot read var(), the same
   // problem the canvas charts have. Resolve the theme tokens through a hidden
-  // probe that inherits :root, exactly as app.js's cssColor does. Resolved once
-  // per layer creation, so a theme toggle mid-pick keeps the old hue until the
-  // tab is reopened — the footprints stay legible either way.
+  // probe that inherits :root, exactly as app.js's cssColor does. The theme
+  // authors its tokens in oklch(), which getComputedStyle passes through
+  // verbatim and MapLibre's parser rejects — so bake the resolved colour to
+  // sRGB bytes through a 1x1 canvas, whose getImageData is sRGB by contract.
+  // Resolved once per layer creation, so a theme toggle mid-pick keeps the old
+  // hue until the tab is reopened — the footprints stay legible either way.
   var _probe = null;
   function themeColor(name, fallback) {
     if (!_probe) {
@@ -585,12 +598,35 @@
       document.body.appendChild(_probe);
     }
     _probe.style.color = "var(" + name + ", " + fallback + ")";
-    return getComputedStyle(_probe).color || fallback;
+    var resolved = getComputedStyle(_probe).color || fallback;
+    try {
+      var ctx = document.createElement("canvas").getContext("2d", { willReadFrequently: true });
+      ctx.fillStyle = fallback;  // an unparseable resolved value leaves this
+      ctx.fillStyle = resolved;
+      ctx.fillRect(0, 0, 1, 1);
+      var px = ctx.getImageData(0, 0, 1, 1).data;
+      return "rgb(" + px[0] + "," + px[1] + "," + px[2] + ")";
+    } catch (e) {
+      return fallback;
+    }
+  }
+
+  // A "case" condition must be a typed boolean: a bare ["get", ...] is value-
+  // typed, and MapLibre rejects the whole layer through its error event without
+  // throwing — the picker then looks enabled while the map stays empty.
+  function whenSelected(then, otherwise) {
+    return ["case", ["boolean", ["get", "selected"], false], then, otherwise];
   }
 
   function drawBuildings() {
     var map = window._weatherMap;
-    if (!map || !map.isStyleLoaded || !map.isStyleLoaded()) return;
+    if (!map) return;
+    if (!map.isStyleLoaded || !map.isStyleLoaded()) {
+      // A find can win the race against the style. Idempotent, so a stacked
+      // retry only costs a setData with identical data.
+      map.once("load", drawBuildings);
+      return;
+    }
     var data = featureCollection();
     var src = map.getSource("roof-buildings");
     if (src) { src.setData(data); return; }
@@ -600,15 +636,15 @@
     map.addLayer({
       id: "roof-buildings-fill", type: "fill", source: "roof-buildings",
       paint: {
-        "fill-color": ["case", ["get", "selected"], picked, candidate],
-        "fill-opacity": ["case", ["get", "selected"], 0.55, 0.25],
+        "fill-color": whenSelected(picked, candidate),
+        "fill-opacity": whenSelected(0.55, 0.25),
       },
     });
     map.addLayer({
       id: "roof-buildings-line", type: "line", source: "roof-buildings",
       paint: {
-        "line-color": ["case", ["get", "selected"], picked, candidate],
-        "line-width": ["case", ["get", "selected"], 2.5, 1],
+        "line-color": whenSelected(picked, candidate),
+        "line-width": whenSelected(2.5, 1),
       },
     });
     map.on("click", "roof-buildings-fill", function (e) {
@@ -624,6 +660,42 @@
     });
   }
 
+  // [[west, south], [east, north]] around the buildings someone would actually
+  // pick — the nearby ones the list also shows — plus the site pin. Fitting
+  // the whole search radius leaves every footprint a few pixels wide.
+  function buildingsBounds(features, siteLat, siteLon) {
+    var west = null, south = null, east = null, north = null;
+    function extend(lon, lat) {
+      if (typeof lon !== "number" || typeof lat !== "number") return;
+      if (west === null || lon < west) west = lon;
+      if (east === null || lon > east) east = lon;
+      if (south === null || lat < south) south = lat;
+      if (north === null || lat > north) north = lat;
+    }
+    extend(siteLon, siteLat);
+    var near = features.filter(function (f) {
+      return ((f.properties || {}).distance_m || 0) <= 150;
+    });
+    if (near.length < 3) near = features;
+    near.forEach(function (f) {
+      var rings = (f.geometry && f.geometry.coordinates) || [];
+      (rings[0] || []).forEach(function (pt) { extend(pt[0], pt[1]); });
+    });
+    if (west === null) return null;
+    return [[west, south], [east, north]];
+  }
+
+  // The picker opens at city zoom, where a footprint is smaller than a pixel.
+  // Zoom to the search results once per find; selection redraws leave the
+  // camera where the operator put it.
+  function fitToBuildings(siteLat, siteLon) {
+    var map = window._weatherMap;
+    if (!map || !roofState.features.length) return;
+    var bounds = buildingsBounds(roofState.features, siteLat, siteLon);
+    if (!bounds) return;
+    map.fitBounds(bounds, { padding: 48, maxZoom: 17.5, duration: 600 });
+  }
+
   function selectBuilding(id) {
     roofState.selectedId = id;
     drawBuildings();
@@ -823,5 +895,9 @@
     },
   };
 
-  S.tabs.weather._pure = { arraysSummary: arraysSummary };
+  S.tabs.weather._pure = {
+    arraysSummary: arraysSummary,
+    whenSelected: whenSelected,
+    buildingsBounds: buildingsBounds,
+  };
 })();

web/settings/tabs/weather.test.mjs

@@ -82,3 +82,68 @@ describe("weather household path", () => {
     assert.doesNotMatch(source, /observed.*pv_rated_w|peak.*pv_rated_w/i);
   });
 });
+
+describe("roof buildings on the map", () => {
+  const { whenSelected, buildingsBounds } = tab._pure;
+
+  function footprint(distanceM, ring) {
+    return {
+      type: "Feature",
+      geometry: { type: "Polygon", coordinates: [ring] },
+      properties: { distance_m: distanceM },
+    };
+  }
+
+  it("types the selected flag as a boolean, or MapLibre rejects the layer", () => {
+    // A bare ["get", ...] case condition is value-typed; MapLibre then drops
+    // the whole layer through its error event without throwing, and the map
+    // silently stays empty.
+    assert.deepEqual(whenSelected("#picked", "#other"), [
+      "case", ["boolean", ["get", "selected"], false], "#picked", "#other",
+    ]);
+  });
+
+  it("zooms to the near buildings plus the site, not the whole radius", () => {
+    const bounds = buildingsBounds([
+      footprint(40, [[18.06, 59.32], [18.07, 59.33], [18.06, 59.33], [18.06, 59.32]]),
+      footprint(90, [[18.065, 59.325], [18.066, 59.326], [18.065, 59.326], [18.065, 59.325]]),
+      footprint(120, [[18.068, 59.328], [18.069, 59.329], [18.068, 59.329], [18.068, 59.328]]),
+      footprint(800, [[18.20, 59.40], [18.21, 59.41], [18.20, 59.41], [18.20, 59.40]]),
+    ], 59.335, 18.05);
+    assert.deepEqual(bounds, [[18.05, 59.32], [18.07, 59.335]]);
+  });
+
+  it("falls back to every footprint when almost nothing is near", () => {
+    const bounds = buildingsBounds([
+      footprint(800, [[18.20, 59.40], [18.21, 59.41], [18.20, 59.41], [18.20, 59.40]]),
+      footprint(900, [[18.30, 59.42], [18.31, 59.43], [18.30, 59.43], [18.30, 59.42]]),
+    ], 59.33, 18.07);
+    assert.deepEqual(bounds, [[18.07, 59.33], [18.31, 59.43]]);
+  });
+
+  it("survives features with no usable geometry", () => {
+    assert.equal(buildingsBounds([], undefined, undefined), null);
+    assert.deepEqual(
+      buildingsBounds([{ type: "Feature", properties: { distance_m: 5 } },
+                       { type: "Feature", properties: { distance_m: 6 } },
+                       { type: "Feature", properties: { distance_m: 7 } }], 59.33, 18.07),
+      [[18.07, 59.33], [18.07, 59.33]],
+    );
+  });
+
+  it("bakes theme colours to sRGB — MapLibre cannot parse oklch()", () => {
+    assert.match(source, /getImageData\(0, 0, 1, 1\)/);
+    assert.match(source, /"rgb\(" \+ px\[0\]/);
+  });
+
+  it("keeps a building click from dragging the site pin", () => {
+    assert.match(
+      source,
+      /queryRenderedFeatures\(e\.point, \{ layers: \["roof-buildings-fill"\] \}\)/,
+    );
+  });
+
+  it("retries the draw once the style has loaded", () => {
+    assert.match(source, /map\.once\("load", drawBuildings\)/);
+  });
+});