Style Parsing

elements/map/package.json

@@ -4,7 +4,8 @@
   "type": "module",
   "dependencies": {
     "lit-html": "^2.7.4",
-    "ol": "7.3.0"
+    "ol": "7.3.0",
+    "ol-mapbox-style": "^10.6.0"
   },
   "devDependencies": {
     "@eox/eslint-config": "^1.0.0",

elements/map/src/generate.ts

@@ -1,6 +1,7 @@
 import * as olLayers from "ol/layer";
 import * as olSources from "ol/source";
 import * as olFormats from "ol/format";
+import { applyStyle } from "ol-mapbox-style";
 
 type EoxLayer = {
   type: olLayers.Layer;
@@ -25,7 +26,7 @@ export const generateLayers = (layerArray: Array<EoxLayer>) => {
     if (layer.source && !newSource) {
       throw new Error(`Source type ${layer.source.type} not supported!`);
     }
-    return new newLayer({
+    const olLayer = new newLayer({
       ...layer,
       ...(layer.source && {
         source: new newSource({
@@ -42,6 +43,27 @@ export const generateLayers = (layerArray: Array<EoxLayer>) => {
         layers: layer.layers.reverse().map((l) => createLayer(l)),
       }),
     });
+    if (olLayer.get("style")) {
+      // existing layer source will not get overridden by "style" property
+      // to allow vector layers without defined sources, create a dummy-geojson-source
+      // if source does exist
+      const style = olLayer.get("style");
+      if (!style.sources) {
+        style.sources = {};
+      }
+      const sourceName = style.layers[0].source;
+      if (!style.sources[sourceName]) {
+        style.sources[sourceName] = {
+          type: "geojson",
+          data: {
+            type: "FeatureCollection",
+            features: [],
+          },
+        };
+      }
+      applyStyle(olLayer, style, sourceName);
+    }
+    return olLayer;
   }
 
   return layerArray.reverse().map((l) => createLayer(l));

elements/map/test/vectorLayer.cy.ts

@@ -14,4 +14,24 @@ describe("Vector Layer", () => {
       expect(eoxMap.getLayerById("regions")).to.exist;
     });
   });
+  it("correctly applies mapbox style", () => {
+    cy.get("eox-map").should(($el) => {
+      return new Cypress.Promise((resolve) => {
+        const eoxMap = <EOxMap>$el[0];
+        eoxMap.setLayers(vectorLayerStyleJson);
+        const layers = eoxMap.map.getLayers().getArray();
+        // wait for features to load
+        //@ts-ignore
+        layers[0].getSource().on("featuresloadend", () => {
+          //@ts-ignore
+          const feature = layers[0].getSource().getFeatures()[0];
+          //@ts-ignore
+          const styles = layers[0].getStyleFunction()(feature);
+          // 2 styles expected, one for the stroke, one for the fill.
+          expect(styles).to.have.length(2);
+          resolve();
+        });
+      });
+    });
+  });
 });

elements/map/test/vectorLayer.json

@@ -1,9 +1,34 @@
 [
   {
     "type": "Vector",
-    "background": "#1a2b39",
+    "background": "#1366dd",
     "properties": {
-      "id": "regions"
+      "id": "regions",
+      "style": {
+        "version": 8,
+        "name": "states",
+        "sources": {},
+        "layers": [
+          {
+            "id": "regions_fill",
+            "type": "fill",
+            "source": "regions",
+            "paint": {
+              "fill-color": ["get", "COLOR"],
+              "fill-opacity": 1
+            }
+          },
+          {
+            "id": "regions_outline",
+            "type": "line",
+            "source": "regions",
+            "paint": {
+              "line-color": "#141414",
+              "line-width": 1.5
+            }
+          }
+        ]
+      }
     },
     "source": {
       "type": "Vector",