From e161161dbd10ea752fe8998dabf8f8910c271a40 Mon Sep 17 00:00:00 2001 From: Ahmad Ayubi Date: Tue, 22 Dec 2020 10:23:34 -0500 Subject: [PATCH] Conditionally show controls based on map size --- src/mapml-viewer.js | 13 +++++++++---- src/web-map.js | 13 +++++++++---- 2 files changed, 18 insertions(+), 8 deletions(-) diff --git a/src/mapml-viewer.js b/src/mapml-viewer.js index 5382abe27..e2876f479 100644 --- a/src/mapml-viewer.js +++ b/src/mapml-viewer.js @@ -230,7 +230,9 @@ export class MapViewer extends HTMLElement { setControls(isToggle, toggleShow, setup){ if (this.controls && this._map) { let controls = ["_zoomControl", "_reloadButton", "_fullScreenControl", "_layerControl"], - options = ["nozoom", "noreload", "nofullscreen", 'nolayer']; + options = ["nozoom", "noreload", "nofullscreen", 'nolayer'], + mapSize = this._map.getSize().y, + totalSize = 0; //removes the left hand controls, if not done they will be re-added in the incorrect order //better to just reset them @@ -255,13 +257,16 @@ export class MapViewer extends HTMLElement { this._map.fire("validate"); } } - if (!this.controlslist.toLowerCase().includes("nozoom") && !this._zoomControl){ + if (!this.controlslist.toLowerCase().includes("nozoom") && !this._zoomControl && (totalSize + 93) <= mapSize){ + totalSize += 93; this._zoomControl = L.control.zoom().addTo(this._map); } - if (!this.controlslist.toLowerCase().includes("noreload") && !this._reloadButton){ + if (!this.controlslist.toLowerCase().includes("noreload") && !this._reloadButton && (totalSize + 49) <= mapSize){ + totalSize += 49; this._reloadButton = M.reloadButton().addTo(this._map); } - if (!this.controlslist.toLowerCase().includes("nofullscreen") && !this._fullScreenControl){ + if (!this.controlslist.toLowerCase().includes("nofullscreen") && !this._fullScreenControl && (totalSize + 49) <= mapSize){ + totalSize += 49; this._fullScreenControl = L.control.fullscreen().addTo(this._map); } //removes any control layers that are not needed, either by the toggling or by the controlslist attribute diff --git a/src/web-map.js b/src/web-map.js index 42fac7d98..b0d60bd09 100644 --- a/src/web-map.js +++ b/src/web-map.js @@ -266,7 +266,9 @@ export class WebMap extends HTMLMapElement { setControls(isToggle, toggleShow, setup){ if (this.controls && this._map) { let controls = ["_zoomControl", "_reloadButton", "_fullScreenControl", "_layerControl"], - options = ["nozoom", "noreload", "nofullscreen", 'nolayer']; + options = ["nozoom", "noreload", "nofullscreen", 'nolayer'], + mapSize = this._map.getSize().y, + totalSize = 0; //removes the left hand controls, if not done they will be re-added in the incorrect order //better to just reset them @@ -291,13 +293,16 @@ export class WebMap extends HTMLMapElement { this._map.fire("validate"); } } - if (!this.controlslist.toLowerCase().includes("nozoom") && !this._zoomControl){ + if (!this.controlslist.toLowerCase().includes("nozoom") && !this._zoomControl && (totalSize + 93) <= mapSize){ + totalSize += 93; this._zoomControl = L.control.zoom().addTo(this._map); } - if (!this.controlslist.toLowerCase().includes("noreload") && !this._reloadButton){ + if (!this.controlslist.toLowerCase().includes("noreload") && !this._reloadButton && (totalSize + 49) <= mapSize){ + totalSize += 49; this._reloadButton = M.reloadButton().addTo(this._map); } - if (!this.controlslist.toLowerCase().includes("nofullscreen") && !this._fullScreenControl){ + if (!this.controlslist.toLowerCase().includes("nofullscreen") && !this._fullScreenControl && (totalSize + 49) <= mapSize){ + totalSize += 49; this._fullScreenControl = L.control.fullscreen().addTo(this._map); } //removes any control layers that are not needed, either by the toggling or by the controlslist attribute