Comments (6)
We should make sure the pattern is supported by easy methods on Map, and provide an example for it, but personally I think this is an application-level design choice...
For example with a little bit of server-side support you can use pushState in HTML5 to support this kind of permalink without manipulating the hash/fragment https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history - Map should support a clean way of passing state around as used in that API.
On http://cartagr.am we didn't use pushState, we used a jquery.history plug-in (of which there are many), it looks something like this:
// http://tkyk.github.com/jquery-history-plugin/#documentation
$.history.init(function(hash){
if(hash != "") {
var args = hash.split("/");
if (args.length == 3) {
map.setCenterZoom(new MM.Location(Number(args[1]), Number(args[2])), Number(args[0]));
}
}
}, { unescape: ",/" });
var updateTimer = 0;
function updateHash() {
if (updateTimer) {
clearTimeout(updateTimer);
updateTimer = 0;
}
updateTimer = setTimeout(reallyUpdateHash, 500);
}
function reallyUpdateHash() {
var zoom = map.getZoom(),
center = map.getCenter(),
lat = center.lat,
lon = center.lon,
precision = Math.max(0, Math.ceil(Math.log(zoom) / Math.LN2)), // trust the Bostock
hash = zoom.toFixed(2) + "/" + lat.toFixed(precision) + "/" + lon.toFixed(precision);
// library only updates if hash is different
$.history.load(hash);
updateTimer = 0;
}
map.addCallback('drawn', updateHash);
Note the 500ms timer to make sure you're not modifying the URL hash on every frame. This makes the back button work with map state, but I'm not sure it's 100% right - it's quite annoying to have to hit back a lot after a long browsing session. OTOH it's quite cool that it works :)
I've also used Sammy.js and Really Simple History to do similar things, and I think jQuery might be getting core support for this functionality soon as well?
Definitely interested in a clean modular example for this, anyway!
from modestmaps-js.
I love this feature in Polymaps. It feels like a slightly external add-on, or at least an optional one on a per-map basis. It's pretty normal for me to use more than one map per page, so it's important to identify the one that has hash support.
from modestmaps-js.
Trust the Bostock FTW!
from modestmaps-js.
Looks like a solid library to learn from, if not to adopt in an example: https://github.com/balupton/History.js
from modestmaps-js.
Started working on this outside of core in Wax's hash.js, but it'll need a lot more work (pluggable history, definitely) to be mature.
from modestmaps-js.
I think this can live in Wax unless anyone strongly wants it in Modest Maps - it's a nice-to-have, but not essential to putting tiles on a page.
from modestmaps-js.
Related Issues (20)
- Coordinate -> Extent HOT 3
- anyscale example does not work?
- Remove cache infrastructure HOT 1
- node example broken? HOT 5
- Initialize map without layer HOT 1
- MM.Location bearing method HOT 3
- The example on http://modestmaps.com/ doesn't work now HOT 2
- Latest MM breaks at high zooms in IE8
- Geo code or search by location in modest map HOT 3
- displaying geojson "features" HOT 1
- map.setCenter ignores latitude HOT 7
- map rotation HOT 3
- Tiles disappear when max is hit on very large displays HOT 2
- Easey and setExtent HOT 5
- Center Zoom On Click - Wax and Modest Maps
- CallbackManager#dispatchCallback eats exceptions
- IE10 PointerEvents not working properly HOT 1
- PERSIAN GOULF MARITAM POSIT
- License for modestmaps HOT 2
- Which files need to be hosted?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from modestmaps-js.