Skip to content

Instantly share code, notes, and snippets.

@rdmpage rdmpage/index.html
Last active Apr 20, 2016

Embed
What would you like to do?
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

This comment has been minimized.

Copy link
Owner Author

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
You can’t perform that action at this time.