# 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.

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
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 Public Transportation Open Data Center

Mini Tokyo 3D is using train and airplane data from the Public Transportation Open Data Center (opens new window). You need to register as a developer to get the data, but it is available for free.

  1. 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.
  2. After logging in with your developer account, click on "Account" in the menu at the top of the screen and select "Manage Access Token".
  3. 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".
  4. Enter an application name in the "Name" field and click the "Submit" button.
  5. 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 token for the Public Transportation Open Data Center obtained in the build preparation step and save it in this directory with the file name secrets.

{
    "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.

Last Updated: 8/23/2022, 2:07:55 PM