Tiled WMS overlay on Google Map v3

this is the third sample of the tiled WMS overlay over the Spherical Mercator, this time over the new Google Map v3. Previsous post talked about overlyaing WMS in  Silverlight Bing maps (https://blog.sumbera.com/2010/02/25/overlay-wms-on-google-in-silverlight-bing/ ) and OpenLayers (https://blog.sumbera.com/2010/02/17/overlay-wms-on-google-in-openlayers/).

Sample application can be found here: http://www.sumbera.com/lab/GoogleV3/tiledWMSoverlayGoogleV3.htm You can try to run it on your mobile device as well – suprisingly it run very well on my iPhone (sometimes it just crash Safari :), however on the iPad there are some more serious issues that will be hopefuly resolved with new iOS update (JavaScript stops to run).

For the new Google Map v3 you have to do the following :

//Define custom WMS tiled layer

var SLPLayer = 
 new google.maps.ImageMapType (
    function (coord, zoom) { 
      var proj = map.getProjection(); 
      var zfactor = Math.pow(2, zoom); 
       // get Long Lat coordinates
      var top = proj.fromPointToLatLng(
             new google.maps.Point(coord.x * 256 / zfactor, coord.y * 256 / zfactor) ); 
      var bot = proj.fromPointToLatLng(
            new google.maps.Point((coord.x + 1) * 256 / zfactor, (coord.y + 1) * 256 / zfactor)); 
      //corrections for the slight shift of the SLP (mapserver)
       var deltaX = 0.0013; 
       var deltaY = 0.00058; 
      //create the Bounding box string
       var bbox = (top.lng() + deltaX) + "," +(bot.lat() + deltaY) +","
                           +(bot.lng() + deltaX) +"," +(top.lat() + deltaY);
       //base WMS URL
        var url = 
       "http://mapserver-slp.mendelu.cz/cgi-bin/mapserv?map=/var/local/slp/krtinyWMS.map&" ;
       url +="&REQUEST=GetMap"; //WMS operation
       url +="&SERVICE=WMS"; //WMS service
       url +="&VERSION=1.1.1"; //WMS version 
       url +="&LAYERS=" + "typologie,hm2003"; //WMS layers
       url +="&FORMAT=image/png"; //WMS format
       url +="&BGCOLOR=0xFFFFFF" ;
       url +="&TRANSPARENT=TRUE" ;
       url +="&SRS=EPSG:4326"; //set WGS84 
       url +="&BBOX="+ bbox; // set bounding box
       url +="&WIDTH=256"; //tile size in google
       url +="&HEIGHT=256" ; 
       return url; // return URL for the tile    
     }, //getTileURL

 tileSize: new google.maps.Size(256, 256),
 isPng: true

//add WMS layer


15 thoughts on “Tiled WMS overlay on Google Map v3

  1. What is the correction deltaX/deltaY for? I’ve been struggling with errors that was fixed when I removed them. I use ArcGIS Server for my WMS, what do you use?

  2. Parada. Ale jak je to s copyrightem u OpenStreetMaps? Chtel bych je taky pridat jako vrstvu do sve mapove aplikace. Musim pak zobrazovat nejake logo a dalsi informace? Jak?

  3. Hi,
    firstable congratulations for your app!
    Is it possible to have your mapserver mapfile?
    I would like to know how to set a mapfile in order to be used by googlemaps api

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s