nickdos/.block

## .block
license: apache-2.0
height: 800

## 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="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.3/leaflet.css" />
</head>
<body>
	<div id="map" style="height: 800px"></div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.3/leaflet.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script>

   		//add an occurrence layer for Calyptorhynchus
		var calyptorhynchus = L.tileLayer.wms("https://biocache-ws-test.ala.org.au/ws/ogc/wms/reflect?q=genus:Pogona", {
		    LAYERS: 'ALA:occurrences',
		    FORMAT: 'image/png',
		    TRANSPARENT: true,
		    ATTRIBUTION: "Atlas of Living Australia",
		    BGCOLOR:"0x000000",
		    OUTLINE:"false",
		    ENV: "color:5574a6;name:circle;size:4;opacity:1"
		});

		//add an occurrence layer for acacia acuminata
		var acacia = L.tileLayer.wms("https://biocache-ws-test.ala.org.au/ws/ogc/wms/reflect?q=genus:Acacia", {
		    LAYERS: 'ALA:occurrences',
		    FORMAT: 'image/png',
		    TRANSPARENT: true,
		    ATTRIBUTION: "Atlas of Living Australia",
		    BGCOLOR:"0x000000",
		    OUTLINE:"false",
		    ENV: "color:FF9900;name:circle;size:4;opacity:1"
		});

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

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

		var streetView = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{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://cartodb.com/attributions">CartoDB</a>',
			id: 'examples.map-i875mjb7'
		}).addTo(map);

		var baseLayers = {
			"Street": streetView
		};

		var overlays = {
			"Calyptorhynchus": calyptorhynchus,
			"Acacia acuminata": acacia
		};

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

		map.on('click', onMapClick);

		function onMapClick(e) {
			$.ajax({
			    url: "https://biocache.ala.org.au/ws/occurrences/info",
			    jsonp: "callback",
			    dataType: "jsonp",
			    data: {
			        q: "genus:Calyptorhynchus 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="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.3/leaflet.css" />
	</head>
	<body>
	<div id="map" style="height: 800px"></div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.3/leaflet.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script>

	//add an occurrence layer for Calyptorhynchus
	var calyptorhynchus = L.tileLayer.wms("https://biocache-ws-test.ala.org.au/ws/ogc/wms/reflect?q=genus:Pogona", {
	LAYERS: 'ALA:occurrences',
	FORMAT: 'image/png',
	TRANSPARENT: true,
	ATTRIBUTION: "Atlas of Living Australia",
	BGCOLOR:"0x000000",
	OUTLINE:"false",
	ENV: "color:5574a6;name:circle;size:4;opacity:1"
	});

	//add an occurrence layer for acacia acuminata
	var acacia = L.tileLayer.wms("https://biocache-ws-test.ala.org.au/ws/ogc/wms/reflect?q=genus:Acacia", {
	LAYERS: 'ALA:occurrences',
	FORMAT: 'image/png',
	TRANSPARENT: true,
	ATTRIBUTION: "Atlas of Living Australia",
	BGCOLOR:"0x000000",
	OUTLINE:"false",
	ENV: "color:FF9900;name:circle;size:4;opacity:1"
	});

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

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

	var streetView = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{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://cartodb.com/attributions">CartoDB</a>',
	id: 'examples.map-i875mjb7'
	}).addTo(map);

	var baseLayers = {
	"Street": streetView
	};

	var overlays = {
	"Calyptorhynchus": calyptorhynchus,
	"Acacia acuminata": acacia
	};

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

	map.on('click', onMapClick);

	function onMapClick(e) {
	$.ajax({
	url: "https://biocache.ala.org.au/ws/occurrences/info",
	jsonp: "callback",
	dataType: "jsonp",
	data: {
	q: "genus:Calyptorhynchus 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>