tobybellwood/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Click on the map above to see the relationship between the two layers.
This creates a quick map to compare two ASGS boundaries (in this case SA4 and CED12).
It uses the esri-leaflet tools at http://esri.github.io/esri-leaflet/ on top of leaflet 0.7x
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 dynamicMapLayer (to be safe, although some can be shown as a tiledMapLayer if they have a fused cache)
The key line is this one:
L.esri.dynamicMapLayer("https://censusdata.abs.gov.au/arcgis/rest/services/2011_SA4/MapServer", {useCors: false}).addTo(map);
Enjoy!

  
## index.html
<html>
<head>
  <meta charset=utf-8 />
  <title>ASGS_Comparator</title>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

  <!-- Load Leaflet from CDN-->
  <link rel="stylesheet" href="//cdn.jsdelivr.net/leaflet/0.7.3/leaflet.css" />
  <script src="//cdn.jsdelivr.net/leaflet/0.7.3/leaflet.js"></script>

  <!-- Load Esri Leaflet from CDN -->
  <script src="//cdn-geoweb.s3.amazonaws.com/esri-leaflet/1.0.0-rc.6/esri-leaflet.js"></script>

  <style>
    body {margin:0;padding:0;}
    #map {position: absolute;top:0;bottom:0;right:0;left:0;}
  </style>
</head>
<body>

<style>
  #selectedFeatures {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    background: white;
    padding: 1em;
  }
</style>

<div id="map"></div>
<div id="selectedFeatures" class="leaflet-bar">
  <table>
    <tr><td>SA4 2011 Name:</td><td id="SA4_2011" style="color:#67a9cf"> </td></tr>
    <tr><td>CED 2012 Name:</td><td id="CED_2012" style="color:#ef8a62"> </td></tr>
  </table>
<script>
  var map = L.map('map').setView([-35, 145], 6);

  L.esri.basemapLayer('Gray').addTo(map);

  var SA4_2011 = L.esri.dynamicMapLayer("https://censusdata.abs.gov.au/arcgis/rest/services/2011_SA4/MapServer", {opacity: 0.25, useCors: false}).addTo(map);
  var CED_2012 = L.esri.dynamicMapLayer('https://censusdata.abs.gov.au/arcgis/rest/services/2012_CED/MapServer', {opacity: 0.75, useCors: false}).addTo(map);

  var identifiedFeature;
  var identifiedFeature2;

  var pane = document.getElementById('selectedFeatures');

  map.on('click', function (e) {
    if(identifiedFeature){
      map.removeLayer(identifiedFeature);
      //pane.innerHTML = 'Loading';
    };
    if(identifiedFeature2){
      map.removeLayer(identifiedFeature2);
      //pane.innerHTML = 'Loading';
    };
    SA4_2011.identify().on(map).at(e.latlng).run(function(error, featureCollection){
      identifiedFeature = new L.GeoJSON(featureCollection.features[0], {
        style: function(){
          return {
            color: '#67a9cf',
            weight: 2
          };
        }
      }).addTo(map);
      document.getElementById("SA4_2011").innerHTML =  '<b>' + featureCollection.features[0].properties.SA4_NAME + '</b>';
    });

    CED_2012.identify().on(map).at(e.latlng).run(function(error, featureCollection){
      identifiedFeature2 = new L.GeoJSON(featureCollection.features[0], {
        style: function(){
          return {
            color: '#ef8a62',
            weight: 2
          };
        }
      }).addTo(map);
      document.getElementById("CED_2012").innerHTML =  '<b>' + featureCollection.features[0].properties.CED_NAME + '</b>';
    });
  });
</script>

</body>
</html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>ASGS_Comparator</title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

	<!-- Load Leaflet from CDN-->
	<link rel="stylesheet" href="//cdn.jsdelivr.net/leaflet/0.7.3/leaflet.css" />
	<script src="//cdn.jsdelivr.net/leaflet/0.7.3/leaflet.js"></script>

	<!-- Load Esri Leaflet from CDN -->
	<script src="//cdn-geoweb.s3.amazonaws.com/esri-leaflet/1.0.0-rc.6/esri-leaflet.js"></script>

	<style>
	body {margin:0;padding:0;}
	#map {position: absolute;top:0;bottom:0;right:0;left:0;}
	</style>
	</head>
	<body>

	<style>
	#selectedFeatures {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 10;
	background: white;
	padding: 1em;
	}
	</style>

	<div id="map"></div>
	<div id="selectedFeatures" class="leaflet-bar">
	<table>
	<tr><td>SA4 2011 Name:</td><td id="SA4_2011" style="color:#67a9cf"> </td></tr>
	<tr><td>CED 2012 Name:</td><td id="CED_2012" style="color:#ef8a62"> </td></tr>
	</table>
	<script>
	var map = L.map('map').setView([-35, 145], 6);

	L.esri.basemapLayer('Gray').addTo(map);

	var SA4_2011 = L.esri.dynamicMapLayer("https://censusdata.abs.gov.au/arcgis/rest/services/2011_SA4/MapServer", {opacity: 0.25, useCors: false}).addTo(map);
	var CED_2012 = L.esri.dynamicMapLayer('https://censusdata.abs.gov.au/arcgis/rest/services/2012_CED/MapServer', {opacity: 0.75, useCors: false}).addTo(map);

	var identifiedFeature;
	var identifiedFeature2;

	var pane = document.getElementById('selectedFeatures');

	map.on('click', function (e) {
	if(identifiedFeature){
	map.removeLayer(identifiedFeature);
	//pane.innerHTML = 'Loading';
	};
	if(identifiedFeature2){
	map.removeLayer(identifiedFeature2);
	//pane.innerHTML = 'Loading';
	};
	SA4_2011.identify().on(map).at(e.latlng).run(function(error, featureCollection){
	identifiedFeature = new L.GeoJSON(featureCollection.features[0], {
	style: function(){
	return {
	color: '#67a9cf',
	weight: 2
	};
	}
	}).addTo(map);
	document.getElementById("SA4_2011").innerHTML = '<b>' + featureCollection.features[0].properties.SA4_NAME + '</b>';
	});

	CED_2012.identify().on(map).at(e.latlng).run(function(error, featureCollection){
	identifiedFeature2 = new L.GeoJSON(featureCollection.features[0], {
	style: function(){
	return {
	color: '#ef8a62',
	weight: 2
	};
	}
	}).addTo(map);
	document.getElementById("CED_2012").innerHTML = '<b>' + featureCollection.features[0].properties.CED_NAME + '</b>';
	});
	});
	</script>

	</body>
	</html>