1,554
edits
(add intro →Paging through API lists) |
(add code sample →Mapping Example) |
||
Line 1,082: | Line 1,082: | ||
=== Mapping Example === | === Mapping Example === | ||
* | The following HTML and javascript code is suitable for copying and pasting into a web site in order to display a small specimen map containing iDigBio data points. | ||
The [[IDigBio API v1 Specification#Search|iDigBio Elasticsearch]] information should be considered required reading before attempting to integrate this code into one's site. | |||
To customize the map search results, modify the <code>var terms = [ ... </code> section. | |||
This example displays a map matching Scientific Name (dwc:scientificName) of "abietinella abietina" and an Institution Code (dwc:institutionCode) of "duke". | |||
<pre> | |||
<!DOCTYPE html> | |||
<html lang="en"> | |||
<head> | |||
<title>iDigBio Map</title> | |||
<!-- This example provided by iDigBio. https://www.idigbio.org --> | |||
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" /> | |||
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> | |||
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script> | |||
<script type="text/javascript"> | |||
/* | |||
* Terms that can be used by requesting site: | |||
* uuid, scientificname, institutioncode, collectioncode, kingdom, phylum, class, order, family, genus, | |||
* specificepithet, infraspecificepithet, highertaxon, continent, country, stateprovince, county, | |||
* municipality, waterbody, locality, verbatimlocality, geopoint, minelevation, maxelevation, mindepth, | |||
* maxdepth, datecollected, institutionname, institutionid, collectionname, collectionid, occurenceid, | |||
* barcodevalue,catalognumber, fieldnumber, typestatus, collector | |||
*****/ | |||
var terms = [ | |||
{"term" : { "scientificname" : "abietinella abietina"}}, | |||
{"term" : { "institutioncode": "duke"}} | |||
]; | |||
$(document).ready(function(){ | |||
var query = { | |||
"size": 10000, | |||
"from": 0, | |||
"query":{ | |||
"filtered":{ | |||
"filter":{ | |||
"and":[] | |||
} | |||
} | |||
}, | |||
"sort":{ | |||
"scientificname":{"order":"asc"} | |||
} | |||
}; | |||
/* | |||
*Build query params and outlink | |||
***/ | |||
var link=[]; | |||
$.each(terms,function(ind,item){ | |||
query.query.filtered.filter.and.push(item); | |||
$.each(item.term,function(key,val){ | |||
link.push(key+'='+ val.toLowerCase()); | |||
}); | |||
}); | |||
var link_href = 'https://www.idigbio.org/portal/search?'+link.join('&'); | |||
var link_string = '<br>Map point data provided by iDigBio. <a id="link" href="' + link_href + '">View on iDigBio</a>'; | |||
var base = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{ | |||
attribution: 'Map data © OpenStreetMap contributors; ' + link_string, | |||
minZoom: 0, | |||
maxZoom: 18, | |||
reuseTiles: true | |||
}); | |||
map = L.map('map',{ | |||
center: [0,0], | |||
zoom: 0, | |||
layers: [base], | |||
scrollWheelZoom: true, | |||
boxZoom: false | |||
}); | |||
/* | |||
*Make request to iDigBio search server | |||
***/ | |||
$.post('https://search.idigbio.org/idigbio/records/_search', JSON.stringify(query),function(resp){ | |||
$(resp.hits.hits).each(function(ind,item){ | |||
var source = item._source; | |||
if(typeof source.geopoint !== 'undefined'){ | |||
var c = new L.Circle([source.geopoint.lat,source.geopoint.lon],1,{color:'#E90A0A',opacity:1,fillopacity:1}); | |||
c.addTo(map); | |||
} | |||
}); | |||
}); | |||
}); | |||
</script> | |||
</head> | |||
<body> | |||
<div id="map" style="height:250px;width:330px;"></div> | |||
</body> | |||
</html> | |||
</pre> | |||
=== API Performance === | === API Performance === |
edits