[WIP]Embed feature in demo page

example/index.html

@@ -29,6 +29,8 @@
   <link href="../node_modules/leaflet/dist/leaflet.css" rel="stylesheet" />
   <link href="../dist/LeafletEnvironmentalLayers.css" rel="stylesheet" />
 
+  <link href="../node_modules\@fortawesome\fontawesome-free\css\all.min.css" rel="stylesheet" />
+
   <script src="../node_modules/leaflet-spin/example/spin/dist/spin.min.js"></script>
   <script src="../node_modules/leaflet-spin/example/leaflet.spin.min.js"></script>
 
@@ -38,6 +40,8 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/OverlappingMarkerSpiderfier-Leaflet/0.2.6/oms.min.js"></script>
 
   <script src="lib/glify.js"></script>
+
+  <script src="lib/leaflet-fullUrlHash.js"></script>
 
   <link rel="stylesheet" href="styles.css">
 

example/layers.js

@@ -229,9 +229,11 @@
     //   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);
-
+
+    var embedControl = new L.control.embed();
+    embedControl.addTo(map); 
 
 

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);

example/oneLinerCodeExample.html

@@ -39,6 +39,9 @@
 
   <script src="lib/glify.js"></script>
 
+  <script src="lib/leaflet-fullUrlHash.js"></script>
+
+  <link href="../node_modules\@fortawesome\fontawesome-free\css\all.min.css" rel="stylesheet" />
   <link rel="stylesheet" href="styles.css">
 
   </head>
@@ -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);
 
     </script>

example/unearthing-pvd.html

@@ -30,7 +30,10 @@
 
 
   <script src="lib/glify.js"></script>
+
+  <script src="lib/leaflet-fullUrlHash.js"></script>
 
+  <link href="../node_modules\@fortawesome\fontawesome-free\css\all.min.css" rel="stylesheet" />
   <link rel="stylesheet" href="styles.css">
 
   </head>
@@ -72,6 +75,7 @@
         include: ['asian', 'clouds', 'Unearthing'],
         // exclude: ['mapknitter', 'clouds'],
         hash: true,
+        embed: true
       }).addTo(map);
 
     </script>

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",

src/AllLayers.js

@@ -121,15 +121,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);
+		   if(this.options.hash)
+			   var hash = new L.FullHash(map,this.overlayMaps);
 				// Parse map data from location hash
 				var parsed = hash.parseHash(this.options.currentHash);
 				var layers = parsed.layers;