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
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
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>
<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:
Reviewed by Ravi Kumar
on
7:04 PM
Rating:
this code is not running
ReplyDeletethis code is working perfectly, make sure you have done all the configuration/installation like map file/data(.tab) file/map server/apache server.
DeleteThank you for the helpful overview. Do you have an approach to add WMS but for generating a Google Static Map?
ReplyDeleteYou're welcome Mr. Bob.. :)
DeleteNo 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.
GREAT!!!! I finally found the code that worked. THANK YOU VERY MUCH!! You gave me life! :D
ReplyDeleteyou're welcome.. :) and keep visiting.
Delete