Allow Multiple Labels for a Layer

README.md

@@ -99,6 +99,13 @@ Navigate to the project folder and run the following:
 npm test
 ```
 
+To fix and linting issues:
+
+```
+npm run lintfix
+npm run format
+```
+
 Note - if there are errors such as `BasiGX not defined`, ensure that the submodules have been
 created using `git submodule update --init --recursive`.
 

app/factory/Layer.js

@@ -123,6 +123,21 @@ Ext.define('CpsiMapview.factory.Layer', {
             mapLayer.set('refreshLayerOption', allowRefresh);
             // indicator if a label option is drawn in layer context menu for wms layers
             mapLayer.set('labelClassName', layerConf.labelClassName);
+            // allow multiple label items
+            mapLayer.set('labels', layerConf.labels);
+
+            if (
+                !Ext.isEmpty(layerConf.labelClassName) &&
+                Ext.isArray(layerConf.labels) &&
+                layerConf.labels.length > 0
+            ) {
+                Ext.Logger.warn(
+                    'Layer "' +
+                        layerConf.layerKey +
+                        '" has both "labelClassName" and "labels" configured - ' +
+                        '"labels" takes priority and "labelClassName" will be ignored.'
+                );
+            }
             // indicator if an opacity slider is offered in layer context menu
             const allowOpacitySlider = layerConf.opacitySlider !== false;
             mapLayer.set('opacitySlider', allowOpacitySlider);

app/util/SwitchLayer.js

@@ -76,6 +76,40 @@ Ext.define('CpsiMapview.util.SwitchLayer', {
         });
     },
 
+    /**
+     * Get the active WMS label style for a layer
+     *
+     * @param  {ol.layer.Layer} layer The layer to check
+     * @return {String|null} The active label style name, or null if
+     *                        none is configured
+     */
+    getActiveLabelStyleName: function (layer) {
+        return (
+            layer.get('activeLabelName') || layer.get('labelClassName') || null
+        );
+    },
+
+    /**
+     * Builds the WMS STYLES parameter value for a layer, appending the
+     * label style (if any)
+     *
+     * @param  {String}  activatedStyle  The style name
+     * @param  {Boolean} labelsActive    Whether a label style should be
+     *                                   appended
+     * @param  {String}  activeLabelName The label style name to append
+     * @return {String} The combined STYLES parameter value
+     */
+    buildWmsStyleList: function (
+        activatedStyle,
+        labelsActive,
+        activeLabelName
+    ) {
+        if (labelsActive === true && activeLabelName) {
+            return activatedStyle + ',' + activeLabelName;
+        }
+        return activatedStyle;
+    },
+
     /**
      * Changes a switchlayer from one internal layer to the other.
      *
@@ -141,13 +175,19 @@ Ext.define('CpsiMapview.util.SwitchLayer', {
         newLayer.set('activatedStyle', activatedStyle);
 
         if (newLayer.get('isWms')) {
-            // check if a label STYLES parameter was added --> keep this
-            // the STYLES value (SLD) for the labels
-            const labelClassName = newLayer.get('labelClassName');
-            let wmsStyleList = activatedStyle;
+            const labelsActive = switchLayer.get('labelsActive') === true;
+            const activeLabelName =
+                staticMe.getActiveLabelStyleName(switchLayer);
+            const wmsStyleList = staticMe.buildWmsStyleList(
+                activatedStyle,
+                labelsActive,
+                activeLabelName
+            );
 
-            if (newLayer.get('labelsActive') === true) {
-                wmsStyleList += ',' + labelClassName;
+            if (labelsActive && activeLabelName) {
+                // copy the active label the new layer
+                newLayer.set('labelsActive', true);
+                newLayer.set('activeLabelName', activeLabelName);
             }
 
             if (filters && filters.length > 0) {

app/view/layer/StyleSwitcherRadioGroup.js

@@ -115,9 +115,13 @@ Ext.define('CpsiMapview.view.layer.StyleSwitcherRadioGroup', {
             if (layer.get('isWms')) {
                 // check if a label STYLES parameter was added --> keep this
                 // the STYLES value (SLD) for the labels
-                const labelClassName = layer.get('labelClassName');
-                if (layer.get('labelsActive') === true) {
-                    newStyle += ',' + labelClassName;
+                // 'activeLabelName' is set by LayerLabels when multiple label
+                // options are configured,  'labelClassName' is used for
+                // the single label-style case.
+                const activeLabelName =
+                    layer.get('activeLabelName') || layer.get('labelClassName');
+                if (layer.get('labelsActive') === true && activeLabelName) {
+                    newStyle += ',' + activeLabelName;
                 }
 
                 // apply new style parameter and reload layer