PATTERN: Map Canvas (consumer-only)
COMPOSES: map-pin (pin markers), caller-supplied SVG canvas
Wrapper for the providers Map view. Provides absolute-positioned controls (Map/Satellite toggle top-left,
zoom +/- bottom-right), a pin overlay layer, optional selected-school popover, and attribution footer.
Height is controlled by the caller — add style="height: Npx" or a size utility to the root element.
Absolute pin positions in the preview use inline style="left/top" percentages — this is unavoidable
for data-driven map overlays.
Anatomy: map-canvas (root) wraps an SVG terrain canvas, a map-canvas-toggle strip (top-left), and map-canvas-zoom buttons (bottom-right).
<div class="map-canvas" style="height: 400px;"> … </div>
Pins: map-canvas-pins overlay layer (pointer-events:none) with child map-pin spans.
Pin positions use inline style="left/top" percentages — justified because pin coordinates
are data-driven (server-rendered lat/lng → percentage offsets).
Popover: map-canvas-popover (white card with shadow) + map-canvas-popover-arrow (downward triangle).
The top/left inline styles are data-driven (which pin is selected), not presentational.
<div class="map-canvas-popover" style="top: 20%; left: 8%;"> … <div class="map-canvas-popover-arrow"></div></div>
Attribution: map-canvas-attribution — bottom-right, 10px neutral ink, 85% white bg, 2px radius. Mimics the Google Maps attribution strip.
<div class="map-canvas-attribution">Map data ©2025 · Terms of Use</div>