Difference between revisions of "Range layers"

From A.P.E.S. wiki
Jump to navigation Jump to search
Line 13: Line 13:
 
       max-height: 100%;
 
       max-height: 100%;
 
       }
 
       }
−
  </style>
+
    </style>
 
   </head>
 
   </head>
 
   <body>
 
   <body>
 
     <div id="map" style="width: 100%; height: 500px;"></div>
 
     <div id="map" style="width: 100%; height: 500px;"></div>
  
−
<script>
+
    <script>
−
+
      // GEOJSON FILES  
−
// GEOJSON FILES  
+
      var hoolockhoolock = 'files/Hoolock_hoolock.geojson';  
−
    var hoolockhoolock = 'files/Hoolock_hoolock.geojson';
 
−
var hoolockleuconedys = 'Hoolock_leuconedys.geojson';
 
−
var hoolocktianxing = 'Hoolock_tianxing.geojson';
 
−
var hyloabbotti = 'Hylobates_abbotti.geojson';
 
−
var hyloagilis = 'Hylobates_agilis.geojson';
 
−
var hyloalbibaris = 'Hylobates_albibarbis.geojson';
 
−
var hylofunereus = 'Hylobates_funereus.geojson';
 
−
var hylolar = 'Hylobates_lar.geojson';
 
−
var hylolarcarp = 'Hylobates_lar_ssp_carpenteri.geojson';
 
−
var hylolarvest = 'Hylobates_lar_ssp_vestitus.geojson';
 
−
var hylomoloch = 'Hylobates_moloch.geojson';
 
−
var hylomuell = 'Hylobates_muelleri.geojson';
 
−
var hylopileatus = 'Hylobates_pileatus.geojson';
 
−
var nomasannamensis = 'Nomascus_annamensis.geojson';
 
−
var nomasconcolor = 'Nomascus_concolor.geojson';
 
−
var nomasgabriellae = 'Nomascus_gabriellae.geojson';
 
−
var nomashainanus = 'Nomascus_hainanus.geojson';
 
−
var nomasleuco = 'Nomascus_leucogenys.geojson';
 
−
var nomasnasutus = 'Nomascus_nasutus.geojson';
 
−
var nomassiki = 'Nomascus_siki.geojson';
 
−
var symphasyndact = 'Symphalangus_syndactylus.geojson';
 
−
    var hyloklosii = 'Hylobates_klossii.geojson';
 
 
        
 
        
−
// Map
+
var map = L.map('map').setView([10, 110], 4);  
−
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
+
      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);
−
    function forEachFeature(feature, layer) {
+
      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);
 +
 
 +
 
 +
      function forEachFeature(feature, layer) {
 
         var popupContent = "<p><b>Species: </b>"+ feature.properties.BINOMIAL +'</p>';
 
         var popupContent = "<p><b>Species: </b>"+ feature.properties.BINOMIAL +'</p>';
 
         layer.bindPopup(popupContent);
 
         layer.bindPopup(popupContent);
 
       }
 
       }
−
        
+
       // Set style function that sets fill color property
−
// Set style function that sets fill color property
 
  
−
  function stylehoolockhoolock(feature) {
+
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 {
 
         return {
−
           fillColor: '6740C6',  
+
           fillColor: 'red',  
 
           fillOpacity: 0.7,   
 
           fillOpacity: 0.7,   
 
           weight: 2,
 
           weight: 2,
 
           opacity: 0.7,
 
           opacity: 0.7,
−
           color: '6740C6',
+
           color: 'red',
 
           dashArray: '3'
 
           dashArray: '3'
 
         };
 
         };
 
       }
 
       }
−
function styleshyloklosii(feature) {
+
       // Null variable that will hold layer
−
        return {
+
      var hoolockhoolockLayer = L.geoJson(null, {onEachFeature: forEachFeature, style: stylehoolockhoolock});
−
          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});
 
  
 
       $.getJSON(hoolockhoolock, function(data) { hoolockhoolockLayer.addData(data);});
 
       $.getJSON(hoolockhoolock, function(data) { hoolockhoolockLayer.addData(data);});
 
       hoolockhoolockLayer.addTo(map);
 
       hoolockhoolockLayer.addTo(map);
−
 
 
−
var hoolockleuconedysLayer = L.geoJson(null, {style: stylehoolockleuconedys});
 
−
 
−
      $.getJSON(hoolockleuconedys, function(data) { hoolockleuconedysLayer.addData(data);});
 
−
      hoolockleuconedysLayer.addTo(map);
 
−
 
 
−
var hoolocktianxingLayer = L.geoJson(null, {style: stylehoolocktianxing});
 
−
 
−
      $.getJSON(hoolocktianxing, function(data) { hoolocktianxingLayer.addData(data);});
 
−
      hoolocktianxingLayer.addTo(map);
 
−
 
 
−
var hyloabbottiLayer = L.geoJson(null, {style: stylehyloabbotti});
 
−
 
−
      $.getJSON(hyloabbotti, function(data) { hyloabbottiLayer.addData(data);});
 
−
      hyloabbottiLayer.addTo(map);
 
−
 
 
−
var hyloalbibarisLayer = L.geoJson(null, {style: stylehyloalbibaris});
 
  
−
       $.getJSON(hyloalbibaris, function(data) { hyloalbibarisLayer.addData(data);});
+
       // for Layer Control
−
      hyloalbibarisLayer.addTo(map);
+
      var baseMaps = {
−
 
 
−
var hyloagilisLayer = L.geoJson(null, {style: stylehyloagilis});
 
−
 
 
−
      $.getJSON(hyloagilis, function(data) { hyloagilisLayer.addData(data);});
 
−
      hyloagilisLayer.addTo(map);
 
−
 
 
−
var hylofunereusLayer = L.geoJson(null, {style: stylehylofunereus});
 
−
 
 
−
      $.getJSON(hylofunereus, function(data) { hylofunereusLayer.addData(data);});
 
−
      hylofunereusLayer.addTo(map);
 
−
 
 
−
var hylolarLayer = L.geoJson(null, {style: stylehylolar});
 
−
 
 
−
      $.getJSON(hylolar, function(data) { hylolarLayer.addData(data);});
 
−
      hylolarLayer.addTo(map);
 
−
 
 
−
var hylolarcarpLayer = L.geoJson(null, {style: stylehylolarcarp});
 
−
 
 
−
      $.getJSON(hylolarcarp, function(data) { hylolarcarpLayer.addData(data);});
 
−
      hylolarcarpLayer.addTo(map);
 
−
 
 
−
var hylolarvestLayer = L.geoJson(null, {style: stylehylolarvest});
 
−
 
 
−
      $.getJSON(hylolarvest, function(data) { hylolarvestLayer.addData(data);});
 
−
      hylolarvestLayer.addTo(map);
 
−
 
 
−
var hylomolochLayer = L.geoJson(null, {style: stylehylomoloch});
 
−
 
 
−
      $.getJSON(hylomoloch, function(data) { hylomolochLayer.addData(data);});
 
−
      hylomolochLayer.addTo(map);
 
−
 
 
−
var hylomuellLayer = L.geoJson(null, {style: stylehylomuell});
 
−
 
 
−
      $.getJSON(hylomuell, function(data) { hylomuellLayer.addData(data);});
 
−
      hylomuellLayer.addTo(map);
 
−
 
 
−
var hylopileatusLayer = L.geoJson(null, {style: stylehylopileatus});
 
−
 
 
−
      $.getJSON(hylopileatus, function(data) { hylopileatusLayer.addData(data);});
 
−
      hylopileatusLayer.addTo(map);
 
−
 
 
−
var nomasannamensisLayer = L.geoJson(null, {style: stylenomasannamensis});
 
−
 
 
−
      $.getJSON(nomasannamensis, function(data) { nomasannamensisLayer.addData(data);});
 
−
      nomasannamensisLayer.addTo(map);
 
−
 
−
var nomasconcolorLayer = L.geoJson(null, {style: stylenomasconcolor});
 
−
 
 
−
      $.getJSON(nomasconcolor, function(data) { nomasconcolorLayer.addData(data);});
 
−
      nomasconcolorLayer.addTo(map);
 
−
 
−
var nomasgabriellaeLayer = L.geoJson(null, {style: stylenomasgabriellae});
 
−
 
 
−
      $.getJSON(nomasgabriellae, function(data) { nomasgabriellaeLayer.addData(data);});
 
−
      nomasgabriellaeLayer.addTo(map);
 
−
 
−
var nomashainanusLayer = L.geoJson(null, {style: stylenomashainanus});
 
−
 
 
−
      $.getJSON(nomashainanus, function(data) { nomashainanusLayer.addData(data);});
 
−
      nomashainanusLayer.addTo(map);
 
−
 
−
var nomasleucoLayer = L.geoJson(null, {style: stylenomasleuco});
 
−
 
 
−
      $.getJSON(nomasleuco, function(data) { nomasleucoLayer.addData(data);});
 
−
      nomasleucoLayer.addTo(map);
 
−
 
−
var nomasnasutusLayer = L.geoJson(null, {style: stylenomasnasutus});
 
−
 
 
−
      $.getJSON(nomasnasutus, function(data) { nomasnasutusLayer.addData(data);});
 
−
      nomasnasutusLayer.addTo(map);
 
−
 
−
var nomassikiLayer = L.geoJson(null, {style: stylenomassiki});
 
−
 
 
−
      $.getJSON(nomassiki, function(data) { nomassikiLayer.addData(data);});
 
−
      nomassikiLayer.addTo(map);
 
−
 
−
var symphasyndactLayer = L.geoJson(null, {style: stylesymphasyndact});
 
−
 
 
−
      $.getJSON(symphasyndact, function(data) { symphasyndactLayer.addData(data);});
 
−
      symphasyndactLayer.addTo(map);
 
−
 
 
−
var hyloklosiiLayer = L.geoJson(null, {style: stylehyloklosii});
 
−
 
 
−
      $.getJSON(hyloklosii, function(data) { hyloklosiiLayer.addData(data);});
 
−
      hyloklosiiLayer.addTo(map);
 
−
 
 
−
// for Layer Control
 
−
    var baseMaps = {
 
 
       "Open Street Map": osm, 
 
       "Open Street Map": osm, 
 
       "Open Topo Map": topo, 
 
       "Open Topo Map": topo, 
 
       };
 
       };
  
−
    var overlayMaps = {
+
      var overlayMaps = {
−
       "Hoolock hoolock": hoolockhoolockLayer,
+
       "Hoolock hoolock range": 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
+
      //Add layer control
 
       L.control.layers(baseMaps, overlayMaps).addTo(map);
 
       L.control.layers(baseMaps, overlayMaps).addTo(map);
  
Line 428: Line 66:
 
   </body>
 
   </body>
 
</html>
 
</html>
 +
  
 
{|border="1" cellpadding="5" cellspacing="0" <!-- align="right" --> class="gibbon_ranges" !style="background-color:#ccffcc;"  
 
{|border="1" cellpadding="5" cellspacing="0" <!-- align="right" --> class="gibbon_ranges" !style="background-color:#ccffcc;"  
−
|+'''Download available layers. Source: IUCN '''
+
|+'''Download available layers'''
 
!Species
 
!Species
 
!Shapefile
 
!Shapefile
 
!GeoJSON
 
!GeoJSON
 +
!Source
 
|-
 
|-
 
|Hoolock hoolock
 
|Hoolock hoolock
 
|[https://iucnapesportal.org/wiki/files/Hoolock_hoolock.zip ''Hoolock hoolock shapefile''] (ZIP; 110&nbsp;kB)]
 
|[https://iucnapesportal.org/wiki/files/Hoolock_hoolock.zip ''Hoolock hoolock shapefile''] (ZIP; 110&nbsp;kB)]
−
|[https://iucnapesportal.org/wiki/files/Hoolock_hoolock.geojson''Hoolock hoolock geojson'']
 
−
|-
 
−
|Hoolock leuconedys
 
−
|
 
−
|
 
−
|-
 
−
|Hoolock tianxing
 
−
|
 
−
|
 
−
|-
 
−
|Hoolock tianxing
 
−
|
 
−
|
 
−
|-
 
−
|Hylobates abbotti
 
−
|
 
−
|
 
−
|-
 
−
|Hylobates albibarbis
 
−
|
 
−
|
 
−
|-
 
−
|Hylobates agilis
 
−
|
 
−
|
 
−
|-
 
−
|Hylobates funereus
 
−
|
 
−
|
 
−
|-
 
−
|Hylobates lar
 
−
|
 
−
|
 
−
|-
 
−
|Hylobates lar carpenteri
 
−
|
 
−
|
 
−
|-
 
−
|Hylobates lar vestitus
 
−
|
 
−
|
 
−
|-
 
−
|Hylobates moloch
 
−
|
 
−
|
 
−
|-
 
−
|Hylobates muelleri
 
 
|
 
|
 
|
 
|
−
|-
 
−
|Hylobates pileatus
 
−
|
 
−
|
 
−
|-
 
−
|Hylobates klosii
 
−
|
 
−
|
 
−
|-
 
−
|Nomascus annamensis
 
−
|
 
−
|
 
−
|-
 
−
|Nomascus concolor
 
−
|
 
−
|
 
−
|-
 
−
|Nomascus gabriellae
 
−
|
 
−
|
 
−
|-
 
−
|Nomascus hainanus
 
−
|
 
−
|
 
−
|-
 
−
|Nomascus leucogenys
 
−
|
 
−
|
 
−
|-
 
−
|Nomascus nasutus
 
−
|
 
−
|
 
−
|-
 
−
|Nomascus siki
 
−
|
 
−
|
 
−
|-
 
−
|Symphalangus syndactylus
 
−
|
 
−
|
 
−
|-
 
 
|}
 
|}

Revision as of 14:48, 4 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=5540"