Programming Atlas

Adding Pushpins with Pop-Ups to a Map

The next step in extending the map is to add pushpins: markers on the map that when clicked on or hovered over provide additional information about a certain landmark or position on the map.

The <virtualEarthMap> component supports Atlas data binding, which means that you can use the JavaScript method set_data() to bind information to it, a technique explained in Chapter 5. This data binding is quite convenient for working with pushpins.

Adding pushpins to a Virtual Earth map requires a few steps. First of all, you need the pushpin data. Thanks to data binding, the data format can be somewhat arbitrary, as long as it is structured. Here is a snippet that uses JSON markup to define an array named pins that contains two pushpins and then uses JavaScript to instantiate them. Each has a unique identifier, a longitude and latitude value, and a text label.

Once you have this information, you can use the JavaScript set_data() method to bind it to the map.

var pins = [
  {
   ID:0,
    Latitude:39.800000,
    Longitude:-86.228000,
    Name:"Tiger Woods"
  },
 {
   ID:1,
    Latitude:39.794624,
    Longitude:-86.234749,
    Name:"Indy 500"
  }
];

$("map").control.set_data(pins);

Although the format of the data that defines a pushpin can be arbitrary, you must use attributes of the <virtualEarthMap> element to map elements from the data source to elements on the map. These include:

dataLatitudeField

Name of the field in the data that contains the latitude (in the example, Latitude ...