Add CropLegendControl, update counts after tile loading and map panning

Author: ivorbosloper

map/crop/CropLegendControl.js

@@ -0,0 +1,57 @@
+import Control from 'ol/control/Control';
+
+/**
+ * A custom Legend Control for OpenLayers
+ * Displays a legend on the map with custom items
+ */
+export class CropLegendControl extends Control {
+  constructor(options = {}) {
+    const element = document.createElement('div');
+    element.className = 'ol-crop-legend ol-unselectable ol-control';
+
+    super({
+      element: element,
+      target: options.target,
+    });
+
+    this.legendItems = [];
+    this.render();
+  }
+
+  setMap(map) {
+    super.setMap(map);
+
+  }
+  render() {
+    const element = this.element;
+    element.innerHTML = ''; // Clear previous content
+
+    const legendTitle = document.createElement('div');
+    legendTitle.className = 'legend-title';
+    legendTitle.innerText = 'Legend';
+    element.appendChild(legendTitle);
+
+    const list = document.createElement('ul');
+    list.className = 'legend-list';
+
+    this.legendItems.forEach((item) => {
+      const listItem = document.createElement('li');
+      const colorBox = document.createElement('span');
+      const text = document.createElement('span');
+
+      colorBox.className = 'legend-color';
+      colorBox.style.backgroundColor = item.color;
+
+      text.className = 'legend-text';
+      text.innerText = item.label;
+
+      listItem.appendChild(colorBox);
+      listItem.appendChild(text);
+
+      list.appendChild(listItem);
+    });
+
+    element.appendChild(list);
+  }
+
+}

map/crop/crop.js

@@ -4,18 +4,67 @@ import {hcat} from "./codes";
 import VectorTile from "ol/layer/VectorTile";
 import {PMTilesVectorSource} from "ol-pmtiles";
 const cropExtension = "https://fiboa.github.io/hcat-extension/v0.1.0/schema.yaml";
+import debounce from "lodash.debounce";
+import TileState from 'ol/TileState';
+import {intersects} from "ol/extent";
+import {toGeometry} from "ol/render/Feature";
+import {CropLegendControl} from "./CropLegendControl";
 
+const CROP_ATTRIBUTE = "ec:hcat_code";
 const fieldStyle = {
   "stroke-color": 'rgb(88, 88, 88, 88)',
   "stroke-width": 0.5,
   "fill-color":  ['get', 'color']
 }
 const mapping = Object.fromEntries(hcat.map(c => [c.code, c.color]));
 
+function forFeaturesInExtent(vt, extent, callback) {
+  const renderer = vt.getRenderer();
+  const tileCache = renderer.getTileCache();
+  if (tileCache.getCount() === 0) return;
+
+  const tileGrid = renderer.getLayer().getSource().tileGrid;
+  const z = tileGrid.getZForResolution(renderer.renderedResolution);
+  tileCache.forEach((tile) => {
+    if (tile.tileCoord[0] !== z || tile.getState() !== TileState.LOADED) return;
+    for (const sourceTile of tile.getSourceTiles()) {
+      const tileCoord = sourceTile.tileCoord;
+      if (intersects(extent, tileGrid.getTileCoordExtent(tileCoord))) {
+        for (const candidate of  sourceTile.getFeatures()) {
+          if (intersects(extent, candidate.getExtent())) callback(candidate);
+        }
+      }
+    }
+  });
+}
+
 class CropMap extends FiboaMap {
   constructor() {
     super();
     this.fieldStyle = fieldStyle;
+    this.vectortiles = [];
+    this.updateFeatureCount = debounce(this.updateFeatureCount, 1000).bind(this);
+    this.map.on("moveend", this.updateFeatureCount)
+    this.map.addControl(new CropLegendControl());
+  }
+  updateFeatureCount(e) {
+      // const extent = this.map.getView().calculateExtent();
+      const extent = this.map.getView().calculateExtentInternal();
+      const result = {
+        area: 0,
+        count: 0,
+        perCrop: {}
+      }
+      for (const vt of this.vectortiles) {
+        forFeaturesInExtent(vt, extent, (feature) => {
+            const area = feature.properties_["area"] || toGeometry(feature).getArea();
+            const crop = feature.properties_[CROP_ATTRIBUTE];
+            result.count++;
+            result.area += area;
+            result[crop] = (result[crop] || 0) + area;
+        });
+      }
+      console.log(extent, result);
   }
   addPMTilesLayer(c, options) {
     const source = new PMTilesVectorSource(options);
@@ -29,18 +78,12 @@ class CropMap extends FiboaMap {
     });
     // TODO, Count the features in view and display a legend explaining the top 5 crops
     // TODO, Add a filter based on crops. This will not be perfect on high zoom levels (lossy vector tiles)
-    // source.on('tileloadend', e => {
-    //   const features = e.tile.getFeatures();
-    //   console.log(e, features.length, features[0].getProperties());
-    //   for (const feature of features) {
-    //     feature.getProperties().color = "##ff0000";
-    //   }
-    // })
+    this.vectortiles.push(fields);
     source.on('tileloadend', e => {
       const features = e.tile.getFeatures();
       for (const feature of features) {
         const p = feature.getProperties();
-        p.color = mapping[p["ec:hcat_code"]] || "#99bbccaa";
+        p.color = mapping[p[CROP_ATTRIBUTE]] || "#99bbccaa";
       }
       this.updateFeatureCount(e)
     })

map/package-lock.json

@@ -11,6 +11,7 @@
     "vite": "^6.2.4"
   },
   "dependencies": {
+    "lodash.debounce": "^4.0.8",
     "ol": "^10.0.0",
     "ol-ext": "^4.0.22",
     "ol-pmtiles": "^2.0.2"

map/package.json

@@ -97,4 +97,9 @@ form {
 .ol-popup ul li {
   list-style: none;
   margin: 0 0 0.25rem;
+}
+
+.ol-crop-legend {
+  right: .5em;
+  bottom: .5em;
 }