Canvas
Venue, block, seat, three levels, zero lost buyers.
Buyers start at the whole venue, drill into a block, and land on their row with animated transitions. Developers drive the same journey programmatically through a real zoom API.
Sound familiar?
Lost in a 5,000-seat map
A wall of dots isn't selection, it's orientation failure. Level-based drill-down means buyers always know where they are.
Jump-cut zooms
Instant teleports between overview and seats disorient. Animated transitions with tunable speed keep the mental map intact.
Zoom you can't drive
A map that only zooms by pinching fights your UX. zoomToBlock, zoomToZone, and friends let your flow lead the camera.
Orientation as a feature
01Three named levelsVENUE, BLOCK, and SEAT are explicit states. The map always knows which story it's telling.
02Programmatic camerazoomToVenue, zoomToBlock, zoomToZone, zoomToSelection, zoomToBBox: your UI drives, buyers follow.
03Section drill-downEntering a section polygon reveals its seats; leaving returns the overview. Big venues stay navigable.
04Events on every transitionZoom-level changes fire events your app can react to: breadcrumbs, legends, analytics.
05A polite way backThe zoom-out button and background click return to the venue view, no dead ends.
06Tuned to your venueMin and max zoom plus animation speed are configuration, matching the map's feel to its scale.
The journey down
- 01See the venueThe whole layout with its sections, zones, and focal point, orientation first.
- 02Drill into a blockTap a block or call zoomToBlock; the camera glides, the level change announces itself.
- 03Pick the seatIndividual seats with real states at reading distance.
- 04Glide back outOne button returns to the overview. Buyers never feel trapped.
Fly through the demo map
Three levels of zoom, live in the demo.