Difference between revisions of "African great ape layers"
Jump to navigation
Jump to search
(35 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
+ | |||
[[Spatial Layers]] > [[African great ape layers]] | [[Spatial Layers]] > [[African great ape layers]] | ||
− | |||
− | |||
− | |||
− | |||
− | |||
<html> | <html> | ||
Line 10: | Line 6: | ||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" /> | <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://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> | <style> | ||
Line 24: | Line 21: | ||
<script> | <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'; | ||
+ | var wchimp2019 = '../files/african_great_apes/Heinicke2019_westernchimp.geojson'; | ||
+ | var sec = '../files/african_great_apes/SEC_merged_Af_apes.geojson'; | ||
+ | var occugrauer = '../files/african_great_apes/gorilla_occupancy_plumptre.geojson'; | ||
+ | var occuechimp = '../files/african_great_apes/echimp_occupancy_plumptre.geojson'; | ||
+ | var liberiadens = '../files/african_great_apes/liberia_chimp_density.geojson'; | ||
// Create map | // Create map | ||
Line 32: | Line 37: | ||
var topo=new L.tileLayer('http://{s}.tile.opentopomap.org/{z}/{x}/{y}.png',{attribution: '© <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: '© <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);} | ||
+ | |||
+ | // Set style function that sets fill color property | ||
+ | function stylegadendist2021(feature) { return { fillColor: '#F31818', fillOpacity: 0.7, weight: 2, opacity: 0.7, color: '#F31818', dashArray: '3' }; } | ||
+ | function stylegaabundance(feature) { return { fillColor: '#5F0CE4', fillOpacity: 0.7, weight: 2, opacity: 0.7, color: '#5F0CE4', dashArray: '3' }; } | ||
+ | function stylewchimp2019(feature) { return { fillColor: '#E74F08', fillOpacity: 0.8, weight: 4, opacity: 0.8, color: '#E74F08', dashArray: '3' }; } | ||
+ | function stylesec(feature) { return { fillColor: '#DFE906', fillOpacity: 0.5, weight: 4, opacity: 0.4, color: '#DFE906', dashArray: '3' }; } | ||
+ | function styleoccugrauer(feature) { return { fillColor: '#076419', fillOpacity: 0.8, weight: 2, opacity: 0.8, color: '#076419', dashArray: '3' }; } | ||
+ | function styleoccuechimp(feature) { return { fillColor: '#752309', fillOpacity: 0.8, weight: 2, opacity: 0.8, color: '#752309', dashArray: '3' }; } | ||
+ | function styleliberiadens(feature) { return { fillColor: '#07ACAD', fillOpacity: 0.8, weight: 2, opacity: 0.8, color: '#07ACAD', dashArray: '3' }; } | ||
+ | |||
+ | // Null variable that will hold layer // took out onEachFeature: forEachFeature, | ||
+ | var gaabundanceLayer = L.geoJson(null, {style: stylegaabundance}); | ||
+ | var wchimp2019Layer = L.geoJson(null, {style: stylewchimp2019}); | ||
+ | var secLayer = L.geoJson(null, {style: stylesec}); | ||
+ | var occugrauerLayer = L.geoJson(null, {style: styleoccugrauer}); | ||
+ | var occuechimpLayer = L.geoJson(null, {style: styleoccuechimp}); | ||
+ | var liberiadensLayer = L.geoJson(null, {style: styleliberiadens}); | ||
+ | |||
+ | $.getJSON(gaabundance, function(data) { gaabundanceLayer.addData(data);}); gaabundanceLayer.addTo(map); | ||
+ | $.getJSON(wchimp2019, function(data) { wchimp2019Layer.addData(data);}); wchimp2019Layer.addTo(map); | ||
+ | $.getJSON(sec, function(data) { secLayer.addData(data);}); secLayer.addTo(map); | ||
+ | $.getJSON(occugrauer, function(data) { occugrauerLayer.addData(data);}); occugrauerLayer.addTo(map); | ||
+ | $.getJSON(occuechimp, function(data) { occuechimpLayer.addData(data);}); occuechimpLayer.addTo(map); | ||
+ | $.getJSON(liberiadens, function(data) { liberiadensLayer.addData(data);}); liberiadensLayer.addTo(map); | ||
+ | |||
// for Layer Control | // for Layer Control | ||
var baseMaps = { | var baseMaps = { | ||
Line 38: | Line 70: | ||
}; | }; | ||
− | var | + | // not showing ga densdist 2021 here because it takes ages to load... |
− | L. | + | var overlayMaps = { |
+ | "SEC": secLayer, | ||
+ | "Great ape abundance per site": gaabundanceLayer, | ||
+ | "Western chimpanzee density": wchimp2019Layer, | ||
+ | "Liberia chimpanzee density": liberiadensLayer, | ||
+ | }; | ||
+ | |||
+ | |||
+ | //Add layer control | ||
+ | L.control.layers(baseMaps, overlayMaps).addTo(map); | ||
</script> | </script> | ||
</body> | </body> | ||
</html> | </html> | ||
+ | |||
+ | |||
Latest revision as of 05:34, 15 June 2022
Spatial Layers > African great ape layers