Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
2 Species Layers with LeafletJS
<!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://leafletjs.com/dist/leaflet.css" />
</head>
<body>
<div id="map" style="height: 800px"></div>
<script src="http://leafletjs.com/dist/leaflet.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
//add a base layer
var cmAttr = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
cmUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/{styleId}/256/{z}/{x}/{y}.png';
var minimal = L.tileLayer(cmUrl, {styleId: 22677, attribution: cmAttr}),
midnight = L.tileLayer(cmUrl, {styleId: 999, attribution: cmAttr}),
motorways = L.tileLayer(cmUrl, {styleId: 46561, attribution: cmAttr});
//add an occurrence layer for macropus
var macropus = L.tileLayer.wms("http://biocache.ala.org.au/ws/webportal/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/webportal/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: [minimal, motorways, speciesLayers]
});
var baseLayers = {
"Minimal": minimal,
"Night View": midnight
};
var overlays = {
//"Species layers": speciesLayers
"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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.