|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/leaflet.js"></script>
|
|
|
|
|
<script src="https://cdn.maptiler.com/mapbox-gl-js/v1.5.1/mapbox-gl.js"></script>
|
|
|
|
|
<script src="https://cdn.maptiler.com/mapbox-gl-leaflet/latest/leaflet-mapbox-gl.js"></script>
|
|
|
|
|
<script src="leaflet-kml/L.KML.js"></script>
|
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css" />
|
|
|
|
|
<link rel="stylesheet" href="https://cdn.maptiler.com/mapbox-gl-js/v1.5.1/mapbox-gl.css" />
|
|
|
|
|
<style>
|
|
|
|
|
#map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="map"></div>
|
|
|
|
|
<p><a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a></p>
|
|
|
|
|
<script>
|
|
|
|
|
var chinagreen;
|
|
|
|
|
var shadowrun;
|
|
|
|
|
var ours;
|
|
|
|
|
var map = L.map('map').setView([47.63,-122.33], 10);
|
|
|
|
|
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",
|
|
|
|
|
style: 'https://api.maptiler.com/maps/hybrid/style.json?key=PVp0f0cBGCyXeWLnAp9e'
|
|
|
|
|
}).addTo(map);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
fetch('shadowrun.kml')
|
|
|
|
|
.then(res => res.text())
|
|
|
|
|
.then(kmltext => {
|
|
|
|
|
// Create new kml overlay
|
|
|
|
|
const parser = new DOMParser();
|
|
|
|
|
const kml = parser.parseFromString(kmltext, 'text/xml');
|
|
|
|
|
shadowrun = new L.KML(kml);
|
|
|
|
|
map.addLayer(shadowrun);
|
|
|
|
|
});
|
|
|
|
|
fetch('chinagreen.kml')
|
|
|
|
|
.then(res => res.text())
|
|
|
|
|
.then(kmltext => {
|
|
|
|
|
// Create new kml overlay
|
|
|
|
|
const parser = new DOMParser();
|
|
|
|
|
const kml = parser.parseFromString(kmltext, 'text/xml');
|
|
|
|
|
chinagreen = new L.KML(kml);
|
|
|
|
|
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'});
|
|
|
|
|
|
|
|
|
|
chinagreenswitcher.onAdd = function (map) {
|
|
|
|
|
var div = L.DomUtil.create('div', 'chinagreen');
|
|
|
|
|
div.innerHTML = '<form><input id="chinagreenswitcher" type="checkbox" checked />Toggle District Info</form>';
|
|
|
|
|
return div;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
chinagreenswitcher.addTo(map);
|
|
|
|
|
document.getElementById ("chinagreenswitcher").addEventListener ("click", toggleChinaGreen, false);
|
|
|
|
|
|
|
|
|
|
var shadowrunswitcher = L.control({position: 'topleft'});
|
|
|
|
|
|
|
|
|
|
shadowrunswitcher.onAdd = function (map) {
|
|
|
|
|
var div = L.DomUtil.create('div', 'shadowrun');
|
|
|
|
|
div.innerHTML = '<form><input id="shadowrunswitcher" type="checkbox" checked />Toggle Security Zones</form>';
|
|
|
|
|
return div;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
shadowrunswitcher.addTo(map);
|
|
|
|
|
document.getElementById ("shadowrunswitcher").addEventListener ("click", toggleShadowrun, false);
|
|
|
|
|
|
|
|
|
|
var oursswitcher = L.control({position: 'topleft'});
|
|
|
|
|
oursswitcher.onAdd = function (map) {
|
|
|
|
|
var div = L.DomUtil.create('div', 'ours');
|
|
|
|
|
div.innerHTML = '<form><input id="oursswitcher" type="checkbox" checked />Toggle Campaign Specific</form>';
|
|
|
|
|
return div;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
oursswitcher.addTo(map);
|
|
|
|
|
document.getElementById ("oursswitcher").addEventListener ("click", toggleOurs, false);
|
|
|
|
|
|
|
|
|
|
var styleSwitcher = L.control({position: 'topleft'});
|
|
|
|
|
styleSwitcher.onAdd = function (map) {
|
|
|
|
|
var div = L.DomUtil.create('div', 'stylediv');
|
|
|
|
|
div.innerHTML = '<form> \
|
|
|
|
|
<input id="hybrid-style" type="radio" name="style-selector" value="hybrid" checked />Hybrid <br/>\
|
|
|
|
|
<input id="streets-style" type="radio" name="style-selector" value="streets" />Streets <br/>\
|
|
|
|
|
</form>';
|
|
|
|
|
return div;
|
|
|
|
|
};
|
|
|
|
|
styleSwitcher.addTo(map);
|
|
|
|
|
document.getElementById ("hybrid-style").addEventListener ("click", setMapStyle, false);
|
|
|
|
|
document.getElementById ("streets-style").addEventListener ("click", setMapStyle, false);
|
|
|
|
|
|
|
|
|
|
function toggleChinaGreen() {
|
|
|
|
|
if(this.checked){
|
|
|
|
|
map.addLayer(chinagreen);
|
|
|
|
|
}else{
|
|
|
|
|
map.removeLayer(chinagreen);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
function toggleShadowrun() {
|
|
|
|
|
if(this.checked){
|
|
|
|
|
map.addLayer(shadowrun);
|
|
|
|
|
}else{
|
|
|
|
|
map.removeLayer(shadowrun);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
function toggleOurs() {
|
|
|
|
|
if(this.checked){
|
|
|
|
|
map.addLayer(ours);
|
|
|
|
|
}else{
|
|
|
|
|
map.removeLayer(ours);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function setMapStyle() {
|
|
|
|
|
if(this.checked){
|
|
|
|
|
gl._glMap.setStyle('https://api.maptiler.com/maps/' + this.value + '/style.json?key=PVp0f0cBGCyXeWLnAp9e');
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
