oreilly.comSafari Books Online.Conferences.


AddThis Social Bookmark Button

Dissecting a Dashboard Virtual Earth Widget

by Luke Burton

The "Web 2.0" craze has taken a firm hold of the online tech community, penetrating into the computer of every 14-year-old PHP newbie, through to the cubicles and meeting rooms of Redmond and the Googleplex. Giddy as we are with excitement about another "paradigm shift" (a phrase I haven't heard since, oh, late 1998), it's easy to forget that Web 2.0 has to actually do something useful for us in the long run to stay sustainable.

In my opinion, the flagship application of Web 2.0 remains online mapping, as seen with Google Maps and MSN Virtual Earth. These services are being stretched to unforeseen limits through the endless possibilities of the mashup, making the geospace jump through some amazing hoops.

Playing Host to Web 2.0

Most developers of Web 2.0 apps focus on deploying their creations through a traditional browser interface. But for Mac users, a perfectly delightful container for your Web 2.0 apps is staring you right in the face. It's the Dashboard.

Technically, the Dashboard is a great container for your Web 2.0 application. Every Dashboard Widget is written in XHTML, CSS, and JavaScript. Owing to Dashboard's standards compliance and common-sense design, you might be surprised to find how little work it takes to port your own Web 2.0 app into this environment. And from a user's perspective, your Web 2.0 application is "always on," and accessible at the touch of a button.

Virtual Earth and the Dashboard

In this tutorial, I'll walk you through a complete Dashboard implementation of Virtual Earth. If you're impatient, you can jump directly to the completed Widget by visiting my homepage and download it directly.

If you're unfamiliar with the basics of using Virtual Earth in your own web page, visit Via Virtual Earth's tutorials page and brush up first. It's basic stuff, but important groundwork.

The Dashboard Environment

Apple has a comprehensive section on their developer pages describing the Dashboard environment. But to summarize, the four basic components you need for a Widget are:

  1. An HTML file that defines the user interface for the Widget
  2. A default background image in PNG format
  3. An icon image to represent the Widget in the Widget Bar
  4. An XML-formatted property list that contains various Widget metadata

In this case, you'll put all this into a directory called virtualearth.wdgt.

Designing the Widget

I admit to being less than a genius when it comes to Photoshop. However, I can still knock out something that would make a graphic designer sigh painfully (as opposed to burst with gales of laughter). I thought maybe a bezeled stone sort of look would be a suitably flagrant violation of Apple's user interface guidelines. This is named Default.png.

figure 1

It's worth noting that the minimum dimensions of the Virtual Earth MapSearchControl forced me to produce a Widget this large; I would have preferred something slightly smaller.

I also pilfered the Via Virtual Earth logo and turned it into a transparent png. This file is named Icon.png.

figure 2

So now you just need to organize for MapSearchControl to be displayed inside this Widget.

Mapping Hacks

Related Reading

Mapping Hacks
Tips & Tools for Electronic Cartography
By Schuyler Erle, Rich Gibson, Jo Walsh

Pages: 1, 2, 3

Next Pagearrow