Places Map

The map records cities, regions, and meaningful stops without exposing private addresses. Visitors can filter the personal atlas by place type, move around the map, and open individual pins for more context.

This is the same feature used in the Places section of the site, shown here as an implementation example rather than only as an autobiographical page.

Maps are easy to make visually impressive and easy to make inaccessible. The difficult part is keeping filter state, visible pins, selected details, and keyboard focus in sync while preserving useful information when the third-party map fails.

That combination appears in travel tools, asset tracking, field-service products, property interfaces, and any application that presents location as part of a larger data model.

The route passes a typed, static place dataset into a Svelte island. MapLibre and its stylesheet load only in the browser, keeping the static route server-renderable and avoiding a map-library dependency in the initial HTML.

The component projects the typed place coordinates into custom DOM pins, rather than making the map library own the entire interaction layer. This keeps the controls, popovers, filter state, and focus restoration in the component's own accessible markup.

If MapLibre or its tile style fails, the feature presents an explicit error state while preserving the place-list fallback. The map's visible chrome uses Chameleon tokens, while map tiles remain external subject matter.

• Client-only loading of a large browser map library within a static Astro route
• Typed place data separated from map rendering and presentation state
• Map pin, filter, popover, and keyboard-focus coordination in one local feature
• A usable degraded path when map infrastructure is unavailable
• Theme-aware interface chrome around third-party cartography