Difference between revisions of "Seruyan-Sampit"

From A.P.E.S. wiki
Jump to navigation Jump to search
(Blanked the page)
Tag: Blanking
 
Line 1: Line 1:
<html>
 
  <head>
 
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
 
    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
 
  
    <style>
 
      #map {
 
      height: 500px;
 
      width: 100%;
 
      max-width: 100%;
 
      max-height: 100%;
 
      }
 
</style>
 
  </head>
 
  <body>
 
    <div id="map" style="width: 100%; height: 500px;"></div>
 
 
<script>
 
 
// GEOJSON FILES
 
    var hoolockhoolock = 'files/Hoolock_hoolock.geojson';
 
var hoolockleuconedys = 'files/Hoolock_leuconedys.geojson';
 
var hoolocktianxing = 'files/Hoolock_tianxing.geojson';
 
var hyloabbotti = 'files/Hylobates_abbotti.geojson';
 
var hyloagilis = 'files/Hylobates_agilis.geojson';
 
var hyloalbibaris = 'files/Hylobates_albibarbis.geojson';
 
var hylofunereus = 'files/Hylobates_funereus.geojson';
 
var hylolar = 'files/Hylobates_lar.geojson';
 
var hylolarcarp = 'files/Hylobates_lar_ssp_carpenteri.geojson';
 
var hylolarvest = 'files/Hylobates_lar_ssp_vestitus.geojson';
 
var hylomoloch = 'files/Hylobates_moloch.geojson';
 
var hylomuell = 'files/Hylobates_muelleri.geojson';
 
var hylopileatus = 'files/Hylobates_pileatus.geojson';
 
var nomasannamensis = 'files/Nomascus_annamensis.geojson';
 
var nomasconcolor = 'files/Nomascus_concolor.geojson';
 
var nomasgabriellae = 'files/Nomascus_gabriellae.geojson';
 
var nomashainanus = 'files/Nomascus_hainanus.geojson';
 
var nomasleuco = 'files/Nomascus_leucogenys.geojson';
 
var nomasnasutus = 'files/Nomascus_nasutus.geojson';
 
var nomassiki = 'files/Nomascus_siki.geojson';
 
var symphasyndact = 'files/Symphalangus_syndactylus.geojson';
 
    var hyloklosii = 'files/Hylobates_klossii.geojson';
 
     
 
// Map
 
var map = L.map('map').setView([10, 110], 4);
 
    var topo=new L.tileLayer('http://{s}.tile.opentopomap.org/{z}/{x}/{y}.png',{attribution: '&copy; <a href="http://osm.org/copyright">OpenTopoMap</a> contributors'}).addTo(map);
 
    var osm=new L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',{attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);
 
 
// Popup content
 
    function forEachFeature(feature, layer) {
 
        var popupContent = "<p><b>Species: </b>"+ feature.properties.BINOMIAL +'</p>';
 
        layer.bindPopup(popupContent);
 
      }
 
     
 
// Set style function that sets fill color property
 
 
  function stylehoolockhoolock(feature) {
 
        return {
 
          fillColor: 'F31818',
 
          fillOpacity: 0.7, 
 
          weight: 2,
 
          opacity: 0.7,
 
          color: 'F31818',
 
          dashArray: '3'
 
        };
 
      }
 
  function stylehoolockleuconedys(feature) {
 
        return {
 
          fillColor: 'AF1818',
 
          fillOpacity: 0.7, 
 
          weight: 2,
 
          opacity: 0.7,
 
          color: 'AF1818',
 
          dashArray: '3'
 
        };
 
      }
 
  function stylehoolocktianxing(feature) {
 
        return {
 
          fillColor: 'B65757',
 
          fillOpacity: 0.7, 
 
          weight: 2,
 
          opacity: 0.7,
 
          color: 'B65757',
 
          dashArray: '3'
 
        };
 
      }
 
  function stylehyloabbotti(feature) {
 
        return {
 
          fillColor: 'F87446',
 
          fillOpacity: 0.7, 
 
          weight: 2,
 
          opacity: 0.7,
 
          color: 'F87446',
 
          dashArray: '3'
 
        };
 
      }
 
  function stylehyloagilis(feature) {
 
        return {
 
          fillColor: 'CA833D',
 
          fillOpacity: 0.7, 
 
          weight: 2,
 
          opacity: 0.7,
 
          color: 'CA833D',
 
          dashArray: '3'
 
        };
 
      }
 
  function stylehyloalbibaris(feature) {
 
        return {
 
          fillColor: 'CE6C0C',
 
          fillOpacity: 0.7, 
 
          weight: 2,
 
          opacity: 0.7,
 
          color: 'CE6C0C',
 
          dashArray: '3'
 
        };
 
      }
 
  function stylehylofunereus(feature) {
 
        return {
 
          fillColor: 'EEA215',
 
          fillOpacity: 0.7, 
 
          weight: 2,
 
          opacity: 0.7,
 
          color: 'EEA215',
 
          dashArray: '3'
 
        };
 
      }
 
  function stylehylolar(feature) {
 
        return {
 
          fillColor: 'EEC315',
 
          fillOpacity: 0.7, 
 
          weight: 2,
 
          opacity: 0.7,
 
          color: 'EEC315',
 
          dashArray: '3'
 
        };
 
      }
 
  function stylehylolarcarp(feature) {
 
        return {
 
          fillColor: 'EBEE15',
 
          fillOpacity: 0.7, 
 
          weight: 2,
 
          opacity: 0.7,
 
          color: 'EBEE15',
 
          dashArray: '3'
 
        };
 
      }
 
  function stylehylolarvest(feature) {
 
        return {
 
          fillColor: 'CCCE4A',
 
          fillOpacity: 0.7, 
 
          weight: 2,
 
          opacity: 0.7,
 
          color: 'CCCE4A',
 
          dashArray: '3'
 
        };
 
      }
 
  function stylehylomoloch(feature) {
 
        return {
 
          fillColor: 'ADC60F',
 
          fillOpacity: 0.7, 
 
          weight: 2,
 
          opacity: 0.7,
 
          color: 'ADC60F',
 
          dashArray: '3'
 
        };
 
      }
 
  function stylehylomuell(feature) {
 
        return {
 
          fillColor: '92C60F',
 
          fillOpacity: 0.7, 
 
          weight: 2,
 
          opacity: 0.7,
 
          color: '92C60F',
 
          dashArray: '3'
 
        };
 
      }
 
  function stylehylopileatus(feature) {
 
        return {
 
          fillColor: '7FDC14',
 
          fillOpacity: 0.7, 
 
          weight: 2,
 
          opacity: 0.7,
 
          color: '7FDC14',
 
          dashArray: '3'
 
        };
 
      }
 
  function stylenomasannamensis(feature) {
 
        return {
 
          fillColor: '4BDD0F',
 
          fillOpacity: 0.7, 
 
          weight: 2,
 
          opacity: 0.7,
 
          color: '4BDD0F',
 
          dashArray: '3'
 
        };
 
      }
 
  function stylenomasconcolor(feature) {
 
        return {
 
          fillColor: '0B8D1A',
 
          fillOpacity: 0.7, 
 
          weight: 2,
 
          opacity: 0.7,
 
          color: '0B8D1A',
 
          dashArray: '3'
 
        };
 
      }
 
  function stylenomasgabriellae(feature) {
 
        return {
 
          fillColor: '0FD29F',
 
          fillOpacity: 0.7, 
 
          weight: 2,
 
          opacity: 0.7,
 
          color: '0FD29F',
 
          dashArray: '3'
 
        };
 
      }
 
  function stylenomashainanus(feature) {
 
        return {
 
          fillColor: '0ECFB9',
 
          fillOpacity: 0.7, 
 
          weight: 2,
 
          opacity: 0.7,
 
          color: '0ECFB9',
 
          dashArray: '3'
 
        };
 
      }
 
  function stylenomasleuco(feature) {
 
        return {
 
          fillColor: '0CD1EA',
 
          fillOpacity: 0.7, 
 
          weight: 2,
 
          opacity: 0.7,
 
          color: '0CD1EA',
 
          dashArray: '3'
 
        };
 
      }
 
  function stylenomasnasutus(feature) {
 
        return {
 
          fillColor: '0995D4',
 
          fillOpacity: 0.7, 
 
          weight: 2,
 
          opacity: 0.7,
 
          color: '0995D4',
 
          dashArray: '3'
 
        };
 
      }  
 
  function stylenomassiki(feature) {
 
        return {
 
          fillColor: '127BD6',
 
          fillOpacity: 0.7, 
 
          weight: 2,
 
          opacity: 0.7,
 
          color: '127BD6',
 
          dashArray: '3'
 
        };
 
      }
 
  function stylesymphasyndact(feature) {
 
        return {
 
          fillColor: '6740C6',
 
          fillOpacity: 0.7, 
 
          weight: 2,
 
          opacity: 0.7,
 
          color: '6740C6',
 
          dashArray: '3'
 
        };
 
      }
 
function styleshyloklosii(feature) {
 
        return {
 
          fillColor: 'EF1E6A',
 
          fillOpacity: 0.7, 
 
          weight: 2,
 
          opacity: 0.7,
 
          color: 'EF1E6A',
 
          dashArray: '3'
 
        };
 
      }
 
 
 
 
 
 
 
// Null variable that will hold layer
 
    var stateLayer = L.geoJson(null, {style: style});
 
    var stateLayer2 = L.geoJson(null, {onEachFeature: forEachFeature, style: style2});   
 
var hoolockhoolockLayer = L.geoJson(null, {style: stylehoolockhoolock});
 
var hoolockleuconedysLayer = L.geoJson(null, {style: stylehoolockleuconedys});  
 
var hoolocktianxingLayer = L.geoJson(null, {style: stylehoolocktianxing});  
 
var hyloabbottiLayer = L.geoJson(null, {style: stylehyloabbotti});
 
var hyloalbibarisLayer = L.geoJson(null, {style: stylehyloalbibaris});  
 
var hyloagilisLayer = L.geoJson(null, {style: stylehyloagilis});  
 
var hylofunereusLayer = L.geoJson(null, {style: stylehylofunereus});  
 
var hylolarLayer = L.geoJson(null, {style: stylehylolar});  
 
var hylolarcarpLayer = L.geoJson(null, {style: stylehylolarcarp});  
 
var hylolarvestLayer = L.geoJson(null, {style: stylehylolarvest});
 
var hylomolochLayer = L.geoJson(null, {style: stylehylomoloch});
 
var hylomuellLayer = L.geoJson(null, {style: stylehylomuell});
 
var hylopileatusLayer = L.geoJson(null, {style: stylehylopileatus});  
 
var nomasannamensisLayer = L.geoJson(null, {style: stylenomasannamensis});
 
var nomasconcolorLayer = L.geoJson(null, {style: stylenomasconcolor});
 
var nomasgabriellaeLayer = L.geoJson(null, {style: stylenomasgabriellae});
 
var nomashainanusLayer = L.geoJson(null, {style: stylenomashainanus});
 
var nomasleucoLayer = L.geoJson(null, {style: stylenomasleuco});
 
var nomasnasutusLayer = L.geoJson(null, {style: stylenomasnasutus});
 
var nomassikiLayer = L.geoJson(null, {style: stylenomassiki});
 
var symphasyndactLayer = L.geoJson(null, {style: stylesymphasyndact});
 
var hyloklosiiLayer = L.geoJson(null, {style: stylehyloklosii});
 
 
    $.getJSON(hyloklosii, function(data) { hyloklosiiLayer.addData(data);});
 
      hyloklosiiLayer.addTo(map);
 
 
 
$.getJSON(hoolockhoolock, function(data) { hoolockhoolockLayer.addData(data);});
 
      hoolockhoolockLayer.addTo(map);
 
 
 
$.getJSON(symphasyndact, function(data) { symphasyndactLayer.addData(data);});
 
      symphasyndactLayer.addTo(map);
 
 
$.getJSON(nomassiki, function(data) { nomassikiLayer.addData(data);});
 
      nomassikiLayer.addTo(map);
 
 
 
$.getJSON(nomasnasutus, function(data) { nomasnasutusLayer.addData(data);});
 
      nomasnasutusLayer.addTo(map);
 
 
 
$.getJSON(nomasleuco, function(data) { nomasleucoLayer.addData(data);});
 
      nomasleucoLayer.addTo(map);
 
 
 
$.getJSON(nomashainanus, function(data) { nomashainanusLayer.addData(data);});
 
      nomashainanusLayer.addTo(map);
 
 
$.getJSON(nomasgabriellae, function(data) { nomasgabriellaeLayer.addData(data);});
 
      nomasgabriellaeLayer.addTo(map);
 
   
 
$.getJSON(nomasconcolor, function(data) { nomasconcolorLayer.addData(data);});
 
      nomasconcolorLayer.addTo(map);
 
 
    $.getJSON(nomasannamensis, function(data) { nomasannamensisLayer.addData(data);});
 
      nomasannamensisLayer.addTo(map);
 
 
 
    $.getJSON(hylopileatus, function(data) { hylopileatusLayer.addData(data);});
 
      hylopileatusLayer.addTo(map);
 
 
 
    $.getJSON(hylomuell, function(data) { hylomuellLayer.addData(data);});
 
      hylomuellLayer.addTo(map);  
 
 
    $.getJSON(hylomoloch, function(data) { hylomolochLayer.addData(data);});
 
      hylomolochLayer.addTo(map);
 
 
 
    $.getJSON(hylolarvest, function(data) { hylolarvestLayer.addData(data);});
 
      hylolarvestLayer.addTo(map);
 
       
 
$.getJSON(hylolarcarp, function(data) { hylolarcarpLayer.addData(data);});
 
      hylolarcarpLayer.addTo(map);
 
 
 
    $.getJSON(hylolar, function(data) { hylolarLayer.addData(data);});
 
      hylolarLayer.addTo(map);
 
 
$.getJSON(hylofunereus, function(data) { hylofunereusLayer.addData(data);});
 
      hylofunereusLayer.addTo(map);
 
 
 
    $.getJSON(hyloagilis, function(data) { hyloagilisLayer.addData(data);});
 
      hyloagilisLayer.addTo(map);
 
       
 
$.getJSON(hyloalbibaris, function(data) { hyloalbibarisLayer.addData(data);});
 
      hyloalbibarisLayer.addTo(map);
 
     
 
$.getJSON(hyloabbotti, function(data) { hyloabbottiLayer.addData(data);});
 
      hyloabbottiLayer.addTo(map);
 
 
 
$.getJSON(hoolocktianxing, function(data) { hoolocktianxingLayer.addData(data);});
 
      hoolocktianxingLayer.addTo(map);
 
 
 
    $.getJSON(hoolockleuconedys, function(data) { hoolockleuconedysLayer.addData(data);});
 
      hoolockleuconedysLayer.addTo(map);
 
 
 
// for Layer Control
 
    var baseMaps = {
 
      "Open Street Map": osm, 
 
      "Open Topo Map": topo, 
 
      };
 
 
    var overlayMaps = {
 
      "Hoolock hoolock": hoolockhoolockLayer,
 
  "Hoolock leuconedys" : hoolockleuconedysLayer,
 
  "Hoolock tianxing" : hoolocktianxingLayer,
 
  "Hylobates abbotti" : hyloabbottiLayer,
 
  "Hylobates albibarbis" : hyloalbibarisLayer,
 
  "Hylobates agilis" : hyloagilisLayer,
 
  "Hylobates funereus" : hylofunereusLayer,
 
  "Hylobates lar" : hylolarLayer,
 
  "Hylobates lar carpenteri" : hylolarcarpLayer,
 
  "Hylobates lar vestitus" : hylolarvestLayer,
 
  "Hylobates moloch" : hylomolochLayer,
 
  "Hylobates muelleri" : hylomuellLayer,
 
  "Hylobates pileatus" : hylopileatusLayer,
 
  "Nomascus annamensis" : nomasannamensisLayer,
 
  "Nomascus concolor" : nomasconcolorLayer,
 
  "Nomascus gabriellae" : nomasgabriellaeLayer,
 
  "Nomascus hainanus" : nomashainanusLayer,
 
  "Nomascus leucogenys" : nomasleucoLayer,
 
  "Nomascus nasutus" : nomasnasutusLayer,
 
  "Nomascus siki" : nomassikiLayer,
 
  "Symphalangus syndactylus" : symphasyndactLayer,
 
  "Hylobates klosii" : hyloklosiiLayer,
 
      };
 
 
//Add layer control
 
      L.control.layers(baseMaps, overlayMaps).addTo(map);
 
 
    </script>
 
  </body>
 
</html>
 

Latest revision as of 14:20, 4 March 2022