event handling, to extend to manage other hash arguments

leaflet-hash.js

@@ -11,6 +11,8 @@
 		if (map) {
 			this.init(map);
 		}
+
+		this.events = new Object();
 	};
 
 	L.Hash.parseHash = function(hash) {
@@ -86,9 +88,20 @@
 			}
 
 			var hash = this.formatHash(this.map);
+			if (this.events['change']) {
+				for (var i=0; i<this.events['change'].length; i++) {
+					hash = this.events['change'][i](hash);
+				}
+			}
+
 			if (this.lastHash != hash) {
 				location.replace(hash);
 				this.lastHash = hash;
+				if (this.events['hash']) {
+					for (var i=0; i<this.events['hash'].length; i++) {
+						this.events['hash'][i](hash);
+					}
+				}
 			}
 		},
 
@@ -104,12 +117,49 @@
 
 				this.map.setView(parsed.center, parsed.zoom);
 
+				if (this.events['update']) {
+					for (var i=0; i<this.events['update'].length; i++) {
+						this.events['update'][i](hash);
+					}
+				}
 				this.movingMap = false;
 			} else {
 				this.onMapMove(this.map);
 			}
 		},
 
+		on: function(event, func) {
+			if (! this.events[event]) {
+				this.events[event] = [ func ];
+			} else {
+				this.events[event].push(func);
+			}
+		},
+		off: function(event, func) {
+			if (this.events[event]) {
+				for (var i=0; i<this.events[event].length; i++) {
+					if (this.events[event][i] == func) {
+						this.events[event].splice(i);
+						return;
+					}
+				}
+			}
+		},
+		trigger: function(event) {
+			if (event == "move") {
+				if (! this.movingMap) {
+					this.onMapMove();
+				}
+			}
+		},
+		// setMovingMap()/clearMovingMap() when making multiple changes that affect hash arguments
+		//   ie when moving location and changing visible layers
+		setMovingMap: function() {
+			this.movingMap = true;
+		},
+		clearMovingMap: function() {
+			this.movingMap = false;
+		},
 		// defer hash change updates every 100ms
 		changeDefer: 100,
 		changeTimeout: null,

test/spec/hash.js

@@ -65,4 +65,88 @@ describe("L.Hash", function() {
       map.setView([51, 2], 13);
       expect(L.Hash.formatHash(map)).to.be('#13/51.0000/2.0000');
     });
+
+    function setQueryVariable(hash, key, value) {
+      var vars = hash.split("&");
+      var found = false;
+      for (var i=0;i<vars.length;i++) {
+        var pair = vars[i].split("=");
+        if(pair[0] == key){
+          vars[i] = key + "=" + value;
+          found = true;
+        }
+      }
+      if (! found) { vars.push(  key + "=" + value ); }
+      return(vars.join("&"));
+    }
+
+    function getQueryVariable(hash, variable) {
+      var vars = hash.split("&");
+      for (var i=0;i<vars.length;i++) {
+        var pair = vars[i].split("=");
+        if(pair[0] == variable){return pair[1];}
+      }
+      return(false);
+    }
+
+    it('updates hash from layers', function() {
+      var hash = L.hash(map);
+      map.setView([51.505, -0.09], 13);
+
+      var group = L.layerGroup();
+      group.addTo(map);
+
+      hash.on('change', function(hash) {
+        var ids = [];
+        group.eachLayer( function(layer) { ids.push(layer.getAttribution()); } );
+        return setQueryVariable(hash, "layers", ids.join(','));
+      });
+
+      var layer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: 'OSM' });
+      group.addLayer( layer );
+      hash.trigger('move');
+
+      expect(location.hash).to.be('#13/51.5050/-0.0900&layers=OSM');
+
+      var hot_layer = L.tileLayer('http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', { attribution: 'HOT' });
+      group.addLayer( hot_layer );
+      hash.trigger('move');
+      expect(location.hash).to.be('#13/51.5050/-0.0900&layers=OSM,HOT');  
+
+      group.removeLayer(layer);
+      group.removeLayer(hot_layer);
+      hash.trigger('move');  
+      expect(location.hash).to.be('#13/51.5050/-0.0900&layers=');     
+    });
+
+    it('updates layers from hash', function(done) {
+      var hash = L.hash(map);
+      map.setView([51.505, -0.09], 13);
+
+      var group = L.layerGroup();
+      group.addTo(map);
+
+      hash.on('update', function(hash) {
+        group.eachLayer( function(layer) { group.removeLayer( layer ); });
+        layers = getQueryVariable(hash, "layers");
+        if (layers == "OSM") {
+          var layer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: 'OSM' });
+          group.addLayer( layer );
+        } else if (layers = "HOT") {
+          var layer = L.tileLayer('http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', { attribution: 'HOT' });
+          group.addLayer( layer );
+        }
+      });
+
+      location.hash = '#13/20/40&layers=HOT';
+      window.setTimeout(function() {
+        expect(Math.round(map.getCenter().lat)).to.be(20);
+        expect(Math.round(map.getCenter().lng)).to.be(40);
+        var ids = [];
+        group.eachLayer( function(layer) { ids.push(layer.getAttribution()); } );
+          expect(ids[0]).to.be("HOT");
+          expect(ids.length).to.be(1);
+          done();
+        }, 200);  
+    });
 });