Skip to content

Instantly share code, notes, and snippets.

@rdmpage
Last active April 20, 2016 21:46
Show Gist options
  • Save rdmpage/43073981694598fecab725a16e890d3b to your computer and use it in GitHub Desktop.
Save rdmpage/43073981694598fecab725a16e890d3b to your computer and use it in GitHub Desktop.
Query GBIF by drawing on map
<!DOCTYPE html>
<html>
<head>
<title>GBIF search</title>
<meta charset="utf-8" />
<link
rel="stylesheet"
href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css"
/>
<link
rel="stylesheet"
href="http://leaflet.github.io/Leaflet.draw/leaflet.draw.css"
/>
<!-- jquery -->
<script src="https://code.jquery.com/jquery-1.12.3.js"></script>
<!-- Wicket -->
<script src="http://rawgit.com/arthur-e/Wicket/master/wicket.js"></script>
</head>
<body style="font-family:sans-serif">
<p>Simple demonstration of searching GBIF by drawing on a map. Once a shape is drawn,
we use it as the <b>geometry</b> parameter to query
<a href="http://www.gbif.org/developer/occurrence">GBIF's API</a>. The first
300 occurrences are displayed. Uses <a href="https://github.com/Leaflet/Leaflet.draw">Leaflet.draw</a>
to draw shapes, and <a href="https://github.com/arthur-e/Wicket">Wicket</a> to convert GeoJSON shape to
the WKT format required by GBIF's API. Used <a href="http://bl.ocks.org/d3noob/7730264">Leaflet.draw plugin with options set</a>
by <a href="https://github.com/d3noob">d3noob</a> as a starting point.
</p>
<div id="map" style="width:100%; height: 400px"></div>
<div id="data" style="width:100%;font-size:11px;"></div>
<script
src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js">
</script>
<script
src="http://leaflet.github.io/Leaflet.draw/leaflet.draw.js">
</script>
<script>
var map = L.map('map').setView([0, 0], 2);
mapLink =
'<a href="http://openstreetmap.org">OpenStreetMap</a>';
L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; ' + mapLink + ' Contributors',
maxZoom: 18,
}).addTo(map);
var geojson = null;
//--------------------------------------------------------------------------------
function onEachFeature(feature, layer) {
// does this feature have a property named popupContent?
if (feature.properties && feature.properties.popupContent) {
//console.log(feature.properties.popupContent);
// content must be a string, see http://stackoverflow.com/a/22476287
layer.bindPopup(String(feature.properties.popupContent));
}
}
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
var drawControl = new L.Control.Draw({
position: 'topright',
draw: {
marker: false, // turn off marker
polygon: {
shapeOptions: {
color: 'purple'
},
allowIntersection: false,
drawError: {
color: 'orange',
timeout: 1000
},
showArea: true,
metric: false,
repeatMode: true
},
polyline: {
shapeOptions: {
color: 'red'
},
},
rect: {
shapeOptions: {
color: 'green'
},
},
circle: {
shapeOptions: {
color: 'steelblue'
},
}
},
edit: {
featureGroup: drawnItems
}
});
map.addControl(drawControl);
map.on('draw:created', function (e) {
var type = e.layerType,
layer = e.layer;
drawnItems.addLayer(layer);
//alert(JSON.stringify(layer.toGeoJSON()));
var shape = JSON.stringify(layer.toGeoJSON());
$('#data').html(shape);
var wkt = new Wkt.Wkt();
wkt.read(shape);
$('#data').html('<b>GeoJSON</b><br/>' + shape + '<br/>' + '<b>WKT</b><br/>' + wkt.write());
// add data points
if (geojson) {
map.removeLayer(geojson);
}
/*
geojson = L.geoJson({"type": "Point", "coordinates": [46.82515,-16.29667]}).addTo(map);
*/
//----------------------------------------------------------------------------
// GBIF map
$.getJSON('http://api.gbif.org/v1/occurrence/search?geometry=' + wkt.write() + '&limit=300&callback=?',
function(data){
if (data.results) {
var x = {};
x.type = "FeatureCollection";
x.features = [];
for (var i in data.results) {
var feature = {};
feature.type = "Feature";
feature.geometry = {};
feature.geometry.type = "Point";
feature.geometry.coordinates = [data.results[i].decimalLongitude, data.results[i].decimalLatitude];
feature.properties = {};
// Content for the popup
feature.properties.name = data.results[i].key;
feature.properties.popupContent = '';
if (data.results[i].scientificName) {
feature.properties.popupContent = data.results[i].scientificName + '<br />';
}
if (data.results[i].institutionCode) {
feature.properties.popupContent += data.results[i].institutionCode + ' ';
}
if (data.results[i].catalogNumber) {
feature.properties.popupContent += data.results[i].catalogNumber;
}
feature.properties.popupContent += '<br />';
if (data.results[i].locality) {
feature.properties.popupContent += data.results[i].locality;
}
feature.properties.popupContent += '<br />';
feature.properties.popupContent += '<a href="http://www.gbif.org/occurrence/' + data.results[i].key + '" target="_new">' + data.results[i].key + '</a>' + '<br />';
//feature.properties.popupContent = data.results[i].key;
x.features.push(feature);
}
//add_data(geojson);
//L.geoJson(x).addTo(map);
geojson = L.geoJson(x, {
style: function (feature) {
return feature.properties && feature.properties.style;
},
onEachFeature: onEachFeature,
}).addTo(map);
}
}
);
});
</script>
</body>
</html>
@rdmpage
Copy link
Author

rdmpage commented Apr 20, 2016

Useful trick to serve static content from GitHub with correct MIME type (which otherwise breaks Chrome) http://stackoverflow.com/questions/17341122/link-and-execute-external-javascript-file-hosted-on-github

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment