About this set
A store locator with a search box, a result list and an illustrated city map with numbered pins, plus a pick-up point chooser. The locator lists seven cafés; choosing a café in the list enlarges its pin and labels it on the map, and choosing a pin selects the matching list item and scrolls it into view, so both sides stay in step. Typing in the search box filters the list and the pins together, updates a live result count and shows a message when nothing matches. Every café has a Get directions link that opens a Google Maps directions URL with the café’s coordinates, which hands off to the visitor’s maps app on phones. The map itself is an inline SVG drawing of streets, water and parks, not to scale and with no tiles, and the pins are buttons positioned in percent so they stay put at any width. The pick-up point chooser is a set of radio buttons beside a mini map where the chosen point grows and changes colour through :has(), with no JavaScript. Swap the drawing for a screenshot or the Leaflet set when you need real streets.
What’s included
- List and pins select each other, with aria-pressed on both
- Search filters the list and pins and announces the result count
- Get directions links with coordinates for each store
- Pins positioned in percent over an inline SVG map
- Pick-up chooser highlights its map dot with :has() and no JavaScript
Accessibility
The search field has a visible label, and the result count is a polite live region. List items and pins are real buttons with aria-pressed, the pins named after their café, and directions links say they open a new tab. Every control has a visible focus outline, the decorative map is hidden from assistive technology, and pin and list transitions stop under prefers-reduced-motion.
Customise it
Set --pin on .sl-pin for the pin colour and adjust the left and top percentages for each store. The accent and borders of the list come from the --sl-accent and --sl-line custom properties, Bootstrap variables or Tailwind colour classes.
