Difference between revisions of "African great ape layers"

From A.P.E.S. wiki
Jump to navigation Jump to search
Line 1: Line 1:
−
<html>
 
−
<head>
 
−
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ==" crossorigin=""/>
 
−
    <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js" integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ==" crossorigin=""></script>
 
  
−
<style>
+
[[Spatial Layers]] > [[African great ape layers]]
−
html, body {
 
−
height: 100%;
 
−
margin: 0;
 
−
}
 
−
.leaflet-container {
 
−
height: 400px;
 
−
width: 600px;
 
−
max-width: 100%;
 
−
max-height: 100%;
 
−
}
 
−
</style>
 
  
−
+
<html>
−
</head>
+
  <head>
−
<body>
+
    <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>
−
<div id='map'></div>
+
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
−
 
 
−
<script src="berlin.js" type="text/javascript"></script>
 
−
 
 
−
<script>
 
−
var map = L.map('map').setView([39.74739, -105], 13);
 
−
 
 
−
var tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
 
−
maxZoom: 19,
 
−
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
 
−
}).addTo(map);
 
−
 
 
−
var baseballIcon = L.icon({
 
−
iconUrl: 'baseball-marker.png',
 
−
iconSize: [32, 37],
 
−
iconAnchor: [16, 37],
 
−
popupAnchor: [0, -28]
 
−
});
 
−
 
 
−
function onEachFeature(feature, layer) {
 
−
var popupContent = '<p>I started out as a GeoJSON ' +
 
−
feature.geometry.type + ', but now I\'m a Leaflet vector!</p>';
 
−
 
 
−
if (feature.properties && feature.properties.popupContent) {
 
−
popupContent += feature.properties.popupContent;
 
−
}
 
−
 
 
−
layer.bindPopup(popupContent);
 
−
}
 
−
 
 
−
/* global campus, bicycleRental, freeBus, coorsField */
 
−
var bicycleRentalLayer = L.geoJSON([bicycleRental, campus], {
 
−
 
 
−
style: function (feature) {
 
−
return feature.properties && feature.properties.style;
 
−
},
 
−
 
 
−
onEachFeature: onEachFeature,
 
−
 
 
−
pointToLayer: function (feature, latlng) {
 
−
return L.circleMarker(latlng, {
 
−
radius: 8,
 
−
fillColor: '#ff7800',
 
−
color: '#000',
 
−
weight: 1,
 
−
opacity: 1,
 
−
fillOpacity: 0.8
 
−
});
 
−
}
 
−
}).addTo(map);
 
−
 
 
−
var freeBusLayer = L.geoJSON(freeBus, {
 
−
 
 
−
filter: function (feature, layer) {
 
−
if (feature.properties) {
 
−
// If the property "underConstruction" exists and is true, return false (don't render features under construction)
 
−
return feature.properties.underConstruction !== undefined ? !feature.properties.underConstruction : true;
 
−
}
 
−
return false;
 
−
},
 
  
−
onEachFeature: onEachFeature
+
    <style>
−
}).addTo(map);
+
      #map {
 +
      height: 500px;
 +
      width: 100%;
 +
      max-width: 100%;
 +
      max-height: 100%;
 +
      }
 +
    </style>
 +
  </head>
 +
  <body>
 +
    <div id="map" style="width: 100%; height: 500px;"></div>
  
−
var coorsLayer = L.geoJSON(coorsField, {
+
    <script>
 +
      // GEOJSON FILES
 +
    // var gadendist2021 = 'files/african_great_apes/great_ape_dendist_ION2021.geojson';
 +
var gaabundance = 'files/african_great_apes/afr_great_ape_ab.geojson';
 +
 +
      // Create map
 +
      var map = L.map('map').setView([-0, 6], 4);
  
−
pointToLayer: function (feature, latlng) {
+
      // Create open maps
−
return L.marker(latlng, {icon: baseballIcon});
+
      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);
 +
 
 +
      // 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);}
  
−
onEachFeature: onEachFeature
+
      // Set style function that sets fill color property
−
}).addTo(map);
+
  function stylegaabundance(feature) { return { fillColor: '#5F0CE4', fillOpacity: 0.7,  weight: 2, opacity: 0.7, color: '#5F0CE4', dashArray: '3' }; }
 +
 
 +
      // Null variable that will hold layer // took out onEachFeature: forEachFeature,
 +
      var gaabundanceLayer = L.geoJson(null, {style: stylegaabundance});
 +
 
 +
      $.getJSON(gaabundance); gaabundanceLayer.addTo(map);
  
−
</script>
+
      // for Layer Control
 +
      var baseMaps = {
 +
        "Open Street Map": osm, 
 +
        "Open Topo Map": topo, 
 +
      };
  
 +
      // not showing ga densdist 2021 here because it takes ages to load...
 +
      var overlayMaps = {
 +
"Great ape abundance per site": gaabundanceLayer,
 +
    };                  
 +
                 
  
 +
      //Add layer control
 +
      L.control.layers(baseMaps, overlayMaps).addTo(map);
  
−
</body>
+
    </script>
 +
  </body>
 
</html>
 
</html>

Revision as of 04:28, 15 June 2022

Spatial Layers > African great ape layers

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