Difference between revisions of "Orangutan layers"

Revision as of 11:07, 7 March 2022

**Download available layers. Source: IUCN**
Species	Shapefile	GeoJSON

@@ Line 1: / Line 1: @@
 <html>
    <head>
@@ Line 20: / Line 19: @@
      <script>
        // GEOJSON FILES
-       var url = 'files/REFUGIA_MALEY96.json';  // my GeoJSON data source, in same folder as my html page.
+       var orangutan2 = 'files/orangutans/PHVA_SOA_metapop.geojson';
-      var url2 = 'files/species_15933.geojson';  // my GeoJSON data source, in same folder as my html page.
-       var gibbon1 = 'files/Hoolock_hoolock.geojson';
+       // Create map
-	  var orangutan1 =  'files/orangutans/OU_density_prediction_12.11.2014.geojson';
+       var map = L.map('map').setView([10, 110], 4);
-	  var orangutan2 = 'files/orangutans/PHVA_SOA_metapop.geojson';
-var map = L.map('map').setView([-0, 6], 4);
+      // Create open maps
+      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);
+       // POPUP -> this "feature.properties.xxxx" needs to be matching the file please look it up in the file
+      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 styleorangutan2(feature) { return { fillColor: '#F31818', fillOpacity: 0.7,  weight: 2, opacity: 0.7, color: '#F31818', dashArray: '3' }; }
-      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 styleorangutan1(feature) {
-        return {
-          fillColor: 'red',
-          fillOpacity: 0.7,
-          weight: 2,
-          opacity: 0.7,
-          color: 'red',
-          dashArray: '3'
-        };
-      }
-	  	  function styleorangutan2(feature) {
-        return {
-          fillColor: 'red',
-          fillOpacity: 0.7,
-          weight: 2,
-          opacity: 0.7,
-          color: 'red',
-          dashArray: '3'
-        };
-      }
        // Null variable that will hold layer
-       var stateLayer = L.geoJson(null, {style: style});
+       var orangutan2Layer = L.geoJson(null, {onEachFeature: forEachFeature, style: styleorangutan2});
-      var stateLayer2 = L.geoJson(null, {onEachFeature: forEachFeature, style: style2});
-      var gibbonLayer = L.geoJson(null, {style: stylegibbon});
-	  var orangutan1Layer = L.geoJson(null, {style: styleorangutan1});
-	  var orangutan2Layer = L.geoJson(null, {style: styleorangutan2});
-      $.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(orangutan1, function(data) { orangutan1Layer.addData(data);});
-      orangutan1Layer.addTo(map);
-	   $.getJSON(orangutan2, function(data) { orangutan1Layer.addData(data);});
-      orangutan1Layer.addTo(map);
+      $.getJSON(orangutan2, function(data) { orangutan2Layer.addData(data);}); orangutan2Layer.addTo(map);
        // for Layer Control
        var baseMaps = {
-      "Open Street Map": osm,
+        "Open Street Map": osm,
-      "Open Topo Map": topo,
+        "Open Topo Map": topo,
        };
        var overlayMaps = {
-      "Refugia":stateLayer,
+        "Bornean orangutan 2019": orangutan2Layer,
-      "Ape range":stateLayer2,
+       };
-      "Gibbon range": gibbonLayer,
-	  "Orangutan density" : orangutan1Layer,
-	  "Bornean orangutan 2019" : orangutan2Layer
-       };
        //Add layer control
@@ Line 132: / Line 54: @@
    </body>
 </html>
+{|border="1" cellpadding="5" cellspacing="0" <!-- align="right" --> class="gibbon_ranges" !style="background-color:#ccffcc;"
+|+'''Download available layers. Source: IUCN '''
+!Species
+!Shapefile
+!GeoJSON
+|-

Difference between revisions of "Orangutan layers"

Revision as of 11:07, 7 March 2022

Navigation menu

Search