Creating Smart Maps with Python and Leaflet Windows Version

Install Python on Windows by downloading the latest 3.9 version, adding Python 3.9 to path, running the installer, and verifying the installation in the command prompt.

Install and configure PostgreSQL and PostGIS on Windows, using Stack Builder to add PostGIS and the ODBC driver, and create a spatial database for smart maps.

Create a spatial database in postgres with pgAdmin, including a new database and a login role with privileges. Install PostGIS extensions to enable spatial data storage.

Create a project folder and set up a Python virtual environment to isolate dependencies for the water watch project. Activate the environment, install packages inside it, and deactivate when finished.

Learn to install and configure GeoDjango and GDAL on Windows, install the required components, and set environment variables to enable a spatial Django project.

Install and configure Django and psycopg2 in a Windows virtual environment. Connect Django to a PostgreSQL database using pip and activating the virtual env.

Install Visual Studio Code on Windows to write the code for the application; download from visualstudio.com, run the Windows installer, accept the license, and create a desktop icon.

Create a Django base application by initializing a Water Watch project and a Water Watch app folder, then verify files and prepare to implement models, views, and controllers.

Verify the Django installation by opening the project in Visual Studio Code, installing the Python extension, activating the virtual environment, and running the development server on port 8000.

Connect a spatial database to a Django app by installing geospatial libraries (Django leaflet and JSON support), updating settings, configuring a Postgres connection, and running migrations.

Create a Django admin user with manage.py createsuperuser, using the same username as the database, then run the server and log into the admin portal to verify users.

Create a geospatial Django model to store data in a Postgres spatial table, defining id, suburb, and a coordinates field, then run migrations to apply the schema.

Download and load the water consumption dataset by suburb. Install Excel reading and data manipulation libraries and analyze monthly kilolitres to identify high-use suburbs for potential alerts or distribution control.

Register the geo admin for a Django model, read Excel data into a pandas DataFrame, convert rows to point geometries, and load them into spatial back-end with Leaflet map verification.

Add the django geo json serializer and leaflet configuration to read json spatial data, set a default center and zoom, and configure base maps like open street map.

Develop the front end by adding static files in a Django project, downloading the base template, and integrating the static folder into the water watch app.

Create a templates folder and an app subfolder to store all html files for the Django app's front end, including a layout.html with a default style and theme.

Create a reusable layout for a Django-based map app by defining the doctype, html, head, and body, and loading static files, stylesheets, Django template tags, and Leaflet scripts.

Learn to create the index page for a Django and Leaflet map app by inheriting from the layout, wiring up leaflet and json scripts, and initializing the main map function.

Create and wire the index view by mapping the root URL to the home view, render the index HTML on request, and load the leaflet map in the browser.

Apply leaflet badges and styling to the index page, add left and right sidebars with toggle buttons, initialize the map, and test styling so the map fills the screen.

Create data endpoints for a map app, exposing two JSON datasets—water consumption and top 10 consumers—serialized from the data model and served via HTTP responses.

Display water consumption data on the map by fetching JSON via Ajax from the water consumption endpoint, render circle markers scaled by kilolitre value, and show suburb popups.

Create a bottom-right legend for the map that defines three circle markers by kilolitre ranges (0–4, 5–10, 11–20), with labels and a title to describe data size.

Create the bar chart legend for the application. Render a horizontal bar chart of the top ten water consumers using a canvas inside a leaflet control.

Create a bar chart of top 10 water consumers in kilolitres by fetching JSON data via ajax, parsing suburb labels and kilolitre values, and rendering with chalkboard js on canvas.