Difference between revisions of "Range test"
Jump to navigation
Jump to search
(Created page with "<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"></scrip...") |
|||
| (33 intermediate revisions by the same user not shown) | |||
| Line 19: | Line 19: | ||
<script> | <script> | ||
// GEOJSON FILES | // GEOJSON FILES | ||
| − | var hoolockhoolock = 'files/Hoolock_hoolock.geojson'; | + | var hoolockhoolock = 'files/gibbon/Hoolock_hoolock.geojson'; |
| − | + | var hoolockleuconedys = 'files/gibbon/Hoolock_leuconedys.geojson'; | |
| − | var | + | var Nomascus_hainanus = 'files/gibbon/Nomascus_hainanus.geojson'; |
| + | // Create map | ||
| + | var map = L.map('map').setView([10, 110], 4); | ||
| + | |||
| + | // Create open maps | ||
| + | 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); | ||
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 | ||
| + | function forEachFeature(feature, layer) { var popupContent = "<p><b>Species: </b>"+ feature.properties.BINOMIAL +'</p>'; layer.bindPopup(popupContent);} | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
// Set style function that sets fill color property | // Set style function that sets fill color property | ||
| + | function stylehoolockhoolock(feature) {return { fillColor: 'purple',fillOpacity: 0.7,weight: 2,opacity: 0.7,color: 'purple',dashArray: '3', }; } | ||
| + | function stylehoolockleuconedys(feature) {return { fillColor: 'red',fillOpacity: 0.7,weight: 2,opacity: 0.7,color: 'red',dashArray: '3', }; } | ||
| + | function styleNomascus_hainanus(feature) {return { fillColor: 'blue',fillOpacity: 0.7,weight: 2,opacity: 0.7,color: 'blue',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}); | ||
| + | var Nomascus_hainanusLayer = L.geoJson(null, {onEachFeature: forEachFeature, style: styleNomascus_hainanus}); | ||
| − | $.getJSON(hoolockhoolock, function(data) { hoolockhoolockLayer.addData(data);}); | + | $.getJSON(hoolockhoolock, function(data) { hoolockhoolockLayer.addData(data);}); hoolockhoolockLayer.addTo(map); |
| − | + | $.getJSON(hoolockleuconedys, function(data) { hoolockleuconedysLayer.addData(data);}); hoolockleuconedysLayer.addTo(map); | |
| + | $.getJSON(Nomascus_hainanus, function(data) { Nomascus_hainanusLayer.addData(data);}); Nomascus_hainanusLayer.addTo(map); | ||
// for Layer Control | // for Layer Control | ||
var baseMaps = { | var baseMaps = { | ||
| − | + | "Open Street Map": osm, | |
| − | + | "Open Topo Map": topo, | |
}; | }; | ||
var overlayMaps = { | var overlayMaps = { | ||
| − | + | "Hoolock hoolock range": hoolockhoolockLayer, | |
| − | }; | + | "Hoolock leuconedys range": hoolockleuconedysLayer, |
| + | "Nomascus hainanus range": Nomascus_hainanusLayer, | ||
| + | }; | ||
//Add layer control | //Add layer control | ||
Latest revision as of 09:07, 7 March 2022
| Species | Shapefile | GeoJSON | Source |
|---|---|---|---|
| Hoolock hoolock | Hoolock hoolock shapefile (ZIP; 110 kB)] |