My Own Virtual Earth

OK, it's far from my own rendition of MSN Virtual Earth, but you need to start somewhere.

If you haven't played around yet with Virtual Earth (or live.com -- check it out here), you need to.  This service is only going to get better, but what amazes me is how slick the experience is -- keeping in mind that this is done through a web browser.   Web geeks out there know how subtle (and difficult) pulling this off can be.   In some areas, the detail is astounding -- I even found one of my cars (picture to the left). 

So while I don't have quite that level of detail in my maps, I thought it would be fun to play around with some dynamic map creation (it doesn't serve any real purpose other than fun of tinkering, and maybe brushing up on some geography).  If you visit my Geographic page (here), you can zoom to a geographic location by selecting a region in the drop down list (by default, it's set to "World"). 

After clicking go, the map will be replaced with the zoomed area.  The maps I have are actually quite a bit more detailed (meaning I could zoom even further) but it's space/bandwidth prohibitive.  You can then click on each of the directions (North, South, East, West) on the edges of the map to scroll the map in that direction. 

It's simple, of course, but illustrates another way to build off of the previous reporting examples I've posted about.  The two biggest ways to improve this: 1) handle more Javascript events (mouse wheel, drag, etc.) and 2) more hardware to handle a large volume of asynchronous calls. 

But how it's done is fairly simple: the large map is created just like the smaller world view map -- in one piece.  It's some 4,000 x 2,200 pixels and weighs in around 6 MB.  (On maximum zoom, I can go to about 15,000 x 10,000 pixels, give or take.)   I then use GDI+ to slice the images into smaller chunks.   The algorithm simply loops through the image at the chunksize interval (such as 150 pixels) and draws a rectangle around the current location, then saves it to its own image file.   I felt that 100 x 100 pixel chunks were the sweet spot, but GDI+ performance was a bit lacking so I bumped it to 150 pixels.  (This totals around 420 slices per map.)

The settings that control the map size, slice size, etc., are configurable in the server code.  Once it executes, it generates the client-side Javascript and populates some of the constants (such as the size of each slice).  The idea is that if the Javascript should just work regardless of the server's settings.  When it first loads, it builds a table of an arbitrary size -- it builds a table two rows longer and two columns wider than the viewable area (by default, it's 4x3, but this can be changed and configured at run time).  It then loads the slices.  After the map is loaded, you should be able to scroll quickly and the images should load virtually instantaneously, since they are being cached "off screen."  Of course, it's still possible to fake it out by scrolling really fast, but then again, the algorithm can be tweaked to load chunks more aggressively.  If you're curious as to how it works, you can see the Javascript by viewing the source code of the page (spoiler: it's nothing fancy).

It's a long way from being as cool as Virtual Earth, and even further from providing any real value ... but nevertheless, it's fun to tinker with these ideas.
Comments are closed

My Apps

Dark Skies Astrophotography Journal Vol 1 Explore The Moon
Mars Explorer Moons of Jupiter Messier Object Explorer
Brew Finder Earthquake Explorer Venus Explorer  

My Worldmap

Month List