All work

Demonstrator / work sample

An accessible, self-updating offer map for a national advisory network

A deployed prototype you can test in the browser. It is a work sample, not a customer project and not a product.

The problem

A national advisory network publishes an interactive map of well over a thousand local and nationwide support offers. Keeping it current depended on a manual pipeline: people submitted an online form, the team reviewed each entry by hand, and the result was transferred into a spreadsheet that fed the map.

At that volume the chain stopped scaling. Every update cost editorial time the team could not spare, and the public map had at times carried a visible notice that updates were delayed.

The approach

  • Rebuilt the data path: the spreadsheet step gave way to a documented relational schema, automated geocoding, and a submission form where contributors create and edit records directly.
  • Made the map accessible and mobile-first: an external single-page app embedded via iframe, rendered on OpenStreetMap tiles with no US-cloud dependency, with client-side filtering by category, sub-category, topic, and radius.
  • Targeted WCAG 2.1 AA: keyboard-operable, labelled filter controls, and the result list as an equal-rank alternative to the map for screen-reader users. Verified through automated accessibility checks and a mobile performance gate.
  • Interactive offer map of Germany with clustered location markers; each cluster shows the number of offers it contains.
    Country-wide map with category-aware marker clustering.
  • Offer map with the filter bar showing active modality and target-group filters; the clustered markers update to the filtered subset.
    Filtering by modality and target group narrows the map live.
  • Offer map showing a postal-code radius search: a 50-kilometre search circle around a city centre with the matching markers inside it.
    Postal-code and radius search with a visible search circle.
  • Offer map with the list-view panel open beside it, presenting the same results as a keyboard- and screen-reader-accessible list.
    Accessible list view as an equal-rank alternative to the map.
  • The offer map on a phone-width screen: the filter controls stack vertically above the map.
    Responsive mobile layout: filter controls stack above the map.

What the demonstrator shows

The demonstrator covers the public-facing half of the system: data model, search-and-filter UX, map rendering with category-aware clustering, radius search, and the accessible list view. All of it is directly testable in the browser.