Difference between revisions of "Range layers"

From A.P.E.S. wiki
Jump to navigation Jump to search
Line 80: Line 80:
 
|
 
|
 
|}
 
|}
 +
 +
 +
 +
<html>
 +
  <head>
 +
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
 +
    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
 +
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
 +
 +
    <style>
 +
      #map {
 +
      height: 500px;
 +
      width: 100%;
 +
      max-width: 100%;
 +
      max-height: 100%;
 +
      }
 +
  </style>
 +
  </head>
 +
  <body>
 +
    <div id="map" style="width: 100%; height: 500px;"></div>
 +
 +
<script>
 +
 +
// 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';
 +
     
 +
// 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);
 +
 +
// Popup content
 +
    function forEachFeature(feature, layer) {
 +
        var popupContent = "<p><b>Species: </b>"+ feature.properties.BINOMIAL +'</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'
 +
        };
 +
      }
 +
 
 +
 
 +
 
 +
// Null variable that will hold layer
 +
    var hoolockhoolockLayer = L.geoJson(null, {style: stylehoolockhoolock});
 +
 +
      $.getJSON(hoolockhoolock, function(data) { hoolockhoolockLayer.addData(data);});
 +
      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);});
 +
      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 Topo Map": topo, 
 +
      };
 +
 +
    var overlayMaps = {
 +
      "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
 +
      L.control.layers(baseMaps, overlayMaps).addTo(map);
 +
 +
    </script>
 +
  </body>
 +
</html>

Revision as of 14:55, 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=5541"