Difference between revisions of "Range test"

Revision as of 09:13, 7 March 2022

**Download available layers**
Species	Shapefile	GeoJSON	Source
Hoolock hoolock	Hoolock hoolock shapefile (ZIP; 110 kB)]

@@ Line 101: / Line 101: @@
 |
 |}
-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>

Difference between revisions of "Range test"

Revision as of 09:13, 7 March 2022

Navigation menu

Search