Difference between revisions of "Range layers"

From A.P.E.S. wiki
Jump to navigation Jump to search
Line 1: Line 1:
 +
TEST
 +
 
<html>
 
<html>
 
   <head>
 
   <head>
Line 20: Line 22:
 
       // GEOJSON FILES  
 
       // GEOJSON FILES  
 
       var hoolockhoolock = 'files/Hoolock_hoolock.geojson';  
 
       var hoolockhoolock = 'files/Hoolock_hoolock.geojson';  
−
        
+
       var hoolockleuconedys = 'files/Hoolock_leuconedys.geojson';
 +
 
 
var map = L.map('map').setView([10, 110], 4);  
 
var map = L.map('map').setView([10, 110], 4);  
  
Line 35: Line 38:
 
function stylehoolockhoolock(feature) {
 
function stylehoolockhoolock(feature) {
 
         return {
 
         return {
−
           fillColor: 'purple',  
+
           fillColor: 'red',  
 
           fillOpacity: 0.7,   
 
           fillOpacity: 0.7,   
 
           weight: 2,
 
           weight: 2,
 
           opacity: 0.7,
 
           opacity: 0.7,
−
           color: 'purple',
+
           color: 'red',
 
           dashArray: '3'
 
           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);
 
−
 
−
      // for Layer Control
 
−
      var baseMaps = {
 
−
      "Open Street Map": osm, 
 
−
      "Open Topo Map": topo, 
 
−
      };
 
−
 
−
      var overlayMaps = {
 
−
      "Hoolock hoolock range": hoolockhoolockLayer,
 
−
      };
 
−
 
−
      //Add layer control
 
−
      L.control.layers(baseMaps, overlayMaps).addTo(map);
 
−
 
−
    </script>
 
−
  </body>
 
−
</html>
 
−
 
−
 
−
{|border="1" cellpadding="5" cellspacing="0" <!-- align="right" --> class="gibbon_ranges" !style="background-color:#ccffcc;"
 
−
|+'''Download available layers'''
 
−
!Species
 
−
!Shapefile
 
−
!GeoJSON
 
−
!Source
 
−
|-
 
−
|Hoolock hoolock
 
−
|[https://iucnapesportal.org/wiki/files/Hoolock_hoolock.zip ''Hoolock hoolock shapefile''] (ZIP; 110&nbsp;kB)]
 
−
|
 
−
|
 
−
|}
 
−
 
−
 
−
Test
 
−
 
−
<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 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);
 
−
 
 
   
 
   
−
      function forEachFeature(feature, layer) {
+
    function stylehoolockleuconedys(feature) {
−
        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 {
 
         return {
−
           fillColor: 'purple',  
+
           fillColor: 'AF1818',  
 
           fillOpacity: 0.7,   
 
           fillOpacity: 0.7,   
 
           weight: 2,
 
           weight: 2,
 
           opacity: 0.7,
 
           opacity: 0.7,
−
           color: 'purple',
+
           color: 'AF1818',
 
           dashArray: '3'
 
           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});
  
 
       $.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);
  
 
       // for Layer Control
 
       // for Layer Control
Line 141: Line 75:
 
       var overlayMaps = {
 
       var overlayMaps = {
 
       "Hoolock hoolock range": hoolockhoolockLayer,
 
       "Hoolock hoolock range": hoolockhoolockLayer,
 +
  "Hoolock leuconedys" : hoolockleuconedysLayer,
 
       };
 
       };
 +
 
 +
 
  
 
       //Add layer control
 
       //Add layer control
Line 149: Line 86:
 
   </body>
 
   </body>
 
</html>
 
</html>
−
 
−
 
−
{|border="1" cellpadding="5" cellspacing="0" <!-- align="right" --> class="gibbon_ranges" !style="background-color:#ccffcc;"
 
−
|+'''Download available layers'''
 
−
!Species
 
−
!Shapefile
 
−
!GeoJSON
 
−
!Source
 
−
|-
 
−
|Hoolock hoolock
 
−
|[https://iucnapesportal.org/wiki/files/Hoolock_hoolock.zip ''Hoolock hoolock shapefile''] (ZIP; 110&nbsp;kB)]
 
−
|
 
−
|
 
−
|}
 

Revision as of 02:54, 7 March 2022

TEST

Retrieved from "https://wiki.iucnapesportal.org/index.php?title=Range_layers&oldid=5565"