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