oreilly.comSafari Books Online.Conferences.


AddThis Social Bookmark Button

Dissecting a Dashboard Virtual Earth Widget
Pages: 1, 2, 3

Writing the HTML Page

    <link href="VirtualEarth.css" type="text/css" rel="stylesheet"/>
    <link href="" type="text/css" rel="stylesheet"/>
    <script type='text/javascript' src=""/>
    <script type='text/javascript'>
        function setup()
            var map = null;
            map = VE_MapSearchControl.Create(37.3189139456153,-122.029211560580, 
            12, 'r', "absolute", 0, 0, 530, 530, 
            "", ""); 

<body onload="setup();">
    <div id="contents"></div>
    <img src="Default.png"/>

I'd like to explain this simple HTML block in more detail.

The first step is to include the style sheet. Its contents will be examined in more detail shortly. I then include the standard MapSearchControl style sheet, followed by the associated JavaScript file supplied by Microsoft.

Next, I have a small block of JavaScript that takes care of initializing the MapSearchControl. The most notable parameters are the two first floating point arguments, which specify the latitude and longitude for this map's starting coordinates. I chose Cupertino, just to be cute.

Another parameter you might tweak would be the 530 pair, which correspond to the dimensions of the control. For a more detailed overview of the MapSearchControl constructor arguments, consult this Microsoft knowledge base article. Finally, I attached the map control itself to element ID contents, defined below.

I then have a body tag which calls the previously defined setup() method after the page has loaded. Inside body are two simple tags: the empty div with ID contents, and an image. The image tag is the same background image I designed earlier.

Writing the Style Sheet

The layout magic happens (as it should) inside the style sheet.

body {
        margin: 0;

#contents {
        top: 35px;
        left: 35px;
        width: 530px;
        height: 530px;
        position: absolute;
        -apple-dashboard-region: dashboard-region(control rectangle);

The contents div is carefully designed to have just the right amount of padding and dimensions so that the MapSearchControl is positioned squarely inside the frame. The way I achieve this is through standard CSS layout techniques.

Apple has provided some special style sheet extensions that handle Dashboard-specific behavior. One of these is the -apple-dashboard-region statement. Normally, one can grab a Widget anywhere and drag it around the Dashboard. I can use dashboard-region to stop certain areas of the Widget from being drag handles. This is pretty important for Virtual Earth, as you must click and drag to actually use the map.

Apple provides in-depth developer documentation for this feature. This application is pretty simple -- I simply define the entire rectangular area of div contents to be excluded.

Writing the Metadata

Info.plist is the property list that contains metadata relating to the Widget. Apple's documentation takes you through the entire list of valid keys and values for this file.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "">
<plist version="1.0">
        <string>Virtual Earth</string>

CFBundleDisplayName must match the name of the Widget directory on disk, minus its extension. CFBundleIdentifier is a string that uniquely identifies the Widget, a la Java's package- naming system. MainHTML points to the main HTML file of this Widget. And AllowNetworkAccess very importantly grants our Widget access to make network calls. This is important for any AJAX application embedded in a Widget.

Pages: 1, 2, 3

Next Pagearrow