From 558d17222063064eb1c6a3cc4b3e221c911c4ffd Mon Sep 17 00:00:00 2001 From: John J Czaplewski Date: Wed, 17 Feb 2016 15:14:53 -0600 Subject: [PATCH 1/2] Respect other hashes and queries --- README.md | 20 ++++++++++++++++++++ leaflet-hash.js | 19 +++++++++++++++---- 2 files changed, 35 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 596d01e..9086486 100644 --- a/README.md +++ b/README.md @@ -21,6 +21,26 @@ You can view a demo of leaflet-hash at [mlevans.github.io/leaflet-hash/map.html] var hash = new L.Hash(map); ``` +### Modifications from original +`L.Hash` accepts a second parameter `options` which can have two values, `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 respect 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..4191106 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.baseURI) { + hash = hash.replace(this.options.baseURI, ""); + } + if (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.query && location.hash.indexOf('?') > -1 ? '?' + location.hash.split('?')[1] : ''); + + return (this.options.baseURI ? this.options.baseURI : "") + + "#" + [zoom, center.lat.toFixed(precision), center.lng.toFixed(precision) - ].join("/"); + ].join("/") + query; }, L.Hash.prototype = { From 9831fb96432d86855e740c6251be1f3d825b6ec0 Mon Sep 17 00:00:00 2001 From: John J Czaplewski Date: Wed, 17 Feb 2016 21:52:10 -0600 Subject: [PATCH 2/2] Add tests, clean up README --- README.md | 11 ++++++----- leaflet-hash.js | 12 ++++++------ test/spec/hash.js | 14 ++++++++++++++ 3 files changed, 26 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 9086486..91baa3e 100644 --- a/README.md +++ b/README.md @@ -21,9 +21,10 @@ You can view a demo of leaflet-hash at [mlevans.github.io/leaflet-hash/map.html] var hash = new L.Hash(map); ``` -### Modifications from original -`L.Hash` accepts a second parameter `options` which can have two values, `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: +### 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, { @@ -31,8 +32,8 @@ L.Hash(map, { }); ```` -`query` can be used to allow `leaflet-hash` to respect 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 +`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, { diff --git a/leaflet-hash.js b/leaflet-hash.js index 4191106..115d5fb 100644 --- a/leaflet-hash.js +++ b/leaflet-hash.js @@ -16,10 +16,10 @@ }; L.Hash.parseHash = function(hash) { - if (this.options.baseURI) { + if (this.options && this.options.baseURI) { hash = hash.replace(this.options.baseURI, ""); } - if (this.options.query) { + if (this.options && this.options.query) { hash = hash.split('?')[0]; } if (hash.indexOf('#') === 0) { @@ -48,9 +48,9 @@ zoom = map.getZoom(), precision = Math.max(0, Math.ceil(Math.log(zoom) / Math.LN2)); - var query = (this.options.query && location.hash.indexOf('?') > -1 ? '?' + location.hash.split('?')[1] : ''); + var query = (this.options && this.options.query && location.hash.indexOf('?') > -1 ? '?' + location.hash.split('?')[1] : ''); - return (this.options.baseURI ? this.options.baseURI : "") + + return (this.options && this.options.baseURI ? this.options.baseURI : "") + "#" + [zoom, center.lat.toFixed(precision), center.lng.toFixed(precision) @@ -161,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'); + }); });