はじめに
こんにちは！
Mapbox Japanインターンシップ生の吉田です。
この記事では、「Mapbox Story Telling」を用いた事例をご紹介します。石川県の魅力を伝えるため、いしかわ百万石文化祭と私が所属している青山学院大学 古橋研究室が協力し、石川県の方々によって収集されたGPSデータをマップに取り込み、それを基にストーリーテリングマップを制作しました。
今回は、.gpxファイルをストーリーテリングマップにインポートする方法を主として、ご紹介していきます。
私が紹介する方法は
「Mapbox Studioに.geojsonファイルをインポートすることでGPSアートを表示させる」
というものです。
.gpxファイル
.gpxファイルとは、GPS Exchange Formatの略で、GPSデバイスやソフトウェア間で地理的位置情報を交換するための一般的なファイル形式です。XML形式で記述されており、ウェイポイント、ルート、トラックなどの情報を含むことができます。
ストーリーテリングのベースマップ作成
テンプレートのダウンロード方法からベースマップの作成まではこちらの記事やGitHubのMapbox storytelling リポジトリを参考にしてください。
まずは、ダウンロードしたconfig.jsにMapboxアカウントのアクセストークンや画像、説明文、位置情報等を書き込み、GPSアートを入れるストーリーテリングマップのベースをつくります。
このような感じでベースマップを作成します。
GPSアートをストーリーテリングマップにインポートする手順
.gpxファイルを.geojsonファイルへ変換
今回、私が実践しているMapbox Studioにデータをアップロードする方法では、.gpxファイルを直接インポートできるため、.geojsonファイルに変換する必要はないのですが、別の方法で.geojsonファイルに変換する必要があるものもあるため、紹介しておきます。
このような感じで、.gpxファイルを直接インポートできます。
.geojsonファイルに変換する方法
MapboxのtoGeoJSON等のGeoJSON変換ツールで.gpxファイルを.geojsonファイルに変換します。
.geojsonファイルをMapbox Studioにインポート
1. LayersのAdd new layerからcustom layerを選び、.geojsonファイルをインポート
2. Select dataを選択しTypeを「Line」に設定し、Styleに移動して色とLineの幅等を設定する
以上の手順で.geojsonファイルをMapbox Studioにインポートできます。
複数の.geojsonファイルをまとめてインポートしたい場合
多くのファイルを持っている場合、それぞれを個別にインポートするのは時間がかかります。手間や時間を節約したい方には、geojson.ioを使用して複数の.geojsonファイルを一つにまとめる方法がおすすめです。
「Open」でインポートするファイルを選択し、インポートが完了したら「Save」でGeoJSONを選択しファイルをダウンロードします。
このようにまとめて表示することができます。
3. セクションごとにマップレイヤーが変更されるようにindex.htmlにScriptを書き込む
Mapbox Studioで作成したマップレイヤーを、上のように次のセクションに移行するごとに変更されるようにしたいため、index.htmlに新たにスクリプトを書き込みます。
index.htmlはダウンロードしたZipファイルの中のsrc内の”index.html”からダウンロード可能です。
.onStepEnter(async response => {
var current_chapter = config.chapters.findIndex(chap => chap.id === response.element.id);
var chapter = config.chapters[current_chapter];
このスクリプトに続けて以下のスクリプトを書き込みます。
if (chapter.mapStyle) {
map.setStyle(chapter.mapStyle);
}
.onStepEnter(async response => {
var current_chapter = config.chapters.findIndex(chap => chap.id === response.element.id);
var chapter = config.chapters[current_chapter];
if (chapter.mapStyle) {
map.setStyle(chapter.mapStyle);
}
4. config.jsで各セクションの設定にmapStyleプロパティを追加し、それぞれのセクションで使用するMapboxスタイルのURLを指定する
このように各セクションごとにmapStyleプロパティとMapbox StyleのURLを書き込みます。
以上の手順で.gpxファイルをMapbox Story Tellingに表示させることができます。
今回吉田が作成したストーリーテリングマップはこちら
ぜひ皆さんも、Mapbox Story Tellingを使って、自分好みのストーリーテリングマップを作成してみてはいかがでしょうか。
Discussion