Created
February 6, 2014 02:52
-
-
Save djtfmartin/8837696 to your computer and use it in GitHub Desktop.
2 Species Layers with LeafletJS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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 © 2011 OpenStreetMap contributors, Imagery © 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