//Define each layer
var wms_layer = 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 wms_layer_tw = L.tileLayer.wms('https://webgis25-syk7701.xyz/geoserver/wms', {
	layers: 'twLG_11c',
	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>)'
});

//Define map object
var map = L.map('map_canvas', {
	center: [25.04233,121.50639],
	zoom: 2,
	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(wms_layer_usa, 'USA Population');
