Difference between revisions of "Range layers"
Jump to navigation
Jump to search
| Line 1: | Line 1: | ||
| + | <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 hoolockhoolock = 'files/Hoolock_hoolock.geojson'; | ||
| + | |||
| + | var map = L.map('map').setView([10, 110], 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 +'</p>'; | ||
| + | layer.bindPopup(popupContent); | ||
| + | } | ||
| + | // 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' | ||
| + | }; | ||
| + | } | ||
| + | // Null variable that will hold layer | ||
| + | var hoolockhoolockLayer = L.geoJson(null, {onEachFeature: forEachFeature, style: stylehoolockhoolock}); | ||
| + | |||
| + | $.getJSON(hoolockhoolock, function(data) { hoolockhoolockLayer.addData(data);}); | ||
| + | hoolockhoolockLayer.addTo(map); | ||
| + | |||
| + | // for Layer Control | ||
| + | var baseMaps = { | ||
| + | "Open Street Map": osm, | ||
| + | "Open Topo Map": topo, | ||
| + | }; | ||
| + | |||
| + | var overlayMaps = { | ||
| + | "Hoolock hoolock range": hoolockhoolockLayer, | ||
| + | }; | ||
| + | |||
| + | //Add layer control | ||
| + | L.control.layers(baseMaps, overlayMaps).addTo(map); | ||
| + | |||
| + | </script> | ||
| + | </body> | ||
| + | </html> | ||
| + | |||
| + | |||
| + | {|border="1" cellpadding="5" cellspacing="0" <!-- align="right" --> class="gibbon_ranges" !style="background-color:#ccffcc;" | ||
| + | |+'''Download available layers''' | ||
| + | !Species | ||
| + | !Shapefile | ||
| + | !GeoJSON | ||
| + | !Source | ||
| + | |- | ||
| + | |Hoolock hoolock | ||
| + | |[https://iucnapesportal.org/wiki/files/Hoolock_hoolock.zip ''Hoolock hoolock shapefile''] (ZIP; 110 kB)] | ||
| + | | | ||
| + | | | ||
| + | |} | ||
| Line 31: | Line 110: | ||
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); | ||
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 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) { | function forEachFeature(feature, layer) { | ||
| Line 59: | Line 137: | ||
dashArray: '3' | dashArray: '3' | ||
}; | }; | ||
| − | + | } | |
// Null variable that will hold layer | // Null variable that will hold layer | ||
Revision as of 05:31, 6 March 2022
| Species | Shapefile | GeoJSON | Source |
|---|---|---|---|
| Hoolock hoolock | Hoolock hoolock shapefile (ZIP; 110 kB)] |
Test