GithubHelp home page GithubHelp logo

Port polymaps.hash() about modestmaps-js HOT 6 CLOSED

stamen avatar stamen commented on July 29, 2024
Port polymaps.hash()

from modestmaps-js.

Comments (6)

RandomEtc avatar RandomEtc commented on July 29, 2024

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.

migurski avatar migurski commented on July 29, 2024

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.

mbostock avatar mbostock commented on July 29, 2024

Trust the Bostock FTW!

from modestmaps-js.

RandomEtc avatar RandomEtc commented on July 29, 2024

Looks like a solid library to learn from, if not to adopt in an example: https://github.com/balupton/History.js

from modestmaps-js.

tmcw avatar tmcw commented on July 29, 2024

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.

tmcw avatar tmcw commented on July 29, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.