### Install Dependencies and Build Project

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/README.md

Run these commands in the root directory to install necessary packages and generate the application's scripts, dataset, and static web page.

```bash
npm install
npm run build-all
```

--------------------------------

### Install npm Dependencies

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/build.md

Install all the necessary npm modules required for building the project.

```bash
npm install
```

--------------------------------

### Install Mini Tokyo 3D npm Module

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/integration.md

Use this command to install the Mini Tokyo 3D package and add it to your project's dependencies.

```bash
npm install mini-tokyo-3d --save
```

--------------------------------

### dragstart Event

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/api/map.md

Fired when a "drag to pan" interaction starts.

```APIDOC
## dragstart Event

### Description
Fired when a "drag to pan" interaction starts.

### Type
([`MapMouseEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#mapmouseevent) | [`MapTouchEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#maptouchevent))
```

--------------------------------

### boxzoomstart Event

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/api/map.md

Fired when a "box zoom" interaction starts.

```APIDOC
## boxzoomstart Event

### Description
Fired when a "box zoom" interaction starts.

### Type
[`MapBoxZoomEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#mapboxzoomevent)
```

--------------------------------

### Add GeoJSON Layer to Map

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/api/geojson-layer.md

This example demonstrates how to add a GeoJSON layer to a map. It defines GeoJSON data, specifies rendering options like line width and color, and sets minimum and maximum zoom levels for layer visibility.

```javascript
const geojson = {
	'type': 'FeatureCollection',
	'features': [{
		'type': 'Feature',
		'geometry': {
			'type': 'LineString',
			'properties': {
				'type': 0
			},
			'coordinates': [
				[-77.0366048, 38.8987317],
				[-77.0336437, 38.8987651],
				[-77.0336437, 38.8954919]
			]
		}
	}, {
		'type': 'Feature',
		'geometry': {
			'type': 'LineString',
			'properties': {
				'type': 1
			},
			'coordinates': [
				[-77.0083236, 38.8914336],
				[-77.0081841, 38.8908240],
				[-77.0081520, 38.8898971]
			]
		}
	}]
};
const colors = [[255, 0, 0], [0, 0, 255]];

map.addLayer({
	id: 'geojson-lines',
	type: 'geojson',
	data: geojson,
	filled: false,
	getLineWidth: 4,
	getLineColor: d => colors[d.properties.type],
	opacity: 0.7,
	minzoom: 10,
	maxzoom: 22
});
```

--------------------------------

### Specify GTFS Data Sources

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/user-guide/gtfs.md

Use query parameters to specify GTFS dataset and VehiclePosition feed URLs. If URLs start with 'https://api.odpt.org/', the 'acl:consumerKey' parameter is not required.

```url
https://minitokyo3d.com/?gtfsurl=<URL>&gtfsvpurl=<URL>&gtfscolor=<color code>
```

--------------------------------

### Add a Box Mesh to the Scene

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/api/three.md

This example demonstrates how to create and add a basic box mesh to the Three.js scene using the THREE namespace. It requires map and context objects to be available.

```javascript
onAdd(map, context) {
	const {x, y, z} = map.getModelPosition([139.7143859, 35.6778094]);
	const scale = map.getModelScale();
	const geometry = new mt3d.THREE.BoxGeometry(10, 10, 10);
	const material = new mt3d.THREE.MeshBasicMaterial({color: 0xffff00});
	const mesh = new mt3d.THREE.Mesh(geometry, material);
	mesh.position = new mt3d.THREE.Vector3(x, y, z);
	mesh.scale = new mt3d.THREE.Vector3().setScalar(scale);
	context.scene.add(mesh);
}
```

--------------------------------

### getTrackingMode()

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/api/map.md

Gets the current tracking mode, with options like 'position', 'back', 'topback', etc.

```APIDOC
## getTrackingMode()

### Description
Returns the current tracking mode. See [here](../../user-guide/configuration.md#tracking-mode-settings) for details of the tracking modes.

### Returns

[`string`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String): A string representing the current tracking mode. Either `'position'`, `'back'`, `'topback'`, `'front'`, `'topfront'`, `'helicopter'`, `'drone'` or `'bird'`.

::: warning
The tracking mode `'heading'` is deprecated and falls back to `'topback'`. 
:::
```

--------------------------------

### Build the Project

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/build.md

Execute the build command to compile the project. This will create 'dist' and 'build' directories containing the necessary files for distribution and deployment.

```bash
npm run build-all
```

--------------------------------

### Navigate to Project Directory

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/build.md

Change the current directory to the top-level directory of the Mini Tokyo 3D project.

```bash
cd mini-tokyo-3d
```

--------------------------------

### zoomstart

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/api/map.md

Fired just before the map begins a zoom transition.

```APIDOC
## zoomstart

### Description
Fired just before the map begins a transition from one zoom level to another, as the result of either user interaction or methods such as [Map#flyTo](./map.md#flyto-options).

### Type
`MapMouseEvent` | `MapTouchEvent`
```

--------------------------------

### getClockMode()

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/api/map.md

Gets the current clock mode, which can be either 'realtime' or 'playback'.

```APIDOC
## getClockMode()

### Description
Returns the current clock mode.

### Returns
[`string`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String): A string representing the current clock mode. Either 'realtime' or 'playback'.
```

--------------------------------

### touchstart

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/api/map.md

Fired when a touchstart event occurs within the map.

```APIDOC
## touchstart

### Description
Fired when a `touchstart` event occurs within the map.

### Type
`MapTouchEvent`
```

--------------------------------

### load Event

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/api/map.md

Fired immediately after all necessary resources have been downloaded and the first visually complete rendering of the map has occurred.

```APIDOC
## load Event

### Description
Fired immediately after all necessary resources have been downloaded and the first visually complete rendering of the map has occurred.

### Type
[`Object`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)
```

--------------------------------

### Initialize Mapbox LngLat and Marker

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/api/mapboxgl.md

Demonstrates how to create a new LngLat object and a Marker instance using the mapboxgl namespace. This is useful for placing custom markers on a map.

```javascript
const lnglat = new mt3d.mapboxgl.LngLat(139.7143859, 35.6778094);
const marker = new mt3d.Marker().setLngLat(lnglat);
```

--------------------------------

### Download Mini Tokyo 3D Source (Git)

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/build.md

Clone the Mini Tokyo 3D repository directly from GitHub if you are using Git.

```bash
git clone https://github.com/nagix/mini-tokyo-3d.git
```

--------------------------------

### Initialize Map with Plugins (HTML)

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/integration.md

Initialize the Map object in your HTML by specifying the plugins in the options.

```javascript
  <script>
    const options = {
      /* ... */
      plugins: [mt3dPrecipitation(), mt3dFireworks()]
    };
    const map = new mt3d.Map(options);
  </script>
```

--------------------------------

### Initialize Map with Options

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/api/map.md

Create a new Map instance by providing an options object. Ensure the container element exists and has no children. An access token is required for Mapbox.

```javascript
new Map(options: Object)
```

--------------------------------

### Marker Constructor

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/api/marker.md

Initializes a new Marker instance with optional configuration options.

```APIDOC
## Marker Constructor

### Description
Creates a new Marker instance.

### Signature
```js
new Marker(options: Object)
```

### Parameters
#### **`options`** (`Object`)

Name | Description
:-- | :--
**`options.element`** (`HTMLElement`) | DOM element to use as a marker. Defaults to a light blue, droplet-shaped SVG marker.
**`options.minZoom`** (`number`) | The minimum zoom level for the marker to be visible. Range: 0-24. Defaults to visible at all zoom levels.
```

--------------------------------

### Initialize Mini Tokyo 3D Map in HTML Body

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/integration.md

Add a container element and this script to your HTML's `<body>` to create and initialize a Mini Tokyo 3D map instance. Ensure you replace placeholder tokens with your actual Mapbox and ODPT access tokens.

```html
<body>
  <div id="mini-tokyo-3d" style="width: 400px; height: 400px;"></div>

  <script>
    const options = {
      container: 'mini-tokyo-3d',
      accessToken: '<Mapbox access token>',
      secrets: {
        odpt: '<access token for Public Transportation Open Data Center>'
      }
    };
    const map = new mt3d.Map(options);
  </script>
</body>
```

--------------------------------

### Configure Map and Data Access Tokens

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/README.md

Instantiate the Map constructor in index.html, passing your Mapbox access token and ODPT Center token as properties.

```javascript
map = new mt3d.Map({
    /* ... */
    accessToken: 'pk.xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.xxxxxxxxxxxxxxxxxxxxxx',
    secrets: {
        odpt: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
    }
});
```

--------------------------------

### Download Mini Tokyo 3D Source (curl)

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/build.md

Use this command to download the master branch of the Mini Tokyo 3D project from GitHub and prepare the directory structure.

```bash
curl -LO https://github.com/nagix/mini-tokyo-3d/archive/master.zip
unzip master.zip
mv mini-tokyo-3d-master mini-tokyo-3d
```

--------------------------------

### Map Initialization

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/api/map.md

Instantiate a new Map object by providing an options object. The `container` and `accessToken` are mandatory for initialization.

```APIDOC
## Map Initialization

### Description
Creates a new `Map` object, initializing the Mini Tokyo 3D map within a specified HTML element.

### Method
`new Map(options)`

### Parameters
#### **`options`** ([`Object`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object))

- **`options.container`** (string) - Required - The `id` of the HTML element where the map will be rendered. This element must be empty.
- **`options.accessToken`** (string) - Required - Your Mapbox access token. Essential for loading map tiles.
- **`options.center`** (LngLatLike, optional) - The initial geographical center of the map. Defaults to `[139.7670, 35.6814]` (Tokyo Station).
- **`options.bearing`** (number, optional) - The initial rotation of the map in degrees counter-clockwise from north. Defaults to `0`.
- **`options.pitch`** (number, optional) - The initial tilt of the map in degrees. Defaults to `60`.
- **`options.style`** (string, optional) - The map style URL. Defaults to the Mini Tokyo 3D default style.
- **`options.dataUrl`** (string, optional) - The base URL for Mini Tokyo 3D data. Defaults to `'https://minitokyo3d.com/data'`.
- **`options.lang`** (string, optional) - The IETF language tag for the map's interface. Defaults to the browser's language. Supported languages include `'ja'`, `'en'`, `'ko'`, etc.
- **`options.fullscreenControl`** (boolean, optional) - Whether to display the fullscreen control button. Defaults to `true`.
- **`options.navigationControl`** (boolean, optional) - Whether to display the navigation control buttons (zoom). Defaults to `true`.
- **`options.modeControl`** (boolean, optional) - Whether to display the mode switch buttons. Defaults to `true`.
- **`options.clockControl`** (boolean, optional) - Whether to display the date and time control. Defaults to `true`.
- **`options.configControl`** (boolean, optional) - Whether to display the configuration buttons. Defaults to `true`.
- **`options.ecoMode`** (string, optional) - The initial eco mode. Supported values are `'normal'` and `'eco'`. Defaults to `'normal'`.
- **`options.ecoFrameRate`** (number, optional) - Frame rate for animations in eco mode (frames per second). Defaults to `1`.
- **`options.dataSources`** (Array<DataSource>, optional) - An array of additional data sources (experimental).
- **`options.plugins`** (Array<PluginInterface>, optional) - An array of plugins to add to the map.

### Request Example
```javascript
const map = new Map({
  container: 'map-container',
  accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN',
  center: [139.7670, 35.6814],
  zoom: 12,
  pitch: 60,
  bearing: 0
});
```

### Response
#### Success Response (Map Object)
- **Map Object** - The initialized Map object, which extends [Evented](https://docs.mapbox.com/mapbox-gl-js/api/events/#evented).
```

--------------------------------

### Initialize Map with Plugins (Modules)

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/integration.md

Initialize the Map object in your application code by specifying the plugins in the options.

```javascript
const options = {
  /* ... */
  plugins: [mt3dPrecipitation(), mt3dFireworks()]
};
const map = new Map(options);
```

--------------------------------

### Configure and Initialize Mini Tokyo 3D Map

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/public/index.html

This code parses URL parameters to configure map options like language, selection, zoom, center, bearing, pitch, and GTFS data. It then initializes the Mini Tokyo 3D map with these options.

```javascript
const matchLang = location.search.match(/lang=(.*?)(?:&|$)/), matchSelection = location.search.match(/selection=(.*?)(?:&|$)/), matchGtfsUrl = location.search.match(/gtfsurl=(.*?)(?:&|$)/), matchVehiclePositionUrl = location.search.match(/gtfsvpurl=(.*?)(?:&|$)/), matchGtfsColor = location.search.match(/gtfscolor=(.*?)(?:&|$)/), matchHash = location.hash.match(/[^\d\.\-\]*([\d\.\-\]*)([\d\.\-\]*)([\d\.\-\]*)([\d\.\-\]*)([\d\.\-\]*)/), options = { container: 'map', plugins: [mt3dPrecipitation(), mt3dFireworks(), mt3dLivecam(), mt3dPlateau({enabled: false}), mt3dGtfs({enabled: false})] };
if (matchLang) {
  options.lang = decodeURIComponent(matchLang[1]);
}
if (matchSelection) {
  options.selection = decodeURIComponent(matchSelection[1]);
}
if (matchHash[1]) {
  options.zoom = +matchHash[1];
}
if (matchHash[2] && matchHash[3]) {
  options.center = [+matchHash[3], +matchHash[2]];
}
if (matchHash[4]) {
  options.bearing = +matchHash[4];
}
if (matchHash[5]) {
  options.pitch = +matchHash[5];
}
if (matchGtfsUrl && matchGtfsColor) {
  options.dataSources = [
    {
      gtfsUrl: decodeURIComponent(matchGtfsUrl[1]),
      vehiclePositionUrl: matchVehiclePositionUrl ? decodeURIComponent(matchVehiclePositionUrl[1]) : undefined,
      color: `#${decodeURIComponent(matchGtfsColor[1])}`
    }
  ];
}

const map = new mt3d.Map(options);
```

--------------------------------

### easeTo

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/api/map.md

Smoothly transitions the map's view (center, zoom, bearing, pitch, padding) to new values over a specified duration. Unspecified properties retain their current values.

```APIDOC
## easeTo(options)

### Description
Changes any combination of `center`, `zoom`, `bearing`, `pitch`, and `padding` with an animated transition between old and new values. The map will retain its current values for any details not specified in `options`.

Note: The transition will happen instantly if the user has enabled the `reduced motion` accessibility feature enabled in their operating system, unless `options` includes `essential: true`.

### Parameters
#### `options`
- **options** (Object) - Options describing the destination and animation of the transition. Accepts [CameraOptions](https://docs.mapbox.com/mapbox-gl-js/api/properties/#cameraoptions) and [AnimationOptions](https://docs.mapbox.com/mapbox-gl-js/api/properties/#animationoptions).

### Returns
- **Map** - Returns itself to allow for method chaining.
```

--------------------------------

### Initialize Mini Tokyo 3D Map as Module

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/integration.md

Initialize the Map object within your application code. Replace placeholder values with your container ID and access tokens.

```javascript
const options = {
  container: '<container element ID>',
  accessToken: '<Mapbox access token>',
  secrets: {
    odpt: '<access token for Public Transportation Open Data Center>'
  }
};
const map = new Map(options);
```

--------------------------------

### Create a new Panel

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/api/panel.md

Instantiates a new Panel component. The options object can configure modal behavior.

```javascript
new Panel(options: Object)
```

--------------------------------

### Add Plugins with Redesigned Framework

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/migration.md

Explicitly specify the list of objects implementing `PluginInterface` as a constructor option for the `Map` class. All plugins are now provided as separate modules.

```javascript
const options = {
  /* ... */
  plugins: [mt3dPrecipitation(), mt3dFireworks()]
};
const map = new mt3d.Map(options);
```

--------------------------------

### Popup Constructor

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/api/popup.md

Initializes a new Popup instance. It extends the base JavaScript Object.

```APIDOC
## new Popup()

### Description
Initializes a new Popup instance.

### Constructor
`new Popup()`
```

--------------------------------

### Import Plugins using ES6 Modules

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/integration.md

Use this syntax to import plugins if you are using the ES6 module system.

```javascript
import mt3dPrecipitation from 'mt3d-plugin-precipitation';
import mt3dFireworks from 'mt3d-plugin-fireworks';
```

--------------------------------

### Import Plugins using CommonJS

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/integration.md

Use this syntax to import plugins if you are using the CommonJS module system.

```javascript
const mt3dPrecipitation = require('mt3d-plugin-precipitation');
const mt3dFireworks = require('mt3d-plugin-fireworks');
```

--------------------------------

### Load Mini Tokyo 3D Assets in HTML Head

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/integration.md

Include these CDN links in your HTML's `<head>` section to load the Mini Tokyo 3D stylesheet and JavaScript.

```html
<head>
  <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>
</head>
```

--------------------------------

### Initialize Map with mt3d Namespace

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/migration.md

Pass constructor options to the `Map` class within the `mt3d` namespace to create a Mini Tokyo 3D Map object. This replaces the previous `MiniTokyo3D` class.

```javascript
const options = {
  container: 'mini-tokyo-3d',
  accessToken: '<Mapbox access token>'
};
const map = new mt3d.Map(options);
```

--------------------------------

### Customize Initial Map View

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/user-guide/gtfs.md

Append a hash fragment to the URL to set the initial map position and orientation. This includes zoom level, latitude, longitude, bearing, and pitch.

```url
https://minitokyo3d.com/?<query parameters>#<zoom>/<lat>/<lon>/<bearing>/<pitch>
```

--------------------------------

### Create a new Popup

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/api/popup.md

Instantiate a new Popup component. No specific parameters are required for basic instantiation.

```javascript
new Popup()
```

--------------------------------

### Map Options Configuration

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/api/map.md

Configure the map's behavior and appearance using the `options` object. This includes settings for search controls, data access tokens, item selection and tracking, and initial map zoom.

```APIDOC
## Map Options

### Description
Configuration options for the map.

### Properties

- **`searchControl`** (`boolean`): If `true`, the search button will be added to the map. Defaults to `true`.
- **`secrets`** (`Secrets`): An object to store the access tokens used to retrieve data.
- **`selection`** (`string`): ID of the train or flight to be tracked, or the station to be selected. The train ID is a string in the form of `'odpt.Train:<operator ID>.<railway ID>.<train number>'`. The flight ID is a string in the form of `'odpt.FlightInformationArrival:<operator ID>.<airport ID>.<flight number>'` or `'odpt.FlightInformationDeparture:<operator ID>.<airport ID>.<flight number>'`. The station ID is a string in the form of `'odpt.Station:<operator ID>.<railway ID>.<station ID>'`. The `'odpt.*:'` part can be omitted. For details, see the [Public Transportation Open Data Center: API Specification](https://developer.odpt.org/documents).
- **`trackingMode`** (`string`): The initial tracking mode. `'position'`, `'back'`, `'topback'`, `'front'`, `'topfront'`, `'helicopter'`, `'drone'` and `'bird'` are supported. Defaults to `'position'`.
- **`zoom`** (`number`): The initial zoom level of the map. Defaults to `14`.
```

--------------------------------

### PluginInterface Instance Members

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/api/index.md

Methods and properties for managing Plugin instances.

```APIDOC
## PluginInterface Instance Members

### Description
Methods and properties for managing Plugin instances.

### Instance Members
- `onAdd(map)`
- `onDisabled()`
- `onEnabled()`
- `onRemove(map)`
- `onVisibilityChanged(visible)
```

--------------------------------

### Plugin Interface Specification

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/api/plugin.md

This section details the properties and instance members for implementing a custom plugin within the Mini Tokyo 3D map.

```APIDOC
## Plugin Properties

### `clockModes`
- **Type**: `Array<string>`
- **Description**: Specifies the clock modes in which the plugin will be visible. Supported modes are 'realtime' and 'playback'. If not specified, the plugin is always visible.

### `enabled`
- **Type**: `boolean`
- **Description**: Determines if the plugin is enabled upon addition to the map. If `false`, the plugin is disabled. Defaults to enabled if not specified.

### `iconStyle`
- **Type**: `Object` (CSSStyleDeclaration)
- **Description**: Inline style for the icon element in the layer panel. Supports all CSSStyleDeclaration properties.

### `id`
- **Type**: `string`
- **Description**: A unique identifier for the plugin.

### `name`
- **Type**: `Object`
- **Description**: The name of the plugin, with keys as language codes and values as the name in that language. Falls back to English if the browser's language is not found.
  - **`name.de`**: Name in German
  - **`name.en`**: Name in English
  - **`name.es`**: Name in Spanish
  - **`name.fr`**: Name in French
  - **`name.ja`**: Name in Japanese
  - **`name.ko`**: Name in Korean
  - **`name.ne`**: Name in Nepali
  - **`name.pt`**: Name in Portuguese
  - **`name.th`**: Name in Thai
  - **`name.zh-Hans`**: Name in Simplified Chinese
  - **`name.zh-Hant`**: Name in Traditional Chinese

### `searchModes`
- **Type**: `Array<string>`
- **Description**: Specifies the search modes in which the plugin will be visible. Supported modes are 'none', 'edit', and 'route'. Defaults to visible when the search panel is not displayed.

### `viewModes`
- **Type**: `Array<string>`
- **Description**: Specifies the view modes in which the plugin will be visible. Supported modes are 'ground' and 'underground'. If not specified, the plugin is always visible.

## Instance Members

### `onAdd(map)`
- **Description**: Optional method called when the plugin is added to the Map. Used for initializing resources and registering event listeners.
- **Parameters**:
  - **`map`** (`Map`): The Mini Tokyo 3D Map instance the plugin was added to.

### `onDisabled()`
- **Description**: Optional method called when the plugin is disabled by users. Used for cleaning up display elements.

### `onEnabled()`
- **Description**: Optional method called when the plugin is enabled by users. Used for initializing display elements.

### `onRemove(map)`
- **Description**: Optional method called when the plugin is removed from the Map. Used for cleaning up resources and event listeners.
- **Parameters**:
  - **`map`** (`Map`): The Mini Tokyo 3D Map instance the plugin was removed from.

### `onVisibilityChanged(visible)`
- **Description**: Optional method called when the plugin's visibility changes (e.g., due to map display mode changes). Used for adjusting display elements' visibility.
- **Parameters**:
  - **`visible`** (`boolean`): `true` if the plugin is currently visible, `false` otherwise.
```

--------------------------------

### Load Plugins in HTML Head

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/integration.md

Include these script tags in the <head> of your HTML file to load plugins directly.

```html
  <script src="https://cdn.jsdelivr.net/npm/mt3d-plugin-precipitation@latest/dist/mt3d-plugin-precipitation.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/mt3d-plugin-fireworks@latest/dist/mt3d-plugin-fireworks.min.js"></script>
```

--------------------------------

### Create a new Marker

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/api/marker.md

Instantiate a new Marker component. Options can include a custom DOM element or minimum zoom level for visibility.

```javascript
new Marker(options: Object)
```

--------------------------------

### zoom

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/api/map.md

Fired repeatedly during an animated zoom transition.

```APIDOC
## zoom

### Description
Fired repeatedly during an animated transition from one zoom level to another, as the result of either user interaction or methods such as [Map#flyTo](./map.md#flyto-options).

### Type
`MapMouseEvent` | `MapTouchEvent`
```

--------------------------------

### Panel Constructor

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/api/panel.md

Creates a new Panel component. It extends the base JavaScript Object.

```APIDOC
## Panel Constructor

### Description
Creates a new Panel component. It extends the base JavaScript Object.

### Parameters

#### `options` (Object)

- **`options.modal`** (boolean) - Optional - If `true`, the panel will be modal and will close if the user clicks outside.
```

--------------------------------

### Popup Instance Members

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/api/index.md

Methods for managing a Popup instance.

```APIDOC
## Popup Instance Members

### Description
Methods for managing a Popup instance.

### Methods
- `addTo(map)`
- `remove()`
- `setHTML(html)`
- `setLngLat(lngLat)
```

--------------------------------

### isOpen()

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/api/panel.md

Checks if the panel component is currently open or closed.

```APIDOC
## isOpen()

### Description
Checks if a panel is open.

### Returns

- [`boolean`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean) - `true` if the panel is open, `false` if it is closed.
```

--------------------------------

### Configure Mapbox Access Token

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/build.md

When deploying on a website, configure the Mapbox access token and Public Transportation Data Center secrets within the Map constructor in index.html.

```javascript
map = new mt3d.Map({
  /* ... */
  accessToken: '<Mapbox access token>',
  secrets: {
    odpt: '<access token for Public Transportation Open Data Center>'
  }
});
```

--------------------------------

### viewmode

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/api/map.md

Fired when the view mode is changed. The mode is a string representing the current view mode.

```APIDOC
## viewmode

### Description
Fired when the view mode is changed.

### Type
`Object`

### Properties
- **`mode`** (`string`): A string representing the view mode. Either `'ground'` or `'underground'`.
```

--------------------------------

### zoomend

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/api/map.md

Fired just after the map completes a zoom transition.

```APIDOC
## zoomend

### Description
Fired just after the map completes a transition from one zoom level to another, as the result of either user interaction or methods such as [Map#flyTo](./map.md#flyto-options).

### Type
`MapMouseEvent` | `MapTouchEvent`
```

--------------------------------

### on

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/api/map.md

Adds a listener for events of a specified type. This is used to react to map events.

```APIDOC
## on(type, listener)

### Description
Adds a listener for events of a specified type.

### Parameters
#### Event Type
- **type** (string) - The event type to listen for.
#### Listener
- **listener** (Function) - The function to be called when the event is fired.

### Returns
- **Map**: Returns itself to allow for method chaining.
```

--------------------------------

### Initialize Google Analytics

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/public/index.html

This snippet initializes the Google Analytics data layer and configures the tracker with a specific measurement ID.

```javascript
window.dataLayer = window.dataLayer || [];
function gtag(){
  dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-7NP0LHFG11');
```

--------------------------------

### Import Map Module (ES6)

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/integration.md

Include this line at the beginning of your code to import the Map class using ES6 module syntax.

```javascript
import {Map} from 'mini-tokyo-3d';
```

--------------------------------

### Import Map Module (CommonJS)

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/integration.md

Include this line at the beginning of your code to import the Map class using CommonJS module syntax.

```javascript
const {Map} = require('mini-tokyo-3d');
```

--------------------------------

### addTo(map)

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/api/panel.md

Adds the panel component to a specified Mini Tokyo 3D map.

```APIDOC
## addTo(map)

### Description
Adds the panel to a map.

### Parameters

#### `map` (Map) - Required - The Mini Tokyo 3D map to add the panel to.

### Returns

- [`Panel`](./panel.md) - Returns itself to allow for method chaining.
```

--------------------------------

### setHTML(html)

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/api/panel.md

Sets the panel's content using provided HTML string. Use with trusted content only.

```APIDOC
## setHTML(html)

### Description
Sets the panel's content to the HTML provided as a string. This method does not perform HTML filtering or sanitization, and must be used only with trusted content.

### Parameters

#### `html` (string) - Required - A string representing HTML content for the panel.

### Returns

- [`Panel`](./panel.md) - Returns itself to allow for method chaining.
```

--------------------------------

### setTitle(title)

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/api/panel.md

Sets the panel's title to a given text string.

```APIDOC
## setTitle(title)

### Description
Sets the panel's title to a string of text.

### Parameters

#### `title` (string) - Required - The title of the panel.

### Returns

- [`Panel`](./panel.md) - Returns itself to allow for method chaining.
```

--------------------------------

### Marker Events

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/api/marker.md

Events that can be listened to on a Marker instance.

```APIDOC
## click

### Description
Fired when a pointing device (usually a mouse) is pressed and released on the marker.
```

```APIDOC
## mouseenter

### Description
Fired when a pointing device (usually a mouse) enters the marker.
```

```APIDOC
## mouseleave

### Description
Fired when a pointing device (usually a mouse) leaves the marker.
```

--------------------------------

### flyTo

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/api/map.md

Animates a transition to new map parameters (center, zoom, bearing, pitch) along a flight-like curve, incorporating seamless zooming and panning.

```APIDOC
## flyTo(options)

### Description
Changes any combination of `center`, `zoom`, `bearing`, and `pitch`, animating the transition along a curve that evokes flight. The animation seamlessly incorporates zooming and panning to help the user maintain their bearings even after traversing a great distance.

If a user has the `reduced motion` accessibility feature enabled in their operating system, the animation will be skipped and this will behave equivalently to `jumpTo`, unless `options` includes `essential: true`.

### Parameters
#### `options`
- **options** (Object) - Options describing the destination and animation of the transition. Accepts [CameraOptions](https://docs.mapbox.com/mapbox-gl-js/api/properties/#cameraoptions), [AnimationOptions](https://docs.mapbox.com/mapbox-gl-js/api/properties/#animationoptions), and the following additional options:
  - **`options.curve`** (Number, default: `1.42`) - The zooming "curve" that will occur along the flight path.
  - **`options.maxDuration`** (Number) - The animation's maximum duration, measured in milliseconds.
  - **`options.minZoom`** (Number) - The zero-based zoom level at the peak of the flight path.
  - **`options.screenSpeed`** (Number) - The average speed of the animation measured in screenfuls per second.
  - **`options.speed`** (Number, default: `1.2`) - The average speed of the animation defined in relation to `options.curve`.

### Returns
- **Map** - Returns itself to allow for method chaining.
```

--------------------------------

### Panel Instance Members

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/api/index.md

Methods for controlling the content and state of a Panel instance.

```APIDOC
## Panel Instance Members

### Description
Methods for controlling the content and state of a Panel instance.

### Methods
- `addTo(map)`
- `isOpen()`
- `remove()`
- `setButtons(buttons)`
- `setHTML(html)`
- `setTitle(title)
```

--------------------------------

### click Event

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/api/map.md

Fired when a pointing device (usually a mouse) is pressed and released at the same point on the map.

```APIDOC
## click Event

### Description
Fired when a pointing device (usually a mouse) is pressed and released at the same point on the map.

### Type
[`MapMouseEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#mapmouseevent)
```

--------------------------------

### setHTML(html)

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/api/popup.md

Sets the content of the popup using an HTML string. Use with trusted content only.

```APIDOC
## setHTML(html)

### Description
Sets the popup's content to the HTML provided as a string. This method does not perform HTML filtering or sanitization, and must be used only with trusted content.

### Method
`setHTML(html)`

### Parameters
#### Parameters
- **html** (string) - A string representing HTML content for the popup.

### Returns
- Popup: Returns itself to allow for method chaining.
```

--------------------------------

### dblclick Event

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/api/map.md

Fired when a pointing device (usually a mouse) is pressed and released twice at the same point on the map in rapid succession.

```APIDOC
## dblclick Event

### Description
Fired when a pointing device (usually a mouse) is pressed and released twice at the same point on the map in rapid succession.

### Type
[`MapMouseEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#mapmouseevent)
```

--------------------------------

### getEcoMode()

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/api/map.md

Retrieves the current eco mode, which can be either 'normal' or 'eco'.

```APIDOC
## getEcoMode()

### Description
Returns the current eco mode.

### Returns
[`string`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String): A string representing the current eco mode. Either 'normal' or 'eco'.
```

--------------------------------

### setLngLat(lnglat)

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/api/popup.md

Sets the geographical coordinates for the popup's anchor and repositions the popup accordingly.

```APIDOC
## setLngLat(lnglat)

### Description
Sets the geographical location of the popup's anchor, and moves the popup to it.

### Method
`setLngLat(lnglat)`

### Parameters
#### Parameters
- **lnglat** (LngLatLike) - The geographical location to set as the popup's anchor.

### Returns
- Popup: Returns itself to allow for method chaining.
```

--------------------------------

### Specify Mapbox Access Token

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/migration.md

Use the `accessToken` option in the `Map` constructor to provide your Mapbox access token. This replaces the previous `secrets.mapbox` option.

```javascript
const options = {
  /* ... */
  accessToken: '<Mapbox access token>'
};
const map = new mt3d.Map(options);
```

--------------------------------

### drag Event

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/api/map.md

Fired repeatedly during a "drag to pan" interaction.

```APIDOC
## drag Event

### Description
Fired repeatedly during a "drag to pan" interaction.

### Type
([`MapMouseEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#mapmouseevent) | [`MapTouchEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#maptouchevent))
```

--------------------------------

### ecomode Event

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/api/map.md

Fired when the eco mode is changed.

```APIDOC
## ecomode Event

### Description
Fired when the eco mode is changed.

### Type
[`Object`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)

### Properties
- **`mode`** (`string`): A string representing the eco mode. Either `'normal'` or `'eco'`.
```

--------------------------------

### once

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/api/map.md

Adds a listener that will be called only once to a specified event type. Useful for one-time event handling.

```APIDOC
## once(type, listener)

### Description
Adds a listener that will be called only once to a specified event type.

### Parameters
#### Event Type
- **type** (string) - The event type to add a listener for.
#### Listener
- **listener** (Function) - The function to be called when the event is fired.

### Returns
- **Map**: Returns itself to allow for method chaining.
```

--------------------------------

### Add Panel to Map

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/api/panel.md

Adds the panel to a specified Mini Tokyo 3D map. Allows for method chaining.

```javascript
panel.addTo(map)
```

--------------------------------

### Marker Instance Members

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/api/marker.md

Methods available on a Marker instance to control its behavior and appearance.

```APIDOC
## addTo(map)

### Description
Attaches the `Marker` to a `Map` object.

### Parameters
*   **`map`** (`Map`) - The Mini Tokyo 3D map to add the marker to.

### Returns
*   [`Marker`] - Returns itself for method chaining.
```

```APIDOC
## remove()

### Description
Removes the marker from a map.

### Returns
*   [`Marker`] - Returns itself for method chaining.
```

```APIDOC
## setActivity(active)

### Description
Sets the marker's activity state, typically used for highlighting.

### Parameters
*   **`active`** (`boolean`) - If `true`, the marker is active.

### Returns
*   [`Marker`] - Returns itself for method chaining.
```

```APIDOC
## setLngLat(lnglat)

### Description
Sets the marker's geographical position and moves it.

### Parameters
*   **`lnglat`** (`LngLatLike`) - A [LngLatLike](https://docs.mapbox.com/mapbox-gl-js/api/geography/#lnglatlike) describing where the marker should be located.

### Returns
*   [`Marker`] - Returns itself for method chaining.
```

```APIDOC
## setVisibility(visible)

### Description
Sets the marker's visibility state.

### Parameters
*   **`visible`** (`boolean`) - If `true`, the marker is visible.

### Returns
*   [`Marker`] - Returns itself for method chaining.
```

--------------------------------

### trackingmode

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/api/map.md

Fired when the tracking mode is changed. The mode is a string representing the current tracking mode.

```APIDOC
## trackingmode

### Description
Fired when the tracking mode is changed.

### Type
`Object`

### Properties
- **`mode`** (`string`): A string representing the tracking mode. Either `'position'`, `'back'`, `'topback'`, `'front'`, `'topfront'`, `'helicopter'`, `'drone'` or `'bird'`.
```

--------------------------------

### error Event

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/api/map.md

Fired when an error occurs. This is Mini Tokyo 3D's primary error reporting mechanism.

```APIDOC
## error Event

### Description
Fired when an error occurs. This is Mini Tokyo 3D's primary error reporting mechanism. We use an event instead of `throw` to better accommodate asynchronous operations. If no listeners are bound to the `error` event, the error will be printed to the console.

### Type
[`Object`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)

### Properties
- **`message`** (`string`): Error message.
```

--------------------------------

### touchend

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/api/map.md

Fired when a touchend event occurs within the map.

```APIDOC
## touchend

### Description
Fired when a `touchend` event occurs within the map.

### Type
`MapTouchEvent`
```

--------------------------------

### setEcoMode

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/api/map.md

Sets the eco mode to either 'normal' or 'eco'. In 'normal' mode, the frame rate for animations is 60. In 'eco' mode, the frame rate is set by the Map constructor option 'ecoFrameRate'.

```APIDOC
## setEcoMode(mode)

### Description
Sets the eco mode. In the normal mode (`'normal'`), the frame rate for train and airplane animations will be set to 60. In the eco mode (`'eco'`), the frame rate will be set to the [`Map`](./map.md) constructor option `ecoFrameRate`.

### Parameters
#### Mode
- **mode** (string) - A string representing the eco mode. Either `'normal'` or `'eco'`.

### Returns
- **Map**: Returns itself to allow for method chaining.
```

--------------------------------

### contextmenu Event

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/api/map.md

Fired when the right button of the mouse is clicked or the context menu key is pressed within the map.

```APIDOC
## contextmenu Event

### Description
Fired when the right button of the mouse is clicked or the context menu key is pressed within the map.

### Type
[`MapMouseEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#mapmouseevent)
```

--------------------------------

### getModelPosition(lnglat, altitude)

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/api/map.md

Projects a geographical coordinate (LngLat) to Mercator coordinates relative to Tokyo Station, considering a specified altitude.

```APIDOC
## getModelPosition(lnglat, altitude)

### Description
Projects a `LngLat` to a `MercatorCoordinate`, and returns the translated mercator coordinates with Tokyo Station as the origin.

### Parameters

**`lnglat`** ([`LngLatLike`](https://docs.mapbox.com/mapbox-gl-js/api/geography/#lnglatlike)) The location to project.

**`altitude`** ([`number`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)) The altitude in meters of the position.

### Returns

{x: [`number`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number), y: [`number`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number), z: [`number`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)}: The translated mercator coordinates with Tokyo Station as the origin.
```

--------------------------------

### touchcancel

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/api/map.md

Fired when a touchcancel event occurs within the map.

```APIDOC
## touchcancel

### Description
Fired when a `touchcancel` event occurs within the map.

### Type
`MapTouchEvent`
```

--------------------------------

### Resize Event

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/api/map.md

Event fired when the map is resized.

```APIDOC
## resize

### Description
Fired immediately after the map has been resized.
```

--------------------------------

### addTo(map)

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/api/popup.md

Adds the popup to a specified map instance, making it visible on the map.

```APIDOC
## addTo(map)

### Description
Adds the popup to a map.

### Method
`addTo(map)`

### Parameters
#### Parameters
- **map** (Map) - The Mini Tokyo 3D map to add the popup to.

### Returns
- Popup: Returns itself to allow for method chaining.
```

--------------------------------

### Set Panel Title

Source: https://github.com/nagix/mini-tokyo-3d/blob/master/docs/developer-guide/api/panel.md

Sets the text content for the panel's title bar. Supports method chaining.

```javascript
panel.setTitle(title: string)
```