# jsackey101/walk-radius architecture

> Architecture diagram of the GitHub repository jsackey101/walk-radius, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-15). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/jsackey101/walk-radius
- Repository: https://github.com/jsackey101/walk-radius

## Overview

Walk Radius is a planning-stage walking-reachability app. The sampled frontend currently obtains browser location and displays it on a Leaflet map with OpenStreetMap tiles; the README describes the intended workflow of choosing a time budget, shading the walkable area, and listing places. No backend source appears in the tree, so those planned capabilities are distinguished from the implemented map and their implementation paths are unknown.

Main entry points: [`frontend/src/components/WalkMap.tsx`](https://github.com/jsackey101/walk-radius/blob/main/frontend/src/components/WalkMap.tsx) (Walk map), [`frontend/src/App.tsx`](https://github.com/jsackey101/walk-radius/blob/main/frontend/src/App.tsx) (App entry), [`frontend/src/components/Marker.tsx`](https://github.com/jsackey101/walk-radius/blob/main/frontend/src/components/Marker.tsx) (Pin icon)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Map frontend"]
  node_app["App entry<br/>[App.tsx]"]
  node_walkmap["Walk map<br/>[WalkMap.tsx]"]
  node_mapview["Map recentering<br/>[WalkMap.tsx]"]
  node_pin["Pin icon<br/>[Marker.tsx]"]
end

subgraph group_discovery["Walking discovery"]
  node_walktime["Time budget"]
  node_isochrone["Reachable area"]
  node_places["Nearby places"]
end

subgraph group_integrations["External services"]
  node_geolocation["Browser geolocation"]
  node_osmtiles["OpenStreetMap tiles"]
  node_ors["OpenRouteService"]
  node_overpass["Overpass API"]
end

node_visitor(("Walker"))

node_app -->|"renders"| node_walkmap
node_walkmap -->|"requests location"| node_geolocation
node_walkmap -->|"uses icon"| node_pin
node_walkmap -->|"renders"| node_mapview
node_walkmap -->|"loads tiles"| node_osmtiles
node_visitor -.->|"chooses budget"| node_walktime
node_walktime -.->|"sets duration"| node_isochrone
node_isochrone -.->|"requests isochrones"| node_ors
node_isochrone -.->|"bounds search"| node_places
node_places -.->|"queries places"| node_overpass

click node_app "https://github.com/jsackey101/walk-radius/blob/main/frontend/src/App.tsx"
click node_walkmap "https://github.com/jsackey101/walk-radius/blob/main/frontend/src/components/WalkMap.tsx"
click node_mapview "https://github.com/jsackey101/walk-radius/blob/main/frontend/src/components/WalkMap.tsx"
click node_pin "https://github.com/jsackey101/walk-radius/blob/main/frontend/src/components/Marker.tsx"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_walkmap,node_mapview,node_pin toneBlue
class node_walktime,node_isochrone,node_places toneAmber
class node_geolocation,node_osmtiles,node_ors,node_overpass toneMint
class node_visitor toneIndigo
```

## Components

### Map frontend

- [App entry](https://github.com/jsackey101/walk-radius/blob/main/frontend/src/App.tsx): `frontend/src/App.tsx`
- [Walk map](https://github.com/jsackey101/walk-radius/blob/main/frontend/src/components/WalkMap.tsx): `frontend/src/components/WalkMap.tsx`
- [Map recentering](https://github.com/jsackey101/walk-radius/blob/main/frontend/src/components/WalkMap.tsx): `frontend/src/components/WalkMap.tsx`
- [Pin icon](https://github.com/jsackey101/walk-radius/blob/main/frontend/src/components/Marker.tsx): `frontend/src/components/Marker.tsx`

### Walking discovery

- **Time budget**
- **Reachable area**
- **Nearby places**

### External services

- **Browser geolocation**
- **OpenStreetMap tiles**
- **OpenRouteService**
- **Overpass API**

### Other components

- **Walker**

## Connections

- App entry → Walk map: renders (evidence: `frontend/src/App.tsx`)
- Walk map → Browser geolocation: requests location (evidence: `frontend/src/components/WalkMap.tsx`)
- Walk map → Pin icon: uses icon (evidence: `frontend/src/components/WalkMap.tsx`)
- Walk map → Map recentering: renders (evidence: `frontend/src/components/WalkMap.tsx`)
- Walk map → OpenStreetMap tiles: loads tiles (evidence: `frontend/src/components/WalkMap.tsx`)
- Walker → Time budget: chooses budget (evidence: `README.md`)
- Time budget → Reachable area: sets duration (evidence: `README.md`)
- Reachable area → OpenRouteService: requests isochrones (evidence: `README.md`)
- Reachable area → Nearby places: bounds search (evidence: `README.md`)
- Nearby places → Overpass API: queries places (evidence: `README.md`)