It is not down in any map; true places never are. - Herman Melville

In Part 1 I showed you how to get started with the MapQuest Platform by getting a developer key. In Part 2, I put that key to use by providing access to a basic map in the Map It! widget. Part 3 showed you how to incorporate basic geocoding. In Part 4 I discussed more advanced geocoding topics - including handling multiple matches and specifying geocode search options. In this installment I'll discuss adding some options to the widget. Specifically I'll discuss setting the default zoom level when adding an API, specifying point of interest icons, and the default map type.

The Widget Options

The back of the Map It! widget is shown in Figure 1. The user can set defaults for zooming, map view, and the point of interest icon. Each of these values are saved in the widget's preferences and loaded when the widget is launched.

Figure 1

Setting the Options At Startup

The widget load function is called when the widget is first loaded. The preferences are created if they don't already exist.

function load()
{
    setupParts();

  // check the current prefrences version -
  // if not available or version changed recreate them
  if(loadPref("version") != "0.1") {
    // store the current version
    createPref("version","0.1");
    createPref("zoom","10");
    createPref("view","map");
    createPref("icon","pin");
  }

     defZoom = parseInt(loadPref("zoom"));
  defView = loadPref("view");
  defIcon = loadPref("icon");

  // Create the Map...
  myMap = new MQTileMap(document.getElementById('myMap'));
  var myLZControl = new MQLargeZoomControl(myMap);
  myMap.addControl(myLZControl,
    new MQMapCornerPlacement(MQMapCorner.TOP_LEFT, new MQSize(1,1)));
  var myVControl = new MQViewControl(myMap);
  myMap.addControl(myVControl,
    new MQMapCornerPlacement(MQMapCorner.TOP_RIGHT, new MQSize(20,20)));
  // set the default map view
  myMap.setMapType(defView);
}

When an address is plotted, the code has been changed as reflected:

//create a new icon object
myIcon = new MQMapIcon();

// set the icon image: icon file location, width, height,
// recalc infowindow offset,
// is it a PNG image?
if(defIcon == "pin") {
  myIcon.setImage("images/pinpoint_red.gif",32,32,true,false);
} else if(defIcon == "star") {
  myIcon.setImage("images/starsmall_red",18,18,true,false);
} else if(defIcon == "x") {
  myIcon.setImage("images/xspot.gif",17,17,true,false);
}

// create a point
myPoint = new MQPoi(newCenter);

// set the custom icon
myPoint.setIcon(myIcon);

// recenter the map on the point, the second parameter
// specifies the zoom level
myMap.setCenter(newCenter,defZoom);

A new MQMapIcon object is created to to hold the custom icon. The setImage method is called to load the icon image, and the setIcon method of the MQTileMap object is called to associate the icon with the point of interest. Now when a search is run, the default custom icon is displayed as shown in Figure 2.

Figure 2

Conclusion

In Part 6 I'll discuss adding direction capabilities to the widget. For your reference, here are some references to the MapQuest APIs: