Real Estate Listings Map Block for React

The row reports its scroll position. On every scroll the block finds the card whose start edge is nearest the row's start edge (and the last card once the row is scrolled to its end) and rings that card's pill. It works in a right-to-left page too, because the distance is measured from the row's own start. Pressing a pill does the reverse: it scrolls the row with scrollBy so the card sits at the start, and never calls scrollIntoView, which would move the page.

The map has to read the position of the row, and the catalog's Carousel hides its scroller behind its own page API on each base. A scroll-snap list gives the same swipe, the same snapping and the same keyboard scrolling on all seven targets with no per-library code. If you want autoplay, dots or looping, swap the list for the Carousel and drive the current card from its page callback instead of onScroll.

It leaves the row, and the row returns to its first card. Its pill stays where it is on the map, hidden and out of the tab order, so nothing else moves. Every type has at least two homes, so the row is never empty.

Yes. The row is a focusable scroll region, so the arrow keys scroll it; each card is a button that marks it; Previous and Next are named buttons that step one card and stay in the tab order at the ends. The pills are hidden from assistive technology and skipped by Tab because the cards say the same things in text. A polite message speaks the card once the row settles.

All of it. The listings are typed sample data, prices are integer cents and dates are fixed ISO strings. In your app feed LISTINGS from your search, keep the card ids equal to the pin ids, and open a card's own page from its button.

The type toggle wraps above the map, the map keeps its full width at a fixed height and the cards are 16 rem wide, so the next card always peeks in from the end of the row. Swiping the row scrolls the row; the page keeps scrolling over the map.