That is the exploration that awaits you! Not mapping stars and studying nebula, but charting the unknown possibilities of existence. - Leonard Nimoy
About Map It!
In Part 2 and 3 of building the Map It! Application, I will be creating the Mac OS X Dashboard widget shown in Figure 1.
Users enter an address in the search box at the top of the widget, and that point is automatically plotted and zoomed in on the map below. Users can switch between map, satellite, and hybrid views. They can also use the controls on the left to navigate and move around the map.
I've discussed building Mac OS X Dashboard widgets previously on my AOL Developer Network blog, here and here. For the Map It! Dashboard widget - I used Apple's Dashcode to jumpstart my development. Even though I used Dashcode - the techniques to integrate the MapQuest Platform, I'll review here can be utilized however you develop Dashboard Widgets.
You need to replace **YOUR-KEY** with the key that was provided in the email when you signed up for the MapQuest Platform, as discussed in Part 1.
Creating the User Interface
To place the map on the widget - you'll need to create a DIV to hold the map. In the Map It! application I created the following DIV tag.
<div id="myMap" style="width: 550px; height: 300px;"></div>
Now that you have a place to display the map, the next step is to get the map displayed in the DIV. This is simply done by create a new MQTileMap object and associating with the DIV, as shown here:
// Create a MQTileMap object and display it in the myMap DIV myMap = new MQTileMap(document.getElementById('myMap'));
The final step is to add the Large Zoom and view controls. These controls allow the user to zoom in and out of the map, and select the type of map that is displayed (road, satellite, or hybrid). This is accomplished with the following code:
// create a new Large Zoom Control var myLZControl = new MQLargeZoomControl(myMap); // add it to the map at the specified offset from the Top Left corner myMap.addControl(myLZControl, new MQMapCornerPlacement(MQMapCorner.TOP_LEFT, new MQSize(1,1))); // create a new View Control var myVControl = new MQViewControl(myMap); // add it to the map at the specified offset from the Top Right corner myMap.addControl(myVControl, new MQMapCornerPlacement(MQMapCorner.TOP_RIGHT, new MQSize(20,20)));
That's all that you need to add a map!
In Part 3 I'll show you how to add Geocoding to the widget to plot a point of interest based on the address entered in the search box. For your reference, here are some references to the MapQuest Platform:
- MapQuest Developer Network - http://developer.mapquest.com
- MapQuest Technical Resource Center - http://trc.mapquest.com