use colors

KoalaGeo · Oct 2, 2023 · 10aa265 · 10aa265
1 parent 99f98ab
commit 10aa265
Showing 1 changed file with 43 additions and 12 deletions.
diff --git 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>