Add possibility to define custom layer properties

docs/map-layer-configuration.md

@@ -25,6 +25,8 @@ The following properties can be applied to all map layer types
 | legendUrl          | URL to a legend image. This value is required to produce a legend, if the layer is not a WMS layer. The URL may contain format placeholders corresponding to the parameters `language`, `scale` or any of the additional options given among `legendOptions`. A placeholder is delimited by `{{` and `}}` – i.e. `{{VAR_NAME}}`. | `"legendUrl": "static/icon/my-layer-legend-{{LANGUAGE}}.png"`
 | legendOptions      | An object, containing additional parameters to request the legend image. Supported options may be vendor specific, e.g. see [GeoServer Docs](https://docs.geoserver.org/latest/en/user/services/wms/get_legend_graphic/index.html) for the options supported for WMS layers in GeoServer. | `"legendOptions": {"transparent": true, "width": 14 }`
 
+All map layer types can also make use of the properties listed in `customLayerProperties` in the main Wegue application configuration object. This is useful if specific configuration is needed on all layers by a custom module. See [Wegue configuration](wegue-configuration?id=general) for more details.
+
 
 
 ## OSM

docs/wegue-configuration.md

@@ -28,6 +28,7 @@ This describes the Wegue application configuration, which is modelled as JSON do
 | viewAnimation      | Configuration object for view animations | See [viewAnimation](wegue-configuration?id=viewAnimation) |
 | sidebar            | Configuration object for the application sidebar. | See [sidebar](wegue-configuration?id=sidebar) |
 | legend             | Configuration object containing application wide parameters for layer legends. | See [legend](wegue-configuration?id=legend) |
+| customLayerProperties | Array of custom property names that can be defined inside `mapLayers`. Properties which are not known by `Wegue` are silently discarded when layers are created. See [mapLayers](map-layer-configuration?id=general) for more information. | `["myCustomProperty", "anotherCustomProperty"]` |
 
 ### colorTheme
 

src/components/ol/Map.vue

@@ -197,6 +197,7 @@ export default {
       const layers = [];
       const appConfig = this.$appConfig;
       const mapLayersConfig = appConfig.mapLayers || [];
+      const customLayerProperties = appConfig.customLayerProperties || [];
       mapLayersConfig.reverse().forEach(function (lConf) {
         // Some Layers may require a TileGrid object
         // Remarks: Passing null instead of undefined as parameters into the
@@ -211,6 +212,7 @@ export default {
         lConf.supportsPermalink = lConf.supportsPermalink ?? true;
 
         const layer = LayerFactory.getInstance(lConf, me.map);
+        me.addCustomLayerProperties(layer, lConf, customLayerProperties)
         layers.push(layer);
 
         // if layer is selectable register a select interaction
@@ -228,6 +230,18 @@ export default {
       return layers;
     },
 
+    /**
+     * Adds properties listed in the "customLayerProperties" array in app config to the layer.
+     * They are added only if defined in the layer configuration.
+     */
+    addCustomLayerProperties (layer, lConf, customProperties) {
+      for (const property of customProperties) {
+        if (lConf[property]) {
+          layer.set(property, lConf[property])
+        }
+      }
+    },
+
     /**
      * Hook up events to process newly added and modified OL layers.
      * This is currently used to update locale specific layer properties.

tests/unit/specs/components/ol/Map.spec.js

@@ -160,8 +160,11 @@ describe('ol/Map.vue', () => {
           isBaseLayer: false,
           visible: true,
           selectable: true,
-          displayInLayerList: true
-        }]
+          displayInLayerList: true,
+          customProp: true,
+          otherCustomProp: true
+        }],
+        customLayerProperties: ['customProp']
       };
       comp = mount(Map, { vuetify });
       vm = comp.vm;
@@ -184,6 +187,16 @@ describe('ol/Map.vue', () => {
       expect(typeof selectIa).to.not.equal('undefined');
     });
 
+    it('createLayers adds customLayerProperties if configured', () => {
+      const layers = vm.createLayers();
+      expect(layers[0].get('customProp')).to.be.true
+    });
+
+    it('createLayers ignores non configured layer properties', () => {
+      const layers = vm.createLayers();
+      expect(layers[0].get('otherCustomProp')).to.be.undefined
+    });
+
     it('setOlButtonColor applies Vuetify color to OL buttons', () => {
       // mock a OL zoom button
       const mockZoomDiv = document.createElement('div');