Overlay WMS on Google in OpenLayers

19 Replies

[Note: therea are related post: overlyaing tiled WMS over the new Google Map v3 https://blog.sumbera.com/2010/11/02/tiled-wms-overlay-on-google-map-v3/ and overlying tiled WMS over the Silverlight Bing map https://blog.sumbera.com/2010/02/25/overlay-wms-on-google-in-silverlight-bing/ ]

Is it possible to display WMS (EPSG:4326) over the Google (EPSG:900913) in Openlayers ? Yes ! thanks to the great img ‘feature’ that enables you to shrink/expand your return image based on defined image size. That means that if your map view is rectangular or you request WMS as tiles (rectangular too) you get proper overlay of EPSG:4326 on EPSG:900913) . Example of various image sizes follows (these are actually WMS GetMap requests):

256 x 160

256 x 256

Here is the way how to implement it in OpenLayers – very simplified:

1. read this post http://docs.openlayers.org/library/spherical_mercator.html and create your Google map:

var options = {
projection: new OpenLayers.Projection(“EPSG:900913”),
displayProjection: new OpenLayers.Projection(“EPSG:4326”),
units: “m”,
numZoomLevels: 22,
maxExtent: new OpenLayers.Bounds(-20037508, -20037508,
20037508, 20037508.34)
};
map = new OpenLayers.Map(‘map’, options);
// create Google Mercator layers
var ghyb = new OpenLayers.Layer.Google(
“Google Hybrid”,
{ type: G_HYBRID_MAP, ‘sphericalMercator’: true }
);

2. add your WMS layer

var gwms = new OpenLayers.Layer.TMS(“SLP”, “http://mapserver-slp.mendelu.cz/cgi-bin/mapserv?map=/var/local/slp/krtinyWMS.map&”,
{
layers: ‘obrys,typologie,hm2003’,
type: ‘png’,
visibility: true,
getURL: get_wms_url,
format: “image/png”,
opacity: 1,
isBaseLayer: false,
deltaX: 0.0013,
deltaY: 0.00058
});

3. include support for reprojection before you include OpenLayers:

4. handle WMS as TMS tiles as this:

function get_wms_url(bounds) {

// recalculate bounds from Google to WGS
var proj = new OpenLayers.Projection(“EPSG:4326”);
bounds.transform(map.getProjectionObject(), proj);

// this is not necessary for most servers display overlay correctly,
//but in my case the WMS has been slightly shifted, so I had to correct this with this delta shift

bounds.left += this.deltaX;
bounds.right += this.deltaX;
bounds.top += this.deltaY;
bounds.bottom += this.deltaY;

//construct WMS request

var url = this.url;
url += “&REQUEST=GetMap”;
url += “&SERVICE=WMS”;
url += “&VERSION=1.1.1”;
url += “&LAYERS=” + this.layers;
url += “&FORMAT=” + this.format;
url += “&TRANSPARENT=TRUE”;
url += “&SRS=” + “EPSG:4326”;
url += “&BBOX=” + bounds.toBBOX();
url += “&WIDTH=” + this.tileSize.w;
url += “&HEIGHT=” + this.tileSize.h;
return url;

}

That is, live example you can see here http://www.sumbera.com/lab/wms/getcapWGS.htm

or in MapShake here : http://www.mapshake.cz/mapfs.aspx?i=464

19 thoughts on “Overlay WMS on Google in OpenLayers”

Pingback: Overlay WMS on Google in Silverlight Bing « Geospatial Haiku
Pingback: Tiled WMS overlay on Google Map v3 « Geospatial Haiku
Pingback: Wordpress 2010 auto-review of this blog « Geospatial Haiku
manu July 6, 2011 at 4:55 am

Which version of openlayers ? does the map server have to support tms?

Reply ↓
1. manu July 6, 2011 at 6:28 am
  
  this technique works perfectly in google api v2, but in v3 tiles just disappear. i tried also with bing and it works well too
  
  Reply ↓
marco August 30, 2011 at 8:30 am

Hey Stanislav,
Great work! That helped me really a lot and prevented me from implementing a new class!
Thanks

Reply ↓
sur October 27, 2011 at 2:26 am

Hi this is a great work !

It would be great if you post an updated example with Google (v3) Layer.
thank you

Reply ↓
1. Stanislav Post authorOctober 27, 2011 at 6:37 am
  
  thanks, it is here : https://blog.sumbera.com/2010/11/02/tiled-wms-overlay-on-google-map-v3/
  ..and if you want to see it in action there is page on http://www.ikatastr.cz/ikatastrM.htm (you have to zoom in into Charle’s Bridge in Praque for example to see cadastral map comming from WMS. Source is available too (e.g. in Chrome view-source:http://www.ikatastr.cz/ikatastrM.htm )
  
  Reply ↓
  1. sur October 27, 2011 at 7:33 pm
    
    Thank you for the updated link. It works well. I am looking for an openlayers solution where I can overly WMS, WFS, and TMS together on Googlemap API V3. The existin example is overlyed on googlemap API v2 layer. I have modified your example with someother example and now I managed to overlay all these in googlemap API V3 layer in Openlayers.
    Here is the Example link http://landuseky.uky.edu/gmapv3_wfs_wms_tms.html
    
    A have aother question? is there any way to overlay WFS in GML format in your Googlemap API V3 example ?
    https://blog.sumbera.com/2010/11/02/tiled-wms-overlay-on-google-map-v3/
    
    see this post regading WFS (GML)support for Googlemap API V2
    http://code.google.com/p/geoxml/issues/detail?id=47
LeChuckNorris January 2, 2012 at 1:11 pm

You made my day !! Thank you for share.

Reply ↓
Pingback: Reprojecting non 4326 WMS image to spherical mercator | Q&A System
D. February 24, 2013 at 1:45 pm

Ahoj, prosim ta skvele riesenie, mas v openlayers pouzity google podklad a vyhladavaci formular. Vies mi poradit, ktoru cast javascriptov mam doplnit do suboru openlayers.js, aby mi to vyhladavanie fungovalo? Trapim sa s tym uz tyzden. Formular by som pouzil presne taky isty s rovnakym nazvom inputov, ako mas na tej testovacej adrese

http://www.sumbera.com/lab/wms/getcapWGS.htm

Ide mi len o vyhladavanie, na nete som sa k nicomu nedopatral, alebo neviem mozno co mam hladat.
Dik za pomoc

Reply ↓
1. Stanislav Post authorFebruary 25, 2013 at 7:40 am
  
  viz zdrojovy kod http://www.sumbera.com/lab/wms/getcapWGS.htm
  
  ***
  geocoder = new OpenLayers.Control.Geocoder();
  map.addControl(geocoder);
  
  ****
  
  function showAddress(address) {
  if (geocoder) {
  geocoder.getLocation(
  address,
  function(lonlat) {
  if (!lonlat) {
  alert(address + ” not found”);
  } else {
  map.setCenter(lonlat, map.baseLayer.options.numZoomLevels-1, false, true);
  
  }
  }
  );
  }
  }
  
  ********
  
  Reply ↓
  1. D. February 25, 2013 at 4:54 pm
    
    Dakujem za pomoc, toto som si v kode dokazal vycitat. Pridam to do mojho suboru, no mapy sa nezobrazuju. Subor geocoder.js sa vsak v stiahnutej verzii Openlayers nenachadzal v adresari controls, co nechapem. Pouzil som tento subor
    
    http://svn.openlayers.org/sandbox/topp/almanac/examples/geocoder.html
    
    Co este take by som mal spravit, aby to fungovalo? Je potrebne este daco stiahnut a pridat do suborov? Pripadne, kolko by ma stala implementacia vyhladavania do mojich Openlayers suborov (nemam nic nestandardne, len stiahnutu poslednu verziu OpenLayers) a pridane Google mapy a par vlastnych markrov.
D. February 25, 2013 at 4:54 pm

http://svn.openlayers.org/sandbox/topp/almanac/lib/OpenLayers/Control/Geocoder.js

toto je ten subor .JS :) ospravedlnujem sa za preklep vyssie

Reply ↓
nboisteault February 24, 2014 at 1:40 pm

Thank you very much!
How do you handle getFeatureInfo with TMS layers? OpenLayers.Control.WMSGetFeatureInfo and OpenLayers.Control.WMTSGetFeatureInfo don’t send any request on TMS layers.

Reply ↓
1. Stanislav Post authorFebruary 25, 2014 at 7:49 am
  
  you have to do it manually – handle click and compute GetFeatureInfo params from screen.
  
  Reply ↓
nboisteault March 3, 2014 at 3:42 pm

For those who get the same issue, I have the get_wms_url callback called twice for every tile when I zoom/move the map.
The only difference between the two requests are the ‘bounds’ object get the ‘centerLonLat’ property the second time.
So I changed :
bounds.transform(map.getProjectionObject(), proj);
for
if(!bounds.hasOwnProperty(‘centerLonLat’))
bounds.transform(map.getProjectionObject(), proj);

Hope it’ll help.

Reply ↓
Palo TT May 5, 2014 at 9:55 pm

When trying to display lesni komunikace layer from OPRL UHUL WMS service http://www.uhul.cz/mapy-a-data/webove-sluzby I get very strange overlay. There was no problem on very old geoportal2 UHUL server.

As described in article, square map view (1 tile 256×256) in EPSG:900913 is rectangular in EPSG:4326. But in every WMS request default openlayers WIDTH and HEIGHT is requested – square (256×256) and different WMS servers handle such a request in different ways:

1. Some WMS servers return what the client is requesting = requested map view resized to 256×256. No expanding/shringing in browser takes place.

2. Some servers ignore one dimension (WIDTH or HEIGHT) and returns rectangular map view
(e.g. 256×160). In this case browser expand/shring the image.

3. I found out, that UHUL WMS service instead of returning rectangular map view or resing map view just add some additional area to the map view in order to return square (256×256).
The bounds of returned map view are not the same as bounds specified in request. Very strange. If you want to get correct result (returned bounds are same as requested bounds), WIDTH and HEIGHT must have correct ratio in each request. It can be done by adding following code:

url += “&BBOX=” + bounds.toBBOX();
boundsratio= (Math.abs(bounds.top – bounds.bottom))/(Math.abs(bounds.left-bounds.right));
pheight=256;
pwidth=Math.round(pheight/boundsratio);
url += “&WIDTH=” +pwidth;
url += “&HEIGHT=” +pheight;
return url;

In order to have a smooth map the request is for larger image and browser is shrinking the image. In nord of CZ the image size is 405×256. In south of CZ the image size is 388×256.

Reply ↓