Building Web GIS Apps with Java Spring Boot MVC and Leaflet

Install PostgreSQL 13 on Windows, configure Stack Builder to add the pgAgent, ODBC driver, and PostGIS spatial extension, and create a sample spatial database to verify PostGIS works.

Create a spatial database using PGAdmin, grant full privileges to a login role, and enable PostGIS extensions and topology extension to store and manage spatial data for your app.

Install OSGeo4W on Windows using the network installer and complete the express install. Then configure OSGeo4W environment variables via the command line and restart the system to apply changes.

Install the java development kit (jdk 16) on windows, download the x64 installer, complete the setup, and verify installation with java -version to start developing java applications.

Download and extract the Apache Maven binaries, place the inner folder in a Maven directory on the C drive, and verify with mvn -v.

Create a new Spring starter project named water watch, configure the group and package, and add Spring Boot dev tools, Lombok, Spring Data JPA, PostgreSQL driver, and Spring Web.

Modify the pom.xml to add dependencies such as Hibernate Spatial, PostGIS, Apache Commons, Jackson data type js, and the families library to enable spatial queries, templates, and JSON data handling.

Modify the application properties to store database connections, configure Postgres with JPA, and test the Spring Boot app to verify a Hello World message on port 880.

Create the model class for the water consumption table in a Java MVC app, mapping the database with id, suburb, average monthly kilolitre, and a geospatial point.

Create a water consumption repository interface by extending JPA repository, importing the model, and defining a native query to return the top 10 suburbs by average monthly kilolitre values.

Create a JacksonConfig utility class to configure the JTAC module, enabling geospatial data types for the point data type in the map model.

Create a service interface in the service package to define query functions for data and expose them across the app, including full data retrieval and top 10 consumers via JPA.

Implement the water consumption service by creating the service implementation class, autowiring the repository, and implementing find all and find top 10 consumers via JPA queries.

Download the sample dataset by locating the repository, saving the raw file, and placing it into the project resources folder, then prepare to extract data in the next video.

Extract, transform, and load csv data into a spatial table using Apache Commons CSV, converting types and building a point from latitude and longitude for storage in water consumption model.

Create a rest controller in a Spring Boot app to expose a water consumption API with endpoints for all data and top 10 consumers.

Download the front-end static files from GitHub, unzip the app folder, and copy it into the project's static directory, then create the layout and index templates.

Create a layout page using an HTML5 template as a base, defining header, sidebar, and main content, and wire in Bootstrap, AdminLTE, and Leaflet assets.

Create the index.html file, implement the front-end logic, and configure a shared layout inheritance while loading Leaflet and a charting library to render the map and legends.

Create your first leaflet map by embedding a div with id map, initializing a base map from OpenStreetMap humanitarian, and setting the view to coordinates with zoom 11.

Create multiple base maps by initializing base layers and adding a layers control to switch between them. Label each base map and test changes in the browser.

Visualize suburb water consumption on a map with circle markers sized by kilolitres and popups showing name and value, using data from a rest API organized into a point layer.

Classify suburb markers by the average monthly kilolitre value using a class layers overlay, coloring green for <9, teal for >8 and <11, and red for ≥11.

Create a custom legend in Leaflet with small, medium, and large circle markers for water consumption in kilolitres, including range labels and a bottom-right legend control.

Create a legend for a bar chart showing the top 10 suburbs by water consumption in kilolitres, using a canvas and a map control positioned at the top right.

Create a horizontal bar chart of the top 10 water consumers by suburb, using an ajax api call and json data for suburb names and monthly kilolitres.