Difference between revisions of "Seruyan-Sampit"
Jump to navigation
Jump to search
(Created page with "<!-- INSTRUCTIONS FOR COMPLETING SITE INFORMATION - Please consider whether any information you would like to add is sensitive and could be misused to harm apes. Please do no...") |
|||
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 hoolockleuconedys = 'files/Hoolock_leuconedys.geojson'; | |
− | + | var hoolocktianxing = 'files/Hoolock_tianxing.geojson'; | |
− | + | var hyloabbotti = 'files/Hylobates_abbotti.geojson'; | |
− | + | var hyloagilis = 'files/Hylobates_agilis.geojson'; | |
− | + | var hyloalbibaris = 'files/Hylobates_albibarbis.geojson'; | |
+ | var hylofunereus = 'files/Hylobates_funereus.geojson'; | ||
+ | var hylolar = 'files/Hylobates_lar.geojson'; | ||
+ | var hylolarcarp = 'files/Hylobates_lar_ssp_carpenteri.geojson'; | ||
+ | var hylolarvest = 'files/Hylobates_lar_ssp_vestitus.geojson'; | ||
+ | var hylomoloch = 'files/Hylobates_moloch.geojson'; | ||
+ | var hylomuell = 'files/Hylobates_muelleri.geojson'; | ||
+ | var hylopileatus = 'files/Hylobates_pileatus.geojson'; | ||
+ | var nomasannamensis = 'files/Nomascus_annamensis.geojson'; | ||
+ | var nomasconcolor = 'files/Nomascus_concolor.geojson'; | ||
+ | var nomasgabriellae = 'files/Nomascus_gabriellae.geojson'; | ||
+ | var nomashainanus = 'files/Nomascus_hainanus.geojson'; | ||
+ | var nomasleuco = 'files/Nomascus_leucogenys.geojson'; | ||
+ | var nomasnasutus = 'files/Nomascus_nasutus.geojson'; | ||
+ | var nomassiki = 'files/Nomascus_siki.geojson'; | ||
+ | var symphasyndact = 'files/Symphalangus_syndactylus.geojson'; | ||
+ | var hyloklosii = 'files/Hylobates_klossii.geojson'; | ||
+ | |||
+ | // Map | ||
+ | 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); | ||
− | + | // Popup content | |
+ | 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: 'F31818', | ||
+ | fillOpacity: 0.7, | ||
+ | weight: 2, | ||
+ | opacity: 0.7, | ||
+ | color: 'F31818', | ||
+ | dashArray: '3' | ||
+ | }; | ||
+ | } | ||
+ | function stylehoolockleuconedys(feature) { | ||
+ | return { | ||
+ | fillColor: 'AF1818', | ||
+ | fillOpacity: 0.7, | ||
+ | weight: 2, | ||
+ | opacity: 0.7, | ||
+ | color: 'AF1818', | ||
+ | dashArray: '3' | ||
+ | }; | ||
+ | } | ||
+ | function stylehoolocktianxing(feature) { | ||
+ | return { | ||
+ | fillColor: 'B65757', | ||
+ | fillOpacity: 0.7, | ||
+ | weight: 2, | ||
+ | opacity: 0.7, | ||
+ | color: 'B65757', | ||
+ | dashArray: '3' | ||
+ | }; | ||
+ | } | ||
+ | function stylehyloabbotti(feature) { | ||
+ | return { | ||
+ | fillColor: 'F87446', | ||
+ | fillOpacity: 0.7, | ||
+ | weight: 2, | ||
+ | opacity: 0.7, | ||
+ | color: 'F87446', | ||
+ | dashArray: '3' | ||
+ | }; | ||
+ | } | ||
+ | function stylehyloagilis(feature) { | ||
+ | return { | ||
+ | fillColor: 'CA833D', | ||
+ | fillOpacity: 0.7, | ||
+ | weight: 2, | ||
+ | opacity: 0.7, | ||
+ | color: 'CA833D', | ||
+ | dashArray: '3' | ||
+ | }; | ||
+ | } | ||
+ | function stylehyloalbibaris(feature) { | ||
+ | return { | ||
+ | fillColor: 'CE6C0C', | ||
+ | fillOpacity: 0.7, | ||
+ | weight: 2, | ||
+ | opacity: 0.7, | ||
+ | color: 'CE6C0C', | ||
+ | dashArray: '3' | ||
+ | }; | ||
+ | } | ||
+ | function stylehylofunereus(feature) { | ||
+ | return { | ||
+ | fillColor: 'EEA215', | ||
+ | fillOpacity: 0.7, | ||
+ | weight: 2, | ||
+ | opacity: 0.7, | ||
+ | color: 'EEA215', | ||
+ | dashArray: '3' | ||
+ | }; | ||
+ | } | ||
+ | function stylehylolar(feature) { | ||
+ | return { | ||
+ | fillColor: 'EEC315', | ||
+ | fillOpacity: 0.7, | ||
+ | weight: 2, | ||
+ | opacity: 0.7, | ||
+ | color: 'EEC315', | ||
+ | dashArray: '3' | ||
+ | }; | ||
+ | } | ||
+ | function stylehylolarcarp(feature) { | ||
+ | return { | ||
+ | fillColor: 'EBEE15', | ||
+ | fillOpacity: 0.7, | ||
+ | weight: 2, | ||
+ | opacity: 0.7, | ||
+ | color: 'EBEE15', | ||
+ | dashArray: '3' | ||
+ | }; | ||
+ | } | ||
+ | function stylehylolarvest(feature) { | ||
+ | return { | ||
+ | fillColor: 'CCCE4A', | ||
+ | fillOpacity: 0.7, | ||
+ | weight: 2, | ||
+ | opacity: 0.7, | ||
+ | color: 'CCCE4A', | ||
+ | dashArray: '3' | ||
+ | }; | ||
+ | } | ||
+ | function stylehylomoloch(feature) { | ||
+ | return { | ||
+ | fillColor: 'ADC60F', | ||
+ | fillOpacity: 0.7, | ||
+ | weight: 2, | ||
+ | opacity: 0.7, | ||
+ | color: 'ADC60F', | ||
+ | dashArray: '3' | ||
+ | }; | ||
+ | } | ||
+ | function stylehylomuell(feature) { | ||
+ | return { | ||
+ | fillColor: '92C60F', | ||
+ | fillOpacity: 0.7, | ||
+ | weight: 2, | ||
+ | opacity: 0.7, | ||
+ | color: '92C60F', | ||
+ | dashArray: '3' | ||
+ | }; | ||
+ | } | ||
+ | function stylehylopileatus(feature) { | ||
+ | return { | ||
+ | fillColor: '7FDC14', | ||
+ | fillOpacity: 0.7, | ||
+ | weight: 2, | ||
+ | opacity: 0.7, | ||
+ | color: '7FDC14', | ||
+ | dashArray: '3' | ||
+ | }; | ||
+ | } | ||
+ | function stylenomasannamensis(feature) { | ||
+ | return { | ||
+ | fillColor: '4BDD0F', | ||
+ | fillOpacity: 0.7, | ||
+ | weight: 2, | ||
+ | opacity: 0.7, | ||
+ | color: '4BDD0F', | ||
+ | dashArray: '3' | ||
+ | }; | ||
+ | } | ||
+ | function stylenomasconcolor(feature) { | ||
+ | return { | ||
+ | fillColor: '0B8D1A', | ||
+ | fillOpacity: 0.7, | ||
+ | weight: 2, | ||
+ | opacity: 0.7, | ||
+ | color: '0B8D1A', | ||
+ | dashArray: '3' | ||
+ | }; | ||
+ | } | ||
+ | function stylenomasgabriellae(feature) { | ||
+ | return { | ||
+ | fillColor: '0FD29F', | ||
+ | fillOpacity: 0.7, | ||
+ | weight: 2, | ||
+ | opacity: 0.7, | ||
+ | color: '0FD29F', | ||
+ | dashArray: '3' | ||
+ | }; | ||
+ | } | ||
+ | function stylenomashainanus(feature) { | ||
+ | return { | ||
+ | fillColor: '0ECFB9', | ||
+ | fillOpacity: 0.7, | ||
+ | weight: 2, | ||
+ | opacity: 0.7, | ||
+ | color: '0ECFB9', | ||
+ | dashArray: '3' | ||
+ | }; | ||
+ | } | ||
+ | function stylenomasleuco(feature) { | ||
+ | return { | ||
+ | fillColor: '0CD1EA', | ||
+ | fillOpacity: 0.7, | ||
+ | weight: 2, | ||
+ | opacity: 0.7, | ||
+ | color: '0CD1EA', | ||
+ | dashArray: '3' | ||
+ | }; | ||
+ | } | ||
+ | function stylenomasnasutus(feature) { | ||
+ | return { | ||
+ | fillColor: '0995D4', | ||
+ | fillOpacity: 0.7, | ||
+ | weight: 2, | ||
+ | opacity: 0.7, | ||
+ | color: '0995D4', | ||
+ | dashArray: '3' | ||
+ | }; | ||
+ | } | ||
+ | function stylenomassiki(feature) { | ||
+ | return { | ||
+ | fillColor: '127BD6', | ||
+ | fillOpacity: 0.7, | ||
+ | weight: 2, | ||
+ | opacity: 0.7, | ||
+ | color: '127BD6', | ||
+ | dashArray: '3' | ||
+ | }; | ||
+ | } | ||
+ | function stylesymphasyndact(feature) { | ||
+ | return { | ||
+ | fillColor: '6740C6', | ||
+ | fillOpacity: 0.7, | ||
+ | weight: 2, | ||
+ | opacity: 0.7, | ||
+ | color: '6740C6', | ||
+ | dashArray: '3' | ||
+ | }; | ||
+ | } | ||
+ | function styleshyloklosii(feature) { | ||
+ | return { | ||
+ | fillColor: 'EF1E6A', | ||
+ | fillOpacity: 0.7, | ||
+ | weight: 2, | ||
+ | opacity: 0.7, | ||
+ | color: 'EF1E6A', | ||
+ | dashArray: '3' | ||
+ | }; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | // Null variable that will hold layer | ||
+ | var hoolockhoolockLayer = L.geoJson(null, {style: stylehoolockhoolock}); | ||
+ | var hoolockleuconedysLayer = L.geoJson(null, {style: stylehoolockleuconedys}); | ||
+ | var hoolocktianxingLayer = L.geoJson(null, {style: stylehoolocktianxing}); | ||
+ | var hyloabbottiLayer = L.geoJson(null, {style: stylehyloabbotti}); | ||
+ | var hyloalbibarisLayer = L.geoJson(null, {style: stylehyloalbibaris}); | ||
+ | var hyloagilisLayer = L.geoJson(null, {style: stylehyloagilis}); | ||
+ | var hylofunereusLayer = L.geoJson(null, {style: stylehylofunereus}); | ||
+ | var hylolarLayer = L.geoJson(null, {style: stylehylolar}); | ||
+ | var hylolarcarpLayer = L.geoJson(null, {style: stylehylolarcarp}); | ||
+ | var hylolarvestLayer = L.geoJson(null, {style: stylehylolarvest}); | ||
+ | var hylomolochLayer = L.geoJson(null, {style: stylehylomoloch}); | ||
+ | var hylomuellLayer = L.geoJson(null, {style: stylehylomuell}); | ||
+ | var hylopileatusLayer = L.geoJson(null, {style: stylehylopileatus}); | ||
+ | var nomasannamensisLayer = L.geoJson(null, {style: stylenomasannamensis}); | ||
+ | var nomasconcolorLayer = L.geoJson(null, {style: stylenomasconcolor}); | ||
+ | var nomasgabriellaeLayer = L.geoJson(null, {style: stylenomasgabriellae}); | ||
+ | var nomashainanusLayer = L.geoJson(null, {style: stylenomashainanus}); | ||
+ | var nomasleucoLayer = L.geoJson(null, {style: stylenomasleuco}); | ||
+ | var nomasnasutusLayer = L.geoJson(null, {style: stylenomasnasutus}); | ||
+ | var nomassikiLayer = L.geoJson(null, {style: stylenomassiki}); | ||
+ | var symphasyndactLayer = L.geoJson(null, {style: stylesymphasyndact}); | ||
+ | var hyloklosiiLayer = L.geoJson(null, {style: stylehyloklosii}); | ||
− | + | $.getJSON(hyloklosii, function(data) { hyloklosiiLayer.addData(data);}); | |
− | + | hyloklosiiLayer.addTo(map); | |
− | + | ||
− | + | $.getJSON(hoolockhoolock, function(data) { hoolockhoolockLayer.addData(data);}); | |
− | + | hoolockhoolockLayer.addTo(map); | |
− | + | ||
+ | $.getJSON(symphasyndact, function(data) { symphasyndactLayer.addData(data);}); | ||
+ | symphasyndactLayer.addTo(map); | ||
+ | $.getJSON(nomassiki, function(data) { nomassikiLayer.addData(data);}); | ||
+ | nomassikiLayer.addTo(map); | ||
+ | |||
+ | $.getJSON(nomasnasutus, function(data) { nomasnasutusLayer.addData(data);}); | ||
+ | nomasnasutusLayer.addTo(map); | ||
+ | |||
+ | $.getJSON(nomasleuco, function(data) { nomasleucoLayer.addData(data);}); | ||
+ | nomasleucoLayer.addTo(map); | ||
+ | |||
+ | $.getJSON(nomashainanus, function(data) { nomashainanusLayer.addData(data);}); | ||
+ | nomashainanusLayer.addTo(map); | ||
+ | |||
+ | $.getJSON(nomasgabriellae, function(data) { nomasgabriellaeLayer.addData(data);}); | ||
+ | nomasgabriellaeLayer.addTo(map); | ||
+ | |||
+ | $.getJSON(nomasconcolor, function(data) { nomasconcolorLayer.addData(data);}); | ||
+ | nomasconcolorLayer.addTo(map); | ||
+ | |||
+ | $.getJSON(nomasannamensis, function(data) { nomasannamensisLayer.addData(data);}); | ||
+ | nomasannamensisLayer.addTo(map); | ||
+ | |||
+ | $.getJSON(hylopileatus, function(data) { hylopileatusLayer.addData(data);}); | ||
+ | hylopileatusLayer.addTo(map); | ||
+ | |||
+ | $.getJSON(hylomuell, function(data) { hylomuellLayer.addData(data);}); | ||
+ | hylomuellLayer.addTo(map); | ||
− | = | + | $.getJSON(hylomoloch, function(data) { hylomolochLayer.addData(data);}); |
+ | hylomolochLayer.addTo(map); | ||
+ | |||
+ | $.getJSON(hylolarvest, function(data) { hylolarvestLayer.addData(data);}); | ||
+ | hylolarvestLayer.addTo(map); | ||
+ | |||
+ | $.getJSON(hylolarcarp, function(data) { hylolarcarpLayer.addData(data);}); | ||
+ | hylolarcarpLayer.addTo(map); | ||
+ | |||
+ | $.getJSON(hylolar, function(data) { hylolarLayer.addData(data);}); | ||
+ | hylolarLayer.addTo(map); | ||
+ | |||
+ | $.getJSON(hylofunereus, function(data) { hylofunereusLayer.addData(data);}); | ||
+ | hylofunereusLayer.addTo(map); | ||
+ | |||
+ | $.getJSON(hyloagilis, function(data) { hyloagilisLayer.addData(data);}); | ||
+ | hyloagilisLayer.addTo(map); | ||
+ | |||
+ | $.getJSON(hyloalbibaris, function(data) { hyloalbibarisLayer.addData(data);}); | ||
+ | hyloalbibarisLayer.addTo(map); | ||
+ | |||
+ | $.getJSON(hyloabbotti, function(data) { hyloabbottiLayer.addData(data);}); | ||
+ | hyloabbottiLayer.addTo(map); | ||
+ | |||
+ | $.getJSON(hoolocktianxing, function(data) { hoolocktianxingLayer.addData(data);}); | ||
+ | hoolocktianxingLayer.addTo(map); | ||
+ | |||
+ | $.getJSON(hoolockleuconedys, function(data) { hoolockleuconedysLayer.addData(data);}); | ||
+ | hoolockleuconedysLayer.addTo(map); | ||
+ | |||
+ | // for Layer Control | ||
+ | var baseMaps = { | ||
+ | "Open Street Map": osm, | ||
+ | "Open Topo Map": topo, | ||
+ | }; | ||
+ | var overlayMaps = { | ||
+ | "Hoolock hoolock": hoolockhoolockLayer, | ||
+ | "Hoolock leuconedys" : hoolockleuconedysLayer, | ||
+ | "Hoolock tianxing" : hoolocktianxingLayer, | ||
+ | "Hylobates abbotti" : hyloabbottiLayer, | ||
+ | "Hylobates albibarbis" : hyloalbibarisLayer, | ||
+ | "Hylobates agilis" : hyloagilisLayer, | ||
+ | "Hylobates funereus" : hylofunereusLayer, | ||
+ | "Hylobates lar" : hylolarLayer, | ||
+ | "Hylobates lar carpenteri" : hylolarcarpLayer, | ||
+ | "Hylobates lar vestitus" : hylolarvestLayer, | ||
+ | "Hylobates moloch" : hylomolochLayer, | ||
+ | "Hylobates muelleri" : hylomuellLayer, | ||
+ | "Hylobates pileatus" : hylopileatusLayer, | ||
+ | "Nomascus annamensis" : nomasannamensisLayer, | ||
+ | "Nomascus concolor" : nomasconcolorLayer, | ||
+ | "Nomascus gabriellae" : nomasgabriellaeLayer, | ||
+ | "Nomascus hainanus" : nomashainanusLayer, | ||
+ | "Nomascus leucogenys" : nomasleucoLayer, | ||
+ | "Nomascus nasutus" : nomasnasutusLayer, | ||
+ | "Nomascus siki" : nomassikiLayer, | ||
+ | "Symphalangus syndactylus" : symphasyndactLayer, | ||
+ | "Hylobates klosii" : hyloklosiiLayer, | ||
+ | }; | ||
− | + | //Add layer control | |
+ | L.control.layers(baseMaps, overlayMaps).addTo(map); | ||
− | + | </script> | |
− | + | </body> | |
− | + | </html> | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− |
Revision as of 14:14, 4 March 2022