Skip to main content

Blocks · OT_LocationListingBlock

LocationListingBlock

CMS-driven, vertical-agnostic location directory pulled from Location Profiles. Three toggleable views: a Mapbox dark map paired with a synchronized scrollable location rail (click a marker or rail card to fly + open its popup), an image-plate card grid, and a compact list. Client-side search across name / label / address, and a single-select label filter derived dynamically from the loaded set — never a fixed list, "All" always first. Automatically scoped to the current site via the Site Key field on each profile. Custom brand-beacon markers and fully-restyled dark-glass popups. In production, addresses are geocoded via the Mapbox API at render time (24h ISR cache); the showcase uses static fixtures with pre-resolved coordinates, so it makes no API calls.

In production, locations are fetched at render time from Location Profiles, automatically scoped to the current site via the Site Key field, and their addresses geocoded via the Mapbox API (cached 24h). The showcase uses static fixtures with pre-resolved coordinates so every view, filter, and empty state is exercisable with no API calls. Switch views with the segmented control; in the map view, click a marker or a rail card to fly to it and open its popup. The label chips list only the labels present in the loaded set.

Map · canvas · search + label filter

The signature view. A dark Mapbox map paired with a synchronized location rail: selecting a rail card flies the map and opens a restyled dark-glass popup; clicking a marker highlights its rail card. All five locations across both groups; the rail scrolls beside the map on desktop and stacks beneath it on mobile. Memorial and Boston carry imagery; the rest use the designed brand-fallback plate.

Find a location

Search by name, label, or address, or filter by location type.

5 locations

Loading map…

Grid · 3 columns · canvas · search + label filter

The editorial card view. Landscape image plates with an accent label badge; hover a card to lift it and slide the glass footer up, revealing the address and a details excerpt. Two cards show imagery, three show the branded fallback plate.

List · surface · search + label filter

The dense list view on the surface ground: a flush square plate, name + soft label badge, address, and a chevron link affordance. Hover a row to bring its border to brand with a faint brand wash and slide the chevron right.

Map · tall · surface · no controls · curated subset

The curated single-site use case on a brand page: a focused set of locations, the view toggle and controls suppressed, and the map opens taller. Three locations frame to a tight bounds.

Where to find OptiMedical

Loading map…

Grid · 2 columns · surface · compact · no controls · curated subset

The Our Offices presentation on an about page. Two columns give each plate more width; compact density tightens the footer. One image plate, one fallback.