IDigBio API v1 Examples: Difference between revisions

add code sample →‎Mapping Example
(add code sample →‎Mapping Example)
Line 1,082: Line 1,082:
=== Mapping Example ===
=== Mapping Example ===


* coming soon
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 ===
1,554

edits