In addition to an index.html page, it is useful to create one or more web pages for each location. They can be used for location popups, to show thumbnails of all images in a location, and for showing a larger, "zoomed in", location map.
To signal to the template engine that a file should be built multiple times (once for each location), the template's file name must start with "location" and contain a capital "L". 93 Photo Street replaces the "L" with the index number of the location.
For example, if our template file was named "location-wideView-L.html" then 93 Photo Street would create files "location-wideView-1.html", "location-wideView-2.html", "location-wideView-3.html"... all the way up to the number of locations in your map.
When building a location page, the template engine places a variable called location in the template context so you can reference it using the normal patterns we demonstrated in previous listings.
Listing 8 demonstrates a location page, which we have named "location-L.html" in our example template. If you save the contents of listing 8 to that name in your template directory and then build, you can see that it has created a new page for each location in your map.
It is all well and good to have a page for each location, but without linking to them from a map they are sort of like a tree falling in the forest with nobody around: taking up disk space, signifying nothing.
In listing 9 you will see a new index.html page which is just like the old one we built in step four, but there are anchor elements which link the stickpin images to the location-L.html pages.
The locations will always be listed in the same order, so you can depend on the index (stored in the velocityCount variable) to consistently refer to the same location. If a location is at index 3 in one foreach loop, it will be at index 3 in a later loop.
Each location page can have a map image which shows the local area. To do this, we use the same technique as we used to build a map image for the locationsRegion, but instead of using the coordinates for the region we calculate them so that the map image is centered on the location. listing 10 (saved once again to location-L.html) demonstrates how this is done.
And since the detail map makes little sense without a marker noting the location, in listing 11 we add a stickpin centered in the middle of the map image.
Now that we can build region maps, location pages and detail maps, it is finally time to add photos to the mix in step six.