MapServer tile as a layer on top of Google Maps

Couple days ago, I made a tutorial on how to put your MapServer tile on top of your Google Maps JavaScript API. This time, I do a little improvements, just a little bit putting transparency on MapServer’s .map file.

If you want to put transparency on your generated images from MapServer, you only need to put this 1 line on your .map file:

TRANSPARENT ON

Next, we want to put this transparent images as a layer on top of Google Map, as google provided us with an example here:

https://developers.google.com/maps/documentation/javascript/examples/maptype-overlay

Change the contents of this following function:

CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {

instead of returning div-s, change it into your MapServer tiles:

var url = "http://localhost:81/cgi-bin/mapserv.exe?";
url += "map=/ms4w/apps/belajar/kampar04/kampar.map&";
url += "mode=tile&";
url += "layers=jalan&";
url += "tilemode=gmap&";
url += "tile=" + coord.x + " " + coord.y + " "+zoom;

 var myMapServerTile = ownerDocument.createElement('img');
 myMapServerTile.src= url;
 return myMapServerTile; 

voila … now you have your own layer on top of Google Maps layer …

Iklan