Bing Maps in the Mac OS X Dashboard

Recently I treated myself to a MacBook Pro and when I started to learn about the different programs and utilities for this new toy I stumbled over the Dashboard and searched for some interesting widgets. To my surprise I couldn’t find a widget using Bing Maps and hence I had to find out how hard it can be do develop my own. Well, the answer is: it is incredible simple.

image

The widget that I had in mind should allow me to geocode places, find businesses and display roadmaps or imagery.

I started by downloading and installing the free Xcode IDE. Part of the Xcode developer tools is Dashcode, an integrated environment for laying out, coding and testing Dashboard widgets. Widgets are basically packaged web pages that run in the context of the OS X Dashboard and therefore it shouldn’t be too difficult to create a widget that implements Bing Maps.

After starting Dashcode I chose the Custom Dashboard Template.

image

The wizard created a new project and presented me with a blank widget.

clip_image002

The Dashcode workflow is made very clear through steps in the bottom left corner of the IDE. You start by laying out the interface. So I removed the default “Hello World” text-block and added some components from the library:

  • a box that will host the map
  • a text-field where I can enter the query
  • a button to execute the search

image

Properties for these objects can be set by opening the “Inspector”. You can display and edit the source code underneath the visual designer and you can always toggle the view between workflow steps and files if you need direct access to the files or copy your own images into the project.

The webpage that hosts my widget is by default called main.html and here I add in the head-section a reference to the Bing Maps AJAX Control:

<script type="text/<span class="><!--mce:0--></script>

There is also a JavaScript-file main.js that holds various default methods for the widget. Here I will make a couple of changes and create the functions to load and interact with Bing Maps. First I define 2 global variables. One for the map itself and one for the VEShapeLayer in which I want to present the search-results:

var map = null;
var slFind = null;

In function load right after dashcode.setupParts(); I add the following code:

First I define the div-element in which the map will be loaded (here: ‘MyMap’ – that is the box that I had created from the library).

map = new VEMap('MyMap');

Next I define map-options for the colour of the (Bing Maps) dashboard and the map style and then I load the map using these options.

var mapOptions = new VEMapOptions();
mapOptions.DashboardColor = 'black';
mapOptions.UseEnhancedRoadStyle = true;
map.LoadMap(new VELatLong(50.0, 10.0), 3, 'r', false, VEMapMode.Mode2D, true, 0, mapOptions);

Then I create a VEShapeLayer that will hold the search-results.

//Create Shape Layer
slFind = new VEShapeLayer();
map.AddShapeLayer(slFind);

Finally I clear the default InfoBox-Styles.

//Set Style for InfoBox
map.ClearInfoBoxStyles();

The InfoBox-shows the popup with details of a search-result. By default it is too wide for the widget and would overflow. I can define a new width in the style-sheet main.css.

.customInfoBox-previewArea {
width: 100px;
}

Let’s go back to main.js. I’m not quite finished yet. I implement a one-box-search that allows me to enter the ‘what’ and ‘where’ of a query in just one box. In the options for this search I define the VEShapeLayer that will hold the results and I also make sure that previous search-results will be removed before I draw the new ones.

function Find(){
var myOptions = new VESearchOptions();
myOptions.ShapeLayer = slFind;
slFind.DeleteAllShapes();
map.Search(document.getElementById("txtFind").value, onFind, myOptions);
}

One of the parameters for the Search-method is a callback-function. This is not really necessary but I use it to replace the ugly default pushpins with something nicer.

function onFind(){
var numShapes = slFind.GetShapeCount();
var numPoints = 0;
for (var i = 0; i < numShapes; ++i) {
var s = slFind.GetShapeByIndex(i);
s.SetCustomIcon("Images/red.png");
}
}

The icon that I reference here is a simple PNG that I dragged and dropped from the Mac Finder into Dashcode:

image

Using the Inspector I assign the new function “Find” to the button in our main.html.

This concludes steps 1 and 2 of the workflow. Next I open the workflow step “Set Attributes” give a name to the widget and most importantly tick the box “Allow Network Access”.

image

In terms of functionality that is already all that is required. I’m ready for testing:

image

The next 2 steps in the workflow allow me to define a default-image and an icon for the widget. I also design a bit around the back-side of the widget and I’m done. The final step is to deploy the widget:

image

Technorati Tags: ,,,,,

Advertisements
This entry was posted in AJAX, Bing Maps, Mac and tagged , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s