From 83e4000b1187247f8f8606b291d7a4b32a14eba2 Mon Sep 17 00:00:00 2001 From: mjmdavis Date: Mon, 5 Mar 2018 17:40:20 +0100 Subject: [PATCH 1/3] added zoom to bounds icon --- .../style/zoom_to_bounds.svg | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 packages/geojson-extension/style/zoom_to_bounds.svg diff --git a/packages/geojson-extension/style/zoom_to_bounds.svg b/packages/geojson-extension/style/zoom_to_bounds.svg new file mode 100644 index 000000000..44a80b1a3 --- /dev/null +++ b/packages/geojson-extension/style/zoom_to_bounds.svg @@ -0,0 +1,20 @@ + + + + Slice 1 + Created with Sketch. + + + + + + + + + + + + + + + \ No newline at end of file From 0f9f1cd305394e8c21e11306ae85e79f25b13172 Mon Sep 17 00:00:00 2001 From: mjmdavis Date: Tue, 6 Mar 2018 22:23:50 +0100 Subject: [PATCH 2/3] Working zoom to bounds button. --- packages/geojson-extension/src/index.tsx | 38 +++++++++++++++++++--- packages/geojson-extension/style/index.css | 6 ++++ 2 files changed, 40 insertions(+), 4 deletions(-) diff --git a/packages/geojson-extension/src/index.tsx b/packages/geojson-extension/src/index.tsx index 918c318ad..9b3d4794f 100644 --- a/packages/geojson-extension/src/index.tsx +++ b/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) OpenStreetMap 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,6 +167,7 @@ class RenderedGeoJSON extends Widget implements IRenderMime.IRenderer { this._map.scrollWheelZoom.enable(); }); } + this.fitToBounds(); this.update(); } @@ -144,6 +175,7 @@ class RenderedGeoJSON extends Widget implements IRenderMime.IRenderer { * 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; diff --git a/packages/geojson-extension/style/index.css b/packages/geojson-extension/style/index.css index cf35e5d25..54b28c05c 100644 --- a/packages/geojson-extension/style/index.css +++ b/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); +} From 525c3b227b562732ca0af3236e45e98b627a1b99 Mon Sep 17 00:00:00 2001 From: mjmdavis Date: Wed, 7 Mar 2018 11:19:07 +0100 Subject: [PATCH 3/3] cleanup --- packages/geojson-extension/src/index.tsx | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/packages/geojson-extension/src/index.tsx b/packages/geojson-extension/src/index.tsx index 9b3d4794f..a77014f79 100644 --- a/packages/geojson-extension/src/index.tsx +++ b/packages/geojson-extension/src/index.tsx @@ -73,17 +73,6 @@ const LAYER_OPTIONS: leaflet.TileLayerOptions = { 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;