From 10aa265e812b7d316a1bf83280314f4d8f7192ce Mon Sep 17 00:00:00 2001
From: KoalaGeo <eddlewis85@gmail.com>
Date: Mon, 2 Oct 2023 16:03:08 +0100
Subject: [PATCH] use colors

---
 radon/radon.html | 55 +++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 43 insertions(+), 12 deletions(-)

diff --git a/radon/radon.html b/radon/radon.html
index 1b16f3d..0e13187 100644
--- a/radon/radon.html
+++ b/radon/radon.html
@@ -21,24 +21,55 @@
               url: "radon_v2.pmtiles",
               attributions: ["© British Geological Survey"]
             }),
-            style: new ol.style.Style({
-              stroke: new ol.style.Stroke({
-                color: 'red',
-                width: 1,
-              }),
-              fill: new ol.style.Fill({
-                color: 'rgba(240,0,0,1)',
-              })
-            })
+            style: function (feature) {
+              // Get the "CLASS_MAX" attribute value from the feature's properties
+              const classMax = feature.get("CLASS_MAX");
+        
+              // Define your style categories and corresponding styles here
+              // Adjust the conditions and styles to match your data
+              if (classMax === 1) {
+                return new ol.style.Style({
+                  stroke: new ol.style.Stroke({
+                    color: 'red',
+                    width: 1,
+                  }),
+                  fill: new ol.style.Fill({
+                    color: 'rgba(240, 0, 0, 1)',
+                  })
+                });
+              } else if (classMax === 2) {
+                return new ol.style.Style({
+                  stroke: new ol.style.Stroke({
+                    color: 'blue',
+                    width: 1,
+                  }),
+                  fill: new ol.style.Fill({
+                    color: 'rgba(0, 0, 240, 1)',
+                  })
+                });
+              }
+              // Add more conditions and styles for other attribute values as needed
+        
+              // Default style if no condition matches
+              return new ol.style.Style({
+                stroke: new ol.style.Stroke({
+                  color: 'gray',
+                  width: 1,
+                }),
+                fill: new ol.style.Fill({
+                  color: 'rgba(128, 128, 128, 1)',
+                })
+              });
+            }
           });
-
+        
           ol.proj.useGeographic();
           const map = new ol.Map({
             layers: [vectorLayer],
             target: 'map',
             view: new ol.View({
-              center: [1.4,53.1],
-              zoom: 7
+              center: [1.4, 53.1],
+              zoom: 5
             }),
           });
         </script>