From fdeac862c70c20b72cf5443894e29827cc309834 Mon Sep 17 00:00:00 2001 From: Renisha Christie Date: Mon, 9 Dec 2019 14:42:24 +0530 Subject: [PATCH 1/9] Add embed feature --- example/index.html | 2 ++ example/layers.js | 4 +++- src/util/embedControl.js | 50 ++++++++++++++++++++++++++++++++++++++++ 3 files changed, 55 insertions(+), 1 deletion(-) create mode 100644 src/util/embedControl.js diff --git a/example/index.html b/example/index.html index 7e0b704b4..7bb403557 100644 --- a/example/index.html +++ b/example/index.html @@ -38,6 +38,8 @@ + + diff --git a/example/layers.js b/example/layers.js index 7f203e228..26b08602b 100644 --- a/example/layers.js +++ b/example/layers.js @@ -232,6 +232,8 @@ var hash = new L.Hash(map, allMapLayers); var leafletControl = new L.control.layers(baseMaps,overlayMaps); leafletControl.addTo(map); - + + var embedControl = new L.control.embed(); + embedControl.addTo(map); diff --git a/src/util/embedControl.js b/src/util/embedControl.js new file mode 100644 index 000000000..c3cd16a7d --- /dev/null +++ b/src/util/embedControl.js @@ -0,0 +1,50 @@ +L.Control.Embed = L.Control.extend({ + + options: { + position: 'bottomleft', + }, + + initialize: function(options) { + L.Util.setOptions(this, options); + this._embedElement = L.DomUtil.create('button'); + this._embedIconElement = L.DomUtil.create('i', 'fa fa-code') + this._embedElement.appendChild(this._embedIconElement); + this.onClick(); + }, + + onAdd: function(map) { + return this._embedElement; + }, + + onClick: function() { + var self = this; + L.DomEvent.on(this._embedElement, 'click', function(ev) { + prompt('Use this HTML code to embed this map on another site.', self.generateCode()) + }) + }, + + getUrlHashParameters: function() { + var hash = window.location.hash; + var getValues = hash.substr(1).split('/'); + var params = { + lat: getValues[1], + lng: getValues[2], + zoom: getValues[0], + layers: getValues[3] + } + return params; + }, + + generateCode: function() { + var params = this.getUrlHashParameters(); + var code = ''; + return code; + }, + + onRemove: function(map) {} + +}) + +L.control.embed = function() { + return new L.Control.Embed(); +} From 291b6935258490431c24de1d2578d8e2addda651 Mon Sep 17 00:00:00 2001 From: crisner Date: Mon, 9 Dec 2019 16:58:16 +0530 Subject: [PATCH 2/9] Add an options parameter to embed control --- src/util/embedControl.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/util/embedControl.js b/src/util/embedControl.js index c3cd16a7d..aec82611d 100644 --- a/src/util/embedControl.js +++ b/src/util/embedControl.js @@ -45,6 +45,6 @@ L.Control.Embed = L.Control.extend({ }) -L.control.embed = function() { - return new L.Control.Embed(); +L.control.embed = function(options) { + return new L.Control.Embed(options); } From 647e23425db52d5a0dbdad517ad423092732b789 Mon Sep 17 00:00:00 2001 From: crisner Date: Tue, 10 Dec 2019 17:25:03 +0530 Subject: [PATCH 3/9] Reformat url --- example/index.html | 2 + example/layers.js | 2 +- example/lib/leaflet-fullUrlHash.js | 198 +++++++++++++++++++++++++++++ 3 files changed, 201 insertions(+), 1 deletion(-) create mode 100644 example/lib/leaflet-fullUrlHash.js diff --git a/example/index.html b/example/index.html index 7bb403557..4db2cbac9 100644 --- a/example/index.html +++ b/example/index.html @@ -39,6 +39,8 @@ + + diff --git a/example/layers.js b/example/layers.js index 26b08602b..e0fd164f6 100644 --- a/example/layers.js +++ b/example/layers.js @@ -229,7 +229,7 @@ // circleSpiralSwitchover: 0 // }); - var hash = new L.Hash(map, allMapLayers); + var hash = new L.FullHash(map, allMapLayers); var leafletControl = new L.control.layers(baseMaps,overlayMaps); leafletControl.addTo(map); diff --git a/example/lib/leaflet-fullUrlHash.js b/example/lib/leaflet-fullUrlHash.js new file mode 100644 index 000000000..e0b634433 --- /dev/null +++ b/example/lib/leaflet-fullUrlHash.js @@ -0,0 +1,198 @@ +(function(window) { + var HAS_HASHCHANGE = (function() { + var doc_mode = window.documentMode; + return ('onhashchange' in window) && + (doc_mode === undefined || doc_mode > 7); + })(); + + L.FullHash = function(map, options) { + this.onHashChange = L.Util.bind(this.onHashChange, this); + + if (map) { + this.init(map, options); + } + }; + + L.FullHash.parseHash = function(locationHash) { + // Modified from urlHash library -> https://github.com/jywarren/urlhash + // ----------------------------------- + var hash = locationHash || location.hash; + if (hash) hash = hash.split('#')[1]; + var pairs = hash.split('&'); + var object = {}; + pairs.forEach(function(pair, i) { + pair = pair.split('='); + if (pair[0] != '') object[pair[0]] = pair[1]; + }); + + + if(isNaN(object.lat) || isNaN(object.lon) || isNaN(object.zoom)) { + return false; + } else { + return { + center: new L.LatLng(object.lat, object.lon), + zoom: object.zoom, + layers: object.layers.split(',') + }; + } + // ----------------------------------- + }; + + L.FullHash.formatHash = function(map) { + var center = map.getCenter(), + zoom = map.getZoom(), + precision = Math.max(0, Math.ceil(Math.log(zoom) / Math.LN2)), + layers = []; + + var options = this.options; + //Check active layers + for(var key in options) { + if (options.hasOwnProperty(key)) { + if (map.hasLayer(options[key])) { + layers.push(key); + }; + }; + }; + + return "#lat=" + + center.lat.toFixed(precision) + "&lon=" + + center.lng.toFixed(precision) + "&zoom=" + + zoom + "&layers=" + layers.join(",") + }, + + L.FullHash.prototype = { + map: null, + lastHash: null, + + parseHash: L.FullHash.parseHash, + formatHash: L.FullHash.formatHash, + + init: function(map, options) { + this.map = map; + L.Util.setOptions(this, options); + + // reset the hash + this.lastHash = null; + this.onHashChange(); + + if (!this.isListening) { + this.startListening(); + } + }, + + removeFrom: function(map) { + if (this.changeTimeout) { + clearTimeout(this.changeTimeout); + } + + if (this.isListening) { + this.stopListening(); + } + + this.map = null; + }, + + onMapMove: function() { + // bail if we're moving the map (updating from a hash), + // or if the map is not yet loaded + + if (this.movingMap || !this.map._loaded) { + return false; + } + + var hash = this.formatHash(this.map); + if (this.lastHash != hash) { + location.replace(hash); + this.lastHash = hash; + } + }, + + movingMap: false, + update: function(locationHash) { + var hash = locationHash || location.hash; + if (hash === this.lastHash) { + return; + } + var parsed = this.parseHash(hash); + if (parsed) { + this.movingMap = true; + + this.map.setView(parsed.center, parsed.zoom); + var layers = parsed.layers, + options = this.options, + that = this; + //Add/remove layers + this.map.eachLayer(function(layer) { + that.map.removeLayer(layer); + }); + + layers.forEach(function(element, index, array) { + that.map.addLayer(options[element]); + }); + + this.movingMap = false; + } else { + this.onMapMove(this.map); + } + }, + + // defer hash change updates every 100ms + changeDefer: 100, + changeTimeout: null, + onHashChange: function() { + // throttle calls to update() so that they only happen every + // `changeDefer` ms + if (!this.changeTimeout) { + var that = this; + this.changeTimeout = setTimeout(function() { + that.update(); + that.changeTimeout = null; + }, this.changeDefer); + } + }, + + isListening: false, + hashChangeInterval: null, + startListening: function() { + this.map.on("moveend layeradd layerremove", this.onMapMove, this); + + if (HAS_HASHCHANGE) { + L.DomEvent.addListener(window, "hashchange", this.onHashChange); + } else { + clearInterval(this.hashChangeInterval); + this.hashChangeInterval = setInterval(this.onHashChange, 50); + } + this.isListening = true; + }, + + stopListening: function() { + this.map.off("moveend layeradd layerremove", this.onMapMove, this); + + if (HAS_HASHCHANGE) { + L.DomEvent.removeListener(window, "hashchange", this.onHashChange); + } else { + clearInterval(this.hashChangeInterval); + } + this.isListening = false; + }, + + _keyByValue: function(obj, value) { + for(var key in obj) { + if (obj.hasOwnProperty(key)) { + if (obj[key] === value) { + return key; + } else { return null; }; + }; + }; + } + }; + L.fullHash = function(map, options) { + return new L.FullHash(map, options); + }; + L.Map.prototype.addHash = function() { + this._fullhash = L.fullHash(this, this.options); + }; + L.Map.prototype.removeHash = function() { + this._fullhash.removeFrom(); + }; +})(window); From 427b771ba08f08919f142bf0d47ba427425be693 Mon Sep 17 00:00:00 2001 From: crisner Date: Tue, 10 Dec 2019 17:58:37 +0530 Subject: [PATCH 4/9] Add default leaflet style --- src/util/embedControl.js | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/src/util/embedControl.js b/src/util/embedControl.js index aec82611d..06660ac65 100644 --- a/src/util/embedControl.js +++ b/src/util/embedControl.js @@ -1,14 +1,22 @@ L.Control.Embed = L.Control.extend({ options: { - position: 'bottomleft', + position: 'topleft', }, initialize: function(options) { L.Util.setOptions(this, options); - this._embedElement = L.DomUtil.create('button'); - this._embedIconElement = L.DomUtil.create('i', 'fa fa-code') - this._embedElement.appendChild(this._embedIconElement); + this._embedElement = L.DomUtil.create('div'); + this._embedElement.classList.add('leaflet-control-embed', 'leaflet-bar', 'leaflet-control') + this._embedAnchorElement = L.DomUtil.create('a'); + this._embedAnchorElement.classList.add('leaflet-control-embed-link'); + this._embedAnchorElement.setAttribute('href', '#'); + this._embedAnchorElement.setAttribute('title', 'embed'); + this._embedAnchorElement.setAttribute('role', 'button'); + this._embedAnchorElement.setAttribute('aria-labelledby', 'embed'); + this._embedElement.appendChild(this._embedAnchorElement); + this._embedIconElement = L.DomUtil.create('i', 'fa fa-code'); + this._embedAnchorElement.appendChild(this._embedIconElement); this.onClick(); }, From c478082fd42ffb6185a5d1ea1d76a820b7ca9b3b Mon Sep 17 00:00:00 2001 From: crisner Date: Tue, 10 Dec 2019 19:06:36 +0530 Subject: [PATCH 5/9] Get fontawesome icon from node modules --- example/index.html | 4 ++-- package.json | 1 + src/util/embedControl.js | 2 +- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/example/index.html b/example/index.html index 4db2cbac9..0568a2b6b 100644 --- a/example/index.html +++ b/example/index.html @@ -29,6 +29,8 @@ + + @@ -40,8 +42,6 @@ - - diff --git a/package.json b/package.json index 2a3e00dcd..9f577290f 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ }, "homepage": "https://github.com/publiclab/leaflet-environmental-layers#readme", "devDependencies": { + "@fortawesome/fontawesome-free": "^5.11.2", "bootstrap": "^4.1.1", "browserify": "latest", "grunt": "^1.0.4", diff --git a/src/util/embedControl.js b/src/util/embedControl.js index 06660ac65..9941d0cc1 100644 --- a/src/util/embedControl.js +++ b/src/util/embedControl.js @@ -15,7 +15,7 @@ L.Control.Embed = L.Control.extend({ this._embedAnchorElement.setAttribute('role', 'button'); this._embedAnchorElement.setAttribute('aria-labelledby', 'embed'); this._embedElement.appendChild(this._embedAnchorElement); - this._embedIconElement = L.DomUtil.create('i', 'fa fa-code'); + this._embedIconElement = L.DomUtil.create('i', 'fas fa-code'); this._embedAnchorElement.appendChild(this._embedIconElement); this.onClick(); }, From 08e4061062df435be656c802757e73f2cc40ec0d Mon Sep 17 00:00:00 2001 From: crisner Date: Wed, 11 Dec 2019 17:59:41 +0530 Subject: [PATCH 6/9] Refactor embed control --- src/util/embedControl.js | 20 +++++--------------- 1 file changed, 5 insertions(+), 15 deletions(-) diff --git a/src/util/embedControl.js b/src/util/embedControl.js index 9941d0cc1..d4aa0f9e2 100644 --- a/src/util/embedControl.js +++ b/src/util/embedControl.js @@ -11,6 +11,7 @@ L.Control.Embed = L.Control.extend({ this._embedAnchorElement = L.DomUtil.create('a'); this._embedAnchorElement.classList.add('leaflet-control-embed-link'); this._embedAnchorElement.setAttribute('href', '#'); + this._embedAnchorElement.setAttribute('onclick', 'return false'); // To prevent the removal of url hash this._embedAnchorElement.setAttribute('title', 'embed'); this._embedAnchorElement.setAttribute('role', 'button'); this._embedAnchorElement.setAttribute('aria-labelledby', 'embed'); @@ -27,25 +28,14 @@ L.Control.Embed = L.Control.extend({ onClick: function() { var self = this; L.DomEvent.on(this._embedElement, 'click', function(ev) { - prompt('Use this HTML code to embed this map on another site.', self.generateCode()) + prompt('Use this HTML code to embed this map on another site.', self.generateCode()); }) }, - getUrlHashParameters: function() { - var hash = window.location.hash; - var getValues = hash.substr(1).split('/'); - var params = { - lat: getValues[1], - lng: getValues[2], - zoom: getValues[0], - layers: getValues[3] - } - return params; - }, - generateCode: function() { - var params = this.getUrlHashParameters(); - var code = ''; + var currentHash = window.location.hash; + var path = window.location.pathname; + var code = ''; return code; }, From 93885192a91ed27866ae523ee90be9b1717a37c4 Mon Sep 17 00:00:00 2001 From: crisner Date: Wed, 11 Dec 2019 18:48:53 +0530 Subject: [PATCH 7/9] Add embed feature to other demo files --- example/oneLinerCodeExample.html | 5 ++++- example/unearthing-pvd.html | 4 ++++ src/AllLayers.js | 11 +++++++---- 3 files changed, 15 insertions(+), 5 deletions(-) diff --git a/example/oneLinerCodeExample.html b/example/oneLinerCodeExample.html index 0857a4fd1..be0329016 100644 --- a/example/oneLinerCodeExample.html +++ b/example/oneLinerCodeExample.html @@ -39,6 +39,9 @@ + + + @@ -71,11 +74,11 @@ // keepSpiderfied: true, // circleSpiralSwitchover: 0 // }); - L.LayerGroup.EnvironmentalLayers({ include: ['odorreport', 'asian', 'clouds', 'eonetFiresLayer', 'Unearthing'], // exclude: ['mapknitter', 'clouds'], hash: true, + embed: true }).addTo(map); diff --git a/example/unearthing-pvd.html b/example/unearthing-pvd.html index dd31ec96e..2414ed2c6 100644 --- a/example/unearthing-pvd.html +++ b/example/unearthing-pvd.html @@ -30,7 +30,10 @@ + + + @@ -72,6 +75,7 @@ include: ['asian', 'clouds', 'Unearthing'], // exclude: ['mapknitter', 'clouds'], hash: true, + embed: true }).addTo(map); diff --git a/src/AllLayers.js b/src/AllLayers.js index 5aecabee4..039bad726 100644 --- a/src/AllLayers.js +++ b/src/AllLayers.js @@ -120,15 +120,18 @@ L.LayerGroup.environmentalLayers = L.LayerGroup.extend( } if(this.options.embed) { - this.overlayMaps[layer].addTo(map); + this.overlayMaps[layer].addTo(map); } - } - + } + if(this.options.embed) { + L.control.embed().addTo(map); + } + L.control.layers(baseMaps,this.overlayMaps).addTo(map); if(this.options.hash) - var hash = new L.Hash(map, this.overlayMaps); + var hash = new L.FullHash(map,this.overlayMaps); }, From cb26ca0bc920518200cfa4a234ebea088fd81fbf Mon Sep 17 00:00:00 2001 From: crisner Date: Thu, 12 Dec 2019 11:01:10 +0530 Subject: [PATCH 8/9] Commit package-lock.json --- package-lock.json | 26 ++++++++++++-------------- 1 file changed, 12 insertions(+), 14 deletions(-) diff --git a/package-lock.json b/package-lock.json index bf4674eaf..60a4b680c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,9 +1,15 @@ { "name": "leaflet-environmental-layers", - "version": "2.0.1", + "version": "2.0.6", "lockfileVersion": 1, "requires": true, "dependencies": { + "@fortawesome/fontawesome-free": { + "version": "5.11.2", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.11.2.tgz", + "integrity": "sha512-XiUPoS79r1G7PcpnNtq85TJ7inJWe0v+b5oZJZKb0pGHNIV6+UiNeQWiFGmuQ0aj7GEhnD/v9iqxIsjuRKtEnQ==", + "dev": true + }, "JSONStream": { "version": "1.3.5", "resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-1.3.5.tgz", @@ -1031,8 +1037,7 @@ "earcut": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.1.tgz", - "integrity": "sha512-5jIMi2RB3HtGPHcYd9Yyl0cczo84y+48lgKPxMijliNQaKAHEZJbdzLmKmdxG/mCdS/YD9DQ1gihL8mxzR0F9w==", - "dev": true + "integrity": "sha512-5jIMi2RB3HtGPHcYd9Yyl0cczo84y+48lgKPxMijliNQaKAHEZJbdzLmKmdxG/mCdS/YD9DQ1gihL8mxzR0F9w==" }, "ecc-jsbn": { "version": "0.1.1", @@ -2981,7 +2986,6 @@ "leaflet.glify": { "version": "github:robertleeplummerjr/Leaflet.glify#aa2b356eccd4f120f713abd5f24800e06fb3fbf7", "from": "github:robertleeplummerjr/Leaflet.glify#aa2b356", - "dev": true, "requires": { "earcut": "^2.1.3", "leaflet": "^1.3.4", @@ -2993,8 +2997,7 @@ "leaflet": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.5.1.tgz", - "integrity": "sha512-ekM9KAeG99tYisNBg0IzEywAlp0hYI5XRipsqRXyRTeuU8jcuntilpp+eFf5gaE0xubc9RuSNIVtByEKwqFV0w==", - "dev": true + "integrity": "sha512-ekM9KAeG99tYisNBg0IzEywAlp0hYI5XRipsqRXyRTeuU8jcuntilpp+eFf5gaE0xubc9RuSNIVtByEKwqFV0w==" } } }, @@ -3020,8 +3023,7 @@ "lodash": { "version": "4.17.10", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.10.tgz", - "integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg==", - "dev": true + "integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg==" }, "lodash.memoize": { "version": "3.0.4", @@ -3513,14 +3515,12 @@ "point-in-polygon": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/point-in-polygon/-/point-in-polygon-1.0.1.tgz", - "integrity": "sha1-1Ztk6P7kHElFiqyCtWcYxZV7Kvc=", - "dev": true + "integrity": "sha1-1Ztk6P7kHElFiqyCtWcYxZV7Kvc=" }, "polygon-lookup": { "version": "2.5.0", "resolved": "https://registry.npmjs.org/polygon-lookup/-/polygon-lookup-2.5.0.tgz", "integrity": "sha512-0Xs8Cvudz7M7jXGZrxAJ7tO+N4K+ZyibgvcJBy9nr9kGfa7Nbk3iZViZWPuB4T/IrsxLzl9xOt4+mZlnioye6g==", - "dev": true, "requires": { "lodash": "^4.14.2", "point-in-polygon": "1.0.1", @@ -3602,8 +3602,7 @@ "quickselect": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-1.1.1.tgz", - "integrity": "sha512-qN0Gqdw4c4KGPsBOQafj6yj/PA6c/L63f6CaZ/DCF/xF4Esu3jVmKLUDYxghFx8Kb/O7y9tI7x2RjTSXwdK1iQ==", - "dev": true + "integrity": "sha512-qN0Gqdw4c4KGPsBOQafj6yj/PA6c/L63f6CaZ/DCF/xF4Esu3jVmKLUDYxghFx8Kb/O7y9tI7x2RjTSXwdK1iQ==" }, "randomatic": { "version": "1.1.7", @@ -3687,7 +3686,6 @@ "version": "2.0.2", "resolved": "https://registry.npmjs.org/rbush/-/rbush-2.0.2.tgz", "integrity": "sha512-XBOuALcTm+O/H8G90b6pzu6nX6v2zCKiFG4BJho8a+bY6AER6t8uQUZdi5bomQc0AprCWhEGa7ncAbbRap0bRA==", - "dev": true, "requires": { "quickselect": "^1.0.1" } From bf31b184f94135a73316e6c8f2b34d9c79ffe4d7 Mon Sep 17 00:00:00 2001 From: crisner Date: Fri, 13 Dec 2019 14:20:57 +0530 Subject: [PATCH 9/9] Prevent adding all layers to the map when embed is set to true --- src/AllLayers.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/AllLayers.js b/src/AllLayers.js index 7289c24f6..e7d13e550 100644 --- a/src/AllLayers.js +++ b/src/AllLayers.js @@ -121,7 +121,7 @@ L.LayerGroup.environmentalLayers = L.LayerGroup.extend( } if(this.options.embed) { - this.overlayMaps[layer].addTo(map); + // this.overlayMaps[layer].addTo(map); } }