Difference between revisions of "Range test"
Jump to navigation
Jump to search
Line 97: | Line 97: | ||
| | | | ||
|} | |} | ||
+ | |||
+ | |||
+ | |||
+ | another 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 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 map = L.map('map').setView([-0, 6], 4); | ||
+ | |||
+ | 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 osm=new L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',{attribution: '© <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' | ||
+ | }; | ||
+ | } | ||
+ | // 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}); | ||
+ | |||
+ | $.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); | ||
+ | |||
+ | // for Layer Control | ||
+ | var baseMaps = { | ||
+ | "Open Street Map": osm, | ||
+ | "Open Topo Map": topo, | ||
+ | }; | ||
+ | |||
+ | var overlayMaps = { | ||
+ | "Refugia":stateLayer, | ||
+ | "Ape range":stateLayer2, | ||
+ | "Gibbon range": gibbonLayer, | ||
+ | }; | ||
+ | |||
+ | //Add layer control | ||
+ | L.control.layers(baseMaps, overlayMaps).addTo(map); | ||
+ | |||
+ | </script> | ||
+ | </body> | ||
+ | </html> |
Revision as of 05:41, 6 March 2022
Species | Shapefile | GeoJSON | Source |
---|---|---|---|
Hoolock hoolock | Hoolock hoolock shapefile (ZIP; 110 kB)] |
another test