Web Map Service - Overlay WMS Layer to Google Map


Web Map Service - Overlay WMS Layer to Google Map

Add WMS Layer using Google Maps JavaScript API v3 - 

The following wms layer example demonstrates how to overlay web map service (WMS) layer into Google Maps API v3. Let say we have GIS Data Set in MapInfo .Tab format (.tab), ShapeFile (.shp), Postgis spatial data and MapServer Configuration File (.Map) and make sure you have MapServer installed in your machine. 

So in this blog post I would like to share wms layer example to overlay GIS layer using Google Maps API v3, WMS MapServer, in ASP.net web application. Find the code below :-

Related Articles

WMS Layer Example

wms website, openlayers.layer.wms,web mapping,mapping data,gis layer,mapping service,web map services,wms layer,mapping data,mapping service,wms layer example
WMS Google Maps URL
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>WMS Sample - Google Maps API v3</title>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">

        var map; var SDLLayer;           

       function initialize() {
            var center_pt = new google.maps.LatLng(28.664081,77.218566);    
            var mapOptions = {
                zoom: 9,
                center: center_pt            

            map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);                   map.setMapTypeId(google.maps.MapTypeId.ROADMAP);         

        function AddWMSLayer()
                 //Define custom WMS tiled layer
                SDLLayer = new google.maps.ImageMapType({
                getTileUrl: 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);             

                    //http://localhost:808/cgi-bin/mapserv.exe?MAP=C:/Users/lepton/Desktop/My Docs/Development/GIS Testing/Delhi_State_Locality.map&LAYERS=ALL&MODE=MAP

                    var url = "http://localhost:808/cgi-bin/mapserv.exe?MAP=C:/Users/lepton/Desktop/My Docs/Development/GIS Testing/Delhi_State_Boundary_.map&srs=EPSG:4326&version=1.0.0&" +
                    "REQUEST=GetMap&LAYERS=DL_STATE&service=wms&BBOX=" + bbox + "&WIDTH=256&HEIGHT=256&FORMAT=image/png";

                    return url;                 // return URL for the tile

                tileSize: new google.maps.Size(256, 256),
                opacity: 0.5, // setting image TRANSPARENCY 
                isPng: true

            //add WMS layer

         function RemoveLayer() {

<body onload="initialize()">
    <form id="form1" runat="server">
    <a href="#" onclick="AddWMSLayer();">Add WMS Layer</a> &nbsp;&nbsp;
    <a href="#" onclick="RemoveLayer();">Remove Layer</a> <br /><br />
    <div id="map_canvas" style="width: 100%; height: 600px;">

I hope you will enjoy the development tip while programming with Google Maps JavaScript API v3, web map service in asp.net application. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome. 

Also If you like this article, don't forget to share this article with your friends and colleagues.
Web Map Service - Overlay WMS Layer to Google Map Reviewed by Ravi Kumar on 7:04 PM Rating: 5


  1. Replies
    1. this code is working perfectly, make sure you have done all the configuration/installation like map file/data(.tab) file/map server/apache server.

  2. Thank you for the helpful overview. Do you have an approach to add WMS but for generating a Google Static Map?

    1. You're welcome Mr. Bob.. :)

      No you can't genereate a Google static map, actually the biggest problem is accessing tiles offline. It's illegal to store tiles of google maps. You should consider openlayers openlayers.org/dev/examples/offline-storage.html with open street map.

  3. GREAT!!!! I finally found the code that worked. THANK YOU VERY MUCH!! You gave me life! :D


All Rights Reserved by Etechpulse © 2012 - 2017

Contact Form


Email *

Message *

Powered by Blogger.