diff --git a/README.md b/README.md index 596d01e..91baa3e 100644 --- a/README.md +++ b/README.md @@ -21,6 +21,27 @@ You can view a demo of leaflet-hash at [mlevans.github.io/leaflet-hash/map.html] var hash = new L.Hash(map); ``` +### Options +`L.Hash` can accept a second parameter `options` which can have two keys, `baseURI` and `query`. +`baseURI` allows `leaflet-hash` to be used along side any hash-based router, such as `angular-router` and `react-router`. +For example, if your map lives at `http://mydomain.com/#/map`, you can configure `leaflet-hash` to respect that format as so: + +```` +L.Hash(map, { + baseURI: '#/map' +}); +```` + +`query` can be used to allow `leaflet-hash` to preserve query strings that may be present, for example, if you would like to use the URI to manage/preserve map layers. +If you would like to have URIs like `#/0/1/1?layers=OSM,Mapbox`, you can enable it as so + +```` +L.Hash(map, { + query: true +}); +```` + + ### Author [@mlevans](http://github.com/mlevans) diff --git a/leaflet-hash.js b/leaflet-hash.js index 70a1007..115d5fb 100644 --- a/leaflet-hash.js +++ b/leaflet-hash.js @@ -5,16 +5,24 @@ (doc_mode === undefined || doc_mode > 7); })(); - L.Hash = function(map) { + L.Hash = function(map, options) { this.onHashChange = L.Util.bind(this.onHashChange, this); + this.options = options || {}; + if (map) { this.init(map); } }; L.Hash.parseHash = function(hash) { - if(hash.indexOf('#') === 0) { + if (this.options && this.options.baseURI) { + hash = hash.replace(this.options.baseURI, ""); + } + if (this.options && this.options.query) { + hash = hash.split('?')[0]; + } + if (hash.indexOf('#') === 0) { hash = hash.substr(1); } var args = hash.split("/"); @@ -40,10 +48,13 @@ zoom = map.getZoom(), precision = Math.max(0, Math.ceil(Math.log(zoom) / Math.LN2)); - return "#" + [zoom, + var query = (this.options && this.options.query && location.hash.indexOf('?') > -1 ? '?' + location.hash.split('?')[1] : ''); + + return (this.options && this.options.baseURI ? this.options.baseURI : "") + + "#" + [zoom, center.lat.toFixed(precision), center.lng.toFixed(precision) - ].join("/"); + ].join("/") + query; }, L.Hash.prototype = { @@ -150,8 +161,8 @@ this.isListening = false; } }; - L.hash = function(map) { - return new L.Hash(map); + L.hash = function(map, options) { + return new L.Hash(map, options); }; L.Map.prototype.addHash = function() { this._hash = L.hash(this); diff --git a/test/spec/hash.js b/test/spec/hash.js index 4360fd9..b1f8fd8 100644 --- a/test/spec/hash.js +++ b/test/spec/hash.js @@ -65,4 +65,18 @@ describe("L.Hash", function() { map.setView([51, 2], 13); expect(L.Hash.formatHash(map)).to.be('#13/51.0000/2.0000'); }); + + it('respects a baseURI', function() { + location.hash = '#/map'; + var hash = L.hash(map, {baseURI: '#/map'}); + map.setView([51, 2], 13); + expect(location.hash).to.eql('#/map#13/51.0000/2.0000'); + }); + + it('respects a query', function() { + location.hash = location.hash + '?foo=bar'; + var hash = L.hash(map, {query: true}); + map.setView([51, 2], 13); + expect(location.hash).to.eql('#13/51.0000/2.0000?foo=bar'); + }); });