Publishing WMS and WFS with GeoServer and Leaflet скачать в хорошем качестве

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;