GroundOverlay vs. customer OverlayView: projection issues?

245 views
Skip to first unread message

Josh

unread,
Oct 5, 2010, 2:26:22 PM10/5/10
to Google Maps JavaScript API v3
Here's the problem I'm facing: Basically, there are two images on this
map, one at 100% opacity, and one at 40% opacity. They should both
line up and overlap each other, but as you can see, they don't. I'm
using both a.) the GroundOverlay class (100%), and b.) a custom-built
OverlayView class (40%) to display these. Currently, the GroundOverlay
(the one at 100% opacity) is the correct method of displaying the
radar. However, either the projection of the RadarOverlay custom class
is wrong, or the math is wrong. Any ideas?

I used this official tutorial to build the custom class:

http://code.google.com/apis/maps/documentation/javascript/overlays.html#Drawing

Here is the example of the problem:

http://j.mp/97FvTS

Thanks!

Chad Killingsworth

unread,
Oct 5, 2010, 4:18:23 PM10/5/10
to Google Maps JavaScript API v3
I'm fairly certain it's lines 39-40 in conus.js:

img.style.width = "100%";
img.style.height = "100%";

You are stretching your image with those.

Chad Killingsworth

On Oct 5, 1:26 pm, Josh <jdels...@voxx.it> wrote:
> Here's the problem I'm facing: Basically, there are two images on this
> map, one at 100% opacity, and one at 40% opacity. They should both
> line up and overlap each other, but as you can see, they don't. I'm
> using both a.) the GroundOverlay class (100%), and b.) a custom-built
> OverlayView class (40%) to display these. Currently, the GroundOverlay
> (the one at 100% opacity) is the correct method of displaying the
> radar. However, either the projection of the RadarOverlay custom class
> is wrong, or the math is wrong. Any ideas?
>
> I used this official tutorial to build the custom class:
>
> http://code.google.com/apis/maps/documentation/javascript/overlays.ht...

Josh

unread,
Oct 5, 2010, 5:09:12 PM10/5/10
to Google Maps JavaScript API v3
Removing this makes the image not render. Also, it is listed in the
example on this page:

http://code.google.com/apis/maps/documentation/javascript/overlays.html#Initializing

On Oct 5, 4:18 pm, Chad Killingsworth

Chad Killingsworth

unread,
Oct 6, 2010, 9:59:24 AM10/6/10
to Google Maps JavaScript API v3
The ground overlay is calculating your image size as 5562x2829.
The custom overlay is calculating your image size as 5561x3309.

I'm not exactly sure what is accounting for the height difference
since both use the same image and bounds objects.

Chad Killingsworth

On Oct 5, 4:09 pm, Josh <jdels...@voxx.it> wrote:
> Removing this makes the image not render. Also, it is listed in the
> example on this page:
>
> http://code.google.com/apis/maps/documentation/javascript/overlays.ht...

Nianwei Liu

unread,
Oct 7, 2010, 6:46:55 AM10/7/10
to Google Maps JavaScript API v3
If I remember correctly, v2 ggroundoverlay used some sort of
transformation to flatten the image at pixel level depending on
latitude. V3 probably doing same thing.
If you can use groundoverlay, you should use it.

On Oct 5, 2:26 pm, Josh <jdels...@voxx.it> wrote:
> Here's the problem I'm facing: Basically, there are two images on this
> map, one at 100% opacity, and one at 40% opacity. They should both
> line up and overlap each other, but as you can see, they don't. I'm
> using both a.) the GroundOverlay class (100%), and b.) a custom-built
> OverlayView class (40%) to display these. Currently, the GroundOverlay
> (the one at 100% opacity) is the correct method of displaying the
> radar. However, either the projection of the RadarOverlay custom class
> is wrong, or the math is wrong. Any ideas?
>
> I used this official tutorial to build the custom class:
>
> http://code.google.com/apis/maps/documentation/javascript/overlays.ht...

Josh

unread,
Oct 7, 2010, 9:23:34 AM10/7/10
to Google Maps JavaScript API v3
The primary reason I'm not using GroundOverlay is because it doesn't
allow you to set the opacity of the image. Do you guys know of any way
to do this? Because then my need for a custom class will be null and
void.

Nianwei Liu

unread,
Oct 7, 2010, 10:37:46 AM10/7/10
to Google Maps JavaScript API v3
The noaa image is in WGS84 coordinate system, by nature, it can not be
overlay on top of Google base map accurately without a re-projection
of the image itself.

If re-projecting the image is not an option, you need to approximate
the overlay with a technique that used for image sprites, which is
what groundoverlay does. You break up the image vertically into small
pieces, and apply projection to those individual slices as the
background of a div, not a img element.

if you want use groundoverlay, you can set the style of the
"pane.overlayLayer" with some sort of transparent, use a fake overlay
to get access to it. Downside is that all overlays will have same
opacity.

or you can fire an enhancement request via issue tracker and see what
happens.

Josh

unread,
Oct 7, 2010, 1:47:51 PM10/7/10
to Google Maps JavaScript API v3
Nianwei,

How exactly does the GroundOverlay approximate the image for the
coordinate system that GMaps uses? Unfortunately, unless I see source
or an
example, I'm not well versed on different coordinate systems so I
can't really build
something on my own.

Thanks.
Reply all
Reply to author
Forward
0 new messages