From ff1e90c71b50a168a95b6a8bcbb2e42f7260008e Mon Sep 17 00:00:00 2001
From: Ben Baumann <34001723+benbaumann95@users.noreply.github.com>
Date: Fri, 1 Sep 2023 10:19:50 +0100
Subject: [PATCH] Set color of polygon with color set in the geojson feature
 properties (#381)

- Default to geojsonColor is this properties color object does not exist

Co-authored-by: Benjamin Baumann <benjaminbaumann@Ben-Baumanns-MacBook-Pro-C02FM2C8MD6N.local>
---
 src/components/my-map/index.ts | 27 ++++++++++++++++-----------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/components/my-map/index.ts b/src/components/my-map/index.ts
index f532185..95a81bd 100644
--- a/src/components/my-map/index.ts
+++ b/src/components/my-map/index.ts
@@ -374,17 +374,22 @@ export class MyMap extends LitElement {
 
     const geojsonLayer = new VectorLayer({
       source: geojsonSource,
-      style: new Style({
-        stroke: new Stroke({
-          color: this.geojsonColor,
-          width: 3,
-        }),
-        fill: new Fill({
-          color: this.geojsonFill
-            ? hexToRgba(this.geojsonColor, 0.2)
-            : hexToRgba(this.geojsonColor, 0),
-        }),
-      }),
+      style: function (this: MyMap, feature: any) {
+        // Retrieve color from feature properties
+        let featureColor = feature.get("color") || this.geojsonColor; // Use the geojsonColor if no color property exists
+
+        return new Style({
+          stroke: new Stroke({
+            color: featureColor,
+            width: 3,
+          }),
+          fill: new Fill({
+            color: this.geojsonFill
+              ? hexToRgba(featureColor, 0.2)
+              : hexToRgba(featureColor, 0),
+          }),
+        });
+      }.bind(this),
     });
 
     map.addLayer(geojsonLayer);