tobybellwood/dynamap.js

## readme.md

      
    Raw
  

              readme.md
            
          
    It uses the ArcGIS Server Link for Google Maps at http://google-maps-utility-library-v3.googlecode.com/svn/trunk/arcgislink/docs/examples.html on top of Google Maps and the ABS geospatial web services at http://censusdata.abs.gov.au/arcgis/rest/services
The ABS layers are currently served on their MapServer as a Cached Map Service (I haven't got the Dynamic Map Service working yet on non-cached layers) - so only the core ABS layers are currently working in this demo!
The key lines are these:
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var url = '//censusdata.abs.gov.au/arcgis/rest/services/2011_CED/MapServer';
var agsType = new gmaps.ags.MapType(url, {
name: 'ArcGIS',
opacity: 0.5
});//
map.overlayMapTypes.insertAt(0, agsType);
Enjoy!

  
## dynamap.js
function init() {
  var myOptions = {
    zoom: 6,
    center: new google.maps.LatLng(-35, 145),
    mapTypeId: google.maps.MapTypeId.ROAD,
    streetViewControl: true //my favorite feature in V3!
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  var url = '//censusdata.abs.gov.au/arcgis/rest/services/2011_CED/MapServer';
  var agsType = new gmaps.ags.MapType(url, {
    name: 'ArcGIS',
    opacity: 0.5
  });//
  map.overlayMapTypes.insertAt(0, agsType);
}

window.onload = init;


## index.html
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <title>ESRI MapServer Overlay</title>
        <script type="text/javascript">
            //copy from http://gmaps-samples.googlecode.com/svn/trunk/versionchecker.html?v=2.86
            function getURLParam(name) {
              var regexS = "[\\?&]" + name + "=([^&#]*)";
              var regex = new RegExp(regexS);
              var results = regex.exec(window.location.href);
              return (results === null ? "" : decodeURIComponent(results[1]));
            }
            var gmaps_v = getURLParam('v');
            if (gmaps_v) gmaps_v = '&v='+gmaps_v;
            var script = '<script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=false' + gmaps_v + '"></' + 'script>';
            document.write(script);
        </script>
        <script type="text/javascript" src="//google-maps-utility-library-v3.googlecode.com/svn/trunk/arcgislink/src/arcgislink.js">
        </script>
        <script type="text/javascript" src="dynamap.js">
        </script>
    </head>
    <body style="margin:0px; padding:0px;">
        <div id="map_canvas" style="width:100%; height:100%">
        </div>
    </body>
</html>
	function init() {
	var myOptions = {
	zoom: 6,
	center: new google.maps.LatLng(-35, 145),
	mapTypeId: google.maps.MapTypeId.ROAD,
	streetViewControl: true //my favorite feature in V3!
	}
	var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	var url = '//censusdata.abs.gov.au/arcgis/rest/services/2011_CED/MapServer';
	var agsType = new gmaps.ags.MapType(url, {
	name: 'ArcGIS',
	opacity: 0.5
	});//
	map.overlayMapTypes.insertAt(0, agsType);
	}

	window.onload = init;
	<html>
	<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
	<title>ESRI MapServer Overlay</title>
	<script type="text/javascript">
	//copy from http://gmaps-samples.googlecode.com/svn/trunk/versionchecker.html?v=2.86
	function getURLParam(name) {
	var regexS = "[\\?&]" + name + "=([^&#]*)";
	var regex = new RegExp(regexS);
	var results = regex.exec(window.location.href);
	return (results === null ? "" : decodeURIComponent(results[1]));
	}
	var gmaps_v = getURLParam('v');
	if (gmaps_v) gmaps_v = '&v='+gmaps_v;
	var script = '<script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=false' + gmaps_v + '"></' + 'script>';
	document.write(script);
	</script>
	<script type="text/javascript" src="//google-maps-utility-library-v3.googlecode.com/svn/trunk/arcgislink/src/arcgislink.js">
	</script>
	<script type="text/javascript" src="dynamap.js">
	</script>
	</head>
	<body style="margin:0px; padding:0px;">
	<div id="map_canvas" style="width:100%; height:100%">
	</div>
	</body>
	</html>