Map/feature/interaction props

elements/map/main.ts

@@ -5,8 +5,7 @@ import View from "ol/View.js";
 // @ts-ignore
 
 import olCss from "ol/ol.css?inline";
-import { DrawOptions, addDraw } from "./src/draw";
-import { EOxSelectInteraction, SelectOptions, addSelect } from "./src/select";
+import { EOxSelectInteraction } from "./src/select";
 import {
   generateLayers,
   EoxLayer,
@@ -27,25 +26,25 @@ export class EOxMap extends LitElement {
    * Map center, can be lon/lat or UTM
    */
   @property({ type: Array })
-  center: Array<number>;
+  center: Array<number> = [0, 0];
 
   /**
    * Map controls
    */
   @property({ type: Object })
-  controls: object;
+  controls: object = {};
 
   /**
    * Layers array
    */
   @property({ type: Array })
-  layers: Array<EoxLayer>;
+  layers: Array<EoxLayer> = [];
 
   /**
    * Map zoom
    */
   @property({ type: Number })
-  zoom: number;
+  zoom: number = 0;
 
   /**
    * Sync map with another map view by providing its query selector
@@ -87,11 +86,11 @@ export class EOxMap extends LitElement {
 
   /**
    * Apply layers Eox Layer JSONs
-   * @param json array of EoxLayer JSONs
-   * @returns the array of layers
+   * @param {Array<EoxLayer>} json array of EoxLayer JSONs
+   * @returns {Array<*>} the array of ol layers
    */
   setLayers = (json: Array<EoxLayer>) => {
-    const layers = generateLayers(json);
+    const layers = generateLayers(this, json);
     this.map.setLayers(layers);
     return layers;
   };
@@ -107,33 +106,15 @@ export class EOxMap extends LitElement {
     const existingLayer = getLayerById(this, id);
     let layer;
     if (existingLayer) {
-      updateLayer(json, existingLayer);
+      updateLayer(this, json, existingLayer);
       layer = existingLayer;
     } else {
-      layer = createLayer(json);
+      layer = createLayer(this, json);
       this.map.addLayer(layer);
     }
     return layer;
   };
 
-  /**
-   * Adds draw functionality to a given vector layer.
-   * @param layerId id of a vector layer to draw on
-   * @param options options
-   */
-  addDraw = (layerId: string, options: DrawOptions) => {
-    addDraw(this, layerId, options);
-  };
-
-  /**
-   * Adds a select functionality a given vector layer.
-   * @param layerId id of a vector layer to select features from
-   * @param options options (to do: define select options)
-   */
-  addSelect = (layerId: string, options: SelectOptions) => {
-    return addSelect(this, layerId, options);
-  };
-
   /**
    * removes a given ol-interaction from the map. Layer have to be removed seperately
    * @param id id of the interaction
@@ -204,7 +185,7 @@ export class EOxMap extends LitElement {
     addInitialControls(this);
 
     if (this.layers) {
-      this.map.setLayers(generateLayers(this.layers));
+      this.map.setLayers(generateLayers(this, this.layers));
     }
     if (this.sync) {
       const originMap: EOxMap = document.querySelector(this.sync);

elements/map/map.stories.js

@@ -23,35 +23,36 @@ export const Primary = {
 };
 
 export const VectorLayer = {
-  render: () =>
+  args: {
+    layers: [
+      {
+        type: "Vector",
+        background: "#1366dd",
+        properties: {
+          id: "regions",
+        },
+        source: {
+          type: "Vector",
+          url: "https://openlayers.org/data/vector/ecoregions.json",
+          format: "GeoJSON",
+          attributions: "Regions: @ openlayers.org",
+        },
+        style: {
+          "stroke-color": "#232323",
+          "stroke-width": 1,
+          "fill-color": ["string", ["get", "COLOR"], "#eee"],
+        },
+      },
+    ],
+  },
+  render: (args) =>
     html` <style>
         eox-map {
           width: 100%;
           height: 300px;
         }
       </style>
-      <eox-map
-        layers='[
-          {
-            "type": "Vector",
-            "background": "#1366dd",
-            "properties": {
-              "id": "regions"
-            },
-            "source": {
-              "type": "Vector",
-              "url": "https://openlayers.org/data/vector/ecoregions.json",
-              "format": "GeoJSON",
-              "attributions": "Regions: @ openlayers.org"
-            },
-            "style": {
-              "stroke-color": "#232323",
-              "stroke-width": 1,
-              "fill-color": ["string", ["get", "COLOR"], "#eee"]
-            }
-          }
-        ]'
-      ></eox-map>`,
+      <eox-map layers="${JSON.stringify(args.layers)}"></eox-map>`,
 };
 
 export const VectorTileLayer = {
@@ -243,25 +244,6 @@ export const Controls = {
 };
 
 export const Hover = {
-  play: async ({ canvasElement }) => {
-    canvasElement.querySelector("eox-map").addSelect("regions", {
-      id: "myHover",
-      condition: "pointermove",
-      layer: {
-        type: "Vector",
-        properties: {
-          id: "selectLayer",
-        },
-        source: {
-          type: "Vector",
-        },
-        style: {
-          "stroke-color": "red",
-          "stroke-width": 3,
-        },
-      },
-    });
-  },
   render: () => html` <style>
       eox-map {
         width: 100%;
@@ -270,39 +252,44 @@ export const Hover = {
     </style>
     <eox-map
       layers='[
-          {
+        {
+          "type": "Vector",
+          "id": "regions",
+          "source": {
             "type": "Vector",
-            "id": "regions",
-            "source": {
-              "type": "Vector",
-              "url": "https://openlayers.org/data/vector/ecoregions.json",
-              "format": "GeoJSON"
+            "url": "https://openlayers.org/data/vector/ecoregions.json",
+            "format": "GeoJSON"
+          },
+          "interactions": [
+            {
+              "type": "select",
+              "options": {
+                "id": "selectInteraction",
+                "condition": "pointermove",
+                "layer": {
+                  "type": "Vector",
+                  "properties": {
+                    "id": "selectLayer"
+                  },
+                  "source": {
+                    "type": "Vector"
+                  },
+                  "style": {
+                    "stroke-color": "red",
+                    "stroke-width": 3
+                  }
+                }
+              }
             }
-          }
-        ]'
+          ]
+        }
+      ]'
     >
       <eox-map-tooltip></eox-map-tooltip>
     </eox-map>`,
 };
 
 export const Select = {
-  play: async ({ canvasElement }) => {
-    const EOxMap = canvasElement.querySelector("eox-map");
-    EOxMap.addSelect("regions", {
-      id: "mySelection",
-      condition: "click",
-      //@ts-ignore
-      style: {
-        "stroke-color": "white",
-        "stroke-width": 3,
-      },
-    });
-    EOxMap.addEventListener("select", (e) => {
-      canvasElement.querySelector("#ecoName").innerHTML =
-        e.detail.feature?.get("ECO_NAME");
-      console.log(e.detail.feature?.get("ECO_NAME"));
-    });
-  },
   render: () => html`
     <style>
       eox-map {
@@ -328,10 +315,20 @@ export const Select = {
               "stroke-color": "black",
               "stroke-width": 1,
               "fill-color": "red"
-            }
+            },
+            "interactions": [{
+              "type": "select",
+              "options": {
+                "id": "selectInteraction",
+                "condition": "click",
+                "style": {
+                  "stroke-color": "white",
+                  "stroke-width": 3
+                }
+              }
+            }]
           }
-        ]
-        '
+        ]'
     ></eox-map>
     <div id="ecoName"></div>
   `,
@@ -395,12 +392,12 @@ export const ABCompare = {
       <eox-map-compare>
         <eox-map
           slot="first"
-          id="a"
+          id="compareA"
           layers='[{"type":"Tile","source":{"type":"OSM"}}]'
         ></eox-map>
         <eox-map
           slot="second"
-          sync="eox-map#a"
+          sync="eox-map#compareA"
           layers='[
       {
         "type": "Tile",

elements/map/src/draw.ts

@@ -16,9 +16,17 @@ export type DrawOptions = Omit<
   modify?: boolean;
 };
 
+/**
+ * Adds a `draw`-interaction to the map.
+ * Additionally, if {options.modify} is set, it also adds a `modify` interaction. The name `modify`-interaction
+ * follows the naming convention `${DrawOptions.id}_modify`
+ * @param {EOxMap} EOxMap
+ * @param {VectorLayer<VectorSource>} drawLayer
+ * @param {DrawOptions} options
+ */
 export function addDraw(
   EOxMap: EOxMap,
-  layerId: string,
+  drawLayer: VectorLayer<VectorSource>,
   options: DrawOptions
 ): void {
   const options_ = Object.assign({}, options);
@@ -28,10 +36,6 @@ export function addDraw(
   options_.modify =
     typeof options_.modify === "boolean" ? options_.modify : true;
 
-  const map = EOxMap.map;
-
-  const drawLayer = EOxMap.getLayerById(layerId) as VectorLayer<VectorSource>;
-
   const source = drawLayer.getSource();
 
   if (options_.type === "Box") {
@@ -68,14 +72,14 @@ export function addDraw(
   });
 
   // identifier to retrieve the interaction
-  map.addInteraction(drawInteraction);
+  EOxMap.map.addInteraction(drawInteraction);
   EOxMap.interactions[options_.id] = drawInteraction;
 
   if (options_.modify) {
     const modifyInteraction = new Modify({
       source,
     });
-    map.addInteraction(modifyInteraction);
+    EOxMap.map.addInteraction(modifyInteraction);
     EOxMap.interactions[`${options_.id}_modify`] = modifyInteraction;
   }
 }