stevage/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
	<title>LeafletJS and ALA occurrence layer</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<body>
	<div id="map" style="height: 800px"></div>
	<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script></head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script>

   		//add an occurrence layer for macropus
		var macropus = L.tileLayer.wms("http://biocache.ala.org.au/ws/mapping/wms/reflect?q=Macropus+rufus", {
		    layers: 'ALA:occurrences',
		    format: 'image/png',
		    transparent: true,
		    attribution: "Atlas of Living Australia",
		    bgcolor:"0x000000",
		    outline:"true",
			ENV: "color:5574a6;name:circle;size:4;opacity:1"
		});

		//add an occurrence layer for macropus
		var acacia = L.tileLayer.wms("http://biocache.ala.org.au/ws/mapping/wms/reflect?q=Acacia+acuminata", {
		    layers: 'ALA:occurrences',
		    format: 'image/png',
		    transparent: true,
		    attribution: "Atlas of Living Australia",
		    bgcolor:"0x000000",
		    outline:"true",
			ENV: "color:FF9900;name:circle;size:4;opacity:1"
		});

		var speciesLayers = new L.LayerGroup();
		macropus.addTo(speciesLayers);
		acacia.addTo(speciesLayers);

		var map = L.map('map', {
			center: [-23.6,133.6],
			zoom: 4,
			layers: [speciesLayers]
		});

		var streetView = L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
			maxZoom: 18,
			attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
				'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
				'Imagery © <a href="http://mapbox.com">Mapbox</a>',
			id: 'examples.map-i875mjb7'
		}).addTo(map);

		var baseLayers = {
			"Street": streetView
		};

		var overlays = {
			"Macropus rufus": macropus,
			"Acacia acuminata": acacia
		};

		L.control.layers(baseLayers, overlays).addTo(map);

		map.on('click', onMapClick);

		function onMapClick(e) {
			$.ajax({
			    url: "http://biocache.ala.org.au/ws/occurrences/info",
			    jsonp: "callback",
			    dataType: "jsonp",
			    data: {
			        q: "Macropus+rufus OR Acacia+acuminata",
			        zoom: "6",
			        lat: e.latlng.lat,
			        lon: e.latlng.lng,
			        radius:20,
			        format: "json"
			    },
			    success: function( response ) {
					var popup = L.popup()
					    .setLatLng(e.latlng)
					    .setContent("<h3>Test</h3>Occurrences at this point: " + response.count)
					    .openOn(map);
			    }
			});
		}
	</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>LeafletJS and ALA occurrence layer</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
	<body>
	<div id="map" style="height: 800px"></div>
	<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script></head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script>

	//add an occurrence layer for macropus
	var macropus = L.tileLayer.wms("http://biocache.ala.org.au/ws/mapping/wms/reflect?q=Macropus+rufus", {
	layers: 'ALA:occurrences',
	format: 'image/png',
	transparent: true,
	attribution: "Atlas of Living Australia",
	bgcolor:"0x000000",
	outline:"true",
	ENV: "color:5574a6;name:circle;size:4;opacity:1"
	});

	//add an occurrence layer for macropus
	var acacia = L.tileLayer.wms("http://biocache.ala.org.au/ws/mapping/wms/reflect?q=Acacia+acuminata", {
	layers: 'ALA:occurrences',
	format: 'image/png',
	transparent: true,
	attribution: "Atlas of Living Australia",
	bgcolor:"0x000000",
	outline:"true",
	ENV: "color:FF9900;name:circle;size:4;opacity:1"
	});

	var speciesLayers = new L.LayerGroup();
	macropus.addTo(speciesLayers);
	acacia.addTo(speciesLayers);

	var map = L.map('map', {
	center: [-23.6,133.6],
	zoom: 4,
	layers: [speciesLayers]
	});

	var streetView = L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
	maxZoom: 18,
	attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
	'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
	'Imagery © <a href="http://mapbox.com">Mapbox</a>',
	id: 'examples.map-i875mjb7'
	}).addTo(map);

	var baseLayers = {
	"Street": streetView
	};

	var overlays = {
	"Macropus rufus": macropus,
	"Acacia acuminata": acacia
	};

	L.control.layers(baseLayers, overlays).addTo(map);

	map.on('click', onMapClick);

	function onMapClick(e) {
	$.ajax({
	url: "http://biocache.ala.org.au/ws/occurrences/info",
	jsonp: "callback",
	dataType: "jsonp",
	data: {
	q: "Macropus+rufus OR Acacia+acuminata",
	zoom: "6",
	lat: e.latlng.lat,
	lon: e.latlng.lng,
	radius:20,
	format: "json"
	},
	success: function( response ) {
	var popup = L.popup()
	.setLatLng(e.latlng)
	.setContent("<h3>Test</h3>Occurrences at this point: " + response.count)
	.openOn(map);
	}
	});
	}
	</script>
	</body>
	</html>