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 13: Line 12:
 
       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';
 +
      var hyloabbotti = 'files/gibbon/Hylobates_abbotti.geojson';
  
−
    // GEOJSON FILES
+
      // Create map
−
    var hoolockhoolock = 'files/gibbon/Hoolock_hoolock.geojson';
+
       var map = L.map('map').setView([10, 110], 4);  
−
    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);
 
  
−
    // Popup content
+
      // Create open maps
−
    function forEachFeature(feature, layer) { var popupContent = "<p><b>Species: </b>"+ feature.properties.BINOMIAL +'</p>'; layer.bindPopup(popupContent);}
+
      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);
−
    // 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
+
      // POPUP
−
    var hoolockhoolockLayer = L.geoJson(null, {onEachFeature: forEachFeature,style: stylehoolockhoolock});
+
      function forEachFeature(feature, layer) { var popupContent = "<p><b>Species: </b>"+ feature.properties.BINOMIAL +'</p>'; layer.bindPopup(popupContent);}
−
    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});
 
  
−
    $.getJSON(hoolockhoolock, function(data) { hoolockhoolockLayer.addData(data);}); hoolockhoolockLayer.addTo(map);  
+
      // Set style function that sets fill color property
−
    $.getJSON(hoolocktianxing, function(data) { hoolocktianxingLayer.addData(data);}); hoolocktianxingLayer.addTo(map);  
+
      function stylehoolockhoolock(feature) { return { fillColor: '#F31818', fillOpacity: 0.7,  weight: 2, opacity: 0.7, color: '#F31818', dashArray: '3' }; }  
−
    $.getJSON(hoolockleuconedys, function(data) { hoolockleuconedysLayer.addData(data);}); hoolockleuconedysLayer.addTo(map);  
+
      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 styleNomascus_hainanus(feature) {return { fillColor: 'blue',fillOpacity: 0.7,weight: 2,opacity: 0.7,color: 'blue',dashArray: '3', }; }
  
−
    // for Layer Control
+
      // Null variable that will hold layer
−
    var baseMaps = {
+
      var hoolockhoolockLayer = L.geoJson(null, {onEachFeature: forEachFeature, style: stylehoolockhoolock});
−
       "Open Street Map": osm,
+
       var hoolockleuconedysLayer = L.geoJson(null, {onEachFeature: forEachFeature, style: stylehoolockleuconedys});
−
       "Open Topo Map": topo,
+
       var hoolocktianxingLayer = L.geoJson(null, {onEachFeature: forEachFeature,style: stylehoolocktianxing});  
−
    };
+
      var hyloabbottiLayer = L.geoJson(null, {onEachFeature: forEachFeature,style: stylehyloabbotti});
 +
      var Nomascus_hainanusLayer = L.geoJson(null, {onEachFeature: forEachFeature, style: styleNomascus_hainanus});
  
−
    var overlayMaps = {
+
      $.getJSON(hoolockhoolock, function(data) { hoolockhoolockLayer.addData(data);}); hoolockhoolockLayer.addTo(map);
−
       "Hoolock hoolock": hoolockhoolockLayer,
+
       $.getJSON(hoolockleuconedys, function(data) { hoolockleuconedysLayer.addData(data);}); hoolockleuconedysLayer.addTo(map);
−
       // "Hoolock leuconedys": hoolockleuconedysLayer,
+
       $.getJSON(hoolocktianxing, function(data) { hoolocktianxingLayer.addData(data);}); hoolocktianxingLayer.addTo(map);
−
       // "Hoolock tianxing": hoolocktianxingLayer,
+
       $.getJSON(hyloabbotti, function(data) { hyloabbottiLayer.addData(data);}); hyloabbottiLayer.addTo(map);
−
      // "Hylobates abbotti": hyloabbottiLayer,
+
       $.getJSON(Nomascus_hainanus, function(data) { Nomascus_hainanusLayer.addData(data);});  Nomascus_hainanusLayer.addTo(map);
−
       // "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
+
      // for Layer Control
−
    L.control.layers(baseMaps, overlayMaps).addTo(map);
+
      var baseMaps = {
 +
        "Open Street Map": osm, 
 +
        "Open Topo Map": topo, 
 +
      };
 +
 
 +
      var overlayMaps = {
 +
        "Hoolock hoolock range": hoolockhoolockLayer,
 +
        "Hoolock leuconedys range": hoolockleuconedysLayer,
 +
        "Hoolock tianxing": hoolocktianxingLayer,
 +
        "Hylobates abbotti": hyloabbottiLayer,
 +
        "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. 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 10:41, 7 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=5628"