Add a home button to the geometry viewer to set original zoom level when the viewer was opened. #2046

web/package.json

@@ -113,7 +113,7 @@
     "ip-address": "^9.0.5",
     "json-bignumber": "^1.0.1",
     "jsoneditor": "^9.5.4",
-    "leaflet": "^1.5.1",
+    "leaflet": "^1.9.4",
     "lodash": "4.*",
     "moment": "^2.29.4",
     "moment-timezone": "^0.5.34",
@@ -133,7 +133,7 @@
     "react-draggable": "^4.4.6",
     "react-dropzone": "^14.2.1",
     "react-frame-component": "^5.2.6",
-    "react-leaflet": "^3.2.2",
+    "react-leaflet": "^4.2.1",
     "react-new-window": "^1.0.1",
     "react-resize-detector": "^11.0.1",
     "react-rnd": "^10.3.5",

web/pgadmin/tools/sqleditor/static/js/components/sections/GeometryViewer.jsx

@@ -212,7 +212,7 @@ PopupTable.propTypes = {
   })),
 };
 
-function GeoJsonLayer({data}) {
+function GeoJsonLayer({data, setHomeCoordinates}) {
   const vectorLayerRef = useRef(null);
   const mapObj = useMap();
   useEffect(() => {
@@ -234,6 +234,7 @@ function GeoJsonLayer({data}) {
     } else {
       mapObj.setView(bounds.getCenter(), mapObj.getZoom());
     }
+    setHomeCoordinates({bounds,maxLength});
   }, [data]);
 
   return (
@@ -281,6 +282,8 @@ function TheMap({data}) {
   const mapObj = useMap();
   const infoControl = useRef(null);
   const resetLayersKey = useRef(0);
+  const zoomControlWithHome = useRef(null);
+  const homeCoordinates = useRef(null);
   useEffect(()=>{
     infoControl.current = Leaflet.control({position: 'topright'});
     infoControl.current.onAdd = function () {
@@ -292,8 +295,61 @@ function TheMap({data}) {
       infoControl.current.addTo(mapObj);
     }
     resetLayersKey.current++;
-    return ()=>{infoControl.current?.remove();};
+
+    zoomControlWithHome.current = Leaflet.control.zoom({
+      zoomHomeIcon: 'home',
+      zoomHomeTitle: 'Home',
+      homeCoordinates: null,
+      homeZoom: null,
+      maxLength: null,
+    });
+
+    zoomControlWithHome.current._zoomHome = function () {
+      if (this.options.maxLength > 0) {
+        this._map.fitBounds(this.options.homeCoordinates);
+      } else {
+        this._map.setView(this.options.homeCoordinates.getCenter(), this.options.homeZoom);
+      }
+    };
+    
+    zoomControlWithHome.current.onAdd = function (map) {
+      let controlName = 'leaflet-control-zoom',
+        container = Leaflet.DomUtil.create('div', controlName + ' leaflet-bar'),
+        options = this.options;
+
+      if (options.homeCoordinates === null) {
+        options.homeCoordinates = homeCoordinates.current?.bounds;
+      }
+      if (options.homeZoom === null) {
+        options.homeZoom = map.getBoundsZoom(homeCoordinates.current?.bounds);
+      }
+      if(options.maxLength === null) {
+        options.maxLength = homeCoordinates.current?.maxLength;
+      }
+
+      let zoomHomeText = `<i class="fa fa-${options.zoomHomeIcon}"></i>`;
+
+      this._zoomInButton = this._createButton(options.zoomInText, options.zoomInTitle, controlName + '-in', container, this._zoomIn.bind(this));
+      this._createButton(zoomHomeText, options.zoomHomeTitle, controlName + '-home', container, this._zoomHome.bind(this));
+      this._zoomOutButton = this._createButton(options.zoomOutText, options.zoomOutTitle, controlName + '-out', container, this._zoomOut.bind(this));
+
+      this._updateDisabled();
+      map.on('zoomend zoomlevelschange', this._updateDisabled, this);
+
+      return container;
+    };
+    zoomControlWithHome.current.addTo(mapObj);
+
+    return ()=>{
+      infoControl.current?.remove();
+      zoomControlWithHome.current?.remove();
+    };
   }, [data]);
+
+  const setHomeCoordinates = (data) => {
+    homeCoordinates.current = data;
+  };
+
   return (
     <>
       {data.selectedSRID === 4326 &&
@@ -355,7 +411,7 @@ function TheMap({data}) {
           />
         </LayersControl.BaseLayer>
       </LayersControl>}
-      <GeoJsonLayer key={resetLayersKey.current} data={data} />
+      <GeoJsonLayer key={resetLayersKey.current} data={data} setHomeCoordinates={setHomeCoordinates} />
     </>
   );
 }
@@ -395,6 +451,7 @@ export function GeometryViewer({rows, columns, column}) {
       <MapContainer
         crs={data.selectedSRID === 4326 ? CRS.EPSG3857 : CRS.Simple}
         zoom={2} center={[20, 100]}
+        zoomControl={false}
         preferCanvas={true}
         className='GeometryViewer-mapContainer'
         whenCreated={(map)=>{

web/yarn.lock

@@ -2834,14 +2834,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-leaflet/core@npm:^1.1.1":
-  version: 1.1.1
-  resolution: "@react-leaflet/core@npm:1.1.1"
+"@react-leaflet/core@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "@react-leaflet/core@npm:2.1.0"
   peerDependencies:
-    leaflet: ^1.7.1
-    react: ^17.0.1
-    react-dom: ^17.0.1
-  checksum: 2fc4a80e5524f9437ac6cef0f95e63388f2df6ecc5107fef85fd097eb2455436e796d41a4c43cdcbb983a4132403646823ba1dc0d953e866eb80808cbfaf0232
+    leaflet: ^1.9.0
+    react: ^18.0.0
+    react-dom: ^18.0.0
+  checksum: c11a15fb71a9929b809f346d8f784d0f32afa373bc096aa1f0d0fa6a2ef0ce632a563c31876abf8b255a12a19d6e80ece31e2ef505f79a678bbf073e7a6c5c60
   languageName: node
   linkType: hard
 
@@ -10179,7 +10179,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"leaflet@npm:^1.5.1":
+"leaflet@npm:^1.9.4":
   version: 1.9.4
   resolution: "leaflet@npm:1.9.4"
   checksum: bfc79f17a247b37b92d84b3c78702501603392d6589fde606de4a825d11f1609d90225388834f2e0709dac327e52dcd4b4b9cc9fd3d590060c5b1e53b84fa6c6
@@ -13401,16 +13401,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-leaflet@npm:^3.2.2":
-  version: 3.2.5
-  resolution: "react-leaflet@npm:3.2.5"
+"react-leaflet@npm:^4.2.1":
+  version: 4.2.1
+  resolution: "react-leaflet@npm:4.2.1"
   dependencies:
-    "@react-leaflet/core": ^1.1.1
+    "@react-leaflet/core": ^2.1.0
   peerDependencies:
-    leaflet: ^1.7.1
-    react: ^17.0.1
-    react-dom: ^17.0.1
-  checksum: 503b7cee8acc12e0e2c5e7675432e7ef5742463e3e5420282ce60a9efd306430caefae3cb282c976e3df7665f19aef5b49cdce44a034979b4ea3ee968c2621d2
+    leaflet: ^1.9.0
+    react: ^18.0.0
+    react-dom: ^18.0.0
+  checksum: 79222c2ba0c62facaa3dfee18f7a692f917a4fb744ba8d22269a77f9779fc9634962230eb51265ff2563a1a5e3287d2ec16640ee7f5de459458027e05cd756ba
   languageName: node
   linkType: hard
 
@@ -14020,7 +14020,7 @@ __metadata:
     jest-environment-jsdom: ^29.6.4
     json-bignumber: ^1.0.1
     jsoneditor: ^9.5.4
-    leaflet: ^1.5.1
+    leaflet: ^1.9.4
     loader-utils: ^3.2.1
     lodash: 4.*
     mini-css-extract-plugin: ^2.7.6
@@ -14045,7 +14045,7 @@ __metadata:
     react-draggable: ^4.4.6
     react-dropzone: ^14.2.1
     react-frame-component: ^5.2.6
-    react-leaflet: ^3.2.2
+    react-leaflet: ^4.2.1
     react-new-window: ^1.0.1
     react-resize-detector: ^11.0.1
     react-rnd: ^10.3.5