diff --git a/client/src/components/SpectrogramViewer.vue b/client/src/components/SpectrogramViewer.vue
index 119d022..10d4da8 100644
--- a/client/src/components/SpectrogramViewer.vue
+++ b/client/src/components/SpectrogramViewer.vue
@@ -46,6 +46,8 @@ export default defineComponent({
     const geoJS = useGeoJS();
     const initialized = ref(false);
     const cursor = ref("");
+    const scaledWidth = ref(0);
+    const scaledHeight = ref(0);
     const imageCursorRef: Ref<HTMLElement | undefined> = ref();
     const setCursor = (newCursor: string) => {
       cursor.value = newCursor;
@@ -78,20 +80,23 @@ export default defineComponent({
       if (!props.spectroInfo) {
         return;
       }
+      const adjustedWidth = scaledWidth.value > props.spectroInfo.width ? scaledWidth.value : props.spectroInfo.width;
+      const adjustedHeight = scaledHeight.value > props.spectroInfo.height ? scaledHeight.value : props.spectroInfo.height;
+
       const freq =
-        props.spectroInfo.height - y >= 0
-          ? ((props.spectroInfo.height - y) *
-              (props.spectroInfo.high_freq - props.spectroInfo.low_freq)) /
-              props.spectroInfo.height /
-              1000 +
-            props.spectroInfo.low_freq / 1000
+        adjustedHeight - y >= 0
+          ? ((adjustedHeight - y) *
+            (props.spectroInfo.high_freq - props.spectroInfo.low_freq)) /
+          adjustedHeight /
+          1000 +
+          props.spectroInfo.low_freq / 1000
           : -1;
 
       if (!props.spectroInfo.end_times && !props.spectroInfo.start_times) {
-        if (x >= 0 && props.spectroInfo.height - y >= 0) {
+        if (x >= 0 && adjustedHeight - y >= 0) {
           const time =
             x *
-            ((props.spectroInfo.end_time - props.spectroInfo.start_time) / props.spectroInfo.width);
+            ((props.spectroInfo.end_time - props.spectroInfo.start_time) / adjustedWidth);
           emit("hoverData", { time, freq });
         } else {
           emit("hoverData", { time: -1, freq: -1 });
@@ -102,9 +107,9 @@ export default defineComponent({
         props.spectroInfo.end_times
       ) {
         // compressed view
-        if (x >= 0 && props.spectroInfo.height - y >= 0) {
+        if (x >= 0 && adjustedHeight - y >= 0) {
           const timeLength = props.spectroInfo.end_time - props.spectroInfo.start_time;
-          const timeToPixels = props.spectroInfo.width / timeLength;
+          const timeToPixels = adjustedWidth / timeLength;
           // find X in the range
           let offsetAdditive = 0;
           for (let i = 0; i < props.spectroInfo.start_times.length; i += 1) {
@@ -128,6 +133,8 @@ export default defineComponent({
     };
     watch(containerRef, () => {
       const { naturalWidth, naturalHeight } = props.image;
+      scaledWidth.value = naturalWidth;
+      scaledHeight.value = naturalHeight;
       if (containerRef.value)
         geoJS.initializeViewer(containerRef.value, naturalWidth, naturalHeight);
       geoJS.drawImage(props.image, naturalWidth, naturalHeight);
@@ -167,9 +174,9 @@ export default defineComponent({
         if (skipNextSelected) {
           skipNextSelected = false;
           return;
-          
+
         }
-        const found = selectedType.value === 'pulse' ? annotations.value.find((item) => item.id === selectedId.value): temporalAnnotations.value.find((item) => item.id === selectedId.value);
+        const found = selectedType.value === 'pulse' ? annotations.value.find((item) => item.id === selectedId.value) : temporalAnnotations.value.find((item) => item.id === selectedId.value);
         if (found && props.spectroInfo) {
 
           const center = spectroToCenter(found, props.spectroInfo, selectedType.value);
@@ -184,30 +191,23 @@ export default defineComponent({
     );
 
     const wheelEvent = (event: WheelEvent) => {
-  const geoViewerRef = geoJS.getGeoViewer();
-
-  if (geoViewerRef.value) {
-    const camera = geoViewerRef.value.camera();
-    const view = camera.view;
-
-    console.log(view);
-    let baseZoomX = view[0];
-    let baseZoomY = view[5];
-    // view[5] = view[5] * 1.1
-    if (event.ctrlKey) {
-      // Zoom along the X-axis
-      baseZoomX += event.deltaY * 0.000001;
-    } else if (event.shiftKey) {
-      // Zoom along the Y-axis
-      baseZoomY += event.deltaY * 0.000001;
-    }
-    view[0] = baseZoomX;
-    view[5] = baseZoomY;
-    camera.view = view;
-    geoViewerRef.value.draw();
+      const geoViewerRef = geoJS.getGeoViewer();
+      const { naturalWidth, naturalHeight } = props.image;
 
-  }
-};
+      if (event.ctrlKey) {
+        scaledWidth.value = scaledWidth.value + event.deltaY * 4;
+        if (scaledWidth.value < naturalWidth) {
+          scaledWidth.value = naturalWidth;
+        }
+        geoJS.drawImage(props.image, scaledWidth.value, scaledHeight.value, false);
+      } else if (event.shiftKey) {
+        scaledHeight.value = scaledHeight.value + event.deltaY * 1;
+        if (scaledHeight.value < naturalHeight) {
+          scaledHeight.value = naturalHeight;
+        }
+        geoJS.drawImage(props.image, scaledWidth.value, scaledHeight.value, false);
+      }
+    };
 
 
 
@@ -223,38 +223,23 @@ export default defineComponent({
       imageCursorRef,
       blackBackground,
       wheelEvent,
+      scaledWidth,
+      scaledHeight,
     };
   },
 });
 </script>
 
 <template>
-  <div
-    class="video-annotator"
-    :class="{'black-background': blackBackground, 'white-background': !blackBackground}"
-    @wheel="wheelEvent($event)"
-  >
-    <div
-      id="spectro"
-      ref="containerRef"
-      class="playback-container"
-      :style="{ cursor: cursor }"
-      @mousemove="cursorHandler.handleMouseMove"
-      @mouseleave="cursorHandler.handleMouseLeave"
-      @mouseover="cursorHandler.handleMouseEnter"
-    />
-    <layer-manager
-      v-if="initialized"
-      :geo-viewer-ref="geoViewerRef"
-      :spectro-info="spectroInfo"
-      @update:annotation="updateAnnotation($event)"
-      @create:annotation="createAnnotation($event)"
-      @set-cursor="setCursor($event)"
-    />
-    <div
-      ref="imageCursorRef" 
-      class="imageCursor"
-    >
+  <div class="video-annotator" :class="{ 'black-background': blackBackground, 'white-background': !blackBackground }"
+    @wheel="wheelEvent($event)">
+    <div id="spectro" ref="containerRef" class="playback-container" :style="{ cursor: cursor }"
+      @mousemove="cursorHandler.handleMouseMove" @mouseleave="cursorHandler.handleMouseLeave"
+      @mouseover="cursorHandler.handleMouseEnter" />
+    <layer-manager v-if="initialized" :geo-viewer-ref="geoViewerRef" :spectro-info="spectroInfo"
+      :scaled-width="scaledWidth" :scaled-height="scaledHeight" @update:annotation="updateAnnotation($event)"
+      @create:annotation="createAnnotation($event)" @set-cursor="setCursor($event)" />
+    <div ref="imageCursorRef" class="imageCursor">
       <v-icon color="white">
         {{ cursor }}
       </v-icon>
@@ -273,8 +258,10 @@ export default defineComponent({
 
   display: flex;
   flex-direction: column;
+
   .geojs-map {
     margin: 2px;
+
     &.geojs-map:focus {
       outline: none;
     }
@@ -284,6 +271,7 @@ export default defineComponent({
   .playback-container {
     flex: 1;
   }
+
   .loadingSpinnerContainer {
     z-index: 20;
     margin: 0;
@@ -293,18 +281,20 @@ export default defineComponent({
     -ms-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
   }
+
   .geojs-map.annotation-input {
     cursor: inherit;
   }
 }
 
 .black-background {
-    background-color: black;
-  }
+  background-color: black;
+}
 
 .white-background {
-  background-color:  white;
+  background-color: white;
 }
+
 .imageCursor {
   z-index: 9999; //So it will be above the annotator layers
   position: fixed;
diff --git a/client/src/components/geoJS/LayerManager.vue b/client/src/components/geoJS/LayerManager.vue
index f1806d5..a2ad586 100644
--- a/client/src/components/geoJS/LayerManager.vue
+++ b/client/src/components/geoJS/LayerManager.vue
@@ -31,6 +31,14 @@ export default defineComponent({
     yScale: {
       type: Number,
       default: 1,
+    },
+    scaledWidth: {
+      types: Number,
+      default: -1,
+    },
+    scaledHeight: {
+      types: Number,
+      default: -1,
     }
   },
   emits: ["selected", "update:annotation", "create:annotation", "set-cursor"],
@@ -198,7 +206,7 @@ export default defineComponent({
             ) : localTemporalAnnotations.value.findIndex((item) => item.id === selectedAnnotationId.value);
             if (index !== -1 && props.spectroInfo && selectedType.value === 'pulse') {
               // update bounds for the localAnnotation
-              const conversionResult = geojsonToSpectro(geoJSON, props.spectroInfo);
+              const conversionResult = geojsonToSpectro(geoJSON, props.spectroInfo, props.scaledWidth, props.scaledHeight);
               if (conversionResult.error) {
                 displayError.value = true;
                 errorMsg.value = conversionResult.error;
@@ -216,7 +224,7 @@ export default defineComponent({
             }
             if (index !== -1 && props.spectroInfo && selectedType.value === 'sequence') {
               // update bounds for the localAnnotation
-              const conversionResult = geojsonToSpectro(geoJSON, props.spectroInfo);
+              const conversionResult = geojsonToSpectro(geoJSON, props.spectroInfo, props.scaledWidth, props.scaledHeight);
               if (conversionResult.error) {
                 displayError.value = true;
                 errorMsg.value = conversionResult.error;
@@ -236,7 +244,7 @@ export default defineComponent({
           }
         } else if (creating) {
           if (geoJSON && props.spectroInfo) {
-            const conversionResult =  geojsonToSpectro(geoJSON, props.spectroInfo);
+            const conversionResult = geojsonToSpectro(geoJSON, props.spectroInfo);
 
             if (conversionResult.error) {
               displayError.value = true;
@@ -255,8 +263,8 @@ export default defineComponent({
                 id: 0,
               };
               emit("create:annotation", newAnnotation);
-          } else if (creationType.value === 'sequence') {
-            const newAnnotation: SpectrogramTemporalAnnotation = {
+            } else if (creationType.value === 'sequence') {
+              const newAnnotation: SpectrogramTemporalAnnotation = {
                 start_time,
                 end_time,
                 species: [],
@@ -266,7 +274,7 @@ export default defineComponent({
               };
               emit("create:annotation", newAnnotation);
 
-          }
+            }
             editAnnotationLayer.disable();
             annotationState.value = "";
             editing.value = false;
@@ -359,7 +367,7 @@ export default defineComponent({
         triggerUpdate();
       }
     );
-    watch (temporalAnnotations, () => {
+    watch(temporalAnnotations, () => {
       localTemporalAnnotations.value = temporalAnnotations.value;
       triggerUpdate();
     });
@@ -426,6 +434,63 @@ export default defineComponent({
       if (!props.thumbnail && legendLayer) {
         triggerUpdate();
       }
+    });
+    watch([() => props.scaledWidth, () => props.scaledHeight], () => {
+      const { annotations, temporalAnnotations } = getDataForLayers();
+      legendLayer.setScaledDimensions(props.scaledWidth, props.scaledHeight);
+      rectAnnotationLayer.setScaledDimensions(props.scaledWidth, props.scaledHeight);
+      rectAnnotationLayer.formatData(
+        annotations,
+        selectedType.value === 'pulse' ? selectedAnnotationId.value : null,
+        currentUser.value,
+        colorScale.value,
+        props.yScale,
+      );
+      rectAnnotationLayer.redraw();
+      editAnnotationLayer.setScaledDimensions(props.scaledWidth, props.scaledHeight);
+      if (editing.value && editingAnnotation.value) {
+        setTimeout(() => {
+          editAnnotationLayer.changeData(editingAnnotation.value, selectedType.value);
+        }, 0);
+      }
+      timeLayer.setScaledDimensions(props.scaledWidth, props.scaledHeight);
+      freqLayer.setScaledDimensions(props.scaledWidth, props.scaledHeight);
+      speciesLayer.setScaledDimensions(props.scaledWidth, props.scaledHeight);
+      speciesSequenceLayer.setScaledDimensions(props.scaledWidth, props.scaledHeight);
+      temporalAnnotationLayer.setScaledDimensions(props.scaledWidth, props.scaledHeight);
+      if (layerVisibility.value.includes("time")) {
+        timeLayer.formatData(annotations, temporalAnnotations);
+        timeLayer.redraw();
+      } else {
+        timeLayer.disable();
+      }
+      if (layerVisibility.value.includes("freq")) {
+        freqLayer.formatData(annotations);
+        freqLayer.redraw();
+      } else {
+        freqLayer.disable();
+      }
+      if (layerVisibility.value.includes("species")) {
+        speciesLayer.formatData(annotations);
+        speciesLayer.redraw();
+        speciesSequenceLayer.formatData(temporalAnnotations);
+        speciesSequenceLayer.redraw();
+      } else {
+        speciesLayer.disable();
+        speciesSequenceLayer.disable();
+      }
+      if (temporalAnnotationLayer && layerVisibility.value.includes('temporal')) {
+        temporalAnnotationLayer.formatData(
+          temporalAnnotations,
+          selectedType.value === 'sequence' ? selectedAnnotationId.value : null,
+          currentUser.value,
+          colorScale.value,
+          props.yScale,
+        );
+        temporalAnnotationLayer.redraw();
+      }
+
+
     });
     watch(
       () => annotationState.value,
@@ -451,20 +516,14 @@ export default defineComponent({
 </script>
 
 <template>
-  <v-dialog
-    v-model="displayError" 
-    width="500"
-  >
+  <v-dialog v-model="displayError" width="500">
     <v-card>
       <v-card-title>Error</v-card-title>
       <v-card-text>{{ errorMsg }}</v-card-text>
       <v-card-actions>
         <v-row>
           <v-spacer />
-          <v-btn
-            variant="outlined"
-            @click="displayError = false"
-          >
+          <v-btn variant="outlined" @click="displayError = false">
             Dismiss
           </v-btn>
           <v-spacer />
@@ -473,4 +532,3 @@ export default defineComponent({
     </v-card>
   </v-dialog>
 </template>
-./layers/timeLalyer
diff --git a/client/src/components/geoJS/geoJSUtils.ts b/client/src/components/geoJS/geoJSUtils.ts
index 8093495..1a7b672 100644
--- a/client/src/components/geoJS/geoJSUtils.ts
+++ b/client/src/components/geoJS/geoJSUtils.ts
@@ -39,7 +39,6 @@ const useGeoJS = () => {
     interactorOpts.keyboard.focusHighlight = false;
     interactorOpts.keyboard.actions = {};
     interactorOpts.click.cancelOnMove = 5;
-    console.log(interactorOpts);
     interactorOpts.actions = [
       interactorOpts.actions[0],
       // The action below is needed to have GeoJS use the proper handler
@@ -100,7 +99,7 @@ const useGeoJS = () => {
     quadFeature = quadFeatureLayer.createFeature("quad");
   };
 
-  const drawImage = (image: HTMLImageElement, width = image.width, height = image.height) => {
+  const drawImage = (image: HTMLImageElement, width = image.width, height = image.height, resetCam=true) => {
     if (quadFeature) {
       quadFeature
         .data([
@@ -112,7 +111,22 @@ const useGeoJS = () => {
         ])
         .draw();
     }
-    resetMapDimensions(width, height);
+    if (resetCam) {
+    resetMapDimensions(width, height, 0.3,resetCam);
+    } else {
+      const params = geo.util.pixelCoordinateParams(container.value, width, height, width, height);
+      const margin  = 0.3;
+      const { right, bottom } = params.map.maxBounds;
+      originalBounds = params.map.maxBounds;
+      geoViewer.value.maxBounds({
+        left: 0 - right * margin,
+        top: 0 - bottom * margin,
+        right: right * (1 + margin),
+        bottom: bottom * (1 + margin),
+      });
+  
+    }
+    
   };
   const resetZoom = () => {
     const { width: mapWidth } = geoViewer.value.camera().viewport;
@@ -130,7 +144,7 @@ const useGeoJS = () => {
     geoViewer.value.center(zoomAndCenter.center);
   };
 
-  const resetMapDimensions = (width: number, height: number, margin = 0.3) => {
+  const resetMapDimensions = (width: number, height: number, margin = 0.3, resetCam = false) => {
     // Want the height to be the main view and whe width to be  relative to the width of the geo.amp
     geoViewer.value.bounds({
       left: 0,
@@ -156,8 +170,9 @@ const useGeoJS = () => {
     geoViewer.value.clampBoundsX(true);
     geoViewer.value.clampBoundsY(true);
     geoViewer.value.clampZoom(true);
-
-    resetZoom();
+    if (resetCam) {
+      resetZoom();
+    }
   };
 
   return {
@@ -189,10 +204,14 @@ function spectroTemporalToGeoJSon(
   ymin = 0,
   ymax = 10,
   yScale = 1,
+  scaledWidth = 0,
+  scaledHeight = 0,
 ): GeoJSON.Polygon {
+  const adjustedWidth = scaledWidth > spectroInfo.width ? scaledWidth : spectroInfo.width;
+  const adjustedHeight = scaledHeight > spectroInfo.height ? scaledHeight : spectroInfo.height;
   //scale pixels to time and frequency ranges
   if (spectroInfo.start_times === undefined || spectroInfo.end_times === undefined) {
-    const widthScale = spectroInfo.width / (spectroInfo.end_time - spectroInfo.start_time);
+    const widthScale = adjustedWidth / (spectroInfo.end_time - spectroInfo.start_time);
     // Now we remap our annotation to pixel coordinates
     const start_time = annotation.start_time * widthScale;
     const end_time = annotation.end_time * widthScale;
@@ -228,7 +247,7 @@ function spectroTemporalToGeoJSon(
       }
     }
     // We need to build the length of times to pixel size for the time spaces before the annotation
-    const widthScale = spectroInfo.width / (spectroInfo.end_time - spectroInfo.start_time);
+    const widthScale = adjustedWidth / (spectroInfo.end_time - spectroInfo.start_time);
     let pixelAdd = 0;
     for (let i = 0; i < foundIndex; i += 1) {
       pixelAdd += (end_times[i] - start_times[i]) * widthScale;
@@ -267,17 +286,22 @@ function spectroTemporalToGeoJSon(
 function spectroToGeoJSon(
   annotation: SpectrogramAnnotation,
   spectroInfo: SpectroInfo,
-  yScale = 1
+  yScale = 1,
+  scaledWidth = 0,
+  scaledHeight = 0
 ): GeoJSON.Polygon {
   //scale pixels to time and frequency ranges
+  const adjustedWidth = scaledWidth > spectroInfo.width ? scaledWidth : spectroInfo.width;
+  const adjustedHeight = scaledHeight > spectroInfo.height ? scaledHeight : spectroInfo.height;
+
   if (spectroInfo.start_times === undefined || spectroInfo.end_times === undefined) {
-    const widthScale = spectroInfo.width / (spectroInfo.end_time - spectroInfo.start_time);
-    const heightScale = spectroInfo.height / (spectroInfo.high_freq - spectroInfo.low_freq);
+    const widthScale = adjustedWidth / (spectroInfo.end_time - spectroInfo.start_time);
+    const heightScale = adjustedHeight / (spectroInfo.high_freq - spectroInfo.low_freq);
     // Now we remap our annotation to pixel coordinates
     const low_freq =
-      spectroInfo.height - (annotation.low_freq - spectroInfo.low_freq) * heightScale;
+      adjustedHeight - (annotation.low_freq - spectroInfo.low_freq) * heightScale;
     const high_freq =
-      spectroInfo.height - (annotation.high_freq - spectroInfo.low_freq) * heightScale;
+      adjustedHeight - (annotation.high_freq - spectroInfo.low_freq) * heightScale;
     const start_time = annotation.start_time * widthScale;
     const end_time = annotation.end_time * widthScale;
     return {
@@ -312,17 +336,17 @@ function spectroToGeoJSon(
       }
     }
     // We need to build the length of times to pixel size for the time spaces before the annotation
-    const widthScale = spectroInfo.width / (spectroInfo.end_time - spectroInfo.start_time);
+    const widthScale = adjustedWidth / (spectroInfo.end_time - spectroInfo.start_time);
     let pixelAdd = 0;
     for (let i = 0; i < foundIndex; i += 1) {
       pixelAdd += (end_times[i] - start_times[i]) * widthScale;
     }
-    const heightScale = spectroInfo.height / (spectroInfo.high_freq - spectroInfo.low_freq);
+    const heightScale = adjustedHeight / (spectroInfo.high_freq - spectroInfo.low_freq);
     // Now we remap our annotation to pixel coordinates
     const low_freq =
-      spectroInfo.height - (annotation.low_freq - spectroInfo.low_freq) * heightScale;
+      adjustedHeight - (annotation.low_freq - spectroInfo.low_freq) * heightScale;
     const high_freq =
-      spectroInfo.height - (annotation.high_freq - spectroInfo.low_freq) * heightScale;
+      adjustedHeight - (annotation.high_freq - spectroInfo.low_freq) * heightScale;
     const start_time = pixelAdd + (annotation.start_time - start_times[foundIndex]) * widthScale;
     const end_time = pixelAdd + (annotation.end_time - start_times[foundIndex]) * widthScale;
 
@@ -378,12 +402,17 @@ function spectroToCenter(annotation: SpectrogramAnnotation | SpectrogramTemporal
 /* beginning at bottom left, rectangle is defined clockwise */
 function geojsonToSpectro(
   geojson: GeoJSON.Feature<GeoJSON.Polygon>,
-  spectroInfo: SpectroInfo
+  spectroInfo: SpectroInfo,
+  scaledWidth = 0,
+  scaledHeight = 0,
 ): { error?: string; start_time: number; end_time: number; low_freq: number; high_freq: number } {
+  const adjustedWidth = scaledWidth > spectroInfo.width ? scaledWidth : spectroInfo.width;
+  const adjustedHeight = scaledHeight > spectroInfo.height ? scaledHeight : spectroInfo.height;
+
   const coords = geojson.geometry.coordinates[0];
   if (spectroInfo.start_times === undefined && spectroInfo.end_times === undefined) {
-    const widthScale = spectroInfo.width / (spectroInfo.end_time - spectroInfo.start_time);
-    const heightScale = spectroInfo.height / (spectroInfo.high_freq - spectroInfo.low_freq);
+    const widthScale = adjustedWidth / (spectroInfo.end_time - spectroInfo.start_time);
+    const heightScale = adjustedHeight / (spectroInfo.high_freq - spectroInfo.low_freq);
     const start_time = Math.round(coords[1][0] / widthScale);
     const end_time = Math.round(coords[3][0] / widthScale);
     const high_freq = Math.round(spectroInfo.high_freq - coords[1][1] / heightScale);
diff --git a/client/src/components/geoJS/layers/editAnnotationLayer.ts b/client/src/components/geoJS/layers/editAnnotationLayer.ts
index 0f51002..ca15e4b 100644
--- a/client/src/components/geoJS/layers/editAnnotationLayer.ts
+++ b/client/src/components/geoJS/layers/editAnnotationLayer.ts
@@ -70,6 +70,9 @@ export default class EditAnnotationLayer {
 
   leftButtonCheckTimeout: number; //Fallthough mouse down when ending lineStrings
 
+  scaledWidth: number;
+  scaledHeight: number;
+
   /* in-progress events only emitted for lines and polygons */
   shapeInProgress: GeoJSON.LineString | GeoJSON.Polygon | null;
 
@@ -100,6 +103,8 @@ export default class EditAnnotationLayer {
     this.shapeInProgress = null;
     this.disableModeSync = false;
     this.leftButtonCheckTimeout = -1;
+    this.scaledWidth = 0;
+    this.scaledHeight = 0;
 
     //Only initialize once, prevents recreating Layer each edit
     this.initialize();
@@ -161,6 +166,11 @@ export default class EditAnnotationLayer {
     };
   }
 
+  setScaledDimensions(newWidth: number, newHeight: number) {
+    this.scaledWidth = newWidth;
+    this.scaledHeight = newHeight;
+  }
+
   /**
    * Listen to mousedown events and build a replica of the in-progress annotation
    * shape that GeoJS is keeps internally.  Emit the shape as update:in-progress-geojson
@@ -349,7 +359,7 @@ export default class EditAnnotationLayer {
     });
     if (annotationData) {
 
-      const geoJSONData = type === 'pulse' ? spectroToGeoJSon(annotationData as SpectrogramAnnotation, this.spectroInfo): spectroTemporalToGeoJSon(annotationData as SpectrogramTemporalAnnotation, this.spectroInfo, -10, -50);
+      const geoJSONData = type === 'pulse' ? spectroToGeoJSon(annotationData as SpectrogramAnnotation, this.spectroInfo, 1, this.scaledWidth, this.scaledHeight): spectroTemporalToGeoJSon(annotationData as SpectrogramTemporalAnnotation, this.spectroInfo, -10, -50, 1, this.scaledWidth, this.scaledHeight);
       const geojsonFeature: GeoJSON.Feature = {
         type: "Feature",
         geometry: geoJSONData,
diff --git a/client/src/components/geoJS/layers/freqLayer.ts b/client/src/components/geoJS/layers/freqLayer.ts
index 48f92ba..628f66b 100644
--- a/client/src/components/geoJS/layers/freqLayer.ts
+++ b/client/src/components/geoJS/layers/freqLayer.ts
@@ -39,6 +39,9 @@ export default class FreqLayer {
   textStyle: LayerStyle<TextData>;
   lineStyle: LayerStyle<LineData>;
 
+  scaledWidth: number;
+  scaledHeight: number;
+
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   constructor(
@@ -52,6 +55,8 @@ export default class FreqLayer {
     this.lineData = [];
     this.spectroInfo = spectroInfo;
     this.textData = [];
+    this.scaledWidth = 0;
+    this.scaledHeight = 0;
     this.event = event;
     //Only initialize once, prevents recreating Layer each edit
     const layer = this.geoViewerRef.createLayer("feature", {
@@ -68,13 +73,17 @@ export default class FreqLayer {
     this.lineStyle = this.createLineStyle();
   }
 
+  setScaledDimensions(newWidth: number, newHeight: number) {
+    this.scaledWidth = newWidth;
+    this.scaledHeight = newHeight;
+  }
 
   formatData(annotationData: SpectrogramAnnotation[]) {
     this.textData = [];
     this.lineData = [];
     const lineDist = 16;
     annotationData.forEach((annotation: SpectrogramAnnotation) => {
-      const polygon = spectroToGeoJSon(annotation, this.spectroInfo);
+      const polygon = spectroToGeoJSon(annotation, this.spectroInfo, 1, this.scaledWidth, this.scaledHeight);
       const {low_freq, high_freq } = annotation;
       const [xmin, ymin] = polygon.coordinates[0][0];
       const [xmax, ymax] = polygon.coordinates[0][2];
diff --git a/client/src/components/geoJS/layers/legendLayer.ts b/client/src/components/geoJS/layers/legendLayer.ts
index 2680443..7db056f 100644
--- a/client/src/components/geoJS/layers/legendLayer.ts
+++ b/client/src/components/geoJS/layers/legendLayer.ts
@@ -49,6 +49,10 @@ export default class LegendLayer {
 
   gridEnabled: boolean;
 
+  scaledWidth: number;
+
+  scaledHeight: number;
+
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   constructor(
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -64,6 +68,8 @@ export default class LegendLayer {
     this.textDataX = [];
     this.textDataY = [];
     this.axisBuffer = 5;
+    this.scaledHeight = -1;
+    this.scaledWidth  = -1;
     this.event = event;
     this.gridEnabled = false;
     //Only initialize once, prevents recreating Layer each edit
@@ -101,14 +107,34 @@ export default class LegendLayer {
     this.redraw();
   }
 
+  setScaledDimensions( width: number, height: number) {
+    this.scaledWidth = width;
+    this.scaledHeight = height;
+    this.createLabels();
+    this.calcGridLines();
+    if (this.gridEnabled) {
+      this.gridLayer
+        .data(this.gridLines)
+        .line((d: LineData) => d.line.coordinates)
+        .style(this.createLineStyle())
+        .draw();
+    } else {
+      this.gridLayer.data([]).draw();
+    }
+    this.redraw();
+  }
+
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   drawXAxisLabels(yOffset = 0, _xOffset = 0, leftOffset = 0) {
+    const adjustedWidth = this.scaledWidth > this.spectroInfo.width ? this.scaledWidth : this.spectroInfo.width;
+    const adjustedHeight = this.scaledHeight > this.spectroInfo.height ? this.scaledHeight : this.spectroInfo.height;
+
     const yBuffer = yOffset === 0 ? this.axisBuffer : this.axisBuffer * -0.5;
-    const baseYPos = yOffset === 0 ? this.spectroInfo.height : yOffset;
+    const baseYPos = yOffset === 0 ? adjustedHeight : yOffset;
 
     // Now we need tick marks for ms along the X-axis
     const time = this.spectroInfo.end_time - this.spectroInfo.start_time;
-    const timeToPixels = this.spectroInfo.width / time;
+    const timeToPixels = adjustedWidth / time;
 
     // every 100 ms a small tick and every 1000 a big tick
     for (let i = 0; i < time; i += 10) {
@@ -139,15 +165,15 @@ export default class LegendLayer {
     }
   }
 
-  drawXAxisLabelsCompressed(yOffset = 0, topOffset = 0, leftOffset = 0) {
+  drawXAxisLabelsCompressed(yOffset = 0, topOffset = 0, leftOffset = 0,) {
+    const adjustedWidth = this.scaledWidth > this.spectroInfo.width ? this.scaledWidth : this.spectroInfo.width;
+    const adjustedHeight = this.scaledHeight > this.spectroInfo.height ? this.scaledHeight : this.spectroInfo.height;
+
     const yBuffer = yOffset === 0 ? this.axisBuffer : this.axisBuffer * -0.5;
-    const baseYPos = yOffset === 0 ? this.spectroInfo.height : yOffset;
+    const baseYPos = yOffset === 0 ? adjustedHeight : yOffset;
     const baseTopPos = topOffset === 0 ? 0 : -topOffset;
     const topBuffer = topOffset === 0 ? this.axisBuffer * 3 : this.axisBuffer * -0.5;
 
-    // For compressed we need to draw based on the start/endTimes instead of the standard
-    const time = this.spectroInfo.end_time - this.spectroInfo.start_time;
-
     const { start_times, end_times, widths } = this.spectroInfo;
     if (start_times && end_times && widths) {
       // We need a pixel time to map to the 0 position
@@ -244,26 +270,29 @@ export default class LegendLayer {
 
   calcGridLines() {
     // Y-Axis grid lines:
+    const adjustedWidth = this.scaledWidth > this.spectroInfo.width ? this.scaledWidth : this.spectroInfo.width;
+    const adjustedHeight = this.scaledHeight > this.spectroInfo.height ? this.scaledHeight : this.spectroInfo.height;
     const xBuffer = this.axisBuffer;
     const hz = this.spectroInfo.high_freq - this.spectroInfo.low_freq;
-    const hzToPixels = this.spectroInfo.height / hz;
+    const hzToPixels = adjustedHeight / hz;
+    this.gridLines = [];
     for (let i = 0; i < hz; i += 10000) {
       this.gridLines.push({
         line: {
           type: "LineString",
           coordinates: [
-            [0 - xBuffer - length, this.spectroInfo.height - i * hzToPixels],
-            [this.spectroInfo.width, this.spectroInfo.height - i * hzToPixels],
+            [0 - xBuffer - length, adjustedHeight - i * hzToPixels],
+            [adjustedWidth, adjustedHeight - i * hzToPixels],
           ],
         },
         grid: true,
       });
     }
-    const baseYPos = this.spectroInfo.height;
+    const baseYPos = adjustedHeight;
 
     // Now we need tick marks for ms along the X-axis
     const time = this.spectroInfo.end_time - this.spectroInfo.start_time;
-    const timeToPixels = this.spectroInfo.width / time;
+    const timeToPixels = adjustedWidth / time;
 
     // every 100 ms a small tick and every 1000 a big tick
     for (let i = 0; i < time; i += 10) {
@@ -281,27 +310,29 @@ export default class LegendLayer {
   }
 
   drawYAxis(offset = 0) {
+    const adjustedWidth = this.scaledWidth > this.spectroInfo.width ? this.scaledWidth : this.spectroInfo.width;
+    const adjustedHeight = this.scaledHeight > this.spectroInfo.height ? this.scaledHeight : this.spectroInfo.height;
     const xBuffer = offset === 0 ? this.axisBuffer : this.axisBuffer * -0.25;
     const yAxis: GeoJSON.LineString = {
       type: "LineString",
       coordinates: [
         [offset - xBuffer, 0],
-        [offset - xBuffer, this.spectroInfo.height + xBuffer],
+        [offset - xBuffer, adjustedWidth + xBuffer],
       ],
     };
     this.lineDataY.push({ line: yAxis });
 
     // Lets do the vertical Hz axis now
     const hz = this.spectroInfo.high_freq - this.spectroInfo.low_freq;
-    const hzToPixels = this.spectroInfo.height / hz;
+    const hzToPixels = adjustedHeight / hz;
     for (let i = 0; i < hz; i += 10000) {
       const length = i % 10000 === 0 ? xBuffer * 8 : xBuffer * 4;
       this.lineDataY.push({
         line: {
           type: "LineString",
           coordinates: [
-            [offset - xBuffer, this.spectroInfo.height - i * hzToPixels],
-            [offset - xBuffer - length, this.spectroInfo.height - i * hzToPixels],
+            [offset - xBuffer, adjustedHeight - i * hzToPixels],
+            [offset - xBuffer - length, adjustedHeight - i * hzToPixels],
           ],
         },
         thicker: i % 10000 === 0,
@@ -309,7 +340,7 @@ export default class LegendLayer {
       this.textDataY.push({
         text: `${(i + this.spectroInfo.low_freq) / 1000}KHz`,
         x: offset - xBuffer - length,
-        y: this.spectroInfo.height - i * hzToPixels,
+        y: adjustedHeight - i * hzToPixels,
         offsetX: offset === 0 ? -25 : 25,
         offsetY: 0,
       });
@@ -317,16 +348,19 @@ export default class LegendLayer {
   }
 
   drawXAxis(bottomOffset = 0, topOffset = 0, lefOffset = 0) {
+    const adjustedWidth = this.scaledWidth > this.spectroInfo.width ? this.scaledWidth : this.spectroInfo.width;
+    const adjustedHeight = this.scaledHeight > this.spectroInfo.height ? this.scaledHeight : this.spectroInfo.height;
+
     const xAxis: GeoJSON.LineString = {
       type: "LineString",
       coordinates: [
-        [0 - this.axisBuffer, this.spectroInfo.height + this.axisBuffer],
-        [this.spectroInfo.width, this.spectroInfo.height + this.axisBuffer],
+        [0 - this.axisBuffer, adjustedHeight + this.axisBuffer],
+        [adjustedWidth, adjustedHeight + this.axisBuffer],
       ],
     };
 
     this.lineDataX.push({ line: xAxis });
-    this.drawYAxis();
+    this.drawYAxis(0);
 
     if (this.spectroInfo.start_times && this.spectroInfo.end_times) {
       this.drawXAxisLabelsCompressed(bottomOffset, topOffset, lefOffset);
@@ -335,6 +369,9 @@ export default class LegendLayer {
     }
   }
   createLabels() {
+    const adjustedWidth = this.scaledWidth > this.spectroInfo.width ? this.scaledWidth : this.spectroInfo.width;
+    const adjustedHeight = this.scaledHeight > this.spectroInfo.height ? this.scaledHeight : this.spectroInfo.height;
+
     // Take spectro Info and create lines for X/Y axis
     this.textDataX = [];
     this.lineDataX = [];
@@ -343,8 +380,8 @@ export default class LegendLayer {
     const xAxis: GeoJSON.LineString = {
       type: "LineString",
       coordinates: [
-        [0 - this.axisBuffer, this.spectroInfo.height + this.axisBuffer],
-        [this.spectroInfo.width, this.spectroInfo.height + this.axisBuffer],
+        [0 - this.axisBuffer, adjustedHeight + this.axisBuffer],
+        [adjustedWidth, adjustedHeight + this.axisBuffer],
       ],
     };
 
diff --git a/client/src/components/geoJS/layers/rectangleLayer.ts b/client/src/components/geoJS/layers/rectangleLayer.ts
index 60bf841..e5dccae 100644
--- a/client/src/components/geoJS/layers/rectangleLayer.ts
+++ b/client/src/components/geoJS/layers/rectangleLayer.ts
@@ -33,6 +33,9 @@ export default class RectangleLayer {
 
   style: LayerStyle<RectGeoJSData>;
 
+  scaledWidth: number;
+  scaledHeight: number;
+
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   constructor(
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -46,6 +49,8 @@ export default class RectangleLayer {
     this.formattedData = [];
     this.hoverOn = false;
     this.selectedIndex = [];
+    this.scaledWidth = 0;
+    this.scaledHeight = 0;
     this.event = event;
     //Only initialize once, prevents recreating Layer each edit
     const layer = this.geoViewerRef.createLayer("feature", {
@@ -106,6 +111,11 @@ export default class RectangleLayer {
     }
   }
 
+  setScaledDimensions(newWidth: number, newHeight: number) {
+    this.scaledWidth = newWidth;
+    this.scaledHeight = newHeight;    
+  }
+
   formatData(
     annotationData: SpectrogramAnnotation[],
     selectedIndex: number | null,
@@ -115,7 +125,7 @@ export default class RectangleLayer {
   ) {
     const arr: RectGeoJSData[] = [];
     annotationData.forEach((annotation: SpectrogramAnnotation) => {
-      const polygon = spectroToGeoJSon(annotation, this.spectroInfo, yScale);
+      const polygon = spectroToGeoJSon(annotation, this.spectroInfo, yScale, this.scaledWidth, this.scaledHeight);
       const [xmin, ymin] = polygon.coordinates[0][0];
       const [xmax, ymax] = polygon.coordinates[0][2];
       // For the compressed view we need to filter out default or NaN numbers
diff --git a/client/src/components/geoJS/layers/speciesLayer.ts b/client/src/components/geoJS/layers/speciesLayer.ts
index b696698..627b3b1 100644
--- a/client/src/components/geoJS/layers/speciesLayer.ts
+++ b/client/src/components/geoJS/layers/speciesLayer.ts
@@ -28,6 +28,8 @@ export default class SpeciesLayer {
 
   textStyle: LayerStyle<TextData>;
 
+  scaledWidth: number;
+  scaledHeight: number;
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   constructor(
@@ -41,6 +43,8 @@ export default class SpeciesLayer {
     this.spectroInfo = spectroInfo;
     this.textData = [];
     this.event = event;
+    this.scaledWidth = 0;
+    this.scaledHeight = 0;
     //Only initialize once, prevents recreating Layer each edit
     const layer = this.geoViewerRef.createLayer("feature", {
       features: ["text"],
@@ -54,11 +58,16 @@ export default class SpeciesLayer {
     this.textStyle = this.createTextStyle();
   }
 
+  setScaledDimensions(newWidth: number, newHeight: number) {
+    this.scaledWidth = newWidth;
+    this.scaledHeight = newHeight;
+  }
+
 
   formatData(annotationData: SpectrogramAnnotation[]) {
     this.textData = [];
     annotationData.forEach((annotation: SpectrogramAnnotation) => {
-      const polygon = spectroToGeoJSon(annotation, this.spectroInfo);
+      const polygon = spectroToGeoJSon(annotation, this.spectroInfo, 1, this.scaledWidth, this.scaledHeight);
       const [xmin, ymin] = polygon.coordinates[0][0];
       const [xmax, ymax] = polygon.coordinates[0][2];
       // For the compressed view we need to filter out default or NaN numbers
diff --git a/client/src/components/geoJS/layers/speciesSequenceLayer.ts b/client/src/components/geoJS/layers/speciesSequenceLayer.ts
index 6e06bd4..0b1efce 100644
--- a/client/src/components/geoJS/layers/speciesSequenceLayer.ts
+++ b/client/src/components/geoJS/layers/speciesSequenceLayer.ts
@@ -29,6 +29,9 @@ export default class SpeciesSequenceLayer {
 
   textStyle: LayerStyle<TextData>;
 
+  scaledWidth: number;
+  scaledHeight: number;
+
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   constructor(
@@ -41,6 +44,8 @@ export default class SpeciesSequenceLayer {
     this.geoViewerRef = geoViewerRef;
     this.spectroInfo = spectroInfo;
     this.textData = [];
+    this.scaledWidth = 0;
+    this.scaledHeight = 0;
     this.event = event;
     //Only initialize once, prevents recreating Layer each edit
     const layer = this.geoViewerRef.createLayer("feature", {
@@ -55,11 +60,15 @@ export default class SpeciesSequenceLayer {
     this.textStyle = this.createTextStyle();
   }
 
+  setScaledDimensions(newWidth: number, newHeight: number) {
+    this.scaledWidth = newWidth;
+    this.scaledHeight = newHeight;
+  }
 
   formatData(annotationData: SpectrogramTemporalAnnotation[]) {
     this.textData = [];
     annotationData.forEach((annotation: SpectrogramTemporalAnnotation) => {
-      const polygon = spectroTemporalToGeoJSon(annotation, this.spectroInfo, -10, -50);
+      const polygon = spectroTemporalToGeoJSon(annotation, this.spectroInfo, -10, -50, 1, this.scaledWidth, this.scaledHeight);
       const [xmin, ymin] = polygon.coordinates[0][0];
       const [xmax, ymax] = polygon.coordinates[0][2];
       // For the compressed view we need to filter out default or NaN numbers
diff --git a/client/src/components/geoJS/layers/temporalLayer.ts b/client/src/components/geoJS/layers/temporalLayer.ts
index 8f2909c..7a1cdac 100644
--- a/client/src/components/geoJS/layers/temporalLayer.ts
+++ b/client/src/components/geoJS/layers/temporalLayer.ts
@@ -34,6 +34,9 @@ export default class TemporalLayer {
 
   style: LayerStyle<RectGeoJSData>;
 
+  scaledWidth: number;
+  scaledHeight: number;
+
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   constructor(
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -49,6 +52,8 @@ export default class TemporalLayer {
     this.hoverOn = false;
     this.selectedIndex = [];
     this.event = event;
+    this.scaledWidth = 0;
+    this.scaledHeight = 0;
     //Only initialize once, prevents recreating Layer each edit
     const layer = this.geoViewerRef.createLayer("feature", {
       features: ["polygon"],
@@ -92,6 +97,11 @@ export default class TemporalLayer {
     this.event("annotation-hover", { id: found, pos: e.mouse.geo });
   }
 
+  setScaledDimensions(newWidth: number, newHeight: number) {
+    this.scaledWidth = newWidth;
+    this.scaledHeight = newHeight;
+  }
+
   setHoverAnnotations(val: boolean) {
     if (!this.hoverOn && val) {
       this.featureLayer.geoOn(geo.event.feature.mouseover, (e: GeoEvent) =>
@@ -118,7 +128,7 @@ export default class TemporalLayer {
   ) {
     const arr: RectGeoJSData[] = [];
     annotationData.forEach((annotation: SpectrogramTemporalAnnotation) => {
-      const polygon = spectroTemporalToGeoJSon(annotation, this.spectroInfo, -10, -50,yScale);
+      const polygon = spectroTemporalToGeoJSon(annotation, this.spectroInfo, -10, -50, yScale, this.scaledWidth, this.scaledHeight);
       const [xmin, ymin] = polygon.coordinates[0][0];
       const [xmax, ymax] = polygon.coordinates[0][2];
       // For the compressed view we need to filter out default or NaN numbers
diff --git a/client/src/components/geoJS/layers/timeLayer.ts b/client/src/components/geoJS/layers/timeLayer.ts
index 5757d19..e738040 100644
--- a/client/src/components/geoJS/layers/timeLayer.ts
+++ b/client/src/components/geoJS/layers/timeLayer.ts
@@ -39,6 +39,9 @@ export default class TimeLayer {
   textStyle: LayerStyle<TextData>;
   lineStyle: LayerStyle<LineData>;
 
+  scaledWidth: number;
+  scaledHeight: number;
+
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   constructor(
@@ -52,6 +55,8 @@ export default class TimeLayer {
     this.lineData = [];
     this.spectroInfo = spectroInfo;
     this.textData = [];
+    this.scaledWidth = 0;
+    this.scaledHeight = 0;
     this.event = event;
     //Only initialize once, prevents recreating Layer each edit
     const layer = this.geoViewerRef.createLayer("feature", {
@@ -68,13 +73,18 @@ export default class TimeLayer {
     this.lineStyle = this.createLineStyle();
   }
 
+  setScaledDimensions(newWidth: number, newHeight: number) {
+    this.scaledWidth = newWidth;
+    this.scaledHeight = newHeight;
+  }
+
 
   formatData(annotationData: SpectrogramAnnotation[], temporalData: SpectrogramTemporalAnnotation[] =[]) {
     this.textData = [];
     this.lineData = [];
     const lineDist = 12;
     annotationData.forEach((annotation: SpectrogramAnnotation) => {
-      const polygon = spectroToGeoJSon(annotation, this.spectroInfo);
+      const polygon = spectroToGeoJSon(annotation, this.spectroInfo, 1, this.scaledWidth, this.scaledHeight);
       const {start_time, end_time } = annotation;
       const [xmin, ymin] = polygon.coordinates[0][0];
       const [xmax, ymax] = polygon.coordinates[0][2];
@@ -123,7 +133,7 @@ export default class TimeLayer {
       });
     });
     temporalData.forEach((annotation: SpectrogramTemporalAnnotation) => {
-      const polygon = spectroTemporalToGeoJSon(annotation, this.spectroInfo, -10, -50);
+      const polygon = spectroTemporalToGeoJSon(annotation, this.spectroInfo, -10, -50, 1, this.scaledWidth, this.scaledHeight);
       const {start_time, end_time } = annotation;
       const [xmin, ymin] = polygon.coordinates[0][0];
       const [xmax, ymax] = polygon.coordinates[0][2];