|
<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> |
