What would a photo map be without locations on which to place photos? Just a map! So now we should figure out how to place images on top of the map image we built in step three.
If you aren't familiar with using div elements and CSS to position items on a page, you should look at this tutorial before continuing this step.
Before we can place a marker for each location we will need to get a list of all of them. To do that we use a foreach loop in our template to iterate over each location object in the list provided by the map object, as demonstrated in listing 6.
Now that we have a handle on each location, we need to determine where on the map image they should be displayed. We add an image called "stickpin.png" to the static directory (where it won't be evaluated as a template) and then we copy the boilerplate velocity template from listing 5 (to display the region containing the locations) and then paste it with a bit of new code demonstrating the coordinate conversion into listing 7, which we save as "index.html"
The call in the foreach loop to calculatePixelWidth(...) returns the x position of the longitude passed in as if it were to be placed on the "full sized" map whose dimensions we calculated to generate the map image. But we want to place the location on the map image which is xOffset to the right, so we add the xOffset variable to find the location of the pixel at the location on our map image.
We then make the corresponding calls to calculatePixelHeight(...) with the location latitude and use the yOffset to calculate the y position of the location on the map image.
Inside the same div containing the map image, we use a similar pattern to the foreach loop in the style element but instead we write an img element with a unique id. These ids are referenced when the page is loaded by the previously created CSS elements.
At this point we have a web page with a map on it and in each location we are displaying a stickpin. There has been quite a bit of information to take in while getting to this point, and before moving on to the next step I suggest taking a breather: make a cup of tea, shoot some hoops, take the dog for a walk. Photo maps are much less important than relaxation, so don't forget to smell the roses.
In the next step we will look at building web pages for each location, and it always helps to have a clear head.