# Building Mini Tokyo 3D
If you want to try out the latest features before they are released, modify the code yourself, or contribute to Mini Tokyo 3D development, you can build your project from source code by following the instructions in this section.
# Preparation for Build
The following software are required.
- The latest version of Node.js (opens new window)
- The latest version of Git (opens new window) if you're cloning the repository
Mini Tokyo 3D uses the following data sources and requires an access token for each of them at build time and run time. Follow the instructions below to obtain access tokens.
| Data Source | Sign-Up URL | Access Token Format |
|---|---|---|
| Open Data Challenge for Public Transportation in Tokyo (opens new window) | Link (opens new window) | A string of numbers and lowercase letters |
| Public Transportation Open Data Center (opens new window) | Link (opens new window) | A string of numbers and lowercase letters |
| Mapbox (opens new window) | Link (opens new window) | Alphanumeric string containing a period beginning with pk. |
# Getting an Access Token for Open Data Challenge for Public Transportation in Tokyo
Mini Tokyo 3D is using train and airplane data from the Open Data Challenge for Public Transportation in Tokyo (opens new window). You need to register as a developer to get the data, but it is available for free.
- Register as a developer by entering your user information on the developer site's registration page (opens new window). It may take a few days to receive your registration confirmation email.
- After logging in with your developer account, click on "Account" in the menu at the top of the screen and select "Manage Access Token".
- A list of access tokens will be displayed. Only the "DefaultApplication" token will be displayed right after creating the account. Click on "Issuing an access token".
- Enter an application name in the "Name" field and click the "Submit" button.
- The newly created token will appear in the list of access tokens
# Getting an Access Token for Public Transportation Open Data Center
Mini Tokyo 3D is also using data from the Public Transportation Open Data Center (opens new window). Again, you need to register as a developer to get the data, but it is available for free.
- Register as a developer by entering your user information on the developer site's registration page (opens new window). It may take a few days to receive your registration confirmation email.
- After logging in with your developer account, click on "Account" in the menu at the top of the screen and select "Manage Access Token".
- A list of access tokens will be displayed. Only the "DefaultApplication" token will be displayed right after creating the account. Click on "Issuing an access token".
- Enter an application name in the "Name" field and click the "Submit" button.
- The newly created token will appear in the list of access tokens
# Getting an Access Token for Mapbox
See Getting a Mapbox Access Token.
# Build Instructions
# 1. Downloading Files
Download the latest master branch from Mini Tokyo 3D's GitHub repository (opens new window) and extract the zip file. A directory named mini-tokyo-3d-master will be created, so change the name to mini-tokyo-3d.
curl -LO https://github.com/nagix/mini-tokyo-3d/archive/master.zip
unzip master.zip
mv mini-tokyo-3d-master mini-tokyo-3d
If you are using Git, you can clone the repository directly from GitHub instead of the above commands.
git clone https://github.com/nagix/mini-tokyo-3d.git
# 2. Build
Go to the top directory of Mini Tokyo 3D.
cd mini-tokyo-3d
Create a JSON file containing the access tokens for Open Data Challenge for Public Transportation in Tokyo and Public Transportation Open Data Center obtained in the build preparation step and save it in this directory with the file name secrets.
{
"tokyochallenge": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
"odpt": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
}
Install the dependent npm modules.
npm install
Build the project with the following command.
npm run build-all
When the build completes successfully, the dist directory will be created. It includes style sheet and JavaScript files for distribution. The build directory will also be created at the same time. It contains all the files needed for deployment on your web site.
# 3. Deploying on a Web Site
The index.html in the build directory is for the web page on https://minitokyo3d.com (opens new window). Replace the accessToken property, which is passed to a Map constructor, with the Mapbox access token obtained in the build preparation step. Then, edit it for your web site, and place all the files in the build directory in the public directory of your web server.