-
-
Save stevage/85080d6c2cd817ce1382fd017416c4a6 to your computer and use it in GitHub Desktop.
LeafletJS and ALA occurrence layer
This file contains hidden or 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://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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment