A different point of view

This post is content previously published on www.cathmhaol.com

In the post preceding this, Around the world in eighty days, I discussed how to add a spinning globe to show global data collections. In the time since that post went live, I've made a few changes - all of which will be in the library on github - as soon as I get that up.

First, the library has been hardened so that if the core functionality is not available, the library will not work, but it also will not throw an error that breaks other JavaScript you have on your page. This should have been done earlier, and I apologize that it was wasn't - that is simply poor writing.

Second, the library has been extended by a new feature that allows developers to transition between projection styles. This transition, rather than being a sharp, jarring redraw of the image, is an animation that makes use of the d3 tweening function. I've tried to make sure that I'm only supporting styles that transition well to other styles, but I suspect there are some projection pairs that do not transition well. As you experiment to see which styles work best for you, I'd appreciate a little 'heads up' about the styles you find don't work well together.

Overall, though, you should now be able to transition between a Orthographic (globe) shape and an Equirectangular shape, for example…

…with just one line of code along the lines of…

var earth = new Cathmhaol.Earth('map', '/prototypes/earth/world-110m.js');
document.getElementById('trn').onclick = function() { earth.transition('Equirectangular'); }

That's all there is to it - just call the transition method and pass in the name of the projection you want to transition to (and optionally, how long you want the transition to take in milliseconds - the default is 750).

As before, you can see how this works by visiting the prototype page, which now has a special 'transition' button that will run the animation. The transition button on the prototype page will toggle between the two styles - Orthographic and Equirectangular - but if you're feeling really adventurous you could build a drop down (select) using the array returned by a supportedTypes method call and allow the user to select the transitions - it just takes a little creativity.

Again, you will soon be able to find the unminified files used in this project in my cjl github repo, or you can get them all bundled up from the download tent at cathmhaol.com - which also contains the HTML for the prototype, or you can get the required files through the links on the prototype page.

Still to come for this library:

• a method that lets you set up and show animated routes between an origin and destination, e.g., a flight path
• the ability to use a different shape for location markers rather than a circle

As always, feel free to drop me an email or ping me on Twitter with your ideas and/or how you've used what you've seen here.