Over the next couple of posts I'm going to look at the different rollover capabilities that are available for overlays in the MapQuest JavaScript API. To get started I'll post a simple module that can be imported into any application. To demonstrate, I have included links to an application that uses the module. The original Capture the Flag application can be seen here, and with the new functionality, here.

The module accomplishes two things. First, it uses the altState fields of the overlay to change the alpha value of the overlay, making it more transparent. Second, it accepts a string as an argument, using that as a title which is displayed in a rollover window. The following image is a screenshot of the Capture the Flag application, shown with the mouse hovering over the overlay on the left.

Capture The Flag Screenshot.

As you can see from the included code (Listing 2), mouseover and mouseout event handlers are attached to the overlay. When the mouseover event occurs, the rollover window is displayed and the altStateFlag is set to true. The altStateFlag causes any of the altState fields that have been set to be enabled. In the case of this example, that is the altColorAlpha and altFillColorAlpha fields. On mouseout, the altStateFlag is set to false and the rollover window is removed. Note that although I haven't used them in this example, you can similarly set the altColor, altFillColor, and altBorderWidth of the overlay.

Once the module has been imported into the application, calling the method is very simple. It accepts the current map, the overlay, and a title as arguments. In this example I have called the method using one of three different titles, depending on the color of the overlay.

Listing 1 - Calling the jrtmq.addRollover method

myBorders.setBorderWidth(3);
myBorders.setColor(myColors.a);
myBorders.setFillColor(myColors.b);
myBorders.setColorAlpha(0.9);
myBorders.setFillColorAlpha(0.5);
myBorders.setShapePoints(LLList);
switch(document.drawMenu.selectColor.value){
  case 'red':
    jrtmq.addRollover(myMap, myBorders, "The Red Zone!!!");
    break;
  case 'green':
    jrtmq.addRollover(myMap, myBorders, "The Green Zone!!!");
    break;
  case 'grey':
    jrtmq.addRollover(myMap, myBorders, "Neutral Zone");
    break;
}

myMap.addOverlay(myBorders);
  

You can download the module as a .js file from here. Or simply create your own version of the function below and add it directly to your code.

Listing 2 - The AddRollover Function

function AddRollover(roMap, roOverlay, roText){

  var pricklyPoints = roOverlay.getShapePoints();
  var count = 0;
  var latTotal = 0;
  var longTotal = 0;
  var centerPoint = new MQLatLng();
  var theFlag;
  var icon = new MQMapIcon();
  var newLat;
  var newLong;

  // For this method I'm just averaging out the lat and long of the shape points to place
  // the label. There are more complex ways to do this if you're interested in the
  // centroid (weighted center) or some other means of placing the label in relation to the
  // shape. This, however, should work just fine for the current purposes.

  for(var i = 0;i<pricklyPoints.getSize();i++){
    count++;
    latTotal = latTotal + pricklyPoints.getAt(i).getLatitude();
    longTotal = longTotal + pricklyPoints.getAt(i).getLongitude();
  }
  newLat = latTotal / count;
  newLong = longTotal / count;

  centerPoint.setLatLng(newLat,newLong);
  theFlag = new MQPoi(centerPoint);

  // Get rid of the POI icon, as it's the overlay we're associating it with
  // that is important.
  icon.setImage('',0,0);
  icon.setShadow('');
  theFlag.setIcon(icon);

  if(!roText){
    theFlag.setInfoTitleHTML('Default Label');
  } else{
    theFlag.setInfoTitleHTML(roText);
  }

  // The AltColorAlpha and AltFillColorAlpha properties are available for any MQShapeOverlay.
  // They respond to the AltStateFlag and along with the AltColor and AltFillColor
  // properties allow you to very simply add a rollover response to any overlay.
  roOverlay.setAltColorAlpha(roOverlay.getAltColorAlpha() - 0.2);
  roOverlay.setAltFillColorAlpha(roOverlay.getAltFillColorAlpha() - 0.2);

  MQEventManager.addListener(roOverlay, "mouseover", function(){

    // While the mouse is hovering over the overlay we want the rollover window
    // to be displayed, and the AltStateFlag to be true, enabling any of the
    // Alt properties that were set for the overlay. In this case, just the alphas.
    theFlag.showRolloverWindow();
    roOverlay.setAltStateFlag(true);
  });
  MQEventManager.addListener(roOverlay, "mouseout", function(){

    // Because there is only one rollover window for each map,
    // the method to hide the window is the same, regardless of
    // what object opened the window.
    roMap.getRolloverWindow().hide();
    roOverlay.setAltStateFlag(false);
  });

  // Because this method simply borrows the rollover window from a POI,
  // we need to watch for the overlay to be removed so we can also remove
  // the POI.
  MQEventManager.addListener(roOverlay, "removed", function(){
    roMap.removePoi(theFlag);
  });

  roMap.addPoi(theFlag);
}