Publishing WMS and WFS with GeoServer and Leaflet

SGHG 4583 (Web-based GIS)
Assignment #03 Walk-through

This tutorial (in ASMR) shows how one can publish Web Map Service (WMS) and Web Feature Service (WFS) services of GeoServer for WebGIS development. This includes publishing maps from multiple sources, feature query and selection, and applying Bootstrap for the layout. While setting up and configuration of GeoServer will not be covered in this tutorial.

Chapters:
0:00 Introduction
0:05 Preparing HTML structure
0:55 Save the file into local development enviroment
1:52 Adding Leaflet CSS
2:24 Adding Bootstrap CSS for the layout
2:48 Adding FontAwesome (to be use for custom icon)
3:24 Preparing custom CSS for the application
4:39 Add HTML Section for header navigation bar
8:42 Add another HTML Section for main content (sidebar and map)
10:56 Adding Bootstrap JavaScript and jQuery
12:47 Preparing the About page
15:21 Add HTML input form and buttons for feature query
18:50 Preparing Leaflet map (CSS and JS)
20:04 Adding OSM and CartoDB map tiles
21:47 Define Leaflet map
23:03 Preparing Leaflet control layers
25:37 Customizing Leaflet map size
28:15 Preparing GeoServer configurations for WMS
30:30 Get WMS layer from GeoServer
35:15 Testing WMS with Common Query Language (CQL) FILTER
36:36 Adding another WMS layer from different data source
39:13 Add a new WFS layer
41:16 Get GeoJSON data using JavaScript async await method
52:01 Add another GeoJSON data as WFS (via jQuery getJSON method)
58:15 Adding new layer overlay from the same GeoJSON data source
1:00:53 Filtering the GeoJSON data for specific country selection
1:03:33 Add scale bar to the map
1:04:33 Map layer order (z-Index) organization
1:06:55 Preparing WFS feature query
1:11:52 Customizing WFS CQL_FILTER option
1:18:41 Highlighting search result and reset to default view
1:25:50 Add logic for the returned result
1:28:33 Setting wildcard LIKE for WFS CQL_FILTER option
1:32:27 Encoding WFS CQL_FILTER string using JavaScript encodedURI() function
1:34:50 Changing string case for WFS CQL_FILTER
1:41:50 Adding WFS search result count to the sidebar
1:46:56 Customizing no result error using Bootstrap alert
1:50:24 Preparing enter key press event to the jQuery document ready
1:54:13 Customizing empty error using Bootstrap alert
1:55:51 Adding map full extent button and function
1:57:41 Add CSS styling for sidebar
2:05:33 Adding map coordinates for mouse move event
2:10:34 Minor styling to the leaflet control layer list
2:11:53 Displaying WFS info to the sidebar

Update June 21st, 2021: A workaround for querying keyword with case insensitive using CQL_FILTER for WFS wildcard LIKE syntax is to utilize ILIKE with WFS version 1.1.0 (see at 1:11:52). So, final code is:

var queryLayer = "dun";
var cqlFilter = "&cql_filter=strToLowercase(" + queryLayer + ") ILIKE '%" + queryBox + "%'";
const encoded = encodeURI(cqlFilter);
var wfs_url = url_geoserver_wfs + "service=wfs&version=1.1.0&request=GetFeature&typeNames=sghg4583:selangor_postgis&outputFormat=application/json" + encoded;