[Note: therea are related post: overlyaing tiled WMS over the new Google Map v3 http://blog.sumbera.com/2010/11/02/tiled-wms-overlay-on-google-map-v3/ and overlying tiled WMS over the Silverlight Bing map http://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
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
Which version of openlayers ? does the map server have to support tms?
this technique works perfectly in google api v2, but in v3 tiles just disappear. i tried also with bing and it works well too
Hey Stanislav,
Great work! That helped me really a lot and prevented me from implementing a new class!
Thanks
Hi this is a great work !
It would be great if you post an updated example with Google (v3) Layer.
thank you
thanks, it is here : http://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 )
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 ?
http://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
You made my day !! Thank you for share.
Pingback: Reprojecting non 4326 WMS image to spherical mercator | Q&A System
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
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);
}
}
);
}
}
********
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.
http://svn.openlayers.org/sandbox/topp/almanac/lib/OpenLayers/Control/Geocoder.js
toto je ten subor .JS :) ospravedlnujem sa za preklep vyssie