WBGT EXPLORER

WBGT Explorer is a web-based dashboard for visualising Wet Bulb Globe Temperature (WBGT) measurements collected by field sensors across Canada.

Sensors report readings to a MariaDB database. The dashboard reads that database in real time and presents an interactive map, statistical summaries, and a diurnal (hourly) distribution chart for each sensor site.

The interface is styled after the retro SEGA Genesis game Theme Park, using pixel fonts, saturated greens and golds, and a game-HUD panel layout.

The application is a classic three-tier web app running on a single server:

[ Browser ]
    │  HTML + CSS + JavaScript (Leaflet, Chart.js)
    │  Fetches JSON from PHP API endpoints
    ▼
[ Apache / PHP 8.4 ]
    │  api/sites.php        — sensor index
    │  api/measurements.php — stats + readings
    │  api/hourly.php       — hourly distribution
    ▼
[ MariaDB 11.8 ]
    database: weather
    table:    wbgtprod

There is no build step, no framework, and no Node.js dependency — just PHP files served directly by Apache.

All JavaScript libraries are loaded from public CDNs — no local installation needed.

The Wet Bulb Globe Temperature (WBGT) is a composite index used to estimate heat stress on the human body, accounting for temperature, humidity, wind, and solar radiation.

This system uses the outdoor WBGT formula:

The 0.7 weighting on wet bulb reflects that humidity and evaporative cooling contribute most to heat stress.

Sensor dots and WBGT values throughout the UI are colour-coded by risk level. The active preset is selected from the dropdown in the WBGT RISK SCALE panel on the map page. Changing the preset instantly recolours all markers, tooltips, and chart bars.

The General (Default) preset uses the following levels:

For all preset definitions and their sources, see the Threshold Presets section.

Threshold presets are defined in js/thresholds.js. This file is the single place to edit, add, or remove presets — no changes to app.js or index.html are needed.

AVAILABLE PRESETS

ADDING A CUSTOM PRESET

Open js/thresholds.js and add a new key to the THRESHOLD_PRESETS object:

my_custom: {
  name: 'My Custom Scale',
  source: 'Internal company guideline',
  levels: [
    { max: 24,       color: '#22cc44', label: 'Safe',    range: '< 24 °C',    cls: 'wbgt-low'  },
    { max: 30,       color: '#f5c518', label: 'Caution', range: '24–30 °C',   cls: 'wbgt-mod'  },
    { max: Infinity, color: '#ee1100', label: 'Danger',  range: '≥ 30 °C',    cls: 'wbgt-high' },
  ],
},

The new option will appear in the dropdown automatically on the next page load — no other changes required.

LEVEL OBJECT FIELDS

HOW SWITCHING WORKS

Selecting a preset from the dropdown calls applyPreset(key) in app.js, which:

1. Replaces the active THRESHOLDS array with the new preset's levels
2. Calls marker.setStyle() on every stored marker to update fill colours
3. Updates all marker tooltips to reflect the new risk label
4. Re-renders the hourly chart bar colours
5. Re-renders the legend list and source description

No page reload or API call is required.

Database: weather  |  Table: wbgtprod

RECOMMENDED INDEXES

For best query performance with large datasets, the following indexes are recommended:

-- Already present (unique timestamp):
ALTER TABLE wbgtprod ADD UNIQUE INDEX idx_ts (timestamp);

-- Recommended for fast device queries:
ALTER TABLE wbgtprod ADD INDEX idx_device_ts (device_name(32), timestamp);

-- Recommended for sites map query:
ALTER TABLE wbgtprod ADD INDEX idx_lat_lng (latitude, longitude);

All database settings live in config.php at the project root:

define('DB_HOST', 'localhost');   // MariaDB host
define('DB_NAME', 'weather');    // Database name
define('DB_USER', 'wbgtprod');   // MySQL user
define('DB_PASS', '...');        // MySQL password

The getDB() function returns a lazily-created PDO singleton. All API scripts call this function — credentials are never exposed to the browser since PHP files are never served as plain text.

TIMEZONE

The hourly distribution chart uses FROM_UNIXTIME() which inherits the MariaDB server's timezone. To use a specific timezone, set it in MariaDB:

SET GLOBAL time_zone = 'America/Toronto';

GET JSON Returns all unique sensor sites with location and summary statistics.

PARAMETERS

None.

RESPONSE

JSON array. Each element:

EXAMPLE

[
  {
    "device_name": "wbgt1",
    "latitude": 43.140462,
    "longitude": -79.27035,
    "reading_count": 195767,
    "avg_wbgt": 21.3,
    "last_reading": 1760207580,
    "first_reading": 1745431613
  }
]

GET JSON Returns statistics and up to 500 recent readings for a single sensor within a date range.

PARAMETERS

RESPONSE

{
  "stats": {
    "count": 4320,
    "approx_median": false,
    "avg":    { "WB": 18.5, "BG": 20.1, "AT": 19.2, "RH": 78.4, "WBGT": 18.9 },
    "median": { "WB": 18.2, "BG": 19.8, "AT": 18.9, "RH": 77.0, "WBGT": 18.6 },
    "min":    { "WB":  5.0, "BG":  5.2, "AT":  5.1, "RH": 45.0, "WBGT":  5.1 },
    "max":    { "WB": 28.1, "BG": 34.0, "AT": 31.0, "RH": 98.0, "WBGT": 28.8 }
  },
  "data": [
    {
      "timestamp": 1760207580,
      "WB": 17.1, "BG": 17.3, "AT": 17.7,
      "RH": 93.1, "WBGT": 17.2
    },
    ...  // up to 500 rows, newest first
  ]
}

approx_median is true when the range contains more than 5 000 rows; in that case the median is calculated on the most recent 5 000 rows only.

WBGT in the data array is pre-calculated server-side: ROUND(0.7×WB + 0.2×BG + 0.1×AT, 1).

GET JSON Returns WBGT aggregated by hour-of-day (0–23) for the diurnal distribution chart.

PARAMETERS

RESPONSE

{
  "hourly": [
    null,                        // hour 0 — no data
    { "hour": 1, "count": 182,
      "avg_wbgt": 14.2, "min_wbgt": 9.1, "max_wbgt": 22.3,
      "avg_at": 14.8, "avg_rh": 85.1 },
    ...                          // 24 elements total; null = no readings that hour
  ]
}

Hours with no readings in the selected range are returned as null. The frontend chart skips null entries (bars not drawn).

Hour values use the MariaDB server's local timezone via FROM_UNIXTIME().

GET CSV Streams all readings for a sensor in a date range directly to the browser as a downloadable CSV file. No row limit — exports the full dataset.

PARAMETERS

RESPONSE

A Content-Disposition: attachment CSV stream. Rows are ordered oldest-first. A UTF-8 BOM is prepended for Excel compatibility. Filename format:

wbgt_{device}_{from_date}_{to_date}.csv

COLUMNS

The map is rendered by Leaflet 1.9.4 using CartoDB Positron base tiles. A CSS filter on the tile pane gives the tiles their retro green game look:

.leaflet-tile-pane {
  filter: hue-rotate(85deg) saturate(1.8) brightness(0.88) contrast(1.05);
}

Sensor markers are L.circleMarker instances grouped inside a Leaflet MarkerCluster layer. Cluster icons are custom L.divIcon elements coloured by the average WBGT of their child markers.

MAP BOUNDS

The map is constrained to Canada's bounding box:

SW corner: 41.5°N, 145.0°W
NE corner: 84.0°N,  50.0°W

Panning outside this box is resisted by maxBoundsViscosity: 0.85.

MARKER STATES

The hourly distribution uses Chart.js 4.4.0 with a mixed bar + line chart:

The chart is destroyed and recreated each time new data loads to avoid Chart.js animation artefacts from stale datasets.

MAP RESIZE ON SITE SELECTION

When a sensor marker is clicked the layout transitions from a full-width map to a split view:

The transition is animated over 380 ms with a cubic-bezier easing. After the animation completes, map.invalidateSize() is called to force Leaflet to recalculate the map viewport, preventing blank tile areas.

Clicking the ◀ BACK button removes the .has-selection class and returns the map to full width.

DATE RANGE DEFAULT

When a site is selected the date range inputs are pre-filled to the 30 days ending on the site's last_reading timestamp (not the current date). This ensures data is always visible even when the sensor has been offline for an extended period.

READING COUNT BADGE

The header shows a live count of unique sensors and total readings sourced from the api/sites.php response.

Four export buttons appear in the site panel once a location is selected. All exports respect the currently selected date range.

Client-side exports use the Blob API to generate the download entirely in the browser from cached data — no additional network request. The ALL DATA CSV export triggers a direct browser download from the server via fputcsv() streaming and includes a UTF-8 BOM for Excel compatibility.

The risk threshold dropdown in the sidebar is driven entirely by js/thresholds.js. The active preset colours markers, chart bars, tooltips, and the legend simultaneously with no page reload.

See the Threshold Presets science section for the full preset table, field reference, and instructions for adding a custom preset.

DROPDOWN BEHAVIOUR

• Dropdown is populated automatically from all keys in THRESHOLD_PRESETS
• Selecting an option calls applyPreset(key) immediately (no submit button)
• The source description below the dropdown updates to show the selected standard
• The selected preset persists for the lifetime of the page session (resets on reload)

LIVE RECOLOURING

applyPreset() iterates state.markers — an array populated during loadSites() — and calls marker.setStyle({ fillColor }) and marker.setTooltipContent() on each entry. The cluster layer automatically redraws cluster icons with the new colours.

To add a new sensor, simply insert rows into wbgtprod with a unique device_name and valid latitude/longitude values. The map will include the new site automatically on the next page load.

INSERT INTO wbgtprod
  (timestamp, WB, BG, AT, RH, latitude, longitude, device_name, raw_line)
VALUES
  (UNIX_TIMESTAMP(), 22.1, 25.4, 23.0, 68.5,
   45.4215, -75.6972, 'wbgt2', 'raw data here');

Rows where latitude = 0 or longitude = 0 are excluded from the map query — ensure valid coordinates are always inserted.

SITES QUERY

The sites.php query runs a full GROUP BY device_name scan on every page load. With a composite index on (device_name, timestamp) this is fast even at millions of rows. Without the index, response time will grow with table size.

MEDIAN CALCULATION

Medians are calculated in PHP on a maximum sample of 5 000 rows per request. For very long date ranges this is an approximation. stats.approx_median = true in the API response signals this condition to the UI.

MAP MARKERS

Markers are rendered as L.circleMarker using Leaflet's canvas renderer, which handles thousands of points efficiently. The MarkerClusterGroup further reduces visual clutter at low zoom levels.

READINGS TABLE

Individual readings are capped at 500 rows per request (newest first). This is a display limit only — statistics are always calculated over the full selected date range.