Wednesday, March 10, 2010

Screen Overlays In Google Maps

I have been playing around with screen overlays as a method of dealing with legends and branding. I found that My Maps does not support the kml elements you need for screen overlays or folders, but it is possibe to have an server host the kml files with the tag and the tag. Because I am cheap, I use google sites to hold all my files. I offload my kml and images on the files of a bogus endpoint I create in mySites.

you can offload your mayMap kml file by adding &output=kml to the http call on the page that shows your map.

I used this sample file I found on the google map forum. And used it as a template for the asian_overlay kml file.



I edited and reset the namespace and the tags from my My Maps kml .. and added folders too cuz I thought it made the map more comprehensible. I used a standard text editor to add the elements.

old namespace:
<xmlns="http://earth.google.com/kml/2.0">

new namespace:
<kml xmlns="http://www.opengis.net/kml/2.2">

and I threw in an atom tag for good measure:

<atom:author>
<atom:name>myName</atom:name>
<atom:author>
< atom:link href="http://www.mysite.org" >

In the screen overlay entry I pointed to a png file I wanted to use.

<Folder>
<name>ScreenOverlays</name>
<open>0</open>
<ScreenOverlay>
<name>screenoverlay_absolute_bottomright</name>
<visibility>0</visibility>
<Icon>
<href>http://sites.google.com/site/mapsofoldsanantonio/files/nowcast_2010_logo.png</href>
</Icon>
<overlayXY x="0" y="-1" xunits="fraction" yunits="fraction"/>
<screenXY x="0" y="0" xunits="fraction" yunits="fraction"/>
<rotationXY x="0" y="0" xunits="fraction" yunits="fraction"/>
<size x="0" y="0" xunits="fraction" yunits="fraction"/>
</ScreenOverlay>
</Folder>


Once the files were uploaded to mysite. I created a url based on the template:

http://maps.google.com/maps?f=q&hl=en&q=http%3A%2F%2Fsites.google.com%2Fsite%2Fmapsofoldsanantonio%2F%2Ffiles%2Fasian_overlay.kml&ie=UTF8&ll=29.4916,-98.5011&sspn=29.5301,29.4027,-98.3586,-98.6563&z=10&om=1

where the sspan parameters are in the following order:
newGLatLng(map.getBounds().getNorthEast().lat() − map.getBounds().getSouthWest().lat(),map.getBounds().getNorthEast().lng() − map.getBounds().getSouthWest().lng()).toUrlValue()

the %2F is actually an escape code for a / .. so this would be the html path to your new and shiny kml file. From here you can grab a link or the embed code and you are off to the races.

Some elements may need tweaking: the ll and spn elements may need tweaking on your embed to center on the elements you wish to capture on the map.




View Larger Map The nowcast gif is gone -- a reorganization of hosting

No comments: