
var map; 

var wmsGHS = L.tileLayer.wms('https://jeodpp.jrc.ec.europa.eu/jeodpp/services/ows/wms/landcover/ghsl?', {
	layers: 'LC.GHS_BUILT_S2_GHS-S2Net_2018_GLOBE_R2020A',
	zIndex: 1
})

var wmsWorldcover = L.tileLayer.wms('https://services.terrascope.be/wms/v2', {
	layers: 'WORLDCOVER_2020_MAP',
	zIndex: 1
})

var satellite = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
	attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
	zIndex: 1
});
var streets = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
	zIndex: 1
});
var stamentoner = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}{r}.{ext}', {
	attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
	subdomains: 'abcd',
	ext: 'png',
	zIndex: 1
});


var tilesAF = L.tileLayer('https://geoserver.silvis.forest.wisc.edu/geodata/fast/globalwui/data/AF/{z}/{x}/{y}.png', {zIndex: 2, tms:true});
var tilesAS = L.tileLayer('https://geoserver.silvis.forest.wisc.edu/geodata/fast/globalwui/data/AS/{z}/{x}/{y}.png', {zIndex: 2, tms:true});
var tilesAS2 = L.tileLayer('https://geoserver.silvis.forest.wisc.edu/geodata/fast/globalwui/data/AS_2/{z}/{x}/{y}.png', {zIndex: 2, tms:true});
var tilesEU = L.tileLayer('https://geoserver.silvis.forest.wisc.edu/geodata/fast/globalwui/data/EU/{z}/{x}/{y}.png', {zIndex: 2, tms:true});
var tilesNA = L.tileLayer('https://geoserver.silvis.forest.wisc.edu/geodata/fast/globalwui/data/NA/{z}/{x}/{y}.png', {zIndex: 2, tms:true});
var tilesOC = L.tileLayer('https://geoserver.silvis.forest.wisc.edu/geodata/fast/globalwui/data/OC/{z}/{x}/{y}.png', {zIndex: 2, tms:true});
var tilesSA = L.tileLayer('https://geoserver.silvis.forest.wisc.edu/geodata/fast/globalwui/data/SA/{z}/{x}/{y}.png', {zIndex: 2, tms:true});


initMap();
initInterface();

function initMap() {

  map = L.map('map', {
		center: [49.678, 0],
		zoom: 5,
        minZoom: 5,
        maxZoom: 16,
		layers: [satellite]
  });
  
  map.addEventListener('mousemove', (event) => {
    let lat = Math.round(event.latlng.lat * 100000) / 100000;
    let lng = Math.round(event.latlng.lng * 100000) / 100000;
    document.getElementById("coord").innerHTML = lat + ',<br>' + lng;
  }
	);

 	var baseMaps = {
	"Satellite": satellite,
    "Streets": streets,
	"Neutral": stamentoner,
	"GHS Buildings": wmsGHS,
	"Worldcover": wmsWorldcover
	};
    
    L.control.layers(baseMaps, null, { position: 'topleft' }).addTo(map);
  
	L.easyButton('<img src="img/info_small.png" class="icon">', function(btn, map){
		disp = document.getElementById("infoText").style.visibility
		if(disp == "hidden") {
			document.getElementById("infoText").style.visibility = "visible"
		} else {
			document.getElementById("infoText").style.visibility = "hidden"
		}
	}, 'Site Information', {
	position: 'topleft'
	}).addTo(map);
	

	map.addLayer(tilesEU)
	map.addLayer(tilesAS)
	map.addLayer(tilesAS2)
	map.addLayer(tilesAF)
	map.addLayer(tilesNA)
	map.addLayer(tilesOC)
	map.addLayer(tilesSA)
	tilesEU.setZIndex(40)
	tilesAS.setZIndex(40)
	tilesAS2.setZIndex(40)
	tilesAF.setZIndex(40)
	tilesNA.setZIndex(40)
	tilesOC.setZIndex(40)
	tilesSA.setZIndex(40)
}

function initInterface() {
  scale = L.control.scale({ position: 'bottomright' }).addTo(map);

  // Opacity Slider
  var slider = document.getElementById('slider');
  var sliderValue = document.getElementById('slider-value');

  slider.addEventListener('input', function(e) {
	tilesEU.setOpacity(parseInt(e.target.value, 10) / 100);
	tilesAF.setOpacity(parseInt(e.target.value, 10) / 100);
	tilesAS.setOpacity(parseInt(e.target.value, 10) / 100);
	tilesAS2.setOpacity(parseInt(e.target.value, 10) / 100);
	tilesNA.setOpacity(parseInt(e.target.value, 10) / 100);
	tilesOC.setOpacity(parseInt(e.target.value, 10) / 100);
	tilesSA.setOpacity(parseInt(e.target.value, 10) / 100);
    sliderValue.textContent = e.target.value + '%';
  });

 var img = document.createElement("img");
 setLegend()
 //img.src = "img/legend.png";
 //var src = document.getElementById("x");
 //legend.appendChild(img);

 var closeButton = document.createElement('div');
 closeButton.className = 'cB';
 legend.appendChild(closeButton);
 closeButton.onclick = function() {
   document.getElementById("legend").style.visibility = 'hidden';
   document.getElementById("showLegend").style.visibility = 'visible';
   document.getElementById("exmpl").style.bottom = '40px';
   //document.getElementById("showExamples").style.bottom = '40px';
   document.getElementById("coord").style.bottom = '40px';
 }

 document.getElementById("showLegend").onclick = function() {
   document.getElementById("legend").style.visibility = 'visible';
   document.getElementById("showLegend").style.visibility = 'hidden';
   document.getElementById("exmpl").style.bottom = '60px';
   //document.getElementById("showExamples").style.bottom = '60px';
   document.getElementById("coord").style.bottom = '100px';
 }
 
  var closeExamples = document.createElement('div');
 closeExamples.className = 'cE';
 exmpl.appendChild(closeExamples);
 closeExamples.onclick = function() {
   document.getElementById("exmpl").style.visibility = 'hidden';
   //document.getElementById("showExamples").style.visibility = 'visible';
 }
 
 //document.getElementById("showExamples").onclick = function() {
 //  document.getElementById("exmpl").style.visibility = 'visible';
 //  //document.getElementById("showExamples").style.visibility = 'hidden';
 //}
 

}

//function zoomTo(arg) {
//	if(arg == 'ex1') {
//		map.setView([-18.917, 32.872], 12)
//	}
//	if(arg == 'ex2') {
//		map.setView([32.776,34.984], 12)
//	}
//	if(arg == 'ex3') {
//		map.setView([18.846, 73.106], 12)
//	}
//	if(arg == 'ex4') {
//		map.setView([49.678, 21.441], 12)
//	}
//    if(arg == 'ex5') {
//		map.setView([38.806, -8.865], 12)
//	}
//    if(arg == 'ex6') {
//		map.setView([45.114, -88.753, ], 12)
//	}
//    if(arg == 'ex7') {
//		map.setView([-34.436, 150.826, ], 12)
//	}
//    if(arg == 'ex8') {
//		map.setView([-18.913, -57.695], 12)
//	}
//	if(arg == 'ex9') {
//		map.setView([40.730, -73.935], 12)
//	}
//}


function removeIntro() {
	document.getElementById('intro').style.display = 'none';
}

function setLegend(arg) {
	legend.innerHTML = "";	 
	document.getElementById("exmpl").style.bottom = "80px";
	//document.getElementById("showExamples").style.bottom = "80px";
	document.getElementById("coord").style.bottom = "160px";
		
	var layers = ['Forest/Shrub/Wetl.-dominated intermix WUI', 'Forest/Shrub/Wetl.-dominated interface WUI', 'Grassland-dominated intermix WUI', 'Grassland-dominated interface WUI', 'Non-WUI: Forest/Shrub/Wetland', 'Non-WUI: Grassland', 'Non-WUI: Urban', 'Non-WUI: Other'];
	var colors = ['#ffc000', '#ffff4d', '#615036', '#b29338', '#8cad8a', '#c1eebd', '#bc413f', '#f2f6d9'];

	for (i = 0; i < layers.length; i++) {
	  var layer = layers[i];
	  var color = colors[i];
	  var item = document.createElement('div');
	  var key = document.createElement('span');
	  key.className = 'legend-key';
	  key.style.backgroundColor = color;

	  var value = document.createElement('span');
	  value.innerHTML = layer;
	  item.appendChild(key);
	  item.appendChild(value);
	  legend.appendChild(item);
	}
}





