Working zoom to bounds button.

Author: mjmdavis

packages/geojson-extension/src/index.tsx

@@ -70,9 +70,31 @@ const URL_TEMPLATE: string = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png
 const LAYER_OPTIONS: leaflet.TileLayerOptions = {
   attribution: 'Map data (c) <a href="https://openstreetmap.org">OpenStreetMap</a> contributors',
   minZoom: 0,
-  maxZoom: 18
+  maxZoom: 20
 };
 
+// class FitToBounds extends leaflet.Control {
+//     _img: HTMLImageElement;
+//     onAdd(map: object): HTMLElement {
+//         this._img = leaflet.DomUtil.create('img') as HTMLImageElement;
+//         this._img.className = 'jp-ZoomToBoundsIcon';
+//         this._img.style.width = '40px';
+//         this._img.onclick = function(){map.fitToBounds()};
+//         return this._img;
+//         };
+// }
+
+class FitToBounds extends leaflet.Control {
+    _img: HTMLImageElement;
+    delegate: RenderedGeoJSON;
+    onAdd(map: leaflet.Map): HTMLElement {
+        this._img = leaflet.DomUtil.create('img') as HTMLImageElement;
+        this._img.className = 'jp-ZoomToBoundsIcon';
+        this._img.style.width = '40px';
+        this._img.onclick = this.delegate.fitToBounds.bind(this.delegate);
+        return this._img;
+    };
+};
 
 export
 class RenderedGeoJSON extends Widget implements IRenderMime.IRenderer {
@@ -90,6 +112,9 @@ class RenderedGeoJSON extends Widget implements IRenderMime.IRenderer {
     this._map = leaflet.map(this.node, {
         trackResize: false
     });
+    let ftb_control = new FitToBounds();
+    ftb_control.delegate = this;
+    ftb_control.addTo(this._map);
   }
 
   /**
@@ -120,7 +145,12 @@ class RenderedGeoJSON extends Widget implements IRenderMime.IRenderer {
       resolve();
     });
   }
-  
+
+
+   fitToBounds(): void {
+       // Update map size after panel/window is resized
+       this._map.fitBounds(this._geoJSONLayer.getBounds());
+    }
   /**
    * A message handler invoked on an `'after-attach'` message.
    */
@@ -137,13 +167,15 @@ class RenderedGeoJSON extends Widget implements IRenderMime.IRenderer {
         this._map.scrollWheelZoom.enable();
       });
     }
+    this.fitToBounds();
     this.update();
   }
 
   /**
    * A message handler invoked on an `'after-show'` message.
    */
   protected onAfterShow(msg: Message): void {
+    this.fitToBounds();
     this.update();
   }
 
@@ -160,8 +192,6 @@ class RenderedGeoJSON extends Widget implements IRenderMime.IRenderer {
   protected onUpdateRequest(msg: Message): void {
     // Update map size after update
     if (this.isVisible) this._map.invalidateSize();
-    // Update map size after panel/window is resized
-    this._map.fitBounds(this._geoJSONLayer.getBounds());
   }
 
   private _map: leaflet.Map;

packages/geojson-extension/style/index.css

@@ -6,6 +6,7 @@
 /* Add CSS variables to :root */
 :root {
   --jp-icon-geojson: url('./geojson.svg');
+  --jp-icon-zoom-to-bounds: url('./zoom_to_bounds.svg');
 }
 
 /* Base styles */
@@ -30,3 +31,8 @@
 .jp-GeoJSONIcon {
   background-image: var(--jp-icon-geojson);
 }
+
+/* Zoom to bounds icon */
+.jp-ZoomToBoundsIcon {
+  content: var(--jp-icon-zoom-to-bounds);
+}