Property map
The property map block used on view-quote and view-transaction. The header above the map is empty;
every control is overlaid on the map itself: 2D / 3D top-left, Map / Satellite
top-right, Google Earth bottom-left, and (in street view) Move with device top-right.
All overlays use the same chrome — semi-transparent white pill, soft shadow, hairline ring — so they read as a coherent
set of controls. Source: _PropertyMap.cshtml /
_PropertyMapDual.cshtml.
Segmented pill toggle
Two mutually-exclusive options inside a single pill. The dark indicator slides under the active label
via translate-x-0 / translate-x-full on a transition. Use this for any binary
view-mode choice — the same chrome powers Map / Satellite, 2D / 3D, and the £ / % toggle on the
discount UI.
Pill button with embedded toggle
For a control whose state is binary but isn't a simple either/or — Move-with-device is on or off. A standard koala-style slider sits inline next to the label so the on/off state is unambiguous. The whole pill is the click target.
Overlay link
External-link pill placed at the bottom-left corner of the map. Same chrome as the segmented toggle so all overlaid controls read as a coherent set.
Map container
Containers are w-full h-[440px] rounded-xl overflow-hidden border. The container is
relative; controls are absolute with a positive z-10. Top
margin is mt-8 to give the map clear breathing room from the property details above —
the header bar is no longer there to provide it.
Map example
The full layout: 2D / 3D pill top-left, Map / Satellite pill top-right, Google Earth pill bottom-left. Real instances render a Google Maps tile inside the same container; here the background is a styled placeholder so the Design system stays Google-Maps-API-free.
Street view example
Street view container with the Move-with-device pill in the top-right. Background here is a gradient stand-in for the Google Street View panorama.