Timezone Work Hours Map

Color-coded world map showing work hours relative to Central European Time

Demo
Timezone Work Hours Map screenshot

Technologies Used: Python, QGIS, Tippecanoe, PMTiles, MapLibre GL JS, GeoJSON

Overview

An interactive web map visualizing world timezones with color-coded work hours relative to Central European Time (CET).

Key Features
  • 6 Color Schemes - Switch between High Contrast, Cool Gradient, Warm-Cool, Earth Tones, Rainbow, and Monochrome Blue visualizations
  • Interactive Hover Details - Popup displays timezone name, UTC offset, and CET work hours
  • Fast Performance - GPU-accelerated hover highlighting using MapLibre feature-state API
  • PMTiles Format - Efficient vector tile delivery with HTTP range request support
Technical Pipeline
1. Data Processing

Starting with timezone boundary data from OSM-based sources:

  • Added UTC offset column using Python and pytz library
  • Calculated work_hours_CET field showing local time when it's 09:00-17:00 in CET
  • Processed in QGIS: dissolved by UTC offset, reprojected to Web Mercator (EPSG:3857)
  • Simplified geometry using Visvalingam algorithm (10,000m tolerance)
  • Exported to GeoJSON format
2. Vector Tile Generation

Used Tippecanoe to create optimized vector tiles:

tippecanoe -o world.mbtiles -Z0 -z6 \
  --layer=countries timezones.geojson \
  --layer=countries countries.geojson \
  --drop-densest-as-needed --force

Both timezones and country boundaries are combined into a single "countries" layer for optimal rendering performance.

3. PMTiles Conversion

Converted MBTiles to PMTiles format for web deployment:

pmtiles convert world.mbtiles world.pmtiles

PMTiles enables efficient serving from static hosting with HTTP range request support, eliminating the need for a tile server.

Web Implementation

The interactive map uses:

  • MapLibre GL JS - Open-source vector map rendering library
  • PMTiles Protocol - Client-side tile fetching with range requests
  • Feature-State API - GPU-accelerated hover effects without layer duplication
  • Dynamic Color Schemes - Switchable color ramps defined in styles.js
Color Scheme System

Six pre-defined color schemes map 24 work hour ranges to distinct colors:

  • High Contrast - 24 distinct colors for maximum differentiation
  • Cool Gradient - Smooth cyan-to-yellow progression
  • Warm-Cool - Red (night) to blue (midday) temperature mapping
  • Earth Tones - Natural browns and greens
  • Rainbow - Full spectrum cycle
  • Monochrome Blue - Professional blue-gray scale
Data Sources
Performance Optimizations
  • Geometry simplification reduces file size while maintaining visual quality
  • Vector tiles with zoom levels 0-6 for appropriate detail at each scale
  • Feature-state API eliminates duplicate layers for hover effects
  • PMTiles format enables instant tile loading with range requests
  • Single combined layer reduces rendering overhead
Use Cases
  • Comparing remote working possibilities
  • Scheduling international meetings across timezones
  • Planning communication with distributed teams
  • Business planning for international operations
Interactive Demo
Back to my projects →