So far, everything we have done has involved working directly with the geographic data and map. However, there are many cases where you will need to layer additional data on top of the map. We will begin slowly by first adding a few cities of interest to the map of Mexico.

This experiment will, again, require us to start with example-3.html. The complete experiment can be viewed at http://localhost:8080/chapter-4/example-6.html.

In this experiment, we will add a text element to the page to identify the city. To make the text more visually appealing, we will first add some simple styling in the <style> section:

text{
  font-family: Helvetica;
  font-weight: 300;
  font-size: 12px;
}

Next, we need some data that will indicate the city name and the latitude, and longitude coordinates. For the sake of simplicity, we have added a file with a few starter cities. The file called cities.csv is in the same directory as the examples:

name,lat,lon,
Cancun,21...