Allow users to see active layers, control draw order, transparency/toggeling as well as save and restore functionality

new-admin/src/views/mapsettings.jsx

@@ -290,6 +290,7 @@ class Menu extends Component {
     backgroundSwitcherWhite: true,
     enableOSM: false,
     showBreadcrumbs: false,
+    showActiveLayersView: false,
     enableTransparencySlider: true,
     instruction: "",
     dropdownThemeMaps: false,
@@ -337,6 +338,9 @@ class Menu extends Component {
           enableOSM: existingConfig.enableOSM ?? this.state.enableOSM,
           showBreadcrumbs:
             existingConfig.showBreadcrumbs ?? this.state.showBreadcrumbs,
+          showActiveLayersView:
+            existingConfig.showActiveLayersView ??
+            this.state.showActiveLayersView,
           enableTransparencySlider:
             existingConfig.enableTransparencySlider ??
             this.state.enableTransparencySlider,
@@ -563,6 +567,7 @@ class Menu extends Component {
       backgroundSwitcherWhite: this.state.backgroundSwitcherWhite,
       enableOSM: this.state.enableOSM,
       showBreadcrumbs: this.state.showBreadcrumbs,
+      showActiveLayersView: this.state.showActiveLayersView,
       enableTransparencySlider: this.state.enableTransparencySlider,
       instruction: this.state.instruction,
       dropdownThemeMaps: this.state.dropdownThemeMaps,
@@ -1526,7 +1531,7 @@ class Menu extends Component {
                   />
                 </div>
               </div>
-              <div className="separator">Inställningar för plugins</div>
+              <div className="separator">Inställningar för Lagerhanteraren</div>
               <div>
                 <input
                   id="visibleAtStart"
@@ -1550,7 +1555,7 @@ class Menu extends Component {
                 />
                 &nbsp;
                 <label className="long-label" htmlFor="visibleAtStartMobile">
-                  Synlig vid start - Mobil
+                  Synlig vid start (mobil)
                 </label>
               </div>
               <div>
@@ -1563,14 +1568,32 @@ class Menu extends Component {
                 />
                 &nbsp;
                 <label className="long-label" htmlFor="showBreadcrumbs">
-                  Visa "brödsmulor"{" "}
+                  Visa brödsmulor{" "}
                   <i
                     className="fa fa-question-circle"
                     data-toggle="tooltip"
                     title="När rutan är ikryssad visas små kort längst ned på skärmen, ett för varje lager som är aktivt"
                   />
                 </label>
               </div>
+              <div>
+                <input
+                  id="showActiveLayersView"
+                  name="showActiveLayersView"
+                  type="checkbox"
+                  onChange={this.handleInputChange}
+                  checked={this.state.showActiveLayersView}
+                />
+                &nbsp;
+                <label className="long-label" htmlFor="showActiveLayersView">
+                  Visa en flik med aktiva lager (beta){" "}
+                  <i
+                    className="fa fa-question-circle"
+                    data-toggle="tooltip"
+                    title="När rutan är ikryssad visas en tredje flik i Lagerhanteraren. Där kan användaren bland annat styra ritordningen av aktiva lager."
+                  />
+                </label>
+              </div>
               <div>
                 <input
                   id="enableTransparencySlider"

new-client/src/components/Search/MapViewModel.js

@@ -94,6 +94,7 @@ class MapViewModel {
         : null,
       {
         layerType: "system",
+        zIndex: 5000,
         name: "pluginSearchResults",
         caption: "Search results",
       }
@@ -104,6 +105,7 @@ class MapViewModel {
       this.getDrawStyle(),
       {
         layerType: "system",
+        zIndex: 5000,
         name: "pluginSearchDraw",
         caption: "Search draw",
       }

new-client/src/components/Search/utils/FeatureStyle.js

@@ -114,7 +114,7 @@ export default class FeatureStyle {
         scale: (isValidNumber(scale) ? scale : 1) * multiplier,
         src: markerImg?.length > 0 ? markerImg : defaultMarker,
       }),
-      ...(type === "highlight" && { zIndex: 1000 }), // Highlight style should always stay on top of other labels
+      ...(type === "highlight" && { zIndex: 5002 }), // Highlight style should always stay on top of other labels
       ...(this.#enableLabelOnHighlight && {
         text: new Text({
           textAlign: textAlign,

new-client/src/models/AppModel.js

@@ -552,19 +552,16 @@ class AppModel {
 
     // Prepare layers
     this.layers = this.flattern(layerSwitcherConfig);
-    // FIXME: Use map instead?
-    Object.keys(this.layers)
-      .sort((a, b) => this.layers[a].drawOrder - this.layers[b].drawOrder)
-      .map((sortedKey) => this.layers[sortedKey])
-      .forEach((layer) => {
-        if (this.layersFromParams.length > 0) {
-          layer.visibleAtStart = this.layersFromParams.some(
-            (layerId) => layerId === layer.id
-          );
-        }
-        layer.cqlFilter = this.cqlFiltersFromParams[layer.id] || null;
-        this.addMapLayer(layer);
-      });
+    // Loop the layers and add each of them to the map
+    this.layers.forEach((layer) => {
+      if (this.layersFromParams.length > 0) {
+        layer.visibleAtStart = this.layersFromParams.some(
+          (layerId) => layerId === layer.id
+        );
+      }
+      layer.cqlFilter = this.cqlFiltersFromParams[layer.id] || null;
+      this.addMapLayer(layer);
+    });
 
     // FIXME: Move to infoClick instead. All other plugins create their own layers.
     if (infoclickConfig !== undefined) {
@@ -593,6 +590,7 @@ class AppModel {
       caption: "Infoclick layer",
       name: "pluginInfoclick",
       layerType: "system",
+      zIndex: 5001, // System layer's zIndex start at 5000, ensure click is above
       source: this.highlightSource,
       style: new Style({
         stroke: new Stroke({

new-client/src/models/DrawModel.js

@@ -990,6 +990,7 @@ class DrawModel {
     return new VectorLayer({
       source: source,
       layerType: "system",
+      zIndex: 5000,
       caption: "Draw model",
     });
   };

new-client/src/models/KmlModel.js

@@ -203,6 +203,7 @@ class KmlModel {
     return new VectorLayer({
       source: source,
       layerType: "system",
+      zIndex: 5000,
       caption: "KML model",
     });
   };

new-client/src/models/MapClickModel.js

@@ -27,7 +27,7 @@ export default class MapClickModel {
       caption: "MapClick Viewer", // #883, should we call the layers the same as models that create them?
       name: "pluginMapClickViewer", // #883, should we call the layers the same as models that create them?
       layerType: "system", // #883: "system" for the core system layers, to differentiate from "normal" WMS/Vector/etc layers?
-      zIndex: 1000, // We want this to stay on top of other layers
+      zIndex: 5001, // We want this to stay on top of other layers
     });
     this.map.addLayer(this.vector);
 

new-client/src/models/layers/VectorLayer.js

@@ -63,6 +63,7 @@ class WFSVectorLayer {
       name: config.name,
       visible: config.visible,
       opacity: config.opacity,
+      zIndex: config.zIndex,
       queryable: config.queryable,
       filterable: config.filterable,
       filterAttribute: config.filterAttribute,

new-client/src/models/layers/WMSLayer.js

@@ -63,6 +63,7 @@ class WMSLayer {
         visible: config.visible,
         caption: config.caption,
         opacity: config.opacity,
+        zIndex: config.zIndex,
         source: new ImageWMS(source),
         layerInfo: this.layerInfo,
         url: config.url,
@@ -80,6 +81,7 @@ class WMSLayer {
         visible: config.visible,
         caption: config.caption,
         opacity: config.opacity,
+        zIndex: config.zIndex,
         source: new TileWMS(source),
         layerInfo: this.layerInfo,
         url: config.url,

new-client/src/models/layers/WMTSLayer.js

@@ -75,6 +75,7 @@ class WMTSLayer {
       visible: config.visible,
       queryable: config.queryable,
       opacity: config.opacity,
+      zIndex: config.zIndex,
       source: new WMTS(source),
       layerInfo: new LayerInfo(config),
       minZoom: minZoom,

new-client/src/plugins/Buffer/BufferModel.js

@@ -21,6 +21,7 @@ class BufferModel {
     this.highlightLayer = new VectorLayer({
       source: this.highlightSource,
       layerType: "system",
+      zIndex: 5000,
       name: "pluginBufferSelection",
       caption: "Buffer selection layer",
       style: new Style({
@@ -49,6 +50,7 @@ class BufferModel {
     this.bufferLayer = new VectorLayer({
       source: this.bufferSource,
       layerType: "system",
+      zIndex: 5000,
       name: "pluginBuffer",
       caption: "Buffer layer",
       style: new Style({

new-client/src/plugins/Collector/CollectorModel.js

@@ -337,6 +337,7 @@ class CollectorModel {
 
     this.layer = new Vector({
       layerType: "system",
+      zIndex: 5000,
       name: "pluginCollector",
       caption: "Collector layer",
       source: this.vectorSource,

new-client/src/plugins/Coordinates/CoordinatesModel.js

@@ -46,6 +46,7 @@ class CoordinatesModel {
     this.source = new VectorSource();
     this.vector = new Vector({
       layerType: "system",
+      zIndex: 5000,
       name: "pluginCoordinate",
       caption: "Coordinate layer",
       source: this.source,

new-client/src/plugins/Draw/DrawModel.js

@@ -29,6 +29,7 @@ class DrawModel {
     this.source = new VectorSource();
     this.vector = new VectorLayer({
       layerType: "system",
+      zIndex: 5000,
       name: "pluginDraw",
       caption: "Draw layer",
       source: this.source,

new-client/src/plugins/Edit/EditModel.js

@@ -460,6 +460,7 @@ class EditModel {
 
     this.layer = new Vector({
       layerType: "system",
+      zIndex: 5000,
       name: "pluginEdit",
       caption: "Edit layer",
       source: this.vectorSource,

new-client/src/plugins/Export/ExportModel.js

@@ -62,6 +62,7 @@ class ExportModel {
     this.previewLayer = new Vector({
       source: new VectorSource(),
       layerType: "system",
+      zIndex: 5000,
       name: "pluginExport",
       caption: "Export plugin",
       style: new Style({

new-client/src/plugins/Fir/FirLayerController.js

@@ -44,6 +44,7 @@ class FirLayerController {
 
     this.model.layers.feature = new VectorLayer({
       layerType: "system",
+      zIndex: 5000,
       caption: "FIRSearchResultsLayer",
       name: "FIRSearchResultsLayer",
       source: new VectorSource(),
@@ -53,6 +54,7 @@ class FirLayerController {
 
     this.model.layers.highlight = new VectorLayer({
       layerType: "system",
+      zIndex: 5000,
       caption: "FIRHighlightsLayer",
       name: "FIRHighlightsLayer",
       source: new VectorSource(),
@@ -62,6 +64,7 @@ class FirLayerController {
 
     this.model.layers.buffer = new VectorLayer({
       layerType: "system",
+      zIndex: 5000,
       caption: "FIRBufferLayer",
       name: "FIRBufferLayer",
       source: new VectorSource(),
@@ -71,6 +74,7 @@ class FirLayerController {
 
     this.model.layers.draw = new VectorLayer({
       layerType: "system",
+      zIndex: 5000,
       caption: "FIRDrawLayer",
       name: "FIRDrawLayer",
       source: new VectorSource(),
@@ -86,6 +90,7 @@ class FirLayerController {
 
     this.model.layers.label = new VectorLayer({
       layerType: "system",
+      zIndex: 5000,
       caption: "FIRLabels",
       name: "FIRLabels",
       source: new VectorSource(),
@@ -95,6 +100,7 @@ class FirLayerController {
 
     this.model.layers.marker = new VectorLayer({
       layerType: "system",
+      zIndex: 5000,
       caption: "FIRMarker",
       name: "FIRMarker",
       source: new VectorSource(),

new-client/src/plugins/Fme/FmeModel.js

@@ -15,6 +15,7 @@ export default class FmeModel {
     this.source = new VectorSource();
     this.vector = new VectorLayer({
       layerType: "system",
+      zIndex: 5000,
       source: this.source,
       name: "drawLayer",
     });

new-client/src/plugins/FmeServer/models/MapViewModel.js

@@ -51,6 +51,7 @@ class MapViewModel {
       this.#getDrawStyle(),
       {
         layerType: "system",
+        zIndex: 5000,
         name: "pluginFmeServer",
       }
     );

new-client/src/plugins/GeosuiteExport/GeosuiteExportModel.js

@@ -46,6 +46,7 @@ class GeosuiteExportModel {
     this.#source = new VectorSource();
     this.#vector = new VectorLayer({
       layerType: "system",
+      zIndex: 5000,
       source: this.#source,
       name: "pluginGeoSuite",
       caption: "GeoSuite layer",

new-client/src/plugins/Kir/KirLayerController.js

@@ -29,6 +29,7 @@ class KirLayerController {
   initLayers() {
     this.model.layers.buffer = new VectorLayer({
       layerType: "system",
+      zIndex: 5000,
       caption: "KIRBufferLayer",
       name: "KIRBufferLayer",
       source: new VectorSource(),
@@ -38,6 +39,7 @@ class KirLayerController {
 
     this.model.layers.draw = new VectorLayer({
       layerType: "system",
+      zIndex: 5000,
       caption: "KIRDrawLayer",
       name: "KIRDrawLayer",
       source: new VectorSource(),
@@ -53,6 +55,7 @@ class KirLayerController {
 
     this.model.layers.features = new VectorLayer({
       layerType: "system",
+      zIndex: 5000,
       caption: "KIRFeatures",
       name: "KIRFeatures",
       source: new VectorSource(),
@@ -62,6 +65,7 @@ class KirLayerController {
 
     this.model.layers.marker = new VectorLayer({
       layerType: "system",
+      zIndex: 5000,
       caption: "KIRMarker",
       name: "KIRMarker",
       source: new VectorSource(),

new-client/src/plugins/LayerSwitcher/LayerSwitcherView.js

@@ -8,6 +8,7 @@ import { AppBar, Tab, Tabs } from "@mui/material";
 import BackgroundSwitcher from "./components/BackgroundSwitcher.js";
 import LayerGroup from "./components/LayerGroup.js";
 import BreadCrumbs from "./components/BreadCrumbs.js";
+import DrawOrder from "./components/DrawOrder.js";
 
 // The styled-component below might seem unnecessary since we are using the sx-prop
 // on it as well. However, since we cannot use the sx-prop on a non-MUI-component
@@ -159,6 +160,9 @@ class LayersSwitcherView extends React.PureComponent {
           >
             <Tab label="Kartlager" />
             <Tab label="Bakgrund" />
+            {this.options.showActiveLayersView === true && (
+              <Tab label="Aktiva lager" />
+            )}
           </Tabs>
         </StyledAppBar>
         <ContentWrapper>
@@ -173,6 +177,10 @@ class LayersSwitcherView extends React.PureComponent {
             map={this.props.map}
             app={this.props.app}
           />
+          {this.options.showActiveLayersView === true &&
+            this.state.activeTab === 2 && (
+              <DrawOrder map={this.props.map} app={this.props.app} />
+            )}
         </ContentWrapper>
         {this.renderBreadCrumbs()}
       </Root>