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:

<script src =”proj4js/lib/proj4js-combined.js”>script>

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”

  1. Pingback: Overlay WMS on Google in Silverlight Bing « Geospatial Haiku

  2. Pingback: Tiled WMS overlay on Google Map v3 « Geospatial Haiku

  3. Pingback: Wordpress 2010 auto-review of this blog « Geospatial Haiku

    1. manu

      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 ↓
      1. sur

        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 ?

        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

  8. Pingback: Reprojecting non 4326 WMS image to spherical mercator | Q&A System

  9. D.

    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 author

      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.

        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.

  11. nboisteault

    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 ↓
  12. nboisteault

    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 ↓
  13. Palo TT

    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 ↓

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.