Difference between revisions of "Range layers"

From A.P.E.S. wiki
Jump to navigation Jump to search
Line 161: Line 161:
  
 
       //Add layer control
 
       //Add layer control
−
      L.control.layers(baseMaps, overlayMaps).addTo(map);
 
−
 
−
    </script>
 
−
  </body>
 
−
</html>
 
−
 
−
 
−
 
−
 
−
 
−
<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 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);
 
       L.control.layers(baseMaps, overlayMaps).addTo(map);
  

Revision as of 15:15, 5 March 2022


Download available layers
Species Shapefile GeoJSON Source
Hoolock hoolock Hoolock hoolock shapefile (ZIP; 110 kB)]

Retrieved from "https://wiki.iucnapesportal.org/index.php?title=Range_layers&oldid=5548"