Added back double click to reset map transform

src/components/map/MapInteraction.js

@@ -1,4 +1,10 @@
-import React, { useRef, useEffect, useState, useContext } from "react";
+import React, {
+  useRef,
+  useEffect,
+  useState,
+  useContext,
+  useCallback,
+} from "react";
 import { Box } from "theme-ui";
 import { useGesture } from "react-use-gesture";
 import ReactResizeDetector from "react-resize-detector";
@@ -36,7 +42,7 @@ function MapInteraction({ map, children, controls, selectedToolId }) {
   const stageTranslateRef = useRef({ x: 0, y: 0 });
   const mapDragPositionRef = useRef({ x: 0, y: 0 });
 
-  useEffect(() => {
+  const resetMapTransform = useCallback(() => {
     const layer = mapLayerRef.current;
     if (map && layer) {
       const mapHeight = stageWidthRef.current * (map.height / map.width);
@@ -48,9 +54,16 @@ function MapInteraction({ map, children, controls, selectedToolId }) {
       layer.y(newTranslate.y);
       layer.draw();
       stageTranslateRef.current = newTranslate;
+
+      setStageScale(1);
     }
   }, [map]);
 
+  // Reset transform when map changes
+  useEffect(() => {
+    resetMapTransform();
+  }, [map, resetMapTransform]);
+
   // Convert a client space XY to be normalized to the map image
   function getMapDragPosition(xy) {
     const [x, y] = xy;
@@ -197,6 +210,7 @@ function MapInteraction({ map, children, controls, selectedToolId }) {
       ref={containerRef}
       {...bind()}
       className="map"
+      onDoubleClick={resetMapTransform}
     >
       <ReactResizeDetector handleWidth handleHeight onResize={handleResize}>
         <Stage