Web Map Service - Overlay WMS Layer to Google Map

random

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
Default.aspx
<%@ 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
            map.overlayMapTypes.push(SDLLayer);    
        }       


         function RemoveLayer() {
            if(SDLLayer)
            {          
                map.overlayMapTypes.removeAt(0);           
            }
        }
    </script>
</head>

<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;">
    </div>
    </form>
</body>
</html>

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

6 comments:

  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.

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

    ReplyDelete
    Replies
    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.

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

    ReplyDelete
    Replies
    1. you're welcome.. :) and keep visiting.

      Delete

All Rights Reserved by Etechpulse © 2012 - 2017

Contact Form

Name

Email *

Message *

Powered by Blogger.