groundOverlay distortion

1,674 views
Skip to first unread message

spider plant

unread,
Nov 12, 2010, 4:25:08 PM11/12/10
to google-map...@googlegroups.com
Hi, I'm having terrible problems trying to get groundOverlays to align properly with Google Maps.

To try and figure out what is going on I constructed a test. I downloaded several google map tiles at zoom level 8, stiched them together into one giant PNG and edited them in the Gimp to remove everything except for the outline of some islands.

Then in javascript, I attached this PNG as a groundOverlay to a google map, placing it over the exact same spot on the Earth. See the attached screen capture: "googleMap_plus_groundOverlay.jpg". The groundOverlay (yellow outline) does not line up with the Google map. You'll notice that the maps are aligned near Plymouth (South West corner) and at the Shetland Islands (North East corner) with varying distortion inbetween. The distortion remains much the same when I zoom in and out. This is quite a big area of the Earth - if you attach groundOverlays that fit over smaller areas, the distortion is not so apparent.

To confirm the distortion is not caused by the projection changing at different zoom levels, in the Gimp, I merged a screen capture of Google Maps at zoom 5 with the PNG outline - they match perfectly - see: "googleMap_plus_overlay_mereged_in_gimp.jpg"

I've attach all the files if anyone wants to try this out.

Either I'm doing somethig stupid or Google Maps stretches groundOverlay images in javascript?

Thanks.

groundOverlayDistortion.htm
gm_zoom8_outline.png
googleMap_plus_groundOverlay.jpg
googleMap_plus_overlay_mereged_in_gimp.jpg

Ben Appleton

unread,
Nov 12, 2010, 5:01:44 PM11/12/10
to google-map...@googlegroups.com

We stretch images in JS. The image is expected to be in LatLng coordinates, and is then warped according to the current projection:
http://code.google.com/apis/maps/documentation/javascript/overlays.html#GroundOverlays

- Ben

On 13 Nov 2010 08:25, "spider plant" <spider...@gmail.com> wrote:

spiderplant0

unread,
Nov 12, 2010, 5:55:59 PM11/12/10
to Google Maps JavaScript API v3
Thanks for the reply. To solve this problem I guess my options are:
1) Implement an alternative projection type so google maps displays my
overlay in a different projection.
2) Obtain the algorithim that Google uses to stretch the map - I could
then apply the reverse algorithim to my overlay image (do this
processing off-line) which will then cancel out the Google Maps
stretching.
3) Switch off the Google Maps groundOverlay stretching (overlay image
is simply placed on top of the Google Map tiles without any
manipulation).

Please can you tell me which of the above are possible, and if there
are any alternatives.

Option 3 would be the best as all this javascript stretching must slow
down the browser.

To be honest I'm really struggling to understand why a groundOverlay
derived from Google Map tiles doesnt fit perfectly over the map in the
Google Maps. Do you know if there is any software that can convert
google map tiles into the form expected of a groundOverlay? (The
images for my end project arn't actually derived from Google map tiles
of course but, they have exactly the same problem when used as an
overlay, and if I can fix the problem with Google Map tiles I will
have fixed it for my real images.)

Ben Appleton

unread,
Nov 15, 2010, 12:43:46 AM11/15/10
to google-map...@googlegroups.com
On Sat, Nov 13, 2010 at 9:55 AM, spiderplant0 <spider...@gmail.com> wrote:
Thanks for the reply. To solve this problem I guess my options are:
1) Implement an alternative projection type so google maps displays my
overlay in a different projection.

Yes, that would warp your GroundOverlay according to your projection. If your projection mapped LatLng linearly, your image would not be stretched. However you would not be able to display your GroundOverlay above Google imagery, which is rendered using a Mercator projection.
 
2) Obtain the algorithim that Google uses to stretch the map - I could
then apply the reverse algorithim to my overlay image (do this
processing off-line) which will then cancel out the Google Maps
stretching.
3) Switch off the Google Maps groundOverlay stretching (overlay image
is simply placed on top of the Google Map tiles without any
manipulation).

This feature is not supported at present and you appear to be the first to ask for it. You could file a feature request:

Another alternative:
4) Write a custom OverlayView which overlays an image, ignoring the map's projection.
 
Please can you tell me which of the above are possible, and if there
are any alternatives.

Option 3 would be the best as all this javascript stretching must slow
down the browser.

To be honest I'm really struggling to understand why a groundOverlay
derived from Google Map tiles doesnt fit perfectly over the map in the
Google Maps.

That is because Google Map tiles have already been Mercator projected, whereas a GroundOverlay is projected in the browser. If you put Google Map tiles into a GroundOverlay, the result will be a Mercator projection of a Mercator projection.
 
Do you know if there is any software that can convert
google map tiles into the form expected of a groundOverlay? (The
images for my end project arn't actually derived from Google map tiles
of course but, they have exactly the same problem when used as an
overlay, and if I can fix the problem with Google Map tiles I will
have fixed it for my real images.)

I don't know of such software offhand.

- Ben
 
--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
To post to this group, send email to google-map...@googlegroups.com.
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.


spiderplant0

unread,
Dec 5, 2010, 11:25:45 AM12/5/10
to Google Maps JavaScript API v3
Thanks Ben.
I implemented the custom overlay and it worked fine.
In case anyones interested, there is a tutorial here...
http://code.google.com/apis/maps/documentation/javascript/overlays.html#CustomOverlays
Reply all
Reply to author
Forward
0 new messages