//Define each layer
var wms_layer = L.tileLayer.wms('https://webgis25-syk7701.xyz/geoserver/ne/wms', {
	layers: 'ne:world',
	format: 'image/png',
	transparent: true,
	attribution: 'Map data &copy; OpenStreetMap | <a href="" title="Geoffrey Yu-kai Shea, Ph.D.">SYK</a>'
});
var wms_layer_usa = L.tileLayer.wms('https://webgis25-syk7701.xyz/geoserver/topp/wms', {
	layers: 'topp:states',
	format: 'image/png',
	transparent: true,
	maxZoom: 5,
	minZoom: 3,
	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: [39.85840,-99.97559],
	zoom: 4,
	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');

//Add layer to overlays
layerControl.addOverlay(wms_layer_usa, 'USA Population');
