Having exposed our WMS services, we can now consume them in a web application. The two most popular web mapping libraries are OpenLayers and Leaflet. We will have a closer look at both of them.
It is advised to review the documentation of both libraries. It can be found at https://openlayers.org/ and http://leafletjs.com/.
Our first example renders a Window with an OpenLayers map inside. We add three layers to the map - all of them exposed via GeoServer. We need to create a map with the following code:
/**
* Create map
* @param mapContainerId
*/
createMap: function(mapContainerId) {
var proj = ol.proj.get('EPSG:4326');
this.map = new ol.Map({
layers: this.createLayers(),
target: mapContainerId,
controls: ol.control.defaults({
attributionOptions: {
collapsible: false
}
}).extend([
new ol.control.ScaleLine(),
new ol.control.MousePosition({
...