Building Web GIS Apps with C# ASP.NET CORE MVC and Leaflet

Download and install PostgreSQL 13 on Windows, install Stack Builder add-ons including PGA agent, ODBC driver, and PostGIS, then create a sample spatial database to verify PostGIS works.

Create a spatial database with pgAdmin by creating a database, configuring a login role, granting privileges, and enabling postgis extensions and postgis topology extension for spatial data.

Install osgeo4w on Windows to access geospatial tools and libraries. Download the network installer, configure security settings, run express install, set environment variables, and restart to apply.

Install the .NET SDK version 6, download the latest long-term support release, and verify the installation with the dotnet version command to enable web GIS development.

Download and install the Visual Studio Code IDE, create a projects folder with a what to watch subfolder, then install C# extensions and set the default theme to begin developing.

Create a starter ASP.NET MVC 6 project with dotnet, open it in code, run the app to verify the template, then prepare to build your own application.

Install entity framework core packages to map tables to C# objects and enable read and write operations, using dotnet add package commands and verify in the project.

Create a C# model class named water consumption with fields Eid, neighborhood, suburb group, average monthly kilolitre (int), and coordinates (string), including getters and setters, mapping to a Postgres table.

Create a data context interface to connect to the database, enable reading and writing to the consumptions table in Postgres, and provide a save changes function.

Create and implement the data context class, add using directives, wire the data context interface with a constructor, and register the data context in the program file under services.

Configure and save a new connection string for the Postgres database in app settings, then add the configuration in program.cs and save the changes.

Create and apply database migrations, then update the database. Verify in pgAdmin that a Postgres table is created and its fields match the model.

Create a data repository interface in C# to define map-ready queries, including get all and get top 10 consumers by average monthly kilolitre for displaying on the map.

Implement the repository class by injecting the data context, define data queries including top 10 consumers by average monthly kilolitre using LINQ, and register the repository in program.cs.

Download the dataset from the water watch repository, locate the 2021 water consumption json file, and save it as json, then transform the data into the required bound table format.

Learn to extract, transform, and load JSON data into a spatial table in a c# asp.net core mvc app using NewtonSoft.Json, reading from a feature collection and populating the repository.

Create a rest api controller to expose endpoints for getting all data and the top 10 water consumers, backed by a repository and json responses for map data.

Download and extract the front-end static files from the repository, then copy the app folder into your project root and verify the assets are ready for use.

Modify the layout using the Admiralty template with a green skin, adding a wrapper and side bar, and place content in the main section to reuse the layout across pages.

Create the index page by adding the Leaflet library and jQuery references, inserting custom styles, and preparing scripts to build maps using Leaflet on the page.

Create your first Leaflet map by configuring a div container, loading the base map, and initializing the default view and zoom. Test by running the application to confirm success.

Learn to create and switch between multiple base maps by initializing base layers, labeling each map, and adding a layer control in a Leaflet-based web GIS app.

Fetch neighborhood data via a url endpoint using jQuery's getJson, convert coordinates to arrays, and render multi polygon neighborhoods on a Leaflet map, then style by average monthly kilolitre.

Style the map by applying a color gradient to polygons based on average monthly kilolitre value, highlighting neighborhoods with higher water use in darker greens.

Add interactivity to a static map by implementing hover-driven pop up that shows neighborhood details, including sub group, name, and water usage, with mouseover and mouseout styling for polygons.

Create a legend for the map with a Leaflet control in the bottom-right, mapping color grades to water consumption in kilolitres and displaying their values.

Create a bar chart legend as a Leaflet control placed in the top right corner, using a canvas to draw bars and the title 'top 10 consumers in kilolitres'.

Create a horizontal bar chart displaying the top 10 water-consuming neighborhoods by using Ajax to fetch average monthly kilolitre values from a top 10 endpoint and render with chalkboard.js.