/*
=========================================================================================
====
==== Layer [ cities_usa_wfs ]
====
-----------------------------------------------------------------------------------------
*/
var url = "https://webgis26-wl8645.xyz/geoserver/topp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=topp%3Astates&outputFormat=application%2Fjson&maxFeatures=500"
var cities_usa_wfs = new L.GeoJSON.AJAX(url, {
	onEachFeature: function (feature, layer) {
		var popupContent = '';
		for (var key in feature.properties) {
			popupContent += key + ': ' + feature.properties[key] + '<br>';
		}
		layer.bindPopup(popupContent);
	}
});
/*
==== ------------------------------------------------------------------------------------
==== End of layer [ cities_usa_wfs ]
==== ====================================================================================
*/


/*
=========================================================================================
====
==== GeoJSON layer (AJAX request to the same server - webgis26-wl8645.xyz)
==== Plugin source: [https://www.unpkg.com]
==== Data source: [downloaded from Internet with approximate location information.]
====
==== Layer [ cities_usa_2 ]
====
-----------------------------------------------------------------------------------------
*/
var markerOptionsUsaCity = {
	radius: 7,
	fillColor: "orange",
	color: "green",
	weight: 3,
	opacity: 1,
	fillOpacity: 0.4
};

var cities_usa_2 = new L.GeoJSON.AJAX('./files-geojson/capitals.json', {
	pointToLayer: function (feature, latlng) {
		return L.circleMarker(latlng, markerOptionsUsaCity);
	},
	onEachFeature: function (feature, layer) {
		var popupMessageCity2 = feature.properties.name + ' (' + feature.properties.state + ')';
		layer.on({
			mouseover: function (e) {
				layer.bindPopup(popupMessageCity2);
				layer.openPopup();
			},
			mouseout: function (e) {
				layer.closePopup();
			}
		});
	}
});
/*
==== ------------------------------------------------------------------------------------
==== End of layer [ cities_usa_2 ]
==== ====================================================================================
*/


// Define each layer
var wms_layer = L.tileLayer.wms('https://webgis26-wl8645.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://webgis26-wl8645.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,
	zoomControl: false,
	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 control on the map object
L.control.zoomLabel({position: 'topleft'}).addTo(map);
var zoom_bar = new L.Control.ZoomBar({position: 'topleft'}).addTo(map);
L.control.coordinates({
	position: "bottomright",
	decimals: 5,
	useLatLngOrder: true
}).addTo(map);
L.control.scale().addTo(map);


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

// Add layer to overlays
layerControl.addOverlay(wms_layer_usa, 'Population');
layerControl.addOverlay(cities_usa_wfs, "Cities <span style='font-size:0.9em;'>(AJAX WFS remote server request)</span>");
layerControl.addOverlay(cities_usa_2, "Cities <span style='font-size:0.9em;'>(AJAX GeoJSON local request)</span>");
