Hook a function to an event before and after a progressive load

[Ben Welsh]

Hey, love progressive load!

Annoying question: What's the best way to fire off a function before
and after it runs? It might be nice to make a little loader icon (i.e.
the spinning whell) when it starts and stops.

Thanks,

Ben.

[Nick Rabinowitz]

That's an excellent question, and I am sad to say I don't have a great answer. There aren't currently hooks for loadStart or loadEnd events, though there probably should be.

Assuming you're using anything other than the JSONP loader, the easiest way is just to redefine TimeMap.loaders.remote.load()  (which most other loaders inherit). The progressive loader will take a loader object as well as a class name, so you can instantiate it and modify it before passing it to TimeMap.init(). I haven't tried it out, but I think it would go like this (for a KML loader):

// instantiate

myLoader = new TimeMap.loaders.kml({

    url: "/mydata.kml?start=[start]&end=[end]"

});

// redefine load()

myLoader.load = function(dataset, callback) {

    // start your engine

    startSpinningWheel();

    // download remote data and pass to callback

    baseCallback = this.getCallback(dataset, callback);

    GDownloadUrl(this.url, function(result) {

       // stuff your finish function into the callback

       stopSpinningWheel();

       // proceed

       baseCallback(result);

    });

};

TimeMap.init({

    datasets: [

        {

            title: "Progressive KML Dataset",

            type: "progressive",

            options: {

                loader: myLoader

            }

        }

    ],

    // etc...

}); 

It's not very elegant - probably either hooks or actual events should be there already - but I think something like this should do the trick.

-Nick

--
You received this message because you are subscribed to the Google Groups "Timemap.js Development" group.
To post to this group, send email to timemap-d...@googlegroups.com.
To unsubscribe from this group, send email to timemap-develop...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/timemap-development?hl=en.

[Ben Welsh]

Thanks for the advice. I'll give it try. Though, it won't work if I'm
using JSONP? I can change my data feed to KML if I have to, but that's
what I'm using at the moment.

> > timemap-develop...@googlegroups.com<timemap-development%2Bunsu bsc...@googlegroups.com>
> > .

[Nick Rabinowitz]

It'll work with json_string, or anything else that inherits from TimeMap.loaders.remote. But the JSONP loader works differently - it adds a script tag to the document, effectively running the remote file as a script; so the load() function is a little different. Overriding it might look like this:

    myLoader.load = function(dataset, callback) {

        startSpinningWheel();

        // get loader callback name

        var callbackName = this.getCallbackName(dataset, callback),

            // create a script tag

            script = document.createElement("script");

        // change the callback function - this is always a little tricky,

        // and might take some trial and error

        var baseCallback = TimeMap.loaders.cb[callbackName];

        TimeMap.loaders.cb[callbackName] = function(result) {

            stopSpinningWheel();

            baseCallback(result);

        };

        // set the src attribute and add to the document

        script.src = this.url + "TimeMap.loaders.cb." + callbackName;

        document.body.appendChild(script);

    };

Again, this is a pretty ugly way to accomplish this - I've put in an issue to offer easier hooks from TimeMap.init(). Probably there should just be parameters in the loader options that would allow you to set loadStart and loadComplete functions.

-Nick

To unsubscribe from this group, send email to timemap-develop...@googlegroups.com.