O'Reilly logo

Programming Atlas by Christian Wenz

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required