<!DOCTYPE html>
<html style="width: 99%; height: 99%; min-height: 99%;">
<head>
   <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
</head>
<body style="width: 99%; height: 99%; min-height: 99%;">
  <div id="map" style="width: 99%; height: 99%; min-height: 99%;"></div>

  <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
  <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
  <script>

    var map = L.map('map', { zoomControl:false }).setView([0, 0], 1);
    L.tileLayer('http://{s}.tiles.mapbox.com/v3/timrobertson100.map-x2mlizjd/{z}/{x}/{y}.png', {
      maxZoom: 14,
      attribution: "Mapbox, <a href='http://www.openstreetmap.org/copyright' target='_blank'>OpenStreetMap contributors</a>"
    }).addTo(map);
    
    // callback that will append the layer if there is a species identified
    var appendLayer = function(response) {
      // usageKey represents the taxon
      if (response.usageKey) {
        L.tileLayer('http://cdn.gbif.org/v1/map/density/tile.png?resolution=4&x={x}&y={y}&z={z}&type=TAXON&key=' + response.usageKey, {
          maxZoom: 14,
          attribution: "GBIF.org"
        }).addTo(map);    
      }
     }
    
      $.getJSON("http://api.gbif.org/v1/species/match?kingdom=Animalia&name=Loxodonta africana", appendLayer);
  </script>
</body>
</html>