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
 
−
      var hoolockhoolock = 'files/gibbon/Hoolock_hoolock.geojson';
 
−
      var hoolockleuconedys = 'files/gibbon/Hoolock_leuconedys.geojson';
 
−
      var hoolocktianxing = 'files/gibbon/Hoolock_tianxing.geojson';
 
−
      var Nomascus_hainanus = 'files/gibbon/Nomascus_hainanus.geojson';
 
  
−
       // Create map
+
    // GEOJSON FILES
−
      var map = L.map('map').setView([10, 110], 4);  
+
    var hoolockhoolock = 'files/gibbon/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';
 +
        
 +
    // Map
 +
    var map = L.map('map').setView([10, 110], 4);
 +
    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);
  
−
      // Create open maps
+
    // 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) { var popupContent = "<p><b>Species: </b>"+ feature.properties.BINOMIAL +'</p>'; layer.bindPopup(popupContent);}
−
      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);
+
     
 +
    // 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' }; }
 
   
 
   
−
      // POPUP
+
    // Null variable that will hold layer
−
      function forEachFeature(feature, layer) { var popupContent = "<p><b>Species: </b>"+ feature.properties.BINOMIAL +'</p>'; layer.bindPopup(popupContent);}
+
    var hoolockhoolockLayer = L.geoJson(null, {onEachFeature: forEachFeature,style: stylehoolockhoolock});
 +
    var hoolockleuconedysLayer = L.geoJson(null, {onEachFeature: forEachFeature,style: stylehoolockleuconedys});  
 +
    var hoolocktianxingLayer = L.geoJson(null, {onEachFeature: forEachFeature,style: stylehoolocktianxing});  
 +
    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});
  
−
      // Set style function that sets fill color property
+
    $.getJSON(hoolockhoolock, function(data) { hoolockhoolockLayer.addData(data);}); hoolockhoolockLayer.addTo(map);
−
      function stylehoolockhoolock(feature) { return { fillColor: '#F31818', fillOpacity: 0.7, weight: 2, opacity: 0.7, color: '#F31818', dashArray: '3' }; }  
+
    $.getJSON(hyloklosii, function(data) { hyloklosiiLayer.addData(data);}); hyloklosiiLayer.addTo(map);
−
      function stylehoolockleuconedys(feature) { return { fillColor: '#AF1818', fillOpacity: 0.7, weight: 2, opacity: 0.7, color: '#AF1818', dashArray: '3' };}
+
    $.getJSON(symphasyndact, function(data) { symphasyndactLayer.addData(data);}); symphasyndactLayer.addTo(map);
−
      function stylehoolocktianxing(feature) { return { fillColor: '#B65757', fillOpacity: 0.7, weight: 2, opacity: 0.7, color: '#B65757', dashArray: '3' }; }
+
    $.getJSON(nomassiki, function(data) { nomassikiLayer.addData(data);}); nomassikiLayer.addTo(map);
−
      function styleNomascus_hainanus(feature) {return { fillColor: 'blue',fillOpacity: 0.7,weight: 2,opacity: 0.7,color: 'blue',dashArray: '3', }; }
+
    $.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);  
  
−
      // Null variable that will hold layer
+
    // for Layer Control
−
      var hoolockhoolockLayer = L.geoJson(null, {onEachFeature: forEachFeature, style: stylehoolockhoolock});
+
    var baseMaps = {
−
       var hoolockleuconedysLayer = L.geoJson(null, {onEachFeature: forEachFeature, style: stylehoolockleuconedys});
+
       "Open Street Map": osm,
−
       var hoolocktianxingLayer = L.geoJson(null, {onEachFeature: forEachFeature,style: stylehoolocktianxing});  
+
       "Open Topo Map": topo,
−
      var Nomascus_hainanusLayer = L.geoJson(null, {onEachFeature: forEachFeature, style: styleNomascus_hainanus});
+
    };
  
−
       $.getJSON(hoolockhoolock, function(data) { hoolockhoolockLayer.addData(data);}); hoolockhoolockLayer.addTo(map);
+
    var overlayMaps = {
−
       $.getJSON(hoolockleuconedys, function(data) { hoolockleuconedysLayer.addData(data);}); hoolockleuconedysLayer.addTo(map);
+
      "Hoolock hoolock": hoolockhoolockLayer,
−
       $.getJSON(hoolocktianxing, function(data) { hoolocktianxingLayer.addData(data);}); hoolocktianxingLayer.addTo(map);
+
       // "Hoolock leuconedys": hoolockleuconedysLayer,
−
       $.getJSON(Nomascus_hainanus, function(data) { Nomascus_hainanusLayer.addData(data);});  Nomascus_hainanusLayer.addTo(map);
+
      // "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,
 +
    };
  
−
      // for Layer Control
+
    //Add layer control
−
      var baseMaps = {
+
    L.control.layers(baseMaps, overlayMaps).addTo(map);
−
        "Open Street Map": osm, 
 
−
        "Open Topo Map": topo, 
 
−
      };
 
−
 
 
−
      var overlayMaps = {
 
−
        "Hoolock hoolock range": hoolockhoolockLayer,
 
−
        "Hoolock leuconedys range": hoolockleuconedysLayer,
 
−
        "Nomascus hainanus range": Nomascus_hainanusLayer,
 
−
      };                  
 
−
 
 
−
      //Add layer control
 
−
      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:37, 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=5626"