Optimize color rendering rule

Author: ivorbosloper

map/crop/crop.js

@@ -1,21 +1,17 @@
-import Style from "ol/style/Style";
 import collections from '../sources'
 import {FiboaMap} from "../map";
 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";
 
-const st = hcat.map(({code, color}) => [['==', ['get', 'ec:hcat_code'], Number(code)], color]).flat();
 const fieldStyle = {
   "stroke-color": 'rgb(0, 165, 255)',
   "stroke-width": 1,
-  "fill-color":
-    ['case',
-      ...st,
-      '#99bbccaa'
-    ]
+  "fill-color":  ['get', 'color']
 }
+const mapping = Object.fromEntries(hcat.map(c => [c.code, c.color]));
+
 class CropMap extends FiboaMap {
   constructor() {
     super();
@@ -31,7 +27,6 @@ class CropMap extends FiboaMap {
       source: source,
       style: this.fieldStyle,
     });
-    // TODO, Map color at tileloadend instead of complex style rules
     // 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 => {
@@ -41,6 +36,14 @@ class CropMap extends FiboaMap {
     //     feature.getProperties().color = "##ff0000";
     //   }
     // })
+    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";
+      }
+      this.updateFeatureCount(e)
+    })
     this.map.addLayer(fields);
   }
 }