I. #32 Services with many layers now sort properly.

Rearraged coastal habitat layers in scaledefinitions so that they would layer in proper order with sorting via legends. Did not do this for protected areas becasue I don't think it matters
natcap · Sep 27, 2021 · a5e500b · a5e500b
1 parent 335b4b2
commit a5e500b
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 16 deletions.
diff --git a/map-viewer/src/Map.jsx b/map-viewer/src/Map.jsx
@@ -609,16 +609,45 @@ const Map = () => {
     console.log("change order");
     console.log(selectedServices);
     console.log(oldIndex + " : " + newIndex);
+    console.log(visibleLayers);
+    // Reverse the sorted services to start with the layers in the back
     const reversedServices = servicesSorted.slice().reverse();
     reversedServices.forEach((serviceType, i) => {
-      const zbackId = visibleLayers[serviceType].layerID;
+      let zbackId = [];
+      // Add all layers from a service type if there are multiple of them
+      if(serviceType in multiFileLayers) {
+        multiFileLayers[serviceType].forEach((childLayer) => {
+          zbackId.push(childLayer.id);
+        });
+      }
+      else {
+        zbackId.push(visibleLayers[serviceType].layerID);
+      }
+
       if(reversedServices.length < i+1) {
         const nextService = reversedServices[i+1];
-        const zfrontId = visibleLayers[nextService].layerID;
-        map.moveLayer(zbackId, zfrontId);
+        let zfrontId = [];
+        // Add all layers from a service type if there are multiple of them
+        if(nextService in multiFileLayers) {
+          multiFileLayers[nextService].forEach((childLayer) => {
+            zfrontId.push(childLayer.id);
+          });
+        }
+        else {
+          zfrontId.push(visibleLayers[nextService].layerID);
+        }
+        // Move each layer behind each next layer
+        zbackId.forEach((backLayerId) => {
+          zfrontId.forEach((frontLayerId) => {
+            map.moveLayer(backLayerId, frontLayerId);
+          });
+        });
       }
       else {
-        map.moveLayer(zbackId);
+        // We are at the most visible set of layers, just move them to the top.
+        zbackId.forEach((backLayerId) => {
+          map.moveLayer(backLayerId);
+        });
       }
     });
 

diff --git a/map-viewer/src/ScaleDefinitions.js b/map-viewer/src/ScaleDefinitions.js
@@ -511,8 +511,8 @@ export const supportMenuDetails = [
 
 export const coastalHabitats = [
     {
-      id: "wetland",
-      label: "Wetlands",
+      id: "forest-scrub",
+      label: "Forest / Scrub",
       helpText: {
         text: ``,
         metric: "N/A",
@@ -536,8 +536,8 @@ export const coastalHabitats = [
       legend: false,
     },
     {
-      id: "seagrass",
-      label: "Seagrass",
+      id: "wetland",
+      label: "Wetlands",
       helpText: {
         text: ``,
         metric: "N/A",
@@ -561,8 +561,8 @@ export const coastalHabitats = [
       legend: false,
     },
     {
-      id: "mangroves",
-      label: "Mangroves",
+      id: "seagrass",
+      label: "Seagrass",
       helpText: {
         text: ``,
         metric: "N/A",
@@ -586,8 +586,8 @@ export const coastalHabitats = [
       legend: false,
     },
     {
-      id: "forest-scrub",
-      label: "Forest / Scrub",
+      id: "saltmarsh",
+      label: "Saltmarsh",
       helpText: {
         text: ``,
         metric: "N/A",
@@ -611,8 +611,8 @@ export const coastalHabitats = [
       legend: false,
     },
     {
-      id: "coral-reef",
-      label: "Coral Reefs",
+      id: "mangroves",
+      label: "Mangroves",
       helpText: {
         text: ``,
         metric: "N/A",
@@ -636,8 +636,8 @@ export const coastalHabitats = [
       legend: false,
     },
     {
-      id: "saltmarsh",
-      label: "Saltmarsh",
+      id: "coral-reef",
+      label: "Coral Reefs",
       helpText: {
         text: ``,
         metric: "N/A",