Jul 28, 2010
Overlay Images at the Proper Map Location
Let’s say you have a lovely graphic of an area, like a downtown district or a park. It’s a flat, top-down view, like most maps. But it doesn’t quite match up with the streets or other features of a mapping API’s imagery. Before you can overlay your image, you’ll need to georeference it.

The process is also called rubber sheeting, because you are essentially stretching and manipulating your graphic so that every point of your graphic meets up with the appropriate geographic coordinates.
In the book I use Central Park as an example. I uploaded a graphic from a park brochure to a site called GeoWarper. Then I referenced parts of the graphic with other identifiable areas in an OpenStreetMap version of the same area. GeoWarper then spits out a georeferenced version of the graphic.


Want to try it out yourself? The original graphic is included above. You can start your own, or use mine. If you just want to see it completed, the warped graphic is also above and the Central Park map is in my examples section.
Hi, I'm Adam. I'm writing a book about developing maps on the web. This site is where I'll share the things I find and help you create your own maps. 