Difference between revisions of "Range layers"

From A.P.E.S. wiki
Jump to navigation Jump to search
Line 1: Line 1:
 +
 
<html>
 
<html>
 
   <head>
 
   <head>
Line 12: 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/gibbon/Hoolock_hoolock.geojson';
−
      var hoolockhoolock = 'files/Hoolock_hoolock.geojson';  
+
    var hoolockleuconedys = 'files/gibbon/Hoolock_leuconedys.geojson';
 +
    var hoolocktianxing = 'files/gibbon/Hoolock_tianxing.geojson';
 +
    var hyloabbotti = 'files/gibbon/Hylobates_abbotti.geojson';
 +
    var hyloagilis = 'files/gibbon/Hylobates_agilis.geojson';
 +
    var hyloalbibaris = 'files/gibbon/Hylobates_albibarbis.geojson';
 +
    var hylofunereus = 'files/gibbon/Hylobates_funereus.geojson';
 +
    var hylolar = 'files/gibbon/Hylobates_lar.geojson';
 +
    var hylolarcarp = 'files/gibbon/Hylobates_lar_ssp_carpenteri.geojson';
 +
    var hylolarvest = 'files/gibbon/Hylobates_lar_ssp_vestitus.geojson';
 +
    var hylomoloch = 'files/gibbon/Hylobates_moloch.geojson';
 +
    var hylomuell = 'files/gibbon/Hylobates_muelleri.geojson';
 +
    var hylopileatus = 'files/gibbon/Hylobates_pileatus.geojson';
 +
    var nomasannamensis = 'files/gibbon/Nomascus_annamensis.geojson';
 +
    var nomasconcolor = 'files/gibbon/Nomascus_concolor.geojson';
 +
    var nomasgabriellae = 'files/gibbon/Nomascus_gabriellae.geojson';
 +
    var nomashainanus = 'files/gibbon/Nomascus_hainanus.geojson';
 +
    var nomasleuco = 'files/gibbon/Nomascus_leucogenys.geojson';
 +
    var nomasnasutus = 'files/gibbon/Nomascus_nasutus.geojson';
 +
    var nomassiki = 'files/gibbon/Nomascus_siki.geojson';
 +
    var symphasyndact = 'files/gibbon/Symphalangus_syndactylus.geojson';
 +
    var hyloklosii = 'files/gibbon/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 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 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.Subspecies +'</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' }; }
 
   
 
   
−
      function forEachFeature(feature, layer) {
+
    // Null variable that will hold layer
−
        var popupContent = "<p><b>Species: </b>"+ feature.properties.BINOMIAL +'</p>';
+
    var hoolockhoolockLayer = L.geoJson(null, {onEachFeature: forEachFeature,style: stylehoolockhoolock});
−
        layer.bindPopup(popupContent);
+
    var hoolockleuconedysLayer = L.geoJson(null, {onEachFeature: forEachFeature,style: stylehoolockleuconedys});  
−
      }
+
    var hoolocktianxingLayer = L.geoJson(null, {onEachFeature: forEachFeature,style: stylehoolocktianxing});  
−
      // Set style function that sets fill color property
+
    var hyloabbottiLayer = L.geoJson(null, {onEachFeature: forEachFeature,style: stylehyloabbotti});
 +
    var hyloalbibarisLayer = L.geoJson(null, {onEachFeature: forEachFeature,style: stylehyloalbibaris});  
 +
    var hyloagilisLayer = L.geoJson(null, {onEachFeature: forEachFeature,style: stylehyloagilis});  
 +
    var hylofunereusLayer = L.geoJson(null, {onEachFeature: forEachFeature,style: stylehylofunereus});  
 +
    var hylolarLayer = L.geoJson(null, {onEachFeature: forEachFeature,style: stylehylolar});  
 +
    var hylolarcarpLayer = L.geoJson(null, {onEachFeature: forEachFeature,style: stylehylolarcarp});  
 +
    var hylolarvestLayer = L.geoJson(null, {onEachFeature: forEachFeature,style: stylehylolarvest});
 +
    var hylomolochLayer = L.geoJson(null, {onEachFeature: forEachFeature,style: stylehylomoloch});
 +
    var hylomuellLayer = L.geoJson(null, {onEachFeature: forEachFeature,style: stylehylomuell});
 +
    var hylopileatusLayer = L.geoJson(null, {onEachFeature: forEachFeature,style: stylehylopileatus});  
 +
    var nomasannamensisLayer = L.geoJson(null, {onEachFeature: forEachFeature,style: stylenomasannamensis});
 +
    var nomasconcolorLayer = L.geoJson(null, {onEachFeature: forEachFeature,style: stylenomasconcolor});
 +
    var nomasgabriellaeLayer = L.geoJson(null, {onEachFeature: forEachFeature,style: stylenomasgabriellae});
 +
    var nomashainanusLayer = L.geoJson(null, {onEachFeature: forEachFeature,style: stylenomashainanus});
 +
    var nomasleucoLayer = L.geoJson(null, {onEachFeature: forEachFeature,style: stylenomasleuco});
 +
    var nomasnasutusLayer = L.geoJson(null, {onEachFeature: forEachFeature,style: stylenomasnasutus});
 +
    var nomassikiLayer = L.geoJson(null, {onEachFeature: forEachFeature,style: stylenomassiki});
 +
    var symphasyndactLayer = L.geoJson(null, {onEachFeature: forEachFeature,style: stylesymphasyndact});
 +
    var hyloklosiiLayer = L.geoJson(null, {onEachFeature: forEachFeature,style: stylehyloklosii});
  
−
function stylehoolockhoolock(feature) {
+
    $.getJSON(hyloklosii, function(data) { hyloklosiiLayer.addData(data);}); hyloklosiiLayer.addTo(map);
−
        return {
+
    $.getJSON(hoolockhoolock, function(data) { hoolockhoolockLayer.addData(data);}); hoolockhoolockLayer.addTo(map);
−
          fillColor: 'purple',  
+
    $.getJSON(symphasyndact, function(data) { symphasyndactLayer.addData(data);}); symphasyndactLayer.addTo(map);
−
          fillOpacity: 0.7,
+
    $.getJSON(nomassiki, function(data) { nomassikiLayer.addData(data);}); nomassikiLayer.addTo(map);
−
          weight: 2,
+
    $.getJSON(nomasnasutus, function(data) { nomasnasutusLayer.addData(data);}); nomasnasutusLayer.addTo(map);
−
          opacity: 0.7,
+
    $.getJSON(nomasleuco, function(data) { nomasleucoLayer.addData(data);}); nomasleucoLayer.addTo(map);
−
          color: 'purple',
+
    $.getJSON(nomashainanus, function(data) { nomashainanusLayer.addData(data);}); nomashainanusLayer.addTo(map);
−
          dashArray: '3'
+
    $.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);
−
      // Null variable that will hold layer
+
    $.getJSON(hylopileatus, function(data) { hylopileatusLayer.addData(data);}); hylopileatusLayer.addTo(map);
−
      var hoolockhoolockLayer = L.geoJson(null, {onEachFeature: forEachFeature, style: stylehoolockhoolock});
+
    $.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);  
  
−
      $.getJSON(hoolockhoolock, function(data) { hoolockhoolockLayer.addData(data);});
+
    // for Layer Control
−
      hoolockhoolockLayer.addTo(map);
+
    var baseMaps = {
−
 
 
−
      // 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);
  
 
     </script>  
 
     </script>  
 
   </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 10:23, 7 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=5618"