Difference between revisions of "Test"
Jump to navigation
Jump to search
| Line 18: | Line 18: | ||
<script> | <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 map = L.map('map').setView([10, 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); | |
| − | + | // Set style function that sets fill color property | |
| − | + | function style(feature) { | |
| − | + | return { | |
| − | + | fillColor: 'green', | |
| − | + | fillOpacity: 0.5, | |
| − | + | weight: 2, | |
| − | + | opacity: 1, | |
| − | + | color: '#ffffff', | |
| − | + | dashArray: '3' | |
| − | + | }; | |
| − | + | } | |
| − | + | function style2(feature) { | |
| − | + | return { | |
| − | + | fillColor: 'blue', | |
| − | + | fillOpacity: 0.5, | |
| − | + | weight: 2, | |
| − | + | opacity: 1, | |
| − | + | color: '#ffffff', | |
| − | + | dashArray: '3' | |
| − | + | }; | |
| − | + | } | |
| − | + | // Null variable that will hold layer | |
| − | + | var stateLayer = L.geoJson(null, {style: style}); | |
| − | + | var stateLayer2 = L.geoJson(null, {style: style2}); | |
| − | + | $.getJSON(url, function(data) { stateLayer.addData(data);}); | |
| − | + | stateLayer.addTo(map); | |
| − | |||
| − | + | $.getJSON(url2, function(data) { stateLayer2.addData(data); }); | |
| + | stateLayer2.addTo(map); | ||
| − | + | // for Layer Control | |
| − | + | var baseMaps = { | |
| − | + | "Open Street Map": osm, | |
| − | + | "Open Topo Map": topo, | |
| − | + | }; | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | var overlayMaps = { | |
| − | + | "Refugia":stateLayer, | |
| − | + | "Ape range":stateLayer2, | |
| − | + | }; | |
| − | + | //Add layer control | |
| − | + | L.control.layers(baseMaps, overlayMaps).addTo(map); | |
</script> | </script> | ||
</body> | </body> | ||
</html> | </html> | ||
Revision as of 11:14, 25 February 2022