Mini Tokyo 3D 開発者向け機能の提供をスタート

Mini Tokyo 3D

f:id:nagixx:20200612154559j:plain

ほぼ 1 年前から開発を開始した、東京の公共交通のリアルタイム3Dマップ Mini Tokyo 3D のバージョン 2.1 をリリースしました。

おかげさまで Mini Tokyo 3D は第3回東京公共交通オープンデータチャレンジで最優秀賞を受賞したほか、2019年度 VLED 勝手表彰貢献賞、GitHub スター数 1,300 超えなど、各方面から熱いご支持をいただいています。

Mini Tokyo 3D の内容や開発の経緯については、すでに記事がいくつか出ているほか、日々の開発状況のツイートをまとめた Togetter まとめをご覧いただくとして、本記事では新バージョンで導入したクリエーター・開発者向けの機能についてご紹介します。

Mini Tokyo 3D のマップを Web ページに埋め込む

Mini Tokyo 3D のマップを Web ページに埋め込むのはとても簡単。Mini Tokyo 3D は地図タイルに Mapbox のサービスを利用しているため、まず Mapbox のアクセストークンを入手しましょう。Mini Tokyo 3D 開発者ガイドの「Mapbox アクセストークンの入手」の手順に従って、アクセストークン文字列を取得します。

そして埋め込みを行いたい Web ページのヘッダに、スタイルシートと JavaScript ファイルのリンクを追加。 

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

ページ本文には、マップを表示する <div> エレメントを配置して、<script> エレメントに MiniTokyo3D オブジェクトを作成する JavaScript コードを記述します。オブジェクトに渡すオプションには、 <div> エレメントの ID と、先ほど入手した Mapbox アクセストークンを指定するのを忘れずに。

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

  <script>
    const options = {
      container: 'mini-tokyo-3d',
      secrets: {
        mapbox: '<Mapbox アクセストークン>'
      }
    };
    const mt3d = new MiniTokyo3D(options);
  </script>
</body>

はい、これだけです。 <div> エレメントのスタイルを編集して好きなサイズにしたり、ページいっぱいに表示したりしてくださいね。

Mini Tokyo 3D API でカスタマイズ

Mini Tokyo 3D が提供する API を利用すれば、マップの表示内容や動作を柔軟にカスタマイズすることができます。上記の例のコードに、次のオプションを追加してみましょう。

  <script>
    const options = {
      container: 'mini-tokyo-3d',
      secrets: {
        mapbox: '<Mapbox アクセストークン>'
      },
      center: [139.767, 35.6806],
      zoom: 16
      bearing: 90,
      pitch: 15
    };
    const mt3d = new MiniTokyo3D(options);
  </script>

center、zoom、bearing、pitchはそれぞれマップの初期座標（経度・緯度）、ズームレベル、方角（北を 0 として反時計回りの角度）、傾き（真上を 0 とした角度）を表しています。デフォルトだと東京駅周辺を南方向から見たマップになりますが、この設定では新宿駅周辺を東方向やや上方から眺めた感じになります。

利用可能なオプションの詳細は、開発者ガイドの「Mini Tokyo 3D API」を参照してください。

バージョン 2.1 は初めての開発者向け機能のリリースということで、まだオブジェクト作成時の初期設定オプションしか変えることができませんが、今後のリリースではマップ内オブジェクトの操作やイベントコールバック、プラグイン API を介したカスタムレイヤーの追加など、よりインタラクティブなコントロールを可能にすることを構想しています。

モジュールとしてアプリに組み込む

今回のリリースのタイミングで npm パッケージとしての公開を始めています。皆さんのアプリの部品としてお使いいただけます。

まず、Mini Tokyo 3D の npm モジュールをインストールし、皆さんのアプリケーションの package.json に登録します。

npm install mini-tokyo-3d --save

CommomJS 形式でモジュールを読み込む場合は、コードの先頭で次のように記載します。

const MiniTokyo3D = require('mini-tokyo-3d');

ES6 形式でモジュールを読み込む場合は、コードの先頭で次のように記載します。

import MiniTokyo3D from 'mini-tokyo-3d';

アプリケーションのコード内で、次のようにして MiniTokyo3D オブジェクトを初期化します。options オブジェクトの container には Mini Tokyo 3D がマップを表示する HTML エレメントの ID を指定します。また、secrets.mapbox には、上のステップで入手した Mapbox アクセストークンを指定します。

const options = {
  container: '<コンテナエレメントの ID>',
  secrets: {
    mapbox: '<mapbox アクセストークン>'
  }
};
const mt3d = new MiniTokyo3D(options);

こちらも詳細は、開発者ガイドの「モジュールとしてアプリに組み込む」を参照してください。

スポンサー募集中！

最後になりますが、GitHub スポンサーの募集も始めました。皆さんのご支援は今後の開発の大きなモチベーションになりますので、Mini Tokyo 3D を気に入っていただけましたらぜひよろしくお願いします！

github.com