diff --git a/client/src/components/Coloring/ColorSelector.vue b/client/src/components/Coloring/ColorSelector.vue
index 3f1a52e..2139dbe 100644
--- a/client/src/components/Coloring/ColorSelector.vue
+++ b/client/src/components/Coloring/ColorSelector.vue
@@ -126,6 +126,17 @@ export default defineComponent({
             && layer.default_style.layers[props.layerType] !== true
           ) {
             (layer.default_style.layers[props.layerType] as VectorLayerDisplayConfig).color = '#888888';
+            (layer.default_style.layers[props.layerType] as VectorLayerDisplayConfig).legend = false;
+          }
+        }
+      } else {
+        const { layer } = getVectorLayerDisplayConfig(props.layerId, props.layerType);
+        if (layer?.default_style?.layers && layer.default_style.layers[props.layerType]) {
+          if (
+            layer.default_style.layers[props.layerType] !== false
+            && layer.default_style.layers[props.layerType] !== true
+          ) {
+            (layer.default_style.layers[props.layerType] as VectorLayerDisplayConfig).legend = true;
           }
         }
       }
diff --git a/client/src/components/DataSelection/Datasets.vue b/client/src/components/DataSelection/Datasets.vue
index 30523ba..f6c2224 100644
--- a/client/src/components/DataSelection/Datasets.vue
+++ b/client/src/components/DataSelection/Datasets.vue
@@ -107,7 +107,6 @@ export default defineComponent({
     return {
       datasets: filteredDatasets,
       layersByDataset: MapStore.mapLayersByDataset,
-      selectedLayers: MapStore.selectedMapLayers,
       toggleLayerSelection,
       loadDataset,
       updateNetCDFLayer,
diff --git a/client/src/components/DataSelection/NetCDFDataConfigurator.vue b/client/src/components/DataSelection/NetCDFDataConfigurator.vue
index 00cf1bd..ce8ebb8 100644
--- a/client/src/components/DataSelection/NetCDFDataConfigurator.vue
+++ b/client/src/components/DataSelection/NetCDFDataConfigurator.vue
@@ -91,6 +91,9 @@ export default defineComponent({
       const data = getVariableInformation(variable);
       if (data) {
         if (data.geospatial === 'longitude360') {
+          if (data.attributes.units === 'degrees_east') {
+            return [-1 * convert360Longitude(data.max), -1 * convert360Longitude(data.min)];
+          }
           return [convert360Longitude(data.min), convert360Longitude(data.max)];
         }
         return [data.min, data.max];
@@ -106,7 +109,11 @@ export default defineComponent({
         const dataX = getVariableInformation(newLayerX.value);
         let xRange = [dataX.min, dataX.max];
         if (dataX.geospatial === 'longitude360') {
-          xRange = [convert360Longitude(dataX.min), convert360Longitude(dataX.max)];
+          if (dataX.attributes.units === 'degrees_east') {
+            xRange = [-1 * convert360Longitude(dataX.max), -1 * convert360Longitude(dataX.min)];
+          } else {
+            xRange = [convert360Longitude(dataX.min), convert360Longitude(dataX.max)];
+          }
         }
         const dataY = getVariableInformation(newLayerY.value);
         const yRange = [dataY.min, dataY.max];
@@ -142,7 +149,11 @@ export default defineComponent({
         const dataX = getVariableInformation(newLayerX.value);
         let xRange = [dataX.min, dataX.max];
         if (dataX.geospatial === 'longitude360') {
-          xRange = [convert360Longitude(dataX.min), convert360Longitude(dataX.max)];
+          if (dataX.attributes.units === 'degrees_east') {
+            xRange = [-1 * convert360Longitude(dataX.max), -1 * convert360Longitude(dataX.min)];
+          } else {
+            xRange = [convert360Longitude(dataX.min), convert360Longitude(dataX.max)];
+          }
         }
         const dataY = getVariableInformation(newLayerY.value);
 
@@ -168,7 +179,11 @@ export default defineComponent({
       xLayerRange.value = [data.min, data.max];
       xLayerRangeStep.value = (data.max - data.min) / (data.steps || 1);
       if (data.geospatial === 'longitude360') {
-        xLayerRange.value = [convert360Longitude(data.min), convert360Longitude(data.max)];
+        if (data.attributes.units === 'degrees_east') {
+          xLayerRange.value = [-1 * convert360Longitude(data.max), -1 * convert360Longitude(data.min)];
+        } else {
+          xLayerRange.value = [convert360Longitude(data.min), convert360Longitude(data.max)];
+        }
         xLayerRangeStep.value = (xLayerRange.value[1] - xLayerRange.value[0]) / (data.steps || 1);
       }
     });
diff --git a/client/src/components/LayerTypeConfig.vue b/client/src/components/LayerTypeConfig.vue
index a447124..4db6e1e 100644
--- a/client/src/components/LayerTypeConfig.vue
+++ b/client/src/components/LayerTypeConfig.vue
@@ -54,11 +54,12 @@ export default defineComponent({
       return enabled;
     });
 
-    type LayerActionItems = 'enabled' | 'selectable' | 'hoverable' | 'opacity' | 'zoomMinMax' | 'selectColor' | 'defaultSize' | 'color' | 'text' | 'heatmapControls';
+    type LayerActionItems = 'enabled' | 'selectable' | 'hoverable' | 'opacity' | 'zoomMinMax' | 'selectColor' | 'defaultSize' | 'legend' | 'color' | 'text' | 'heatmapControls';
     const layerActionItemsMap: Record<LayerActionItems, AnnotationTypes[]> = {
       enabled: ['line', 'fill', 'circle', 'fill-extrusion', 'text', 'heatmap'],
       selectable: ['line', 'fill', 'circle', 'fill-extrusion'],
       hoverable: ['line', 'fill', 'circle', 'fill-extrusion'],
+      legend: ['line', 'fill', 'circle', 'fill-extrusion', 'heatmap'],
       opacity: ['line', 'fill', 'circle', 'fill-extrusion', 'text', 'heatmap'],
       zoomMinMax: ['line', 'fill', 'circle', 'fill-extrusion', 'text', 'heatmap'],
       selectColor: ['line', 'fill', 'circle', 'fill-extrusion'],
@@ -70,7 +71,7 @@ export default defineComponent({
 
     const actionItemVisible = computed(() => {
       const enabledItems = new Set<LayerActionItems>();
-      const itemList: LayerActionItems[] = ['enabled', 'selectable', 'hoverable', 'opacity', 'zoomMinMax', 'selectColor', 'defaultSize', 'color', 'text', 'heatmapControls'];
+      const itemList: LayerActionItems[] = ['enabled', 'selectable', 'hoverable', 'legend', 'opacity', 'zoomMinMax', 'selectColor', 'defaultSize', 'color', 'text', 'heatmapControls'];
       itemList.forEach((key) => {
         if (layerActionItemsMap[key].includes(props.layerType)) {
           enabledItems.add(key);
@@ -98,6 +99,9 @@ export default defineComponent({
         if (field === 'hoverable') {
           displayConfig.hoverable = val;
         }
+        if (field === 'legend') {
+          displayConfig.legend = val;
+        }
         if (field === 'opacity') {
           if (val) {
             displayConfig.opacity = 0.75;
@@ -232,6 +236,11 @@ export default defineComponent({
           const foundColorIndex = found.default_style.savedColors.findIndex((item) => item.name === name);
           if (foundColorIndex !== -1) {
             currentLayerType.value.color = found.default_style.savedColors[foundColorIndex].color;
+            if (typeof (currentLayerType.value.color) !== 'string' && currentLayerType.value.color?.type) {
+              updateLayerTypeField('legend', true);
+            } else {
+              updateLayerTypeField('legend', true);
+            }
             updateLayer(found);
           }
           colorSaveChooser.value = false;
@@ -239,6 +248,36 @@ export default defineComponent({
         }
       }
     };
+
+    // Static color setting:
+    const getLayerConfigColor = () => {
+      const found = MapStore.selectedVectorMapLayers.value.find((item: VectorMapLayer) => item.id === props.layerId);
+      if (found?.default_style?.layers) {
+        const layerTypeVal = found?.default_style?.layers[props.layerType];
+        if (layerTypeVal !== false && layerTypeVal !== true) {
+          if (layerTypeVal.color === undefined) {
+            layerTypeVal.color = '#00FF00';
+          }
+          return layerTypeVal.color;
+        }
+      }
+      return '#00FF00';
+    };
+    const baseColorConfig = computed(() => getLayerConfigColor());
+
+    const updateStaticColor = (color: string) => {
+      const { layer } = getVectorLayerDisplayConfig(props.layerId, props.layerType);
+      if (layer?.default_style?.layers && layer.default_style.layers[props.layerType]) {
+        if (
+          layer.default_style.layers[props.layerType] !== false
+          && layer.default_style.layers[props.layerType] !== true
+        ) {
+          (layer.default_style.layers[props.layerType] as VectorLayerDisplayConfig).color = color;
+          updateLayer(layer);
+        }
+      }
+    };
+
     return {
       currentLayerType,
       colorPickerVisible,
@@ -259,6 +298,8 @@ export default defineComponent({
       updateOpacity,
       updateZoom,
       actionItemVisible,
+      baseColorConfig,
+      updateStaticColor,
     };
   },
 });
@@ -294,6 +335,43 @@ export default defineComponent({
       <span class="pl-2">Enabled</span>
     </v-col>
   </v-row>
+  <v-row
+    v-if="actionItemVisible.has('opacity')"
+    dense
+    align="center"
+    justify="center"
+  >
+    <v-col cols="2">
+      <v-tooltip text="Opacity">
+        <template #activator="{ props }">
+          <v-icon
+            class="pl-3"
+            v-bind="props"
+          >
+            mdi-square-opacity
+          </v-icon>
+        </template>
+      </v-tooltip>
+    </v-col>
+    <v-col :cols="!valueDisplayCheckbox('opacity') ? '' : 3">
+      <v-icon @click="updateLayerTypeField('opacity', !valueDisplayCheckbox('opacity'))">
+        {{
+          valueDisplayCheckbox('opacity') ? 'mdi-checkbox-marked' : 'mdi-checkbox-blank-outline' }}
+      </v-icon>
+      <span v-if="!valueDisplayCheckbox('opacity')" class="pl-2">Opacity</span>
+      <span v-else class="pl-2" style="font-size:0.85em">{{ currentLayerType.opacity.toFixed(2) }}</span>
+    </v-col>
+    <v-col v-if="valueDisplayCheckbox('opacity') && currentLayerType && currentLayerType.opacity !== undefined">
+      <v-slider
+        density="compact"
+        class="opacity-slider"
+        min="0"
+        max="1.0"
+        :model-value="currentLayerType.opacity"
+        @update:model-value="updateOpacity($event)"
+      />
+    </v-col>
+  </v-row>
   <v-row
     v-if="actionItemVisible.has('selectable')"
     dense
@@ -345,7 +423,7 @@ export default defineComponent({
         </template>
       </v-tooltip>
     </v-col>
-    <v-col cols="8">
+    <v-col>
       <v-icon @click="updateLayerTypeField('selectColor', !valueDisplayCheckbox('selectColor'))">
         {{
           valueDisplayCheckbox('selectColor') ? 'mdi-checkbox-marked' : 'mdi-checkbox-blank-outline' }}
@@ -401,79 +479,68 @@ export default defineComponent({
     </v-col>
   </v-row>
   <v-row
-    v-if="actionItemVisible.has('opacity')"
+    v-if="actionItemVisible.has('zoomMinMax')"
     dense
     align="center"
     justify="center"
   >
     <v-col cols="2">
-      <v-tooltip text="Opacity">
+      <v-tooltip text="Zoom Min and Zoom max for displaying Feature Type">
         <template #activator="{ props }">
           <v-icon
             class="pl-3"
             v-bind="props"
           >
-            mdi-square-opacity
+            mdi-magnify
           </v-icon>
         </template>
       </v-tooltip>
     </v-col>
-    <v-col :cols="!valueDisplayCheckbox('opacity') ? '' : 3">
-      <v-icon @click="updateLayerTypeField('opacity', !valueDisplayCheckbox('opacity'))">
+    <v-col>
+      <v-icon @click="updateLayerTypeField('zoom', !valueDisplayCheckbox('zoom'))">
         {{
-          valueDisplayCheckbox('opacity') ? 'mdi-checkbox-marked' : 'mdi-checkbox-blank-outline' }}
+          valueDisplayCheckbox('zoom') ? 'mdi-checkbox-marked' : 'mdi-checkbox-blank-outline' }}
       </v-icon>
-      <span v-if="!valueDisplayCheckbox('opacity')" class="pl-2">Opacity</span>
-      <span v-else class="pl-2" style="font-size:0.85em">{{ currentLayerType.opacity.toFixed(2) }}</span>
+      <span class="pl-2">Zoom Min/Max</span>
     </v-col>
-    <v-col v-if="valueDisplayCheckbox('opacity') && currentLayerType && currentLayerType.opacity !== undefined">
-      <v-slider
+    <v-col v-if="valueDisplayCheckbox('zoom') && currentLayerType && currentLayerType.zoom !== undefined">
+      <v-range-slider
         density="compact"
-        class="opacity-slider"
+        step="1"
+        height="1"
+        thumb-size="5"
+        thumb-label="always"
         min="0"
-        max="1.0"
-        :model-value="currentLayerType.opacity"
-        @update:model-value="updateOpacity($event)"
+        max="24"
+        :model-value="[currentLayerType.zoom.min || 0, currentLayerType.zoom.max || 24]"
+        @update:model-value="updateZoom($event)"
       />
     </v-col>
   </v-row>
   <v-row
-    v-if="actionItemVisible.has('zoomMinMax')"
+    v-if="actionItemVisible.has('legend')"
     dense
     align="center"
     justify="center"
   >
     <v-col cols="2">
-      <v-tooltip text="Zoom Min and Zoom max for displaying Feature Type">
+      <v-tooltip text="Display Legend">
         <template #activator="{ props }">
           <v-icon
             class="pl-3"
             v-bind="props"
           >
-            mdi-magnify
+            mdi-map-legend
           </v-icon>
         </template>
       </v-tooltip>
     </v-col>
     <v-col>
-      <v-icon @click="updateLayerTypeField('zoom', !valueDisplayCheckbox('zoom'))">
+      <v-icon @click="updateLayerTypeField('legend', !valueDisplayCheckbox('legend'))">
         {{
-          valueDisplayCheckbox('zoom') ? 'mdi-checkbox-marked' : 'mdi-checkbox-blank-outline' }}
+          valueDisplayCheckbox('legend') ? 'mdi-checkbox-marked' : 'mdi-checkbox-blank-outline' }}
       </v-icon>
-      <span class="pl-2">Zoom Min/Max</span>
-    </v-col>
-    <v-col v-if="valueDisplayCheckbox('zoom') && currentLayerType && currentLayerType.zoom !== undefined">
-      <v-range-slider
-        density="compact"
-        step="1"
-        height="1"
-        thumb-size="5"
-        thumb-label="always"
-        min="0"
-        max="24"
-        :model-value="[currentLayerType.zoom.min || 0, currentLayerType.zoom.max || 24]"
-        @update:model-value="updateZoom($event)"
-      />
+      <span class="pl-2">Legend</span>
     </v-col>
   </v-row>
   <v-row
@@ -508,7 +575,28 @@ export default defineComponent({
       </v-tooltip>
     </v-col>
     <v-col cols="6">
-      <span style="font-size: 0.75em"> {{ getColorType() }}</span>
+      <v-row dense>
+        <span style="font-size: 0.75em"> {{ getColorType() }}</span>
+        <span v-if="getColorType() === 'Static Color'" class="ml-2">
+          <v-menu
+            :close-on-content-click="false"
+            offset-y
+          >
+            <template #activator="{ props }">
+              <div
+                class="color-square"
+                :style="{ backgroundColor: baseColorConfig }"
+                v-bind="props"
+              />
+            </template>
+            <v-color-picker
+              mode="hex"
+              :model-value="baseColorConfig"
+              @update:model-value="updateStaticColor($event)"
+            />
+          </v-menu>
+        </span>
+      </v-row>
     </v-col>
     <v-col>
       <v-tooltip text="Edit Color Display">
diff --git a/client/src/components/MapLegend.vue b/client/src/components/MapLegend.vue
index ed49c9b..0c899e1 100644
--- a/client/src/components/MapLegend.vue
+++ b/client/src/components/MapLegend.vue
@@ -3,18 +3,31 @@ import {
   Ref, computed, defineComponent, ref,
 } from 'vue';
 import MapStore from '../MapStore';
-import ColorKey from './ColorKey.vue';
-import FilterKey from './FilterKey.vue';
+import ColorKey from './MapLegends/ColorKey.vue';
+import FilterKey from './MapLegends/FilterKey.vue';
+import OpacityFilter from './MapLegends/ControlsKey.vue';
 
 export default defineComponent({
   components: {
     ColorKey,
     FilterKey,
+    OpacityFilter,
   },
   props: {
   },
   setup() {
-    const selectedNetCDFMapLayers = computed(() => MapStore.selectedNetCDFMapLayers.value);
+    const selectedNetCDFMapLayers = computed(
+      () => MapStore.selectedNetCDFMapLayers.value.filter(
+        (layer) => MapStore.visibleMapLayers.value.has(`${layer.type}_${layer.id}`),
+      ),
+    );
+
+    const selectedRasterMapLayers = computed(
+      () => MapStore.selectedRasterMapLayers.value.filter(
+        (layer) => MapStore.visibleMapLayers.value.has(`${layer.type}_${layer.id}`),
+      ),
+    );
+
     const selectedVectorMapLayers = computed(
       () => MapStore.selectedVectorMapLayers.value.filter(
         (layer) => MapStore.visibleMapLayers.value.has(`${layer.type}_${layer.id}`),
@@ -29,10 +42,11 @@ export default defineComponent({
       });
       return exists;
     });
-    const tab: Ref<'colors' | 'filters'> = ref('colors');
+    const tab: Ref<'colors' | 'opacity' | 'filters'> = ref('opacity');
     return {
       selectedVectorMapLayers,
       selectedNetCDFMapLayers,
+      selectedRasterMapLayers,
       tab,
       hasFilters,
     };
@@ -42,8 +56,8 @@ export default defineComponent({
 
 <template>
   <v-card
-    v-if="selectedVectorMapLayers.length || selectedNetCDFMapLayers.length"
-    width="350"
+    v-if="selectedVectorMapLayers.length || selectedNetCDFMapLayers.length || selectedRasterMapLayers.length"
+    width="375"
   >
     <v-card-title>
       <v-row class="pb-2">
@@ -52,6 +66,9 @@ export default defineComponent({
           v-model="tab"
           density="compact"
         >
+          <v-tab value="opacity">
+            Controls
+          </v-tab>
           <v-tab value="colors">
             Colors
           </v-tab>
@@ -67,6 +84,13 @@ export default defineComponent({
         v-if="tab === 'colors'"
         :vector-layers="selectedVectorMapLayers"
         :netcdf-layers="selectedNetCDFMapLayers"
+        :raster-layers="selectedRasterMapLayers"
+      />
+      <OpacityFilter
+        v-if="tab === 'opacity'"
+        :vector-layers="selectedVectorMapLayers"
+        :netcdf-layers="selectedNetCDFMapLayers"
+        :raster-layers="selectedRasterMapLayers"
       />
       <filter-key
         v-if="tab === 'filters'"
diff --git a/client/src/components/ColorKey.vue b/client/src/components/MapLegends/ColorKey.vue
similarity index 62%
rename from client/src/components/ColorKey.vue
rename to client/src/components/MapLegends/ColorKey.vue
index e10fffa..41e2bdc 100644
--- a/client/src/components/ColorKey.vue
+++ b/client/src/components/MapLegends/ColorKey.vue
@@ -1,6 +1,7 @@
+<!-- eslint-disable vue/max-len -->
 <script lang="ts">
 import {
-  computed, defineComponent, nextTick, watch,
+  Ref, computed, defineComponent, nextTick, ref, watch,
 } from 'vue';
 import * as d3 from 'd3';
 import {
@@ -12,11 +13,13 @@ import {
   KeyProcessedLayer,
   KeyProcessedType,
   NetCDFLayer,
+  RasterMapLayer,
   VectorLayerDisplay,
   VectorLayerDisplayConfig,
   VectorMapLayer,
-} from '../types'; // Import your defined types
-import { createColorNumberPairs, formatNumPrecision, getLayerAvailableProperties } from '../utils';
+} from '../../types'; // Import your defined types
+import { createColorNumberPairs, formatNumPrecision, getLayerAvailableProperties } from '../../utils';
+import MapStore from '../../MapStore';
 
 export default defineComponent({
   name: 'ColorKey',
@@ -29,9 +32,22 @@ export default defineComponent({
       type: Array as () => NetCDFLayer[],
       required: true,
     },
+    rasterLayers: {
+      type: Array as () => RasterMapLayer[],
+      required: true,
+    },
   },
   setup(props) {
     // Process the layers and colors
+
+    const iconMapper: Ref<Record<string, string>> = ref({
+      line: 'mdi-vector-line',
+      fill: 'mdi-pentagon',
+      circle: 'mdi-circle-outline',
+      'fill-extrusion': 'mdi-domain',
+      text: 'mdi-format-title',
+      heatmap: 'mdi-heat-wave',
+    });
     const attributeValues = computed(() => {
       const attributeMapping: Record<number, Record<string, AvailablePropertyDisplay>> = {};
       props.vectorLayers.forEach((layer) => {
@@ -52,6 +68,7 @@ export default defineComponent({
       props.vectorLayers.forEach((layer) => {
         const tempProcessLayer: KeyProcessedLayer = {
           id: layer.id,
+          type: layer.type,
           name: layer.name,
           keyTypes: [],
         };
@@ -71,7 +88,7 @@ export default defineComponent({
           };
           const layerDisplayConfig = layerDisplay as VectorLayerDisplayConfig;
 
-          if (layerDisplayConfig?.color && layerDisplayConfig.enabled) {
+          if (layerDisplayConfig?.color && layerDisplayConfig.enabled && layerDisplayConfig.legend) {
             if (type !== 'heatmap') {
               if (typeof layerDisplayConfig.color === 'string') {
                 keyType.colors.push({
@@ -130,6 +147,7 @@ export default defineComponent({
       props.netcdfLayers.forEach((layer) => {
         const tempProcessLayer: KeyProcessedLayer = {
           id: layer.id,
+          type: layer.type,
           name: layer.name,
           keyTypes: [],
         };
@@ -152,19 +170,69 @@ export default defineComponent({
         });
         tempProcessLayers.push(tempProcessLayer);
       });
+
+      // Raster Layer Computed:
+      props.rasterLayers.forEach((layer) => {
+        const bands = layer.default_style?.largeImageStyle?.bands || [];
+        const minMaxMapper = layer.default_style?.largeImageStyle?.minMaxMapper || {};
+        const tempProcessLayer: KeyProcessedLayer = {
+          id: layer.id,
+          type: layer.type,
+          name: layer.name,
+          keyTypes: [],
+        };
+        bands.forEach((band, bandIndex) => {
+          if (band.enabled && Array.isArray(band.palette) && band.palette.length) {
+            const bandMinMax = minMaxMapper[bandIndex + 1] || { min: 0, max: 1 };
+            const { min, max } = bandMinMax;
+            const bandPaletteLength = Array.isArray(band.palette) ? band.palette.length : 1;
+            const colorType = band.scheme === 'linear' || band.scheme === undefined ? 'linear-raster' : 'categorical-raster';
+            if (colorType === 'linear-raster') {
+              tempProcessLayer.keyTypes.push({
+                type: `raster-band-${bandIndex + 1}`,
+                colors: [{
+                  type: colorType,
+                  colors: band.palette.map((item, index) => ({ value: min + index * ((max - min) / bandPaletteLength), color: item })),
+                  name: `gradientImage-${layer.id}-raster-band-${bandIndex + 1}`,
+                  min,
+                  max,
+                  value: `Band ${bandIndex}`,
+                } as { type: 'linear-raster'; colors: ColorLinearNumber['numberColorPairs'], name: string, min: number, max: number, value: string }],
+              });
+            } else if (colorType === 'categorical-raster') {
+              tempProcessLayer.keyTypes.push({
+                type: 'raster-band',
+                colors: [{
+                  type: colorType,
+                  pairs: band.palette.map((item, index) => ({ value: min + index * ((max - min) / bandPaletteLength), color: item })),
+                  value: `Band ${bandIndex}`,
+                } as { name: string, type: 'categorical-raster'; pairs: { value: number | string; color: string }[], value:string }],
+              });
+            }
+          }
+        });
+        tempProcessLayers.push(tempProcessLayer);
+      });
+      // Sort the layers in the based on the layer order
+      const orderMap = new Map(MapStore.selectedMapLayers.value.map((item, index) => [item.id, index]));
+      tempProcessLayers.sort((a, b) => {
+        const indexA = orderMap.get(a.id) ?? Infinity;
+        const indexB = orderMap.get(b.id) ?? Infinity;
+        return indexA - indexB;
+      });
       return tempProcessLayers;
     });
 
     const linearGradients = computed(() => {
       const linearGradientsList: {
-        type: 'linear' | 'heatmap' | 'linearNetCDF';
+        type: 'linear' | 'heatmap' | 'linearNetCDF' | 'linear-raster';
         colors: ColorLinearNumber['numberColorPairs'];
         name: string;
       }[] = [];
       processedLayers.value.forEach((processedLayer) => {
         processedLayer.keyTypes.forEach((keyType) => {
           keyType.colors.forEach((color) => {
-            if (color.type === 'linear' || color.type === 'heatmap' || color.type === 'linearNetCDF') {
+            if (color.type === 'linear' || color.type === 'heatmap' || color.type === 'linearNetCDF' || color.type === 'linear-raster') {
               linearGradientsList.push(color);
             }
           });
@@ -233,7 +301,17 @@ export default defineComponent({
     };
 
     const capitalize = (s: string) => (s.length > 0 ? `${s[0].toLocaleUpperCase()}${s.slice(1)}` : s);
-
+    const expandedPanels: Ref<number[]> = ref([]);
+    watch(processedLayers, () => {
+      const opened: number[] = [];
+      processedLayers.value.forEach((item, index) => {
+        if (item.keyTypes.length === 1) {
+          opened.push(index);
+        }
+      });
+      expandedPanels.value = opened;
+      setTimeout(() => drawGradients(), 100);
+    }, { immediate: true });
     return {
       capitalize,
       processedLayers,
@@ -241,6 +319,8 @@ export default defineComponent({
       drawGradients,
       formatNumPrecision,
       drawDelay,
+      iconMapper,
+      expandedPanels,
     };
   },
 });
@@ -248,7 +328,9 @@ export default defineComponent({
 
 <template>
   <v-expansion-panels
-    :model-value="[0]"
+    v-model="expandedPanels"
+    multiple
+    @update:model-value="drawDelay()"
   >
     <v-expansion-panel
       v-for="layer in processedLayers"
@@ -285,6 +367,114 @@ export default defineComponent({
               />
             </v-col>
           </v-row>
+          <div v-else-if="layer.keyTypes.length === 1">
+            <span
+              v-for="(colorConfig, index) in keyType.colors"
+              :key="`${layer.id}_${keyType.type}_${index}`"
+            >
+              <v-row class="pb-2">
+                <v-spacer />
+                <b v-if="colorConfig.type === 'linearNetCDF'">{{ capitalize(colorConfig.value) }}</b>
+                <b v-else-if="['categorical', 'linear'].includes(colorConfig.type)">
+                  {{ attributeValues[layer.id][colorConfig.attribute].displayName }}
+                </b>
+                <v-spacer />
+              </v-row>
+              <div v-if="colorConfig.type === 'categorical'">
+                <v-row
+                  v-for="pair in colorConfig.pairs"
+                  :key="pair.value"
+                  dense
+                  no-gutters
+                  class="py-1"
+                  align="center"
+                  justify="center"
+                >
+                  <v-col>
+                    <span>{{ pair.value }}: </span>
+                  </v-col>
+                  <v-col cols="1">
+                    <div
+                      class="color-icon"
+                      :style="{ backgroundColor: pair.color }"
+                    />
+                  </v-col>
+                </v-row>
+              </div>
+              <div v-else-if="colorConfig.type === 'linear'">
+                <v-row
+                  dense
+                  no-gutters
+                  class="py-1"
+                  align="center"
+                  justify="center"
+                >
+                  <v-col cols="3">
+                    <span>{{ formatNumPrecision((attributeValues[layer.id][colorConfig.attribute].min || 0)) }}</span>
+                  </v-col>
+                  <v-col
+                    class="d-flex justify-center align-center"
+                  >
+                    <svg
+                      :id="`gradientImage-${layer.id}-${keyType.type}`"
+                      width="125"
+                      height="20"
+                    />
+                  </v-col>
+                  <v-col cols="3">
+                    <span>{{ formatNumPrecision((attributeValues[layer.id][colorConfig.attribute].max || 100)) }}</span>
+                  </v-col>
+                </v-row>
+              </div>
+              <div v-else-if="colorConfig.type === 'heatmap'">
+                <v-row
+                  dense
+                  no-gutters
+                  class="py-1"
+                  align="center"
+                  justify="center"
+                >
+                  <v-spacer />
+                  <v-col
+                    class="d-flex justify-center align-center"
+                  >
+                    <svg
+                      :id="`gradientImage-${layer.id}-${keyType.type}`"
+                      width="125"
+                      height="20"
+                    />
+                  </v-col>
+                  <v-spacer />
+                </v-row>
+              </div>
+              <div v-else-if="colorConfig.type === 'linearNetCDF' || colorConfig.type === 'linear-raster'">
+                <v-row
+                  dense
+                  no-gutters
+                  class="py-1"
+                  align="center"
+                  justify="center"
+                >
+                  <v-col cols="3">
+                    <span>{{ formatNumPrecision((colorConfig.min || 0)) }}</span>
+                  </v-col>
+                  <v-col
+                    align
+                    class="d-flex justify-center align-center"
+                  >
+                    <svg
+                      :id="`gradientImage-${layer.id}-${keyType.type}`"
+                      width="125"
+                      height="20"
+                    />
+                  </v-col>
+                  <v-col cols="3">
+                    <span>{{ formatNumPrecision((colorConfig.max || 100)) }}</span>
+                  </v-col>
+                </v-row>
+              </div>
+            </span>
+          </div>
           <div v-else>
             <v-expansion-panels
               @update:model-value="drawDelay()"
@@ -294,7 +484,7 @@ export default defineComponent({
                 :key="`${layer.id}_${keyType.type}_${index}`"
               >
                 <v-expansion-panel-title style="font-size:0.75em">
-                  <span v-if="keyType.type !== 'netCDF'">{{ capitalize(keyType.type) }}</span>
+                  <span v-if="!['netCDF', 'raster'].includes(keyType.type)"><v-icon v-if="iconMapper[keyType.type]" class="pr-2"> {{ iconMapper[keyType.type] }}</v-icon>{{ capitalize(keyType.type) }}</span>
                   <span v-else-if="colorConfig.type === 'linearNetCDF'">{{ capitalize(colorConfig.value) }}</span>
                   <span v-if="['categorical', 'linear'].includes(colorConfig.type)">:
                     {{ attributeValues[layer.id][colorConfig.attribute].displayName }}
@@ -338,7 +528,9 @@ export default defineComponent({
                       <v-col cols="2">
                         <span>{{ formatNumPrecision((attributeValues[layer.id][colorConfig.attribute].min || 0)) }}</span>
                       </v-col>
-                      <v-col>
+                      <v-col
+                        class="d-flex justify-center align-center"
+                      >
                         <svg
                           :id="`gradientImage-${layer.id}-${keyType.type}`"
                           width="125"
@@ -359,7 +551,9 @@ export default defineComponent({
                       justify="center"
                     >
                       <v-spacer />
-                      <v-col>
+                      <v-col
+                        class="d-flex justify-center align-center"
+                      >
                         <svg
                           :id="`gradientImage-${layer.id}-${keyType.type}`"
                           width="125"
@@ -369,7 +563,7 @@ export default defineComponent({
                       <v-spacer />
                     </v-row>
                   </div>
-                  <div v-else-if="colorConfig.type === 'linearNetCDF'">
+                  <div v-else-if="colorConfig.type === 'linearNetCDF' || colorConfig.type === 'linear-raster'">
                     <v-row
                       dense
                       no-gutters
diff --git a/client/src/components/MapLegends/ControlsKey.vue b/client/src/components/MapLegends/ControlsKey.vue
new file mode 100644
index 0000000..08d9601
--- /dev/null
+++ b/client/src/components/MapLegends/ControlsKey.vue
@@ -0,0 +1,297 @@
+<!-- eslint-disable vue/max-len -->
+<script lang="ts">
+import {
+  computed, defineComponent,
+} from 'vue';
+import { throttle } from 'lodash';
+import {
+  AnnotationTypes,
+  NetCDFLayer,
+  RasterMapLayer,
+  VectorLayerDisplay,
+  VectorLayerDisplayConfig,
+  VectorMapLayer,
+} from '../../types'; // Import your defined types
+import MapStore from '../../MapStore';
+import { updateNetCDFLayer, visibleNetCDFLayers } from '../../map/mapNetCDFLayer';
+import { getRasterLayerDisplayConfig, getVectorLayerDisplayConfig } from '../../utils';
+import { updateLayer } from '../../map/mapLayers';
+
+export default defineComponent({
+  name: 'ControlsKey',
+  props: {
+    vectorLayers: {
+      type: Array as () => VectorMapLayer[],
+      required: true,
+    },
+    netcdfLayers: {
+      type: Array as () => NetCDFLayer[],
+      required: true,
+    },
+    rasterLayers: {
+      type: Array as () => RasterMapLayer[],
+      required: true,
+    },
+  },
+  setup(props) {
+    // Process the layers and colors
+    const iconMapper = {
+      netcdf: 'mdi-grid',
+      vector: 'mdi-map-marker-outline',
+      raster: 'mdi-image-outline',
+    };
+    const annotationTypes: AnnotationTypes[] = [
+      'line',
+      'fill',
+      'circle',
+      'fill-extrusion',
+      'text',
+      'heatmap',
+    ];
+    const processedLayers = computed(() => {
+      const mapLayerOpacityMap: Record<string, number> = {};
+      props.vectorLayers.forEach((layer) => {
+        annotationTypes.forEach((type) => {
+          const layerDisplay: VectorLayerDisplay | undefined = layer.default_style?.layers && layer.default_style.layers[type];
+          if (
+            layerDisplay === undefined
+            || layerDisplay === true
+            || layerDisplay === false
+          ) {
+            return;
+          }
+          const layerDisplayConfig = layerDisplay as VectorLayerDisplayConfig;
+          if (layerDisplayConfig.enabled) {
+            if (layerDisplayConfig.opacity !== undefined && layerDisplayConfig.opacity < 1.0) {
+              mapLayerOpacityMap[`vector_${layer.id}`] = Math.min(layerDisplayConfig.opacity, (mapLayerOpacityMap[`vector_${layer.id}`] || Infinity));
+            } else {
+              mapLayerOpacityMap[`vector_${layer.id}`] = 1.0;
+            }
+          }
+        });
+      });
+      // Compute NetCDF Layer Keys
+      const stepIndexMap: Record<string, { length: number, currentIndex: number }> = {};
+      visibleNetCDFLayers.value.forEach((item) => {
+        const found = props.netcdfLayers.find((layer) => layer.id === item.netCDFLayer);
+        if (found) {
+          const { opacity } = item;
+          mapLayerOpacityMap[`netcdf_${found.id}`] = opacity !== undefined ? opacity : 1.0;
+          stepIndexMap[`netcdf_${found.id}`] = {
+            length: item.images.length,
+            currentIndex: item.currentIndex,
+          };
+        }
+      });
+
+      props.rasterLayers.forEach((layer) => {
+        mapLayerOpacityMap[`raster_${layer.id}`] = layer?.default_style?.opacity !== undefined ? layer.default_style.opacity : 1.0;
+      });
+      const order: { id: number, opacity: number, name: string, type: 'netcdf' | 'vector' | 'raster', length?: number, currentIndex?: number } [] = [];
+      MapStore.selectedMapLayers.value.forEach((layer) => {
+        if (layer.type === 'netcdf') {
+          if (mapLayerOpacityMap[`netcdf_${layer.id}`] !== undefined) {
+            let length: undefined | number;
+            let currentIndex: undefined | number;
+            if (stepIndexMap[`netcdf_${layer.id}`]) {
+              const data = stepIndexMap[`netcdf_${layer.id}`];
+              length = data.length;
+              currentIndex = data.currentIndex;
+            }
+            order.push({
+              id: layer.id, opacity: mapLayerOpacityMap[`netcdf_${layer.id}`], name: layer.name, type: layer.type, length, currentIndex,
+            });
+          }
+        } else if (layer.type === 'raster') {
+          if (mapLayerOpacityMap[`raster_${layer.id}`] !== undefined) {
+            order.push({
+              id: layer.id, opacity: mapLayerOpacityMap[`raster_${layer.id}`], name: layer.name, type: layer.type,
+            });
+          }
+        } else if (layer.type === 'vector') {
+          if (mapLayerOpacityMap[`vector_${layer.id}`] !== undefined) {
+            order.push({
+              id: layer.id, opacity: mapLayerOpacityMap[`vector_${layer.id}`], name: layer.name, type: layer.type,
+            });
+          }
+        }
+      });
+      return order;
+    });
+
+    const stepMapping = computed(() => {
+      const mappedStepMapping: Record<string, Record<number, string | number>> = {};
+      visibleNetCDFLayers.value.forEach((item) => {
+        const foundLayer = props.netcdfLayers.find((layer) => layer.id === item.netCDFLayer);
+        mappedStepMapping[`netcdf_${foundLayer?.id}`] = {};
+        const mapSlicer: Record<number, string | number> = {};
+        let unixTimeStamp = true;
+        if (item?.sliding) {
+          for (let i = 0; i < item.images.length; i += 1) {
+            mapSlicer[i] = item.sliding.min + i * item.sliding.step;
+            if (item.sliding.variable === 'time') {
+              // convert unix timestamp to human readable date YYYY-MM-DD
+              try {
+                const date = new Date((mapSlicer[i] as number) * 1000);
+                // eslint-disable-next-line prefer-destructuring
+                mapSlicer[i] = date.toISOString().split('T')[0];
+              } catch (e) {
+                unixTimeStamp = false;
+                break;
+              }
+            }
+          }
+          if (unixTimeStamp) {
+            mappedStepMapping[`netcdf_${foundLayer?.id}`] = mapSlicer;
+          }
+        } else {
+          for (let i = 0; i < item.images.length; i += 1) {
+            mapSlicer[i] = i;
+          }
+          mappedStepMapping[`netcdf_${foundLayer?.id}`] = mapSlicer;
+        }
+      });
+      return mappedStepMapping;
+    });
+
+    const updateIndex = (layerId: number, currentIndex: number) => {
+      updateNetCDFLayer(layerId, currentIndex);
+    };
+    const throttledUpdateNetCDFLayer = throttle(updateIndex, 50);
+
+    const updateOpacity = (item: { id: number, opacity: number, name: string, type: 'netcdf' | 'vector' | 'raster' }, val: number) => {
+      if (item.type === 'vector') {
+        annotationTypes.forEach((annotationType) => {
+          const { layer, displayConfig } = getVectorLayerDisplayConfig(item.id, annotationType);
+          if (displayConfig !== false && displayConfig !== true && displayConfig?.enabled) {
+            displayConfig.opacity = val;
+            if (layer) {
+              updateLayer(layer);
+            }
+          }
+        });
+      }
+      if (item.type === 'netcdf') {
+        const found = visibleNetCDFLayers.value.find((layer) => item.id === layer.netCDFLayer);
+        if (found) {
+          found.opacity = val;
+          updateNetCDFLayer(item.id, undefined, val);
+        }
+      }
+      if (item.type === 'raster') {
+        const { layer, displayConfig } = getRasterLayerDisplayConfig(
+          item.id,
+        );
+        if (displayConfig) {
+          displayConfig.opacity = val;
+          if (layer) {
+            updateLayer(layer);
+          }
+        }
+      }
+    };
+    return {
+      processedLayers,
+      iconMapper,
+      updateOpacity,
+      throttledUpdateNetCDFLayer,
+      stepMapping,
+    };
+  },
+});
+</script>
+
+<template>
+  <v-card
+    v-for="(item, index) in processedLayers"
+    :key="`opacity_${index}`"
+    class="mb-2 rounded-lg shadow-sm"
+    elevation="2"
+    density="compact"
+  >
+    <v-card-text class="py-1 px-2">
+      <span class="py-1 px-2 d-flex align-center">
+        <v-icon size="16" class="mr-1" color="primary">
+          {{ iconMapper[item.type] }}
+        </v-icon>
+        <span class="text-sm">{{ item.name }}</span>
+      </span>
+
+      <v-row align="center" no-gutters>
+        <v-col cols="1">
+          <v-tooltip text="Opacity">
+            <template #activator="{ props }">
+              <v-icon
+                class="pl-3"
+                v-bind="props"
+                color="primary"
+              >
+                mdi-square-opacity
+              </v-icon>
+            </template>
+          </v-tooltip>
+        </v-col>
+        <v-col cols="8">
+          <v-slider
+            :model-value="item.opacity"
+            min="0"
+            max="1"
+            step="0.01"
+            hide-details
+            thumb-size="12"
+            track-size="4"
+            color="primary"
+            track-color="grey lighten-3"
+            density="compact"
+            @update:model-value="updateOpacity(item, $event)"
+          />
+        </v-col>
+        <v-col
+          cols="3"
+          class="text-right pr-1"
+        >
+          <span class="text-xs">{{ Math.round(item.opacity * 100) }}%</span>
+        </v-col>
+      </v-row>
+      <v-row v-if="item.length !== undefined && item.currentIndex !== undefined" align="center" no-gutters>
+        <v-col cols="1">
+          <v-tooltip text="NetCDF Layer index">
+            <template #activator="{ props }">
+              <v-icon
+                class="pl-3"
+                v-bind="props"
+                color="primary"
+              >
+                mdi-timer-outline
+              </v-icon>
+            </template>
+          </v-tooltip>
+        </v-col>
+        <v-col cols="6">
+          <v-slider
+            :model-value="item.currentIndex"
+            min="0"
+            :max="item.length"
+            step="1"
+            hide-details
+            thumb-size="12"
+            track-size="4"
+            color="primary"
+            track-color="grey lighten-3"
+            density="compact"
+            @update:model-value="throttledUpdateNetCDFLayer(item.id, $event)"
+          />
+        </v-col>
+        <v-col
+          cols="5"
+          class="text-right pr-1"
+        >
+          <span class="text-xs">{{ stepMapping[`netcdf_${item.id}`][item.currentIndex] }}</span>
+        </v-col>
+      </v-row>
+    </v-card-text>
+  </v-card>
+</template>
+
+<style scoped>
+</style>
diff --git a/client/src/components/FilterKey.vue b/client/src/components/MapLegends/FilterKey.vue
similarity index 91%
rename from client/src/components/FilterKey.vue
rename to client/src/components/MapLegends/FilterKey.vue
index 277ec60..897ce7e 100644
--- a/client/src/components/FilterKey.vue
+++ b/client/src/components/MapLegends/FilterKey.vue
@@ -1,14 +1,14 @@
 <script lang="ts">
 import { computed, defineComponent } from 'vue';
-import MapStore from '../MapStore';
-import { updateLayerFilter } from '../map/mapVectorLayers';
+import MapStore from '../../MapStore';
+import { updateLayerFilter } from '../../map/mapVectorLayers';
 import {
   AvailablePropertyDisplay,
   Filter,
   VectorMapLayer,
-} from '../types'; // Import your defined types
-import { getLayerAvailableProperties } from '../utils';
-import FilteringInteraction from './Filtering/FilteringInteraction.vue';
+} from '../../types'; // Import your defined types
+import { getLayerAvailableProperties } from '../../utils';
+import FilteringInteraction from '../Filtering/FilteringInteraction.vue';
 
 export default defineComponent({
   name: 'FilterKey',
diff --git a/client/src/components/NetCDFLayerConfig.vue b/client/src/components/NetCDFLayerConfig.vue
index 52138da..88c1a52 100644
--- a/client/src/components/NetCDFLayerConfig.vue
+++ b/client/src/components/NetCDFLayerConfig.vue
@@ -19,16 +19,16 @@ export default defineComponent({
     const layerOpacity = ref(0);
     const currentIndex = ref(0);
     onMounted(() => {
-      const found = visibleNetCDFLayers.find((item) => item.netCDFLayer === props.layer.id);
+      const found = visibleNetCDFLayers.value.find((item) => item.netCDFLayer === props.layer.id);
       layerOpacity.value = found?.opacity || 0.75;
       currentIndex.value = found?.currentIndex || 0;
     });
     const totalIndex = computed(() => {
-      const found = visibleNetCDFLayers.find((item) => item.netCDFLayer === props.layer.id);
+      const found = visibleNetCDFLayers.value.find((item) => item.netCDFLayer === props.layer.id);
       return found?.images.length ? found.images.length - 1 : 0;
     });
     const stepMapping = computed(() => {
-      const found = visibleNetCDFLayers.find((item) => item.netCDFLayer === props.layer.id);
+      const found = visibleNetCDFLayers.value.find((item) => item.netCDFLayer === props.layer.id);
       const mapSlicer: Record<number, string | number> = {};
       let unixTimeStamp = true;
       if (found) {
@@ -99,15 +99,6 @@ export default defineComponent({
           </template>
         </v-tooltip>
       </v-col>
-      <v-col>
-        <v-icon>
-          mdi-checkbox-marked
-        </v-icon>
-        <span class="pl-2">
-          {{
-            stepMapping[currentIndex]
-          }}</span>
-      </v-col>
       <v-col>
         <v-slider
           v-model="currentIndex"
@@ -115,7 +106,15 @@ export default defineComponent({
           min="0"
           step="1"
           :max="totalIndex"
-        />
+          hide-details
+        >
+          <template #prepend>
+            <span class="pl-2">
+              {{
+                stepMapping[currentIndex]
+              }}</span>
+          </template>
+        </v-slider>
       </v-col>
     </v-row>
     <v-row
@@ -135,22 +134,21 @@ export default defineComponent({
           </template>
         </v-tooltip>
       </v-col>
-      <v-col>
-        <v-icon>
-          mdi-checkbox-marked
-        </v-icon>
-        <span class="pl-2">Opacity
-          {{
-            layerOpacity.toFixed(2)
-          }}</span>
-      </v-col>
       <v-col>
         <v-slider
           v-model="layerOpacity"
           density="compact"
           min="0"
           max="1.0"
-        />
+          hide-details
+        >
+          <template #prepend>
+            <span class="pl-2">Opacity
+              {{
+                layerOpacity.toFixed(2)
+              }}</span>
+          </template>
+        </v-slider>
       </v-col>
     </v-row>
   </v-card-text>
diff --git a/client/src/components/Raster/LargeImageStyle.vue b/client/src/components/Raster/LargeImageStyle.vue
index d838e48..0fe7a8e 100644
--- a/client/src/components/Raster/LargeImageStyle.vue
+++ b/client/src/components/Raster/LargeImageStyle.vue
@@ -104,6 +104,7 @@ export default defineComponent({
           displayConfig.largeImageStyle = {};
         }
         displayConfig.largeImageStyle.bands = bands.value;
+        displayConfig.largeImageStyle.minMaxMapper = minMaxMap.value;
         updateLayer(layer);
       }
     };
diff --git a/client/src/map/mapNetCDFLayer.ts b/client/src/map/mapNetCDFLayer.ts
index 1dcd166..2e5af00 100644
--- a/client/src/map/mapNetCDFLayer.ts
+++ b/client/src/map/mapNetCDFLayer.ts
@@ -2,9 +2,9 @@ import { Ref, ref } from 'vue';
 import { ImageSource } from 'maplibre-gl';
 import UVdatApi from '../api/UVDATApi';
 import MapStore from '../MapStore';
-import { MapLibreCoordinates, NetCDFImages, NetCDFLayer } from '../types';
+import { MapLibreCoordinates, NetCDFImageWorking, NetCDFLayer } from '../types';
 
-const visibleNetCDFLayers: (NetCDFImages & { currentIndex: number, opacity: number })[] = [];
+const visibleNetCDFLayers: Ref<NetCDFImageWorking[]> = ref([]);
 const internalMap: Ref<maplibregl.Map | null> = ref(null);
 
 const setNetCDFInternalMap = (map: Ref<maplibregl.Map>) => {
@@ -20,12 +20,14 @@ const toggleNetCDFMapLayers = async (map: maplibregl.Map) => {
   });
   for (let i = 0; i < addLayers.length; i += 1) {
     const addLayer = addLayers[i];
-    const index = visibleNetCDFLayers.findIndex((item) => item.netCDFLayer === addLayer.id);
+    const index = visibleNetCDFLayers.value.findIndex((item) => item.netCDFLayer === addLayer.id);
     if (index === -1) {
       // eslint-disable-next-line no-await-in-loop
       const newData = await UVdatApi.getNetCDFLayerImages(addLayer.id);
-      const modifiedData = { ...newData, currentIndex: 0, opacity: 0.75 };
-      visibleNetCDFLayers.push(modifiedData);
+      const modifiedData = {
+        ...newData, currentIndex: 0, opacity: 0.75, name: addLayer.name,
+      };
+      visibleNetCDFLayers.value.push(modifiedData);
       // Coordinates need to be top-left then clockwise
       const baseCoordinates = modifiedData.parent_bounds[0].slice(0, 4);
       const coordinates = [baseCoordinates[3], baseCoordinates[2], baseCoordinates[1], baseCoordinates[0]] as MapLibreCoordinates;
@@ -46,11 +48,11 @@ const toggleNetCDFMapLayers = async (map: maplibregl.Map) => {
     }
   }
   // Remove any extra items that are no longer visible
-  for (let i = 0; i < visibleNetCDFLayers.length; i += 1) {
-    const visibleLayer = visibleNetCDFLayers[i];
+  for (let i = 0; i < visibleNetCDFLayers.value.length; i += 1) {
+    const visibleLayer = visibleNetCDFLayers.value[i];
     const index = addLayers.findIndex((item) => visibleLayer.netCDFLayer === item.id);
     if (index === -1) {
-      visibleNetCDFLayers.splice(i, 1);
+      visibleNetCDFLayers.value.splice(i, 1);
       map.removeLayer(`NetCDFLayer_${visibleLayer.netCDFLayer}`);
       map.removeSource(`NetCDFSource_${visibleLayer.netCDFLayer}`);
     }
@@ -58,7 +60,7 @@ const toggleNetCDFMapLayers = async (map: maplibregl.Map) => {
 };
 
 const updateNetCDFLayer = (layer: number, newindex?: number, newOpacity?: number) => {
-  const foundLayer = visibleNetCDFLayers.find((item) => item.netCDFLayer === layer);
+  const foundLayer = visibleNetCDFLayers.value.find((item) => item.netCDFLayer === layer);
   if (foundLayer && internalMap.value) {
     if (newindex !== undefined) {
       const source = internalMap.value.getSource(`NetCDFSource_${layer}`);
@@ -71,11 +73,13 @@ const updateNetCDFLayer = (layer: number, newindex?: number, newOpacity?: number
           coordinates,
         });
       }
+      foundLayer.currentIndex = newindex;
     }
     if (newOpacity !== undefined) {
       internalMap.value.setPaintProperty(`NetCDFLayer_${layer}`, 'raster-opacity', newOpacity);
     }
   }
+  visibleNetCDFLayers.value = visibleNetCDFLayers.value.map((item) => item);
 };
 
 export {
diff --git a/client/src/map/mapProperties.ts b/client/src/map/mapProperties.ts
index eda520e..45834c2 100644
--- a/client/src/map/mapProperties.ts
+++ b/client/src/map/mapProperties.ts
@@ -106,6 +106,13 @@ const updateProps = (map: maplibregl.Map, layer: VectorMapLayer) => {
         `${layerType}-opacity`,
         layerDisplayConfig.opacity !== undefined ? layerDisplayConfig.opacity : null,
       );
+      if (layerType === 'circle') {
+        map.setPaintProperty(
+          subLayerName,
+          `${layerType}-stroke-opacity`,
+          layerDisplayConfig.opacity !== undefined ? layerDisplayConfig.opacity : null,
+        );
+      }
       if (layerDisplayConfig.size !== undefined) {
         processSize(map, subLayerName, layerType, layerDisplayConfig.size);
       }
diff --git a/client/src/map/mouseEvents.ts b/client/src/map/mouseEvents.ts
index c771d89..384410d 100644
--- a/client/src/map/mouseEvents.ts
+++ b/client/src/map/mouseEvents.ts
@@ -196,7 +196,7 @@ const setPopupEvents = (localMap: Map) => {
       const configDisplay = layer.default_style;
       let clickFunc = click;
       if (configDisplay) {
-        if (configDisplay.selectable) {
+        if (configDisplay.selectable && configDisplay.enabled) {
           clickFunc = configDisplay.selectable === 'singleSelect' ? singleClick : click;
           localMap.on('click', `Layer_${id}_raster`, clickFunc);
         }
@@ -222,13 +222,13 @@ const setPopupEvents = (localMap: Map) => {
       const layer = MapStore.selectedVectorMapLayers.value[i];
       const { id } = layer;
       const configDisplay = layer.default_style?.layers;
+      let clickFunc = click;
       if (configDisplay) {
         // Other layers select and hover is used based on config
         annotationTypes.forEach((annotationType) => {
           if (configDisplay && annotationType !== 'raster' && configDisplay[annotationType]) {
             const annotationDisplayType = configDisplay[annotationType];
             if (typeof annotationDisplayType === 'object') {
-              let clickFunc = click;
               if (annotationDisplayType.selectable) {
                 clickFunc = annotationDisplayType.selectable === 'singleSelect' ? singleClick : click;
                 localMap.on('click', `Layer_${id}_${annotationType}`, clickFunc);
@@ -253,7 +253,7 @@ const setPopupEvents = (localMap: Map) => {
         id,
         mouseenter,
         mouseleave,
-        click,
+        click: clickFunc,
       });
     }
   }
diff --git a/client/src/types.ts b/client/src/types.ts
index acc5688..65681d0 100644
--- a/client/src/types.ts
+++ b/client/src/types.ts
@@ -283,6 +283,7 @@ export interface VectorLayerDisplayConfig {
   selectable?: boolean | 'singleSelect';
   selectColor?: ColorSolid;
   hoverable?: boolean;
+  legend?: boolean;
   opacity?: number;
   size?: SizeTypes;
   text?: TextConfig;
@@ -446,6 +447,8 @@ export interface NetCDFImages {
   sliding: { min: number, max: number; step: number, variable: string };
 }
 
+// Working type for setting index/opacity
+export type NetCDFImageWorking = NetCDFImages & { currentIndex: number, opacity: number, name: string };
 export interface NetCDFVariable {
   max: number;
   min: number;
@@ -550,6 +553,7 @@ export interface SimulationResult {
 export interface KeyProcessedLayer {
   id: number;
   name: string;
+  type: AbstractMapLayer['type'];
   keyTypes: KeyProcessedType[];
 }
 
@@ -563,6 +567,11 @@ export type KeyColorConfig =
   | { type: 'solid'; color: string }
   | { attribute: string, type: 'categorical'; pairs: { value: number | string; color: string }[] }
   | { attribute: string, type: 'linear'; colors: ColorLinearNumber['numberColorPairs'], name: string }
+  | { name: string, type: 'categorical-raster'; pairs: { value: number | string; color: string }[], value:string }
+  | {
+    type: 'linear-raster';
+    colors: ColorLinearNumber['numberColorPairs'];
+    name: string; min: number, max: number, value: string }
   | { type: 'linearNetCDF'; colors: ColorLinearNumber['numberColorPairs'], name: string, min: number, max: number, value: string }
   | { type: 'heatmap'; colors: ColorLinearNumber['numberColorPairs'], name: string };
 
@@ -627,6 +636,7 @@ export interface MapRasterParams {
   style?: { // JSON-encoded string or object
     bands?: Array<StyleBandEdit>;
     dtype?: 'uint16' | 'float' | 'source';
+    minMaxMapper: Record<string, { min: number; max: number }>;
     axis?: number;
     icc?: boolean | string;
     function?: FunctionDefinition | FunctionDefinition[];
diff --git a/client/src/utils.ts b/client/src/utils.ts
index 5b2f866..b0e1fa2 100644
--- a/client/src/utils.ts
+++ b/client/src/utils.ts
@@ -245,6 +245,20 @@ function convert360Longitude(longitude: number): number {
   return longitude - 180;
 }
 
+const getLayerConfigColor = (layerId: number, layerType: AnnotationTypes) => {
+  const found = MapStore.selectedVectorMapLayers.value.find((item: VectorMapLayer) => item.id === layerId);
+  if (found?.default_style?.layers) {
+    const layerTypeVal = found?.default_style?.layers[layerType];
+    if (layerTypeVal !== false && layerTypeVal !== true) {
+      if (layerTypeVal.color === undefined) {
+        layerTypeVal.color = '#00FF00';
+      }
+      return layerTypeVal.color;
+    }
+  }
+  return '#00FF00';
+};
+
 export {
   getVectorLayerDisplayConfig,
   getRasterLayerDisplayConfig,
@@ -259,4 +273,5 @@ export {
   formatCompactToISO,
   formatISOToYYMMDD,
   convert360Longitude,
+  getLayerConfigColor,
 };
diff --git a/uvdat/core/rest/netcdf.py b/uvdat/core/rest/netcdf.py
index 095cb0d..6bf322f 100644
--- a/uvdat/core/rest/netcdf.py
+++ b/uvdat/core/rest/netcdf.py
@@ -1,3 +1,5 @@
+from datetime import datetime
+
 from rest_framework import mixins, status
 from rest_framework.decorators import action, permission_classes
 from rest_framework.exceptions import PermissionDenied
@@ -83,11 +85,22 @@ def images(self, request, *args, **kwargs):
             sliding_dim = netcdf_layer.parameters.get('sliding_dimension', None)
             step_count = netcdf_layer.parameters.get('stepCount', None)
             if sliding_dim and step_count:
-                sliding_data = {
-                    'min': sliding_dim.get('min', 0),
-                    'max': sliding_dim.get('max', step_count),
-                    'variable': sliding_dim.get('variable', 'time'),
-                }
+                if sliding_dim.get('startDate', False) and sliding_dim.get('endDate', False):
+                    start_date = sliding_dim.get('startDate')
+                    end_date = sliding_dim.get('endDate')
+                    min = datetime.fromisoformat(start_date[:26]).timestamp()
+                    max = datetime.fromisoformat(end_date[:26]).timestamp()
+                    sliding_data = {
+                        'min': min,
+                        'max': max,
+                        'variable': sliding_dim.get('variable', 'time'),
+                    }
+                else:
+                    sliding_data = {
+                        'min': sliding_dim.get('min', 0),
+                        'max': sliding_dim.get('max', step_count),
+                        'variable': sliding_dim.get('variable', 'time'),
+                    }
                 sliding_data['step'] = (sliding_data['max'] - sliding_data['min']) / (
                     step_count - 1
                 )
diff --git a/uvdat/core/tasks/netcdf.py b/uvdat/core/tasks/netcdf.py
index 0692bed..20fc529 100644
--- a/uvdat/core/tasks/netcdf.py
+++ b/uvdat/core/tasks/netcdf.py
@@ -155,14 +155,14 @@ def create_netcdf_data_layer(file_item, metadata):
 
                     if var_name in description['dimensions'].keys():
                         var_info['steps'] = description['dimensions'][var_name]
-                    if re.search(r'\blat\b|\blatitude\b', var_name, re.IGNORECASE):
-                        if -90 <= var_min <= 90 and -90 <= var_max <= 90:
-                            var_info['geospatial'] = 'latitude'
-                    elif re.search(r'\blon\b|\blongitude\b', var_name, re.IGNORECASE):
+                    if re.search(r'\blon\b|\blongitude\b', var_name, re.IGNORECASE):
                         if -180 <= var_min <= 180 and -180 <= var_max <= 180:
                             var_info['geospatial'] = 'longitude'
                         elif 0 <= var_min <= 360 and 0 <= var_max <= 360:
                             var_info['geospatial'] = 'longitude360'
+                    elif re.search(r'\blat\b|\blatitude\b', var_name, re.IGNORECASE):
+                        if -90 <= var_min <= 90 and -90 <= var_max <= 90:
+                            var_info['geospatial'] = 'latitude'
                 except Exception:
                     var_info['min'] = 0
                     var_info['max'] = variable.size
@@ -230,6 +230,13 @@ def preview_netcdf_slice(
             netcdf_data.metadata.get('variables', {}).get(x_variable, {}).get('geospatial', '')
             == 'longitude360'
         )
+        degrees_east = (
+            netcdf_data.metadata.get('variables', {})
+            .get(x_variable, {})
+            .get('attributes', {})
+            .get('units', '')
+            == 'degrees_east'
+        )
         x_range_updated = x_range
         # This is a little complicated but we have latitude of -180 to 180 where 0 is greenwich
         # then there is the data in the system where it is 0 to 360 where 0 is greenwich
@@ -246,7 +253,10 @@ def preview_netcdf_slice(
                 x_range_updated = [x for x in x_range]
             # If both values are negative we need to to convert to the 180-360 range
             else:
-                x_range_updated = [x + 360 for x in x_range]
+                if degrees_east:
+                    x_range_updated = [360 - (x + 180) for x in x_range]
+                else:
+                    x_range_updated = [x + 360 for x in x_range]
                 x_range_updated.sort()
 
         # Validate and subset data if ranges are provided
@@ -443,6 +453,13 @@ def create_netcdf_slices(
         if longitude360 and x_range is None:
             x_range = [ds[x_variable].values.min() - 180, ds[x_variable].values.max() - 180]
 
+        degrees_east = (
+            netcdf_data.metadata.get('variables', {})
+            .get(x_variable, {})
+            .get('attributes', {})
+            .get('units', '')
+            == 'degrees_east'
+        )
         x_range_updated = x_range
         # This is a little complicated but we have latitude of -180 to 180 where 0 is greenwich
         # then there is the data in the system where it is 0 to 360 where 0 is greenwich
@@ -459,7 +476,10 @@ def create_netcdf_slices(
                 x_range_updated = [x for x in x_range]
             # If both values are negative we need to to convert to the 180-360 range
             else:
-                x_range_updated = [x + 360 for x in x_range]
+                if degrees_east:
+                    x_range_updated = [360 - (x + 180) for x in x_range]
+                else:
+                    x_range_updated = [x + 360 for x in x_range]
                 x_range_updated.sort()
         # Validate and subset data if ranges are provided
         if x_range:
@@ -650,6 +670,10 @@ def create_netcdf_slices(
                 # Handles longitude360 values
                 if x_range and longitude360:
                     x_bbox_range = [x_range[0], x_range[1]]
+                    if degrees_east:
+                        x_bbox_range = [-(x + 180) for x in x_bbox_range]
+                        x_bbox_range.sort()
+                logger.info(f'XBOXRANGE: {x_bbox_range}')
                 bounds = Polygon.from_bbox((x_bbox_range[0], y_min, x_bbox_range[1], y_max))
             except GEOSException as geos_err:
                 error = f'Error constructing polygon bounds: {geos_err}'
@@ -697,6 +721,15 @@ def create_netcdf_slices(
             'yRange': y_range,
             'SlidingRange': slicer_range,
         }
+        start_date = (
+            netcdf_data.metadata.get('variables', {}).get(sliding_variable, {}).get('startDate', {})
+        )
+        end_date = (
+            netcdf_data.metadata.get('variables', {}).get(sliding_variable, {}).get('endDate', {})
+        )
+        if start_date and end_date:
+            parameters['sliding_dimension']['startDate'] = start_date
+            parameters['sliding_dimension']['endDate'] = end_date
         netcdf_layer = NetCDFLayer.objects.create(
             netcdf_data=netcdf_data,
             name=name,