In order to present a high resolution map of the entire globe inside an ordinary web browser, programs like Google Maps employ the use of tiles. When the map is prepared, it’s rendered out at each available zoom level, and each zoom level is divided up into a number of small 256×256 pixel squares. When the map is viewed in a browser, the map display code takes care of loading in just the tiles that are visible in the current map view, sparing the download time and processing power required to load in the entire world’s map imagery.
You can think of the Google Maps display engine as a photo viewer for really, really high res photos.
In fact, you can use the mapping software to display your own high res photography. By tiling different zoom levels of any high resolution photograph, and replacing the default map set with your own custom tiles, you can use the Google Maps interface to zoom and pan any image you like. The UCL Centre for Advanced Spatial Analysis created a program called Google Maps Image Cutter that makes this process very easy:
The Google Maps Image Cutter takes a large image and cuts it into lots of 256×256 pixel images. At the top level there is only one 256 pixel square which is a smaller copy of the original image. At the next level, there are four 256 pixel squares, then sixteen, sixty four and two hundred and fifty six. This corresponds to 256, 512, 1024, 2048 and 4096 pixel square images spread over the map tiles. The application automatically chooses the depth of the maximum zoom level to correspond to the original size of the image, so zooming in any further would make the image bigger and cause it to pixelate.
The image cutter will render all of these tiles to a subfolder and generate an HTML file with all the necessary Google Maps embed code built-in. You simply insert your API key into this file, and then use an IFRAME tag in your site to embed the map HTML. The end result is an image viewer that fits your site layout, without sacrificing the detail or quality of the original photo.
The Google Maps Image Cutter
Put Your Large Pictures in Web Pages without Resizing Them – Google Maps Image Viewer
ADVERTISEMENT
