How to add WMS layer to existing Gmap

5,942 views
Skip to first unread message

Jack Berberette

unread,
May 26, 2010, 8:20:11 AM5/26/10
to google-map...@googlegroups.com
Hi Everyone,

Well my map is up and running thanks to everyone's help here on the forum.  Our GIS guy just asked me if I could incorporate a WMS layer into the existing map and enable toggling for that layer like the other feeds.

1.  Is it possible to add WMS layers

2.  (the most important step) How do I accomplish this without breaking what I already have.

Here's my map: http://www.vaviper.org/viperapp.html

Here's a WMS layer that he wants added:

http://nowcoast.noaa.gov/wms/com.esri.wms.Esrimap/obs?service=wms&version=1.1.1&request=GetMap&format=jpeg&BBOX=-140.25,10.46,-64.7,65.68&SRS=EPSG:4269&width=800&height=600&Layers=world_countries,RAS_GOES


This is where the layer comes from: http://nowcoast.noaa.gov/help/mapservices.shtml?name=mapservices


This layer is really important to the agency because hurricane season is almost here.


Thanks so much for your time,


Jack

Miguel Angel Vilela

unread,
May 26, 2010, 8:41:30 AM5/26/10
to google-map...@googlegroups.com

You can overlay that layer on top of the map using a custom overlay, but it may look weird away from the equator if the projection is not the same as the API uses (it looks different to me):

Custom Overlays
Cheers,
Miguel

--
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.

William

unread,
May 26, 2010, 3:22:00 PM5/26/10
to Google Maps JavaScript API v3

William

unread,
May 26, 2010, 3:27:55 PM5/26/10
to Google Maps JavaScript API v3
On May 26, 10:20 pm, Jack Berberette <spin...@gmail.com> wrote:
>
> Here's my map:http://www.vaviper.org/viperapp.html
>
theres a problem with this map because it is loading the V3 API twice:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?
v=3.1&sensor=true"></script>
<script type="text/javascript">//Delay Loading of the Map API until
the DOM structure has rendered (but not necessarily all of the
images).
document.addEventListener('DOMContentLoaded', function () {
var element = document.createElement('script');
element.src = 'http://maps.google.com/maps/api/js?
v=3.1&sensor=true&callback=initialize';
element.type = 'text/javascript';
document.body.appendChild(element);
}, false);

Jack Berberette

unread,
May 26, 2010, 3:42:41 PM5/26/10
to google-map...@googlegroups.com
Thanks William!  I'm going to give this a try....thank you so much for taking the time to help.

Jack

--
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.


 PR: wait...  I: wait...  L: wait...  LD: wait...  I: wait... wait...  Rank: wait...  Traffic: wait...  Price: wait...  C: wait...

Jack Berberette

unread,
May 26, 2010, 4:03:29 PM5/26/10
to google-map...@googlegroups.com
Hi William...loads like a champ thank you so much!

A couple of questions:

How did you get the center Lat/Long for Florida...I'm not a GIS guy and it would be cool to center it on Virginia...also is it posible to tile the imagery so not matter what area you wanted to look at you could see the cloud cover?

How do you set the transparency for the layer?

Thank you so much for your help...this really gives us more flexibility here at the Emergency Operations Center!

Jack

William

unread,
May 26, 2010, 5:07:44 PM5/26/10
to Google Maps JavaScript API v3
On May 27, 6:03 am, Jack Berberette <spin...@gmail.com> wrote:
>
> How do you set the transparency for the layer?
>
the satellite cloud imagery is best served as JPEG, but JPEG images
don't have transparency as an option. Also I think the Ground
Overlays in V3 don't yet have transparency settings.

Another way is to use the hybrid map which has separate imagery and
labels, and put the cloud layer between the two layers. However this
method is a hack and isn't really good for production sites:

http://www.william-map.com/20100526/2/hybrid.htm

...

William

unread,
May 26, 2010, 5:23:24 PM5/26/10
to Google Maps JavaScript API v3
On May 27, 6:03 am, Jack Berberette <spin...@gmail.com> wrote:
> How did you get the center Lat/Long for Florida...I'm not a GIS guy and it
> would be cool to center it on Virginia...

if we say Richmond is the center of VA, with approximate lat/long of
(37.5,-77.5) then we could go for an image 30 degrees wide by 20
degrees, centred on this point, which translates into the WMS request
as
BBOX=-92.5,27.5,-62.5,47.5

and request an image in the 3x2 proportions
width=600&height=400

http://www.william-map.com/20100526/2/va.htm

...

William

unread,
May 26, 2010, 10:30:46 PM5/26/10
to Google Maps JavaScript API v3
On May 27, 6:03 am, Jack Berberette <spin...@gmail.com> wrote:
>
> is it posible to tile the imagery so not matter what area you
> wanted to look at you could see the cloud cover?
>

the help file says you can select Google Mercator map projection (EPSG:
900913), but I only got blank images when I tried that option.

Since the JPG files are small, it might be ok to use the Ground
Overlay with a 50% extended border around the image, and then update
the image whenever the zoom changes or the user pans outside this
area.

http://nowcoast.noaa.gov/help/mapservices.shtml?name=mapservices

WMS Map Projections & Spatial Reference Systems (SRS)
The WMS standard requires that every request must include the "SRS"
parameter, which specifies the identifier of the desired Spatial
Reference System (projection) of the requested map image. In addition
to the standard geographic projections, nowCOAST map services allow
requests to be made in the Web Mercator projection, which is used by
many popular online mapping services such as Microsoft Bing and Google
Maps. When overlaying nowCOAST data with Google Maps or Microsoft Bing
imagery, it is recommended to use either the "EPSG:102113" or "EPSG:
900913" SRS values in your requests. Otherwise, the most commonly used
projections are NAD83 and WGS84.

SRS values can be specified in a WMS request by including
"&SRS=IDENTIFIER" in the target WMS URL, where "IDENTIFIER" is
replaced with one of the supported SRS Identifier values, listed
below:
EPSG:4267 North American Datum of 1927 (NAD 27)
EPSG:4269 North American Datum of 1983 (NAD 83)
EPSG:4326 World Geodetic System 1984 (WGS 84)
EPSG:102113 Web Mercator (ESRI Identifier)
EPSG:900913 Web Mercator (Google Identifier)

Jack Berberette

unread,
May 26, 2010, 11:14:12 PM5/26/10
to google-map...@googlegroups.com
Wow...thanks for all of your effort in this William!  I'll definitely work on this when I get back to the office tomorrow.  You've really gone above and beyond for us and we truly appreciate it.

Thanks,

Jack


--

Davide Cremonesi

unread,
May 27, 2010, 7:09:25 AM5/27/10
to google-map...@googlegroups.com
Hello everybody,
I must say that I don't like this solution based on GroundOverlays (of course you might well be happy with it and ignore my message :-).
The problem I see is that once you get the image at the largest scale it gets scaled by the client at lower scales (zooming in) and resolution get worst and worst. The advantage of a WMS service is that images are created on the server at different scales and extents modifying the BBOX parameter in the URL.
What you need to do is convert Google tile x, y, and zoom into a suitable WMS URL.

Here is a good starting point (based on v2 API):
http://blog.kylemulka.com/2005/08/wms-in-google-maps/

Cheers,
Davide

PS if I have some time I will try to make an implementation myself and make it pulbic here on the forum

2010/5/27 Jack Berberette <spi...@gmail.com>

Josh Rosenthal

unread,
May 27, 2010, 9:09:27 AM5/27/10
to google-map...@googlegroups.com
Last time I asked about WMS, KakaduDreamer pointed me towards his http://earthalerts.manyjourneys.com/web/, which led to me throwing up an overlay example. Not base layers, but it might be helpful. 

 As Davide mentioned, it takes advantage of the data being in a WMS, rerequesting @ different zoom levels, etc.  Coordinate conversion is implemented in a Custom Projection which has methods fromLatLngToPoint, fromDivPixelToLatLng, and just to be sure, fromDivPixelToSphericalMercator All that said, this creates an overlay, not a replacement base layer.

Esa has some examples with putting OpenStreetMap as a base layer here. (He also shows how you'd reconstruct existing base map types.) The syntax looks very similar for baseMaps and Overlays, so you could probably use similar logic to my WMS example.

Hopefully thats of some help.

Josh

Davide Cremonesi

unread,
May 27, 2010, 10:46:02 AM5/27/10
to google-map...@googlegroups.com
Hello there,
I've put together a prototype implementation of such an ImageMapType implementation.
If you want you can have a look here:

http://neogismap.appspot.com/wms/index.html

As you can see there are some problems with the projection, but this can probably be fixed playing with the SRS parameter that you pass to the WMS Server.

I will try in the future to wrap it in a nice class with all the "prototype" syntax and so on... stay tuned.

Regards,
Davide


2010/5/27 Josh Rosenthal <mari...@gmail.com>

Josh Rosenthal

unread,
May 27, 2010, 12:30:14 PM5/27/10
to google-map...@googlegroups.com
Hi All,

We've updated the MassGIS Lyceum example to include using a WMS as basemaps.

An example with the NOAA data can be found here:

Using the NOAA data results in some strange problems with the overlays having white lines around tiles or pairs of tiles.  I'll post asking about it in a separate thread, but if anyone has thoughts as to what could cause that/how to fix it, I'd love to hear them.

Josh

William

unread,
May 27, 2010, 3:31:31 PM5/27/10
to Google Maps JavaScript API v3
On May 28, 2:30 am, Josh Rosenthal <maric...@gmail.com> wrote:
> Using
> the NOAA data results in some strange problems with the overlays having
> white lines around tiles or pairs of tiles.  I'll post asking about it in a
> separate thread, but if anyone has thoughts as to what could cause that/how
> to fix it, I'd love to hear them.
>
Your map looks great! I think the white lines are something to do
with rounding of coordinates, because there's less of the white lines
when you use whole integers for the mercator coordinates.

the google tile system is already a mercator projection, so the
transform from the tile coordinates to the world mercator coordinates
is a linear transformation:

http://www.william-map.com/20100526/2/tile.htm

...

Josh Rosenthal

unread,
May 27, 2010, 4:52:35 PM5/27/10
to google-map...@googlegroups.com
Huh.  Right.  Yay for having made the math overly complicated. 

I guess I still don't get the white lines, in large part because they never show up on my massgis data.

Perhaps it's due to the different backends?  (geoserver + arcsde vs arcims +?)  Maybe arcims isn't handling reprojecting the imagery to spherical properly that its adding the white space onto the tiles?  As you zoom in to say, zoom level 12 or so, those white bars get rather wide.
(try looking @
map.setCenter( new google.maps.LatLng(55.77587839343693,-67.76026580078124));
map.setZoom(12);
on either of our NOAA maps.)


--

William

unread,
May 27, 2010, 7:46:05 PM5/27/10
to Google Maps JavaScript API v3
On May 28, 6:52 am, Josh Rosenthal <maric...@gmail.com> wrote:
> As you zoom in to
> say, zoom level 12 or so, those white bars get rather wide.
> (try looking @
> *map.setCenter( new
> google.maps.LatLng(55.77587839343693,-67.76026580078124));*
> *map.setZoom(12);*
> on either of our NOAA maps.)
>
yeah its over 20 pixels wide in some places. At that zoom level 12
you can see the source data pixels, which are 26 pixels wide on the
google map. This is approximately a pixel size of 1km. It appears
that the white lines will never be wider than one source pixel in the
original data, which give the following upper bounds:

Source Pixel size
26 pixels at zoom 12
13 pixels at zoom 11
6.5 pixels at zoom 10
3.3 pixels at zoom 9
1.6 pixels at zoom 8
0.8 pixels at zoom 7

Full detail is available between zoom 7 and 8, and after that no
further resolution is available (therefore a ground overlay would be
ok for zooms higher than 8, using the tiles from zoom 8). So a good
start would be to fix the white lines for zoom 2 to 8.

William

unread,
May 27, 2010, 9:26:50 PM5/27/10
to Google Maps JavaScript API v3
As a hack the following map fixes the white lines for zoom 2 to 5:

http://www.william-map.com/20100526/2/tilefix2_5.htm

Jason

unread,
May 27, 2010, 10:36:32 PM5/27/10
to Google Maps JavaScript API v3
If you happen to be using GeoServer/GeoWebCache to serve up your own
WMS services they have built a great Google Maps service to hand out
the proper images (http://geowebcache.org/docs/current/services/
gmaps.html). I set up a demo here: http://demos.geojason.info/google-maps-geowebcache-demo.php
Reply all
Reply to author
Forward
0 new messages