First we set the dimensions of the target image file:
#set( $mapWidth = 500 ) #set( $mapHeight = 300 ) Target map dimensions: ${mapWidth}, ${mapHeight}

Then we use imageBuilder to calculate the "full sized" map of the entire region's dimensions:
#set( $fullMapWidth = $imageBuilder.calculateFullMapWidth($locationsRegion.getPoint().longitude, $locationsRegion.east, $mapWidth) ) #set( $fullMapHeight = $imageBuilder.calculateFullMapHeight($locationsRegion.getPoint().latitude, $locationsRegion.north, $mapHeight) ) Full sized map dimension: ${fullMapWidth}, ${fullMapHeight}

Now we calculate the pixel (x,y) coordinates of the upper left corner of the locations region in the full sized map:
#set( $xOffset = $imageBuilder.calculatePixelWidth($locationsRegion.point.longitude, $fullMapWidth, $fullMapHeight) ) #set( $northLat = $locationsRegion.point.latitude + $locationsRegion.north ) #set( $yOffset = $imageBuilder.calculatePixelHeight($northLat, $fullMapWidth, $fullMapHeight) ) Upper left coordinates (aka offset): ${xOffset}, ${yOffset}

And finally we use imageBuilder.getSubMapRelativeURL(...) to generate the map image URL:
#set( $locationsRegionMapURL = $imageBuilder.getSubMapRelativeURL($xOffset, $yOffset, $mapWidth, $mapHeight, $fullMapWidth, $fullMapHeight) ) MapURL: ${locationsRegionMapURL}

The pattern of variables and function calls listed above are used in almost every template to create map images, and can be cut and pasted so that you don't have to reinvent the wheel for each template.

We can use that URL to show the new map image: