This web application visualizes interesting patterns and trends of the shared mobility traffic in Berlin, Germany. It represents a small excerpt of my exploratory work on shared mobility during my studies at HTW Berlin. The project is work in progress and will receive continues updates. A live version of the web application is linked in the header above.
Discover different map layers by navigating via the buttons on the bottom of the information card. Additional information will show up inside the card. On the bottom of the application you’ll find a timeline player bar that allows you to start, stop and scroll through the map layer animation. You can rotate the viewport by holding cmd or ctrl respectively and dragging the mouse on the map. Scrolling and panning is supported via mouse input as well.
The underlying data for the application is sourced by a custom web crawler which continuously requests and saves all available for rent bicycles of a large shared mobility provider in Berlin. I won't publicly disclose the name of the provider since I'm unsure of the copyright/legal implications. The crawler sends requests once a minute and stores all data inside a PostgreSQL database. All routing data is calculated via a OSRM backend and some Python glue code. All of this is self-hosted and maintained on a personal dedicated server.
demo_video.mp4
The web application was bootstrapped with Vite. Follow the subsequent steps to set up a local development environment.
- Clone this repository:
git clone https://github.com/laurids-reichardt/berlin-shared-mobility-map.git
- Install NPM packages:
npm install
- Start the development server:
npm run dev
This section lists major frameworks/libraries used by this project. A comprehensive list of dependencies is stored inside the package-lock.json file.
Twitter: https://twitter.com/laureichardt
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent