Map Rotation

Current Implementation: SVG Billboard Pattern

Mall-level rotation (mapRotation degrees) is applied to the floor plan view:

1. Content rotation: <g transform="rotate(N, centerX, centerY)"> wraps all floor plan content (units, amenities, walkways, navigation route)
2. Label billboard: Each store logo and label gets rotate(-N, ...) — inverse rotation to keep text upright regardless of map orientation
3. ViewBox expansion: expandViewBoxForRotation() extends the SVG viewBox to prevent content clipping at corners when rotated

This is the standard approach used by all mapping libraries — labels always face the user regardless of map orientation.

Alternatives Evaluated

CSS Transform on Container Div

Rejected. Problems:

• Pointer coordinates break — touch/click events need manual inverse-transform mapping through the CSS matrix, which is fragile and error-prone
• Corner clipping — the rectangular div clips rotated content at its edges, cutting off map corners
• No selective exclusion — can't keep UI controls (zoom buttons, etc.) unrotated while rotating the map
• No performance gain — browser still transforms every pixel

Canvas/WebGL Renderer (Mapbox GL Style)

Not currently justified. Would handle rotation in the GPU pipeline, eliminating per-element counter-rotation. However:

• Requires full rewrite of VectorSvgContent (currently ~450 lines of SVG JSX)
• SVG performance is adequate for current mall sizes (up to ~2,800 polygons on Chadstone)
• Only worth pursuing if profiling shows SVG rendering as the bottleneck

Decision

SVG billboard rotation is the correct approach. Do not refactor unless SVG performance is proven to be the bottleneck on dense floors.