Sutherland — interactive Canada map
Sutherland
- ClientSutherland
- StackSquarespace · Vanilla JS · GeoJSON
- StatusUnder care
Show the country, do not list it
Sutherland works across Canada and wanted that shown rather than listed. The constraint was the interesting part: it had to live inside a Squarespace code block on a site nobody wanted to migrate — which rules out a build step, a framework, or anything fetched at runtime.
One file, no requests
A single self-contained HTML file. No external scripts, stylesheets, fonts or network calls of any kind — paste it into a code block and it works, on a platform with no deployment pipeline to speak of.
Dots for the cities Sutherland operates in, a marker for the Markham head office, and an exaggerated zoom into any province. No side panel, no bottom bar, no cards: the map is the whole interface.
Names on demand, keyboard included
City names stay hidden until hover, keyboard focus or click, so the map reads as a shape first and a directory second. Keyboard access was built in rather than retrofitted — a map that only answers to a mouse excludes people for no good reason.
Self-contained also meant the geography had to be simplified until it fit: coastlines reduced to what still reads as Canada at the size it is actually viewed, not the size it was drawn.
Before you publish
Editor note: this write-up is placeholder. The client, the scope and the stack are real; the figures and outcomes are not measured. Replace them or cut them before publishing.