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  
+
−
      var hoolockhoolock = 'files/Hoolock_hoolock.geojson';  
+
// GEOJSON FILES  
 +
    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';
 
        
 
        
−
var map = L.map('map').setView([10, 110], 4);  
+
// 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);
  
−
      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);
+
// Popup content
−
      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) {
−
 
 
−
 
 
−
      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: 'red',  
+
           fillColor: '6740C6',  
 
           fillOpacity: 0.7,   
 
           fillOpacity: 0.7,   
 
           weight: 2,
 
           weight: 2,
 
           opacity: 0.7,
 
           opacity: 0.7,
−
           color: 'red',
+
           color: '6740C6',
 
           dashArray: '3'
 
           dashArray: '3'
 
         };
 
         };
 
       }
 
       }
−
       // Null variable that will hold layer
+
function styleshyloklosii(feature) {
−
      var hoolockhoolockLayer = L.geoJson(null, {onEachFeature: forEachFeature, style: stylehoolockhoolock});
+
        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});
  
 
       $.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});
  
−
       // for Layer Control
+
       $.getJSON(hyloalbibaris, function(data) { hyloalbibarisLayer.addData(data);});
−
      var baseMaps = {
+
      hyloalbibarisLayer.addTo(map);
 +
 
 +
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 range": hoolockhoolockLayer,
+
       "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
+
//Add layer control
 
       L.control.layers(baseMaps, overlayMaps).addTo(map);
 
       L.control.layers(baseMaps, overlayMaps).addTo(map);
  
Line 66: Line 428:
 
   </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'''
+
|+'''Download available layers. Source: IUCN '''
 
!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:45, 4 March 2022

Download available layers. Source: IUCN
Species Shapefile GeoJSON
Hoolock hoolock Hoolock hoolock shapefile (ZIP; 110 kB)] 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
Retrieved from "https://wiki.iucnapesportal.org/index.php?title=Range_layers&oldid=5539"