Interactive Winter-Themed City Capacity Map
Budget: €30 – €250 EUR
Project Brief: Interactive City Capacity Map for Only-Strata
Overview
We are building a visually engaging, interactive, and branded map that displays 27 cities across the Lower Mainland and Fraser Valley (BC). Each city will be clickable or hoverable, displaying unique data tied to our business operations — specifically strata capacity levels and service availability.
This map will be deployed on our website (hosted via Netlify or embedded via Wix) and must be mobile-responsive, visually clean, and accurately reflect real city outlines.
Objective
Create a winter-themed interactive map using real geographic boundaries of 27 cities. When a user hovers or clicks a city, a tooltip or side panel should display capacity data for that area.
Target Cities (27)
Vancouver
South Vancouver
West Vancouver
North Vancouver
Burnaby
Coquitlam
Port Coquitlam
Port Moody
Maple Ridge
Pitt Meadows
Surrey
Cloverdale
White Rock
Langley Township
Langley
Abbotsford
Mission
Chilliwack
Hope
Agassiz
Kent (Agassiz)
Ladner
Tsawwassen
Richmond
Annacis Island
UBC
Anmore
Data to Display Per City
Each city will show:
Capacity Level (in %)
Status: Accepting New Clients
Last Update: June 12, 2025
Example:
Burnaby
Capacity: 88%
Status: Accepting New Clients
Last Updated: June 12, 2025
Full list of capacity % available if needed.
Functional Requirements
Map Interactivity
Real city polygons (not placeholders or boxes)
Hover or click to show a tooltip or side panel
Optional: color cities by capacity level (grey/blue/white/black theme)
Style & Branding
Winter aesthetic (frosted tones, snowflakes, minimalistic)
Font: DIN Neuzeit Grotesk or similar
Responsive design (desktop + mobile)
Logo in top-left or top-right corner
Deployment
Exportable as HTML/CSS/JS package (to be uploaded to Netlify)
Embed-ready via <iframe> or custom JS snippet for Wix
Deliverables
A ZIP package containing:
index.html with working interactive map
style.css (winter-themed + responsive)
script.js with hover/click functionality
27 SVG or GeoJSON city outlines, properly scaled and styled
Deployment-ready version
Fallback static image (optional)
Optional Enhancements
Filter by “High Capacity” / “Available”
Legend (toggleable)
Downloadable PDF map with city data
API hook-up for live updates (future)
Notes / Challenges
Some cities (like Cloverdale, South Vancouver, Annacis Island) may not have official standalone boundaries; freelancer should derive or approximate these logically.
Avoid overlapping shapes — clear delineation needed
Use Mapbox, Leaflet, or inline SVG with accurate city paths
Timeline
Initial interactive version: 1–2 days
Full polished version with responsiveness and styling: 3 days
Overview
We are building a visually engaging, interactive, and branded map that displays 27 cities across the Lower Mainland and Fraser Valley (BC). Each city will be clickable or hoverable, displaying unique data tied to our business operations — specifically strata capacity levels and service availability.
This map will be deployed on our website (hosted via Netlify or embedded via Wix) and must be mobile-responsive, visually clean, and accurately reflect real city outlines.
Objective
Create a winter-themed interactive map using real geographic boundaries of 27 cities. When a user hovers or clicks a city, a tooltip or side panel should display capacity data for that area.
Target Cities (27)
Vancouver
South Vancouver
West Vancouver
North Vancouver
Burnaby
Coquitlam
Port Coquitlam
Port Moody
Maple Ridge
Pitt Meadows
Surrey
Cloverdale
White Rock
Langley Township
Langley
Abbotsford
Mission
Chilliwack
Hope
Agassiz
Kent (Agassiz)
Ladner
Tsawwassen
Richmond
Annacis Island
UBC
Anmore
Data to Display Per City
Each city will show:
Capacity Level (in %)
Status: Accepting New Clients
Last Update: June 12, 2025
Example:
Burnaby
Capacity: 88%
Status: Accepting New Clients
Last Updated: June 12, 2025
Full list of capacity % available if needed.
Functional Requirements
Map Interactivity
Real city polygons (not placeholders or boxes)
Hover or click to show a tooltip or side panel
Optional: color cities by capacity level (grey/blue/white/black theme)
Style & Branding
Winter aesthetic (frosted tones, snowflakes, minimalistic)
Font: DIN Neuzeit Grotesk or similar
Responsive design (desktop + mobile)
Logo in top-left or top-right corner
Deployment
Exportable as HTML/CSS/JS package (to be uploaded to Netlify)
Embed-ready via <iframe> or custom JS snippet for Wix
Deliverables
A ZIP package containing:
index.html with working interactive map
style.css (winter-themed + responsive)
script.js with hover/click functionality
27 SVG or GeoJSON city outlines, properly scaled and styled
Deployment-ready version
Fallback static image (optional)
Optional Enhancements
Filter by “High Capacity” / “Available”
Legend (toggleable)
Downloadable PDF map with city data
API hook-up for live updates (future)
Notes / Challenges
Some cities (like Cloverdale, South Vancouver, Annacis Island) may not have official standalone boundaries; freelancer should derive or approximate these logically.
Avoid overlapping shapes — clear delineation needed
Use Mapbox, Leaflet, or inline SVG with accurate city paths
Timeline
Initial interactive version: 1–2 days
Full polished version with responsiveness and styling: 3 days