/*
//  =============================================================================
//  ===                                                                       ===
//  === JS script programmed by: SHEA Yu-kai Geoffrey, Ph.D.                  ===
//  === Last updated: 06-APR-2025                                             ===
//  ===                                                                       ===
//  === Important Notice: USE THE FOLLOWING SCRIPT AT YOUR OWN RISK!          ===
//  ===                                                                       ===
//  =============================================================================
*/


/*
=========================================================================================
====
==== GeoJSON layer (AJAX request to the same server - webgis26-wl8645.xyz)
==== Plugin source: [https://github.com/Dominique92/Leaflet.GeoJSON.Ajax?tab=readme-ov-file]
==== Data source: [unofficial data downloaded from Internet]
====
==== [ Layer: cities_tw_v1 ]
====
-----------------------------------------------------------------------------------------
*/
function cityOnEachFeature_v1(feature, layer) {
	var popupContent = feature.properties.name_CT + ' (' + feature.properties.population + ')';
	layer.bindPopup(popupContent);
}

var cities_tw_v1 = new L.GeoJSON.AJAX('./files-geojson/tw_cities_population.json', {
	onEachFeature: cityOnEachFeature_v1
});
/*
==== ------------------------------------------------------------------------------------
==== End of layer: cities_tw_v1
==== ====================================================================================
*/


/*
=========================================================================================
====
==== GeoJSON layer (AJAX request to the same server - webgis26-wl8645.xyz)
==== Data source: CSDI, Hong Kong
====
==== [ Layer: cities_tw_2 ]
====
-----------------------------------------------------------------------------------------
*/
function cityOnEachFeature_2(feature, layer) {
	var popupContent = feature.properties.name_CT + '<br />[ <b>' + feature.properties.population + '</b> ]';
	layer.on({
		mouseover: function (e) {
			layer.bindPopup(popupContent);
			layer.openPopup();
		},
		mouseout: function (e) {
			layer.closePopup();
		}
	});
}
var geojsonMarkerOptions_2 = {
	radius: 7,
	fillColor: "orange",
	color: "green",
	weight: 3,
	opacity: 1,
	fillOpacity: 0.4
};
var cities_tw_2 = new L.GeoJSON.AJAX('./files-geojson/tw_cities_population.json', {
	pointToLayer: function (feature, latlng) {
		return L.circleMarker(latlng, geojsonMarkerOptions_2);
	},
	onEachFeature: cityOnEachFeature_2
});
/*
==== ------------------------------------------------------------------------------------
==== End of cities_tw_2
==== ====================================================================================
*/


/*
=========================================================================================
====
==== GeoJSON layer (AJAX request to the same server - webgis26-wl8645.xyz)
==== Plugin source: [https://github.com/Dominique92/Leaflet.GeoJSON.Ajax?tab=readme-ov-file]
==== Data source: [unofficial and approximate location data downloaded from Internet]
====
==== [ Layer: country ]
====
-----------------------------------------------------------------------------------------
*/
var country = new L.GeoJSON.AJAX('./files-geojson/tw_boundary_country.geojson', {
	style: function(feature) {
		return {
			fillColor: "#0f0",
			color: "#00f",
			weight: '2',
			fillOpacity: 0.05
		};
	}
});
/*
==== ------------------------------------------------------------------------------------
==== End of layer: country
==== ====================================================================================
*/


/*
=========================================================================================
====
==== GeoJSON layer (AJAX request to the same server - webgis26-wl8645.xyz)
==== Plugin source: [https://github.com/Dominique92/Leaflet.GeoJSON.Ajax?tab=readme-ov-file]
==== Data source: [unofficial and approximate location data downloaded from Internet]
====
==== [ Layer: countyLayer ]
====
-----------------------------------------------------------------------------------------
*/
var countyLayer = new L.GeoJSON.AJAX('./files-geojson/tw_boundary_county.geojson', {
		style: function(feature) {
			return {
				fillColor: "#FF0",
				color: "#00F",
				weight: '1',
				fillOpacity: 0.1
			};
		},
		onEachFeature: function (feature, layer) {
			layer.on({
				mouseover: function(e) {
					var popupMessageCounty = feature.properties.name;
					layer.bindPopup(popupMessageCounty);
					layer.openPopup();
				},
				mouseout: function(e) {
					layer.closePopup();
				}
			});
		}
});
/*
==== ------------------------------------------------------------------------------------
==== End of countyLayer
==== ====================================================================================
*/


// Define each layer
var wms_layer = L.tileLayer.wms('https://webgis26-wl8645.xyz/geoserver/ne/wms', {
	layers: 'ne:world',
	format: 'image/png',
	transparent: true,
	maxZoom: 10,
	minZoom: 1,
	attribution: 'Map data &copy; OpenStreetMap | <a href="" title="Geoffrey Yu-kai Shea, Ph.D.">SYK</a>'
});
var wms_layer_tw = L.tileLayer.wms('https://webgis26-wl8645.xyz/geoserver/wms', {
	layers: 'twLG1',
	format: 'image/png',
	transparent: true,
	maxZoom: 18,
	minZoom: 9,
	attribution: 'Map data &copy; OpenStreetMap | <a href="" title="Geoffrey Yu-kai Shea, Ph.D.">SYK</a>'
});
var osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
	maxZoom: 19,
	attribution: '&copy; OpenStreetMap'
});
var openTopoMap = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
	maxZoom: 19,
	attribution: 'Map data: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'
});
var mapping_my = new L.LayerGroup();
var a_marker = L.marker([22.99432,120.21935]).bindPopup("NCKU<br />National Cheng Kung University<br />成功大學").addTo(mapping_my);
var population_tw = new L.LayerGroup();
var pop_2025 = L.marker([24.36383,121.14154]).bindPopup("23,138,518<br />(30-MAR-2025)</br />[<b>Unofficial data</b>]").addTo(population_tw);

// Define map object
var map = L.map('map_canvas', {
	center: [23.78673,120.80255],
	zoom: 7,
	layers: [wms_layer]
});

// Define base layers (group of layers)
var baseLayers = {
	'World Map': wms_layer
};

// Define overlays (group of layers) (initially, it can be empty and layer(s) can be added later)
var overlays = {
};

// Add layer control on the map object
var layerControl = L.control.layers(baseLayers, overlays).addTo(map);

// Add layer to base layers
layerControl.addBaseLayer(osm, 'OpenStreetMap');
layerControl.addBaseLayer(openTopoMap, 'OpenTopoMap');
layerControl.addBaseLayer(wms_layer_tw, "Taiwan Map");

// Add layer to overlays
layerControl.addOverlay(mapping_my, 'My mapping');
layerControl.addOverlay(population_tw, "<img src='images/pinBlue.png' height='24px' /> Population");
layerControl.addOverlay(cities_tw_v1, "<img src='images/pinBlue.png' height='24px' /> Cities [v1] <span style='font-size:0.9em;'>(AJAX request: webgis26-wl8645.xyz)</span>");
layerControl.addOverlay(cities_tw_2, "Cities [v2] <span style='font-size:0.9em;'>(AJAX request: webgis26-wl8645.xyz)</span>");
layerControl.addOverlay(countyLayer, "Counties <span style='font-size:0.8em;'>(AJAX request: webgis26-wl8645.xyz)</span>");
layerControl.addOverlay(country, "Boundary <span style='font-size:0.8em;'>(AJAX request: webgis26-wl8645.xyz)</span>");
