Skip to main content
OptiTech

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. Scope it to one vertical with the Group Tag Filter (e.g. "optimedical"). 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, scoped by the Group Tag Filter, and their addresses geocoded via the Mapbox API (cached 24h). The showcase uses static fixtures with pre-resolved coordinates across two groups, 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

Map unavailable

Set NEXT_PUBLIC_MAPBOX_TOKEN to enable the map. The list and grid views work without it.

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 · scoped to OptiMedical

The curated single-vertical use case on a brand page: the Group Tag Filter restricts the set to one group, the view toggle and controls are suppressed, and the map opens taller. Three medical locations frame to a tight bounds.

Where to find OptiMedical

Map unavailable

Set NEXT_PUBLIC_MAPBOX_TOKEN to enable the map. The list and grid views work without it.

Grid · 2 columns · surface · compact · no controls · scoped to offices

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.