Tools KML ImageOverlay

From ActiveIDsWiki

Aim & workflow

You can use this tool to overlay an image over a map. The tool creates the code (KML or Javascript) for a GroundOverlay containing your image. This action is not possible on maps.google.com and the GroundOverlay element is also denied when imported there. The output can however be used in other applications like Google Earth. You can also embed your map with an overlay image on your website by using the KML output in KML Previewer as described under saving and using the output.

Create ImageOverlay

Use the tool below to create your ImageOverlay. To see how the tool works simply click on the 'Add/Update' button. You will see an image being displayed on the map which you can move and scale by using the handlers. In the text field below the code for your ImageOverlay is generated. You can create your own ImageOverlay by first centering the map on your desired location by entering it in the search field on the top. Overlay your image by filling in the URL in the input field below the map and clicking 'Add/Update'. To use this tool you need to store your image at a place accessible online, like eSnips or in a web album like Picasa Web or Flickr.

source: googlecode.com
about: googlemapsapi.blogspot.com

Example

For example I have a map of all bicycle stations in Barcelona. To be able to load the map in the ImageOverlay tool I first need to make the image accessible online: Barcelona bicycle map. Notice that the image has been rotated to make the North point to the top of the image before being uploaded. This can be done by using image editing software like Adobe Photoshop or GIMP (free software).

To place the image I first center the map by entering 'Barcelona' in the input field on the top and use the map controls to zoom to the right position. Then I place the image by entering the URL of the image in the input field below the map and click 'Add/Update'. When the image is displayed over the map I use the move and scale handlers to put the image in position and match it with the underlying map.

The output code is automatically updated in the text field below and can now be used elsewhere.

Saving and using the output

Within the ImageOverlay tool you can select to different outputs either as KML or Javascript. The Javascript code can be used for developing your own application using the Google Maps API. If you simply want to store your map with ImageOverlay to use it in Google Earth or on your own website you can use the KML code.

source: Google Code

In the ImageOverlay tool select the 'KML Output'. For the Barcelona bicycle stations map of the example above, the following KML code is created:

See the Google KML reference for more information about the GroundOverlay element in which the ImageOverlay is linked.

Saving the output

To store the KML code select and copy it (right click > copy). Then create a new text file for instance in Notepad (in Windows) and paste the KML code (right click > paste) in the text file as done in the example on the right (in Notepad ++). Then save the file (file > save as...) and give it a name with the extension '.kml' like 'imageoverlay.kml'.

This is the result of the example above: barcelona_bicycle_stations.kml.

Using the ImageOverlay

The created KML file containing the ImageOverlay can now be viewed outside the ImageOverlay tool. The image will not be shown when loaded into maps.google.com but you can open it in Google Earth and if you wish to view it online you can use the KML Previewer which also allows you to embed your ImageOverlay in your blog or website.

What's next?

With your map you can now do the following:

• view with KML Previewer