An interactive web application for exploring spatial accessibility analysis through distance decay functions. Built for university students learning about urban accessibility in spatial planning courses.
Live Demo: bauhaus-infau.github.io/Accessibility_UAS_2025
Students define a custom distance decay function f(d) graphically, then see how it affects accessibility scores visualized on a 3D city model of Weimar, Germany. The accessibility score for each location i is:
Acc_i = Σ Att_j × f(d_ij)
Where Att_j is the attractivity of amenity j, f(d_ij) is the user-defined decay function, and d_ij is the shortest path distance via the street network.
A built-in 9-step tutorial guides you through all features — click the help icon to start.
Switch between modes using the toolbar on the right side of the map.
Buildings Mode — Calculate accessibility for individual buildings based on proximity to 14 predefined amenity types (Retail, Education, Health, etc.) or user-placed custom pins.
Selecting amenity types and analysis scope — buildings are colored from purple (low) to red (high) accessibility.
Grid Mode — Visualize accessibility on a hexagonal grid, independent of buildings. Place custom amenity points and adjust hexagon size (10-100m) for different levels of detail.
Placing custom amenities and adjusting hexagon resolution — smaller hexagons reveal finer spatial patterns.
Surface Mode — Display accessibility as a 3D terrain surface where height represents scores. Includes contour lines, street network overlay, and configurable smoothing and height parameters.
Adjusting terrain smoothing and height — peaks represent areas with the highest accessibility scores.
Define how the utility of an amenity decreases with distance using three curve modes:
- Custom — Drag control points on a polyline to shape any curve. Includes presets (Exponential, Power, Linear, Step, Constant). Double-click to add points, right-click to remove.
- Negative Exponential — f(d) = e^(-α·d) with adjustable decay rate α.
- Exponential Power — f(d) = e^{-(d/b)^c} with adjustable scale b and shape c.
Shaping the distance decay function — drag points on the Custom tab or switch to mathematical functions with adjustable coefficients.
Toggle between network distance (shortest path via streets) and straight-line Euclidean distance for all accessibility calculations. The distance mode affects buildings, grid, and surface analysis.
Switching between network and Euclidean distance — notice how the spatial pattern of scores shifts.
Place a flag on the map to inspect how a point's accessibility score is calculated. Shows paths to all amenities with their distances and decay values.
Inspecting a location's score — paths show the distance and decay contribution from each amenity.
Compare network distance (via streets) against straight-line (Euclidean) distance between any two points. The solid purple line shows the network path; the dashed yellow line shows the direct distance.
Comparing network vs. Euclidean distance — the solid line follows streets, the dashed line goes straight.
Click and drag on the gradient bar in the legend to highlight buildings or hexagons within a specific score range. Elements outside the range are greyed out.
Dragging on the gradient bar to filter — only buildings within the selected score range stay colored.
Choose between Adaptive (data-driven) and Fixed (user-defined) gradient ranges. Switching to Fixed copies the current adaptive values as initial bounds, which can then be edited manually.
Switching to Fixed range locks the color scale — useful for comparing scenarios with a consistent baseline.
- TypeScript + React + Vite — Application framework
- MapLibre GL JS — 3D building rendering and map interaction
- Three.js — Terrain mesh visualization (custom MapLibre layer)
- Tailwind CSS — Styling and responsive design
- Web Worker — Dijkstra shortest path precomputation
- Node.js 18+
- npm
git clone https://github.com/Bauhaus-InfAU/Accessibility_UAS_2025.git
cd Accessibility_UAS_2025
npm install
npm run devOnce running, click the ? help icon in the app to launch a 9-step interactive tutorial that walks through all features.
| Command | Description |
|---|---|
npm run dev |
Start development server |
npm run build |
Build for production |
npm run preview |
Preview production build |
The application uses GeoJSON data from Weimar, Germany:
- 4,316 buildings with land use classifications
- 1,183 street network segments
- 14 predefined amenity types
CC BY-NC 4.0 (Creative Commons Attribution-NonCommercial)
Martin Bielik
- Egor Gaydukov
In partnership with:
Adapted from Bauhaus-InfAU/weimar-web (data only)