Mini Tokyo 3D tackles the challenge of visualizing one of the world’s most complex public transportation networks in real time, all within a browser. It pulls live data from the Public Transportation Open Data Center (ODPT) and renders a fully interactive 3D map of Tokyo’s railways using Mapbox GL. The result is a web app that lets you explore train positions, timetables, and line statuses with smooth 3D camera controls including underground views.
real-time 3d transit visualization with mapbox gl and odpt data
At its core, mini-tokyo-3d is a client-side JavaScript application that leverages Mapbox GL’s WebGL capabilities to render a 3D map of Tokyo’s extensive rail transit network. It consumes live transit data from ODPT’s public API, which provides train locations, timetables, and operational status updates across multiple railway lines in Tokyo.
The project’s architecture splits into two main parts: a Node.js build pipeline and the client-side rendering app. The build pipeline generates static assets, including datasets and scripts, which are then deployed as a self-contained static web app. This approach means the app can be hosted on any static file server, reducing backend complexity.
The client application uses the Mapbox GL JS library to handle the map rendering. It supports full 3D camera controls — tilt, rotate, zoom — and can visualize trains underground, a neat feature given Tokyo’s extensive subterranean rail tunnels. Additional features include an eco mode for energy-efficient rendering and multi-language UI localization.
Because Mapbox GL requires an access token for map tiles and ODPT requires API authentication, the app requires both tokens to be injected at runtime in the map initialization code. This dependency on external tokens is a necessary tradeoff for accessing high-quality map tiles and real-time transit data.
integrating live transit data with interactive 3d map controls
What distinguishes mini-tokyo-3d is how it manages to integrate live transit data into a smooth and interactive 3D visualization in the browser. The ODPT API provides a wealth of real-time data, but handling it efficiently and mapping it onto a 3D scene is non-trivial.
The codebase separates concerns cleanly. The data ingestion layer fetches and processes ODPT API responses, normalizing train locations and updating UI elements accordingly. The rendering layer uses Mapbox GL’s 3D capabilities to place train markers and model underground tunnels with appropriate camera adjustments.
The tradeoff here is that the real-time data updates happen client-side, which can be a bottleneck for very frequent or large updates. However, this is balanced by the relative simplicity of a static deployment and the responsiveness of modern browsers.
The code quality is surprisingly clean given the complexity. The build scripts in Node.js automate the generation of static datasets and map configuration, making it easier to maintain and update as the transit data or map styles evolve.
how to build and run mini-tokyo-3d
First, you need to obtain access tokens from both the Public Transportation Open Data Center and Mapbox. These tokens are required to access the transit data and map tiles respectively.
The project requires the latest Node.js version. Once you have Node.js installed, navigate to the root of the project and run:
npm install
npm run build-all
This sequence installs dependencies and runs the build pipeline, generating the static assets inside the build directory.
After building, you need to supply your tokens when initializing the map in index.html:
map = new mt3d.Map({
/* ... */
accessToken: 'pk.xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.xxxxxxxxxxxxxxxxxxxxxx',
secrets: {
odpt: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
}
});
This injects the Mapbox access token and the ODPT API token into the app at runtime.
who should explore mini-tokyo-3d and what to expect
Mini Tokyo 3D is well suited for developers interested in mapping, real-time data visualization, or public transit applications. It showcases practical use of WebGL via Mapbox GL, handling complex 3D camera controls and underground views, which is not trivial in many map visualization libraries.
The static build approach means you don’t have to manage a backend server for real-time updates, but this comes with the caveat that all data fetching and rendering logic happens client-side. This can limit scalability if you wanted to add more complex features or support very high update frequencies.
Overall, the repo provides a solid example of combining live open data with browser-based 3D visualization. The code is clear enough to fork and extend for other cities or data sources, provided you handle the necessary API tokens and data formats.
The main limitation is reliance on external tokens and a static asset build process that requires rebuilding to integrate data or style changes. But given the complexity of real-time 3D transit rendering, this is a reasonable tradeoff.
If you want to understand how to integrate live transit data with Mapbox GL’s 3D rendering and build a deployable static web app, mini-tokyo-3d is a practical resource worth exploring.
→ GitHub Repo: nagix/mini-tokyo-3d ⭐ 4,052 · JavaScript