Property map
The property map block used on view-quote and view-transaction. One container does both map and
street view; a single four-segment pill at top-right switches between Map /
Satellite / 3D / Street view. The
Google Earth link sits bottom-left in map modes; Move with device
appears top-right (under the segmented pill) in street view. The pill chrome matches the £ / %
discount toggle — solid bg-gray-100 /
dark:bg-gray-700 backdrop with a white slider — so the
language stays consistent across the app. Source:
_PropertyMap.cshtml.
Segmented pill
Four mutually-exclusive options inside a single pill. The white slider tracks the active
label via translate-x-0 / translate-x-full /
translate-x-[200%] / translate-x-[300%] on a transition. Same
chrome as the £ / % discount toggle.
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 in map / satellite / 3D modes. Same chrome as the Move-with-device pill so all overlaid icon-buttons read as a coherent set.
Map container
Container is w-full h-72 sm:h-80 rounded-lg overflow-hidden border border-border-default relative.
Controls are absolute with z-10. The same container hosts both the
Google Maps tile and the Street View panorama — they swap in via Alpine x-show
when the segmented pill changes view.
Example
The full layout: segmented pill top-right drives the view, Google Earth pill bottom-left in map / satellite / 3D, Move-with-device pill (top-right, beneath the segmented pill) in street view. Real instances render Google Maps tiles or a Street View panorama inside the same container; here the background is a styled placeholder so the Design system stays Google-Maps-API-free.