mini-tokyo-3d - SKILL.md Agent Skill

name: mini-tokyo-3d description: Guide for integrating and customizing Mini Tokyo 3D - a real-time 3D digital map visualization of Tokyo's public transportation system. Use when building transit visualizations, embedding Tokyo train maps, or working with GTFS real-time data and Mapbox GL integration.

Mini Tokyo 3D - Integration Guide

Real-time 3D visualization of Tokyo's public transportation system including trains, subways, and aircraft.

When to Use This Skill

Building real-time transportation visualizations
Integrating Tokyo transit data into web applications
Creating interactive 3D map experiences
Working with GTFS data and live train positions
Developing travel or tourism applications for Tokyo

Prerequisites

Required API Tokens

Mapbox Access Token - mapbox.com (Free tier: 50K/month)
ODPT Token - developer-tokyochallenge.odpt.org
Challenge 2025 Token - Also from ODPT portal

Quick Start

CDN Integration

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mini-tokyo-3d@latest/dist/mini-tokyo-3d.min.css" />
  <script src="https://cdn.jsdelivr.net/npm/mini-tokyo-3d@latest/dist/mini-tokyo-3d.min.js"></script>
  <style>body { margin: 0; } #map { width: 100vw; height: 100vh; }</style>
</head>
<body>
  <div id="map"></div>
  <script>
    const map = new mt3d.Map({
      container: 'map',
      accessToken: '<MAPBOX_TOKEN>',
      secrets: {
        odpt: '<ODPT_TOKEN>',
        challenge2025: '<CHALLENGE_2025_TOKEN>'
      }
    });
  </script>
</body>
</html>

NPM Integration

npm install mini-tokyo-3d

import { Map } from 'mini-tokyo-3d';
import 'mini-tokyo-3d/dist/mini-tokyo-3d.min.css';

const map = new Map({
  container: 'map',
  accessToken: process.env.MAPBOX_TOKEN,
  secrets: {
    odpt: process.env.ODPT_TOKEN,
    challenge2025: process.env.CHALLENGE_2025_TOKEN
  }
});

Constructor Options

Option	Type	Default	Description
`container`	string	required	HTML element ID
`accessToken`	string	required	Mapbox token
`secrets`	Object	-	`{odpt, challenge2025}` tokens
`center`	[lng, lat]	[139.7670, 35.6814]	Initial center
`zoom`	number	14	Zoom level (0-22)
`pitch`	number	60	Tilt angle (0-85)
`bearing`	number	0	Rotation degrees
`lang`	string	browser	Language code
`ecoMode`	string	'normal'	'normal' or 'eco'
`plugins`	Array	[]	Plugin instances

Languages: ja, en, ko, zh-Hans, zh-Hant, th, ne, pt-BR, fr, es, de

Core API Reference

For detailed API documentation, see:

API Methods - Camera, selection, mode control
Events - Event types and handlers
Examples - Common use cases

Quick Method Reference

// Camera
map.flyTo({ center: [139.7454, 35.6586], zoom: 16 });
map.setCenter([lng, lat]);
map.setPitch(45);
map.setBearing(90);

// Selection & Tracking
map.setSelection('JR-East.Yamanote.Outbound.1234');  // Track train
map.setSelection('Shibuya');  // Select station
map.setTrackingMode('helicopter');  // 'position'|'back'|'front'|'helicopter'|'drone'|'bird'

// Modes
map.setViewMode('underground');  // 'ground' or 'underground'
map.setClockMode('playback');    // 'realtime' or 'playback'
map.setEcoMode('eco');           // 'normal' or 'eco'

// Events
map.on('load', () => console.log('Ready'));
map.on('selection', (e) => console.log(e.selection));

Plugins

<script src="https://cdn.jsdelivr.net/npm/mini-tokyo-3d-plugin-precipitation@latest/dist/mini-tokyo-3d-plugin-precipitation.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mini-tokyo-3d-plugin-fireworks@latest/dist/mini-tokyo-3d-plugin-fireworks.min.js"></script>

const map = new mt3d.Map({
  plugins: [mt3dPrecipitation(), mt3dFireworks()]
});

Resources

GitHub: github.com/nagix/mini-tokyo-3d
Demo: minitokyo3d.com
License: MIT