Concept redesign of the /map route of simplevents.me built on
kanso-protocol. The goal is to demonstrate
how a single, opinionated design system replaces the current Material + ng-bootstrap +
PrimeNG mix with a coherent, accessible, theme-aware UI.
The original eventsmap-frontend repo is not modified — this is a separate Angular 21
sandbox that consumes kanso from a local clone via file: dependencies.
mamaliev/
eventsmap-frontend/ ← original Angular 17 app (read-only reference)
eventsmap-backend/ ← original Spring Boot API (read-only reference)
kanso-protocol-source/ ← kanso mainline clone, locally built into dist/
simplevents/ ← this repo (Angular 21 + kanso prototype)
# 1. From the kanso clone — install + build the libraries (once, or after pulls)
cd ../kanso-protocol-source
npm install --legacy-peer-deps
npm run build # writes dist/packages/{core,components,patterns}/<name>
# 2. Here — install + serve
cd ../simplevents
npm install --legacy-peer-deps
npm start # http://127.0.0.1:4300/map (port 4300 to avoid clashing with the original simplevents on 4200)Re-run npm run build in kanso-protocol-source whenever you change kanso, then
restart npm start here.
- AppShell via
KpHeaderComponent— logo, primary nav, search, theme toggle, CTA, user menu — replacing the current bespokeapp-header-global. - PageHeader with a
kp-segmented-controlКарта / Список tab pair, replacing the hidden filter-toggle arrow. - FilterBar for active filters with single-source removal — replaces the inline reset link and disconnected chip state.
- kanso DatePicker in
rangemode with built-in presets — replaces PrimeNG<p-calendar>. - Categories as colored chips keyed off
EVENT_CATEGORIES— each event type has its own hex/icon, so the marker on the map reflects category at a glance. Replaces the singlemix_map.pnghorse marker for all 17 categories. - Leaflet marker clustering — overflow at zoom-out is collapsed to clusters (was missing in the original).
- Map ↔ side list sync — the right-hand panel only shows events inside the current map viewport; clicking a card flies the map to it.
- Theme via
data-themewithKpThemeToggleComponent— replaces the hand-rolledbody.dark-themeselector cascade in the originalstyles.scss.
- No login gate (the source has
canActivate: [authGuard]on/map; for a discovery product, the map should be the public landing). - No 9-step UI tour (the old one is a symptom of UI not self-explaining).
- No real backend —
MockEventServicereturns 17 seeded events across the Balkans. The domain types are 1:1 with the sourceEventRequestinterface, so swapping in the real Spring API is a one-provider change.
src/app/
domain/
event.types.ts ← copies of EventRequest, EventType, Country
event-catalog.ts ← 17 categories with kanso badge color + hex + icon
mock-events.ts ← 17 Balkan events
mock-event.service.ts ← drop-in replacement for the real service
features/
marker-icon.factory.ts ← Leaflet DivIcon coloured per category
pages/events-map/
events-map.page.ts/html/scss ← the redesigned route
shared/
theme.service.ts ← light/dark switcher writing data-theme on <html>