QGIS

Google Earth

Make Your First Webmap

Create an interactive weather map with real-time data visualization and microcontroller integration

What You'll Need

QGIS or Google Earth

Thonny IDE

OpenWeatherMap API

ESP32 Microcontroller

DHT11 Sensor

Breadboard & Wires

Set Up Your Development Environment

Install QGIS and prepare your workspace for creating professional geographic visualizations.

Install QGIS from official website (qgis.org)
Create new project directory for your webmap
Initialize .shp files for vector data
Import and process points and lines to make your first map

i Pro Tip: QGIS supports both .shp and .kml formats - we'll be working with .shp for better data control.

Watch Tutorial Video

Create Your First Weather Data Visualization

Use QGIS color gradients to show weather data differences across Alberta recording stations.

Download the Alberta temperature data and municipality boundaries files below
Apply color gradient to show differences in weather data points
Use Alberta weather recording stations as data source
Create the gradient map with professional styling
Export your completed map to PDF format

Email your PDF to:

Ages 8-12: Complete this step and email your PDF to enter the prize draw.
Ages 13+: Complete Steps 2, 3, and 4 (70% completion) to enter the prize draw.

First Milestone Complete

Watch Tutorial Video Download Alberta Temperature Data Download Alberta Boundaries

Configure Your Interactive Web Map

Transform your QGIS project into a live, interactive web application with weather data overlay.

Use QGIS2Web plugin to export HTML container
Configure location boundaries and place points
Sign up for OpenWeatherMap API access
Apply heatmap visualization over your original map

! API Setup Required: Create your free OpenWeatherMap account before proceeding.

Second Milestone Complete

Watch Tutorial Video

Microcontroller Integration

Connect real hardware to your web map for live, local weather data collection and display.

PART 1: Connecting DHT11 Sensor to ESP32

Unpack microcontroller components: ESP32, breadboard, wires, DHT11 sensor
Wire DHT11 sensor to ESP32 according to the circuit diagram
Install required libraries in Thonny IDE
Upload DHT11 Temperature code to test the sensor connection

! Hardware Safety: Double-check all connections before powering on your ESP32.

Watch Part 1 Video DHT11 Code

PART 2: Connect ESP32 to Webmap

Program ESP32 to create a local web server
Configure ESP32 DHT11 webserver code in Thonny
Create ESP32 overlay file for map integration
Add integration line to your webmap's index.html
Test real-time data display on your web map

Watch Part 2 Video ESP32 Webserver Code ESP32 Overlay Index Line

Final Milestone Complete - 70% Achievement
Ages 13+ have completed all required steps. Email your work to enter the prize draw.

All Milestones Complete

Set Up Your Development Environment

Access Google Earth online and prepare your workspace for creating interactive geographic visualizations.

Access Google Earth online (earth.google.com)
Create new project directory for your webmap
Initialize .kml files for geographic data
Import and process points and lines to make your first map

i Pro Tip: Google Earth works directly with .kml files - perfect for web-based mapping projects.

Create Your First Weather Data Visualization

Use Google Earth's styling tools to visualize weather data differences across Alberta recording stations.

Apply color coding to show differences in weather data points
Use Alberta weather recording stations as data source
Create styled markers with weather information
Export your completed map to KML format

Email your KML file to:

Ages 8-12: Complete this step and email your KML to enter the prize draw.
Ages 13+: Complete Steps 2, 3, and 4 (70% completion) to enter the prize draw.