Difference between revisions of "Range test"

From A.P.E.S. wiki
Jump to navigation Jump to search
 
(28 intermediate revisions by the same user not shown)
Line 19: Line 19:
 
     <script>
 
     <script>
 
       // GEOJSON FILES  
 
       // GEOJSON FILES  
−
       var hoolockhoolock = 'files/Hoolock_hoolock.geojson';  
+
       var hoolockhoolock = 'files/gibbon/Hoolock_hoolock.geojson';  
−
       var hoolockleuconedys = 'files/Hoolock_leuconedys.geojson';
+
       var hoolockleuconedys = 'files/gibbon/Hoolock_leuconedys.geojson';
−
        
+
       var Nomascus_hainanus = 'files/gibbon/Nomascus_hainanus.geojson';
 +
 
 +
      // Create map
 
       var map = L.map('map').setView([10, 110], 4);  
 
       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  
+
      // Create open maps
−
          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);
−
       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) {
+
      // POPUP
−
        var popupContent = "<p><b>Species: </b>"+ feature.properties.BINOMIAL +'</p>';
+
       function forEachFeature(feature, layer) { 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) {return { fillColor: 'purple',fillOpacity: 0.7,weight: 2,opacity: 0.7,color: 'purple',dashArray: '3', }; }
−
function stylehoolockhoolock(feature) {
+
       function stylehoolockleuconedys(feature) {return { fillColor: 'red',fillOpacity: 0.7,weight: 2,opacity: 0.7,color: 'red',dashArray: '3', }; }
−
        return {
+
       function styleNomascus_hainanus(feature) {return { fillColor: 'blue',fillOpacity: 0.7,weight: 2,opacity: 0.7,color: 'blue',dashArray: '3', }; }
−
          fillColor: 'purple',  
 
−
          fillOpacity: 0.7,
 
−
          weight: 2,
 
−
          opacity: 0.7,
 
−
          color: 'purple',
 
−
          dashArray: '3'
 
−
        };
 
−
       }
 
−
 
 
−
function stylehoolockleuconedys(feature) {
 
−
        return {
 
−
          fillColor: 'purple',  
 
−
          fillOpacity: 0.7,
 
−
          weight: 2,
 
−
          opacity: 0.7,
 
−
          color: 'purple',
 
−
          dashArray: '3'
 
−
        };
 
−
       }
 
  
 
       // Null variable that will hold layer
 
       // Null variable that will hold layer
 
       var hoolockhoolockLayer = L.geoJson(null, {onEachFeature: forEachFeature, style: stylehoolockhoolock});
 
       var hoolockhoolockLayer = L.geoJson(null, {onEachFeature: forEachFeature, style: stylehoolockhoolock});
 
       var hoolockleuconedysLayer = L.geoJson(null, {onEachFeature: forEachFeature, style: stylehoolockleuconedys});
 
       var hoolockleuconedysLayer = L.geoJson(null, {onEachFeature: forEachFeature, style: stylehoolockleuconedys});
 +
      var Nomascus_hainanusLayer = L.geoJson(null, {onEachFeature: forEachFeature, style: styleNomascus_hainanus});
  
−
       $.getJSON(hoolockhoolock, function(data) { hoolockhoolockLayer.addData(data);});
+
       $.getJSON(hoolockhoolock, function(data) { hoolockhoolockLayer.addData(data);}); hoolockhoolockLayer.addTo(map);
−
      hoolockhoolockLayer.addTo(map);
+
       $.getJSON(hoolockleuconedys, function(data) { hoolockleuconedysLayer.addData(data);}); hoolockleuconedysLayer.addTo(map);
−
 
+
       $.getJSON(Nomascus_hainanus, function(data) { Nomascus_hainanusLayer.addData(data);});  Nomascus_hainanusLayer.addTo(map);
−
       $.getJSON(hoolockleuconedys, function(data) { hoolockleuconedysLayer.addData(data);});
 
−
       hoolockleuconedysLayer.addTo(map);
 
  
 
       // for Layer Control
 
       // for Layer Control
 
       var baseMaps = {
 
       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 range": hoolockhoolockLayer,
−
      "Hoolock leuconedys range" : holoockleuconedysLayer
+
        "Hoolock leuconedys range": hoolockleuconedysLayer,
−
       };
+
        "Nomascus hainanus range": Nomascus_hainanusLayer,
 +
       };                  
  
 
       //Add layer control
 
       //Add layer control
Line 101: Line 79:
 
|
 
|
 
|}
 
|}
−
 
−
 
−
 
−
Test 2
 
−
 
−
 
−
 
−
<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 url = 'files/REFUGIA_MALEY96.json';  // my GeoJSON data source, in same folder as my html page.
 
−
      var url2 = 'files/species_15933.geojson';  // my GeoJSON data source, in same folder as my html page.
 
−
      var gibbon1 = 'files/Hoolock_hoolock.geojson';
 
−
      var hoolockleuconedys = 'files/Hoolock_leuconedys.geojson';
 
−
     
 
−
var map = L.map('map').setView([-0, 6], 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);
 
−
 
−
 
−
      function forEachFeature(feature, layer) {
 
−
        var popupContent = "<p><b>Species: </b>"+ feature.properties.binomial +
 
−
              "</br>Subspecies: "+ feature.properties.subspecies +'</p>';
 
−
        layer.bindPopup(popupContent);
 
−
      }
 
−
      // Set style function that sets fill color property
 
−
      function style(feature) {
 
−
        return {
 
−
          fillColor: '#bf31d8',
 
−
          fillOpacity: 0.7, 
 
−
          weight: 2,
 
−
          opacity: 0.7,
 
−
          color: '#bf31d8',
 
−
          dashArray: '3'
 
−
        };
 
−
      }
 
−
      function style2(feature) {
 
−
        switch (feature.properties.subspecies) {
 
−
            case 'ellioti': return {color: "#1897a3",weight: 2,fillColor: '#1897a3', fillOpacity: 0.7};
 
−
            case 'schweinfurthii':  return {color: "#354a4c",weight: 2,fillColor: '#354a4c', fillOpacity: 0.7};
 
−
            case 'verus':  return {color: "#0f4375",weight: 2,fillColor: '#0f4375', fillOpacity: 0.7};
 
−
            case 'troglodytes':  return {color: "#3188d8",weight: 2,fillColor: '#3188d8', fillOpacity: 0.7};
 
−
        }
 
−
      }
 
−
function stylegibbon(feature) {
 
−
        return {
 
−
          fillColor: 'red',
 
−
          fillOpacity: 0.7, 
 
−
          weight: 2,
 
−
          opacity: 0.7,
 
−
          color: 'red',
 
−
          dashArray: '3'
 
−
        };
 
−
      }
 
−
 
−
function stylehoolockleuconedys(feature) {
 
−
        return {
 
−
          fillColor: 'orange',
 
−
          fillOpacity: 0.7, 
 
−
          weight: 2,
 
−
          opacity: 0.7,
 
−
          color: 'orange',
 
−
          dashArray: '3'
 
−
        };
 
−
      }
 
−
 
−
 
−
      // Null variable that will hold layer
 
−
      var stateLayer = L.geoJson(null, {style: style});
 
−
      var stateLayer2 = L.geoJson(null, {onEachFeature: forEachFeature, style: style2});
 
−
      var gibbonLayer = L.geoJson(null, {style: stylegibbon});
 
−
      var hoolockleuconedysLayer = L.geoJson(null, {style: stylehoolockleuconedys});
 
−
 
−
      $.getJSON(url, function(data) { stateLayer.addData(data);});
 
−
      stateLayer.addTo(map);
 
−
 
−
      $.getJSON(url2, function(data) { stateLayer2.addData(data); });
 
−
      stateLayer2.addTo(map);
 
−
 
−
      $.getJSON(gibbon1, function(data) { gibbonLayer.addData(data);});
 
−
      gibbonLayer.addTo(map);
 
−
 
−
      $.getJSON(hoolockleuconedys, function(data) { hoolockleuconedysLayer.addData(data);});
 
−
      hoolockleuconedysLayer.addTo(map);
 
−
 
−
      // for Layer Control
 
−
      var baseMaps = {
 
−
      "Open Street Map": osm, 
 
−
      "Open Topo Map": topo, 
 
−
      };
 
−
 
−
      var overlayMaps = {
 
−
      "Refugia":stateLayer,
 
−
      "Ape range":stateLayer2,
 
−
      "Gibbon range": gibbonLayer,
 
−
      "Hoolock leuconedys range" : hoolockleuconedysLayer,
 
−
      };
 
−
 
−
      //Add layer control
 
−
      L.control.layers(baseMaps, overlayMaps).addTo(map);
 
−
 
−
    </script>
 
−
  </body>
 
−
</html>
 

Latest revision as of 09:07, 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_test&oldid=5617"