|
|
@ -18,6 +18,7 @@ |
|
|
|
<script> |
|
|
|
<script> |
|
|
|
var chinagreen; |
|
|
|
var chinagreen; |
|
|
|
var shadowrun; |
|
|
|
var shadowrun; |
|
|
|
|
|
|
|
var ours; |
|
|
|
var map = L.map('map').setView([47.63,-122.33], 10); |
|
|
|
var map = L.map('map').setView([47.63,-122.33], 10); |
|
|
|
var gl = L.mapboxGL({ |
|
|
|
var gl = L.mapboxGL({ |
|
|
|
attribution: "\u003ca href=\"https://www.maptiler.com/copyright/\" target=\"_blank\"\u003e\u0026copy; MapTiler\u003c/a\u003e \u003ca href=\"https://www.openstreetmap.org/copyright\" target=\"_blank\"\u003e\u0026copy; OpenStreetMap contributors\u003c/a\u003e", |
|
|
|
attribution: "\u003ca href=\"https://www.maptiler.com/copyright/\" target=\"_blank\"\u003e\u0026copy; MapTiler\u003c/a\u003e \u003ca href=\"https://www.openstreetmap.org/copyright\" target=\"_blank\"\u003e\u0026copy; OpenStreetMap contributors\u003c/a\u003e", |
|
|
@ -41,6 +42,15 @@ |
|
|
|
chinagreen = new L.KML(kml); |
|
|
|
chinagreen = new L.KML(kml); |
|
|
|
map.addLayer(chinagreen); |
|
|
|
map.addLayer(chinagreen); |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
fetch('ours.kml') |
|
|
|
|
|
|
|
.then(res => res.text()) |
|
|
|
|
|
|
|
.then(kmltext => { |
|
|
|
|
|
|
|
// Create new kml overlay |
|
|
|
|
|
|
|
const parser = new DOMParser(); |
|
|
|
|
|
|
|
const kml = parser.parseFromString(kmltext, 'text/xml'); |
|
|
|
|
|
|
|
ours = new L.KML(kml); |
|
|
|
|
|
|
|
map.addLayer(ours); |
|
|
|
|
|
|
|
}); |
|
|
|
var chinagreenswitcher = L.control({position: 'topleft'}); |
|
|
|
var chinagreenswitcher = L.control({position: 'topleft'}); |
|
|
|
|
|
|
|
|
|
|
|
chinagreenswitcher.onAdd = function (map) { |
|
|
|
chinagreenswitcher.onAdd = function (map) { |
|
|
@ -62,6 +72,16 @@ |
|
|
|
|
|
|
|
|
|
|
|
shadowrunswitcher.addTo(map); |
|
|
|
shadowrunswitcher.addTo(map); |
|
|
|
document.getElementById ("shadowrunswitcher").addEventListener ("click", toggleShadowrun, false); |
|
|
|
document.getElementById ("shadowrunswitcher").addEventListener ("click", toggleShadowrun, false); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
oursswitcher.onAdd = function (map) { |
|
|
|
|
|
|
|
var div = L.DomUtil.create('div', 'ours'); |
|
|
|
|
|
|
|
div.innerHTML = '<form><input id="oursswitcher" type="checkbox" checked />Toggle District Info</form>'; |
|
|
|
|
|
|
|
return div; |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
oursswitcher.addTo(map); |
|
|
|
|
|
|
|
document.getElementById ("oursswitcher").addEventListener ("click", toggleOurs, false); |
|
|
|
|
|
|
|
|
|
|
|
function toggleChinaGreen() { |
|
|
|
function toggleChinaGreen() { |
|
|
|
if(this.checked){ |
|
|
|
if(this.checked){ |
|
|
|
map.addLayer(chinagreen); |
|
|
|
map.addLayer(chinagreen); |
|
|
@ -76,6 +96,13 @@ |
|
|
|
map.removeLayer(shadowrun); |
|
|
|
map.removeLayer(shadowrun); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
function toggleOurs() { |
|
|
|
|
|
|
|
if(this.checked){ |
|
|
|
|
|
|
|
map.addLayer(ours); |
|
|
|
|
|
|
|
}else{ |
|
|
|
|
|
|
|
map.removeLayer(ours); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
</script> |
|
|
|
</script> |
|
|
|
</body> |
|
|
|
</body> |
|
|
|
</html> |
|
|
|
</html> |
|
|
|