Order layers

code/src/io/data/data-layer.ts

@@ -56,9 +56,30 @@ export abstract class DataLayer {
     */
     public isGroupExpanded: boolean;
 
-    // Indicates if live updates are required for this layer
+    /** 
+     * Indicates if live updates are required for this layer
+     */
     public isLive?: boolean = false;
 
+
+    /**
+     * MapBox slot parameter for layer ordering. top, middle or bottom.
+     * 
+     * [see mapbox docs](https://docs.mapbox.com/mapbox-gl-js/example/geojson-layer-in-slot/)
+     *
+     * @public
+     * @type {?string}
+     */
+    public slot?: string;
+
+    /**
+     * The layer ID of the layer that this layer should be added below. Only relevant in mapbox v2 styles
+     * 
+     * @public
+     * @type {?string}
+     */
+    public addBelowLayer?: string;
+
     /**
      * Initialise a new DataLayer instance.
      * 

code/src/ui/map/mapbox/mapbox-layer-utils.ts

@@ -18,11 +18,32 @@ export async function addAllLayers(map: Map, dataStore: DataStore, imageryOption
     const currentStyle = getCurrentImageryOption(imageryOptions);
 
     const layerArray: DataLayer[] = dataStore?.getLayerList();
-    layerArray?.forEach((layer) => addLayer(map, layer, currentStyle));
-    console.info(`Added ${layerArray?.length} layers to the map object.`);
+    // sort layerArray by layer.order
+    let sortedlayers: DataLayer[] = layerArray;
+    try {sortedlayers = orderLayers(layerArray)
+        console.log("Ordered layers by layer.order");
+    } catch (error) {
+        console.error("Error ordering layers:", error);
+    }
+    sortedlayers?.forEach((layer) => addLayer(map, layer, currentStyle));
+    console.info(`Added ${sortedlayers?.length} layers to the map object.`);
 }
 
-/**
+function orderLayers(layerArray: DataLayer[]): DataLayer[] {
+    const sortedArray = layerArray?.sort((a, b) => {
+        if (a.order < b.order) {
+            return -1;
+        } else if (a.order > b.order) {
+            return 1;
+        } else {
+            return 0;
+        }
+    });
+    console.log("Ordered layers by layer.order innnnor");
+    return sortedArray;
+}
+
+/** 
  * Adds the input DataLayer to the Mapbox map instance.
  * 
  * @param {Map} map the Mapbox map instance.

code/src/utils/data-services.ts

@@ -40,20 +40,24 @@ export function ScenarioDimensionsEndpoint(stack: string, scenario: string): str
 }
 
 export const useScenarioDimensionsService = (stack: string, scenario: string): { scenarioDimensions: ScenarioDimensionsData; isDimensionsFetching: boolean } => {
-  const { data, isFetching } = useFetchDimensionsQuery(ScenarioDimensionsEndpoint(stack, scenario));
-
-  const [scenarioDimensions, setScenarioDimensions] = useState<ScenarioDimensionsData>({});
-  const isDimensionsFetching = isFetching;
-  useEffect(() => {
-    if (!isFetching) {
-      // If there is any data retrieved, set that first
-      if (data) {
-        setScenarioDimensions(data);
+  if (scenario) {
+
+    const { data, isFetching } = useFetchDimensionsQuery(ScenarioDimensionsEndpoint(stack, scenario));
+
+    const [scenarioDimensions, setScenarioDimensions] = useState<ScenarioDimensionsData>({});
+    const isDimensionsFetching = isFetching;
+    useEffect(() => {
+      if (!isFetching) {
+        // If there is any data retrieved, set that first
+        if (data) {
+          setScenarioDimensions(data);
+        }
       }
-    }
-  }, [data, isFetching]);
+    }, [data, isFetching]);
 
-  return { scenarioDimensions, isDimensionsFetching };
+    return { scenarioDimensions, isDimensionsFetching };
+  }
+  else return  { scenarioDimensions: {}, isDimensionsFetching: false };
 }
 
 /**