CHARTS & MAPS

Leaflet Maps

Real Leaflet maps on OpenStreetMap / Esri tiles — clients, clusters, popups, bubbles, routes and areas, live filters, location picker, static mini maps, offices with local time.
THEME
01

Playground

25 clients — basemap, markers, clustering, list sync, state
BASEMAP
MARKERS
CLUSTER
STATE
Clients25 clients · 25 cities
Map data © OpenStreetMap contributors · tiles © Esri. ⌘ / Ctrl + scroll zooms; arrows pan and + / − zoom when the map is focused.
NOW SPEAKING
MAP“Map of 25 clients in Europe and North America. The same clients are listed next to the map.”
MARKER“Tab into the map: each marker is a focusable button named after the client”
LIST“Clients on the map, list, 25 items — the same data without the map”
ClientsMap.tsx
1<ClientsMap
2 clients={clients}
3 basemap="dark"
4 markers="pins" cluster={true}
5 scrollZoom="modifier" keyboard
6 list="side" // accessible alternative
7/>
EVENT LOG
    Click a marker or a client in the list.
    02

    Variants

    Bubbles, route & area, filter, picker, static
    Revenue bubblessize and colour by revenue
    ≥ $30k$12–30k< $12k
    Route & areashoot route · delivery radius · district
    Filter by statusmarkers update live
    ActiveLeadPaused
    Pick a locationclick the map to drop a pin
    LocationClick the map
    Static mini mapin a client card · no interaction
    Juniper HotelRua Garrett 112, Lisbon$58k revenue · 3 projectsOpen in maps ↗
    03

    States

    Loading, tile error, empty
    Loadinghold the space, keep the list
    Loading map…Tiles are on their way.
    Tile errorfallback message, list still works
    Emptyexplain and offer the next step
    No clients to showAdd a client with an address to see it here.
    04

    Behavior

    Scroll vs zoom, keyboard, attribution
    Scroll vs zoomnever trap the page
    WheelScrolls the page; ⌘ / Ctrl + wheel zooms
    HintA short overlay explains it on the first plain scroll
    TouchTwo fingers pan; one finger scrolls
    Full screenFor real exploration — Esc exits
    KeyboardLeaflet built-ins
    Focus mapArrows pan, + / − zoom
    MarkersTab to each; Enter opens the popup
    ListEach row flies to its marker
    PopupEsc closes, focus returns
    Data & licencetiles are third-party
    Attribution© OpenStreetMap + tile provider, always visible
    OfflineShow an error, keep the list working
    Many pointsCluster below zoom 6
    PrivacyNever pin personal home addresses
    05

    In Avava

    Offices, shoot locations
    Studio officeslocal time next to each city
    Shoot locations · Lookbook SS27three days, one route
    06

    Rules & a11y

    Map vs list, screen readers
    Map or list?pick by the question
    Map
    Where things are mattersShoot locations, regions
    List
    Who and how much mattersClients by revenue
    Both
    Explore and compareClient map + side list
    Screen readersthe list is the map
    ✓role="region" + aria-label summarySays what the map shows and that a list exists
    ✓Markers are focusabletitle / alt = client and city
    ✓Side list = full alternativeEvery marker has a row; rows fly to markers
    ✓Errors in textTile failures are announced, not just a grey map
    DO✓Pair every map with a list of the same points✓Zoom on ⌘ / Ctrl + scroll only✓Cluster dense markers at low zoom✓Keep attribution visible✓Match the basemap to the theme
    DON’T✕Trap page scroll inside the map✕Use a map when location doesn’t matter✕Hide information only in popups✕Show exact home addresses✕Use colour alone for marker status