Difference between revisions of "Range Layers"

From A.P.E.S. wiki
Jump to navigation Jump to search
 
(9 intermediate revisions by the same user not shown)
Line 30: Line 30:
 
       var url = 'files/REFUGIA_MALEY96.json';  // my GeoJSON data source, in same folder as my html page.
 
       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 url2 = 'files/species_15933.geojson';  // my GeoJSON data source, in same folder as my html page.
 
+
      var gibbon1 = 'files/Hoolock_hoolock.geojson';
       var map = L.map('map').setView([-0, 6], 4);  
+
        
 +
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 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);
Line 38: Line 39:
  
 
       function forEachFeature(feature, layer) {
 
       function forEachFeature(feature, layer) {
      var fillColor,
 
            subspecies = feature.properties.subspecies;
 
        if ( subspecies == "ellioti" ) fillColor = "#006837";
 
        else if ( subspecies == "schweinfurthii" ) fillColor = "#31a354";
 
        else if ( subspecies == "troglodytes" ) fillColor = "#78c679";
 
        else if ( subspecies == "verus" ) fillColor = "#c2e699";
 
        else fillColor = "#f7f7f7";  // no data
 
        return { color: "#999", weight: 1, fillColor: fillColor, fillOpacity: .6 };
 
 
 
         var popupContent = "<p><b>Species: </b>"+ feature.properties.binomial +
 
         var popupContent = "<p><b>Species: </b>"+ feature.properties.binomial +
 
               "</br>Subspecies: "+ feature.properties.subspecies +'</p>';
 
               "</br>Subspecies: "+ feature.properties.subspecies +'</p>';
Line 54: Line 46:
 
       function style(feature) {
 
       function style(feature) {
 
         return {
 
         return {
           fillColor: 'green',  
+
           fillColor: '#bf31d8',  
           fillOpacity: 0.5,   
+
           fillOpacity: 0.7,   
 
           weight: 2,
 
           weight: 2,
           opacity: 1,
+
           opacity: 0.7,
           color: '#ffffff',
+
           color: '#bf31d8',
 
           dashArray: '3'
 
           dashArray: '3'
 
         };
 
         };
 
       }
 
       }
 
       function style2(feature) {
 
       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 {
 
         return {
           fillColor: 'blue',  
+
           fillColor: 'red',  
           fillOpacity: 0.5,   
+
           fillOpacity: 0.7,   
 
           weight: 2,
 
           weight: 2,
           opacity: 1,
+
           opacity: 0.7,
           color: '#ffffff',
+
           color: 'red',
 
           dashArray: '3'
 
           dashArray: '3'
 
         };
 
         };
 
       }
 
       }
 
 
       // Null variable that will hold layer
 
       // Null variable that will hold layer
 
       var stateLayer = L.geoJson(null, {style: style});
 
       var stateLayer = L.geoJson(null, {style: style});
 
       var stateLayer2 = L.geoJson(null, {onEachFeature: forEachFeature, style: style2});
 
       var stateLayer2 = L.geoJson(null, {onEachFeature: forEachFeature, style: style2});
 +
      var gibbonLayer = L.geoJson(null, {style: stylegibbon});
  
 
       $.getJSON(url, function(data) { stateLayer.addData(data);});
 
       $.getJSON(url, function(data) { stateLayer.addData(data);});
Line 82: Line 82:
 
       $.getJSON(url2, function(data) { stateLayer2.addData(data); });
 
       $.getJSON(url2, function(data) { stateLayer2.addData(data); });
 
       stateLayer2.addTo(map);
 
       stateLayer2.addTo(map);
 +
 +
      $.getJSON(gibbon1, function(data) { gibbonLayer.addData(data);});
 +
      gibbonLayer.addTo(map);
  
 
       // for Layer Control
 
       // for Layer Control
Line 92: Line 95:
 
       "Refugia":stateLayer,
 
       "Refugia":stateLayer,
 
       "Ape range":stateLayer2,
 
       "Ape range":stateLayer2,
 +
      "Gibbon range": gibbonLayer,
 
       };
 
       };
  

Latest revision as of 08:06, 1 March 2022

Avaiable Layers:[edit]

Ape range Download: Geographic shapefile (ZIP; 171 kB)]

Refugia after Maley 1996 Download: Geographic shapefile (ZIP; 85 kB)]