//Define each layer
var wms_layer_world = L.tileLayer.wms('https://webgis25-syk7701.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 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 my_poi = new L.LayerGroup();
var a_marker = L.marker([22.30964,113.91572], {icon: L.AwesomeMarkers.icon({icon: '',prefix: 'fa',markerColor: 'blue',spin:false})}).bindPopup("Hong Kong international Airport<br />香港國際機場<br />香港国际机场").addTo(my_poi);
var population_tw = new L.LayerGroup();
var pop_2025 = L.marker([22.39766,114.13422], {icon: L.AwesomeMarkers.icon({icon: '',prefix: 'fa',markerColor: 'green',spin:false})}).bindPopup("7,400,865<br />(30-MAR-2025)</br />[<b>Unofficial data</b>]").addTo(population_tw);

//Define map object
var map = L.map('map_canvas', {
	center: [22.39766,114.13422],
	zoom: 6,
	layers: [wms_layer_world]
});

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

//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');

//Add layer to overlays
layerControl.addOverlay(my_poi, "<img src='images/pinBlue.png' height='24px' /> POI");
layerControl.addOverlay(population_tw, "<img src='images/pinGreen.png' height='24px' /> Population");
