ArcGIS server - Google Map API
Overlay ArcGIS server Published Shape file on Google Maps
For beginners its really difficult to get things started i.e. How to overlay shape file on web mapping application using Google Map Api and ArcGIS server.
I assume you have published a shape file on ArcGIS server and You know a little bit about Google maps Api and if you dont know here you can learn this
Google Map Api (Basics)
How to Publish Shape file on ArcGIS server
Now, First Open Note Pad ++ and make a basic html page containing a div and name it map_canvas
<!DOCTYPE html>
<html>
<head>
<title> ArcGIS Server - Google Map Api </title>
</head>
<body>
<div id="map_canvas" style="width:1000px;height:600px;"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title> ArcGIS Server - Google Map Api </title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" SRC="arcgislink.js"></script>
</head>
<body>
<div id="map_canvas" style="width:1000px;height:600px;"></div>
</body>
</html>
Now, write this script
<!DOCTYPE html>
<html>
<head>
<title> ArcGIS Server - Google Map Api </title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" SRC="arcgislink.js"></script>
<script type="text/javascript">
var dynamap;
function init()
{
var mapprop = {
center : new google.maps.LatLng (33.716786,73.068171),
zoom : 14,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),mapprop);
var url = 'http://localhost:6080/arcgis/rest/services/Test_Service/MapServer';
var dynamap = new gmaps.ags.MapOverlay(url);
dynamap.setMap(map);
}
google.maps.event.addDomListener(window, 'load', init);
</script>
</head>
<body>
<div id="map_canvas" style="width:1000px;height:600px;"></div>
</body>
</html>
Save it as index.html and Open it in browser You'll see a google map with your shapefile overlayed on it .
No comments:
Post a Comment