Before going on with this step, you really need to understand the concepts presented in the velocity user's guide so that the template examples make sense.
93 Photo Street keeps a list of which map images are referenced in template as they are built and then after it completes all of the templates it generates the referenced map image files.
People sometimes ask "Why aren't any map images being created in my photo map site?" The answer is usually because for one reason or another they were never requested by the templates.
Because there are a lot of details to handle in rendering and displaying a map image, 93 Photo Street includes a few properties and methods in the velocity context which can handle a lot of the work for you.
The imageBuilder object provides functions which generate relative URLs to specific map views, as demonstrated in listing 4.
After reading listing 4, you might wonder how you know which functions are available, and for that purpose we maintain the context API page. That page lists every object and its properties and methods.
From that page you can gather that the function we used in listing 4 has a signature like this:
getSubMapRelativeURL(xOffset, yOffset, width, height, fullWidth, fullHeight)
To specify which portion of the map to render into an image, you should first figure out the dimensions of the "full sized" entire map would be, and then you can ask for portions by their x/y coordinates.
In listing 4 we're building a map file showing the entire map, so the size of the full map and the size of the view we want are the same: 400x400. So, we call getSubMapRelativeURL with the same width, height, fullWidth, and fullHeight. The xOffset and yOffset are the upper left hand coordinates of view, so because we want the entire map those would be 0,0.
Save listing 4 as your "index.html" file in your template directory and play around with some of the variables and parameters for getSubMapRelativeURL until you are comfortable with its capabilities.
The locationsRegion object provides the lat/lon coordinates for a rectangle surrounding all of the locations (the stickpins in the 93 Photo Street editor) so that you don't need to iterate through all of them to find what area you should show on an overview map.
For example, in listing 3 you can see a simple example of printing the properties of the locationsRegion.
A region object has three properties: a Point object, a locationsRegion.east property, and a locationsRegion.north property. The Point object (used via locationsRegion.getPoint()) represents the Southwest corner of the region and it has point.latitude and point.longitude properties. The north and east properties represent the amount of latitude and longitude included in the region.
To build a map image for a region, we can combine imageBuilder and locationsRegion to build a map image showing only the region containing all of the locations: listing 5.
Now that you have the ability to build any view and any scale of any portion of the map, it would only make sense to move on to step four, where we'll place markers on the map for each of the locations.