このブログでは、チュートリアルを参考に、Mapbox Studioを使用して世界中の隕石落下地点を表示するヒートマップを作成します。また、各隕石の重量(グラム)を使用して、各隕石の相対的な大きさを表示します。
以下の順番で解説していきます。
Step1. データをアップロードする
Step2. マップスタイルを作成する
Step3. ヒートマップレイヤーを追加する
Step4. レイヤープロパティを設定する(半径、重み、強度、色、透明度)
Step5. マップを公開する
必要なもの
このブログでは、以下が必要です。
- Mapbox Studioのアカウントとアクセストークン
- 隕石の衝突データ:NASA のオープンデータ・ポータル(英語)からの隕石衝突に関する情報を使用します。以下のCSVファイルをコンピュータにダウンロードしておいてください。
CSVをダウンロード
Step1. データをアップロードする
Mapbox Studioで隕石落下情報をスタイルに追加するには、まずアカウントにデータをアップロードする必要があります。このファイルをMapbox Studioにアップロードするには、
- Tilesetsページにアクセスします。
- 「New tileset」ボタンをクリックします。
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/649915f7032091035a846c33_y0Z9aqmBEYcSjk3_YIJOf85-EqVtnuQPRAbDl-xxGgDTD05HBEIUZ6KwGJ43jInBNrRP_Gpxk4TUsjMAnx7AgqXHmepSNvsvhZCV2ZGMXwNKfPNQjT1LzzD2U6eM7NM9HFw_X-HU9065xq4G-9A_Wqs.png)
- 「Select a file」をクリックし、「meteorites.csv」を選択します。
- 「Confirm」をクリックして、ファイルをアカウントにアップロードします。
- アップロードが完了すると、画面右下に通知アイコンが表示されます。
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/649915f747b9b686549dbd26__gbGTV9d66Z8durg2F7imQ_OhBDWKJ7PTkE8FRtY4jg9GDDYdQu1YaHGytwI7Yq-JvE819F0AcQuiUD-KQ_P-d7l_klgs8uBps9QJixt1YtyqpL8apzvYHXd2P0Lt7nExHrk9L0jrVGiPK5xobufeUo.png)
Step2. マップスタイルを作成する
隕石落下情報をタイルセットとしてアップロードしたので、それを新しいマップスタイルに追加することができます。
- Mapbox StudioのStyleページに移動します。
- 「New style」ボタンをクリックします。お好きなスタイルテンプレートを利用していただけますが、今回このブログでは「Streets」スタイルを選択し、「Customize Streets」をクリックします。
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/649915fef5875410b066c5fa_j5urxa4M9wAN9T-V1ZS8HUCjS35UHcyrWtyXhznfHLn3UCrPxJupo-KlHG1cEb1fruxwVFwOVtWVqLehy3vWdeO6Ygpaxq_ZSXogMxjNMNp9uB59rCyBhVapoJxjkicHU3-yRob_geFTN4PSy2WnPK8.png)
- これで、Mapbox Studioを使ってマップスタイルを作成することができます。わかりやすいように、新しいスタイルの名前を変更します。画面左上のタイトルフィールドをクリックし、タイトルを「隕石」に変更しておきましょう。
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/649915f95d11aea459f2eab3_in4ugPEfQxUih2oU-BqA4VFTzJuaPLSh2AinR1bKi8cHWURFT60UGeURKGyqRG8twsRdeVIrsyPWGCHXxfRzfqrySkf09DPQPlHRfZBPqyxaVFn3HdM8Mr1AH6YmZNmQQtHAeV_Hyt9MIMTTPwDUZYw.png)
Step3. ヒートマップレイヤーを追加する
隕石衝突データをヒートマップレイヤーとして追加してスタイルを設定するには、作成したスタイルに新しいレイヤーを追加する必要があります。
- 「Components」パネルが左側に表示されているため、「Layers」タブをクリックして切り替えます。
- レイヤーパネルの上部で、「+」をクリックしてレイヤーを追加します。
- 「Source」のリストで、”meteorites”を検索し、先ほどインポートした隕石衝突タイルセットを選択します。
- 「Type」オプションをクリックし、「Heatmap」を選択します。
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/649915f8c2a9544fe8394658_HpIUyzZwcdRQqw48lPje_6Cc-bSGd1j7ok3L10wkunt2V0U3M4iM7UPqbmb9JafPnB7STBLX6NtwIzIiWkkxUqkScQkZPT2MzPX7RNrw52fA23kW_PnJ77NJmbKnX9JWJ8Dx5S9duurov6JiPkU1zvA.png)
- パネル上部の「Style」タブをクリックします。
- 隕石衝突タイルセットがスタイルのヒートマップレイヤーになりました。レイヤー名をクリックし、"meteorite strikes "に変更します。
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/649915f75d11aea459f2ea92_J4ki1ERy6ipTXsM-PGwtIyzH0PKmSB4u_a1iB3-w3EuPn2M1Fpat14mXZQm8P6oI8E3tNA2cbNsX-ZdrZ6ZHjtn9OzG485QSpyCTxH45oKiXp0hh6siLBxxfCS50WprLgNQ8qqnJgpz9nWWyrNAbgxs.png)
Step4. レイヤープロパティを設定する(半径、重み、強度、色、透明度)
Mapbox Studioのヒートマップには異なるレイヤープロパティオプションがあります。ヒートマップを作成するための鍵となる、それぞれのプロパティをご紹介します。
半径(Radius)
ヒートマップの滑らかさを保つために、ズームされるにつれてポイントの半径を大きくする必要があります。このチュートリアルでは、デフォルト(すべてのズームレベルで半径30px)を変更し、マップがズームされるにつれて半径が大きくなるようにします。
- ヒートマップ レイヤーの「Radius」タブを選択します。
- 「Style across zoom range」を選択します。
- まず、Zoomレベル0 (=最大までズームアウトした状態) での半径を5pxに変更し、「Done」をクリックします。
- 続いて、既にZoomレベル22(=最大までズームインした状態)で半径30pxに設定されている部分はこの設定のままにしておきます。
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/649915f8e9d257b888c73f9e_OPuC4rLoqC7eu_qm98NO3_bftjsEcYByi7KvyhkfTALRu_L8Oj2Wd5TjxsZtfXNWQ1l0d0-K_JT3lPIwAgW2_9IUMQVLHvWvngnkKu3xAgsVFQi8l8YKxJoOnToUG3F6hwruyJrGrbaHjwGQpZj0Qpg.png)
重み(Weight)
アップロードしたタイルセットの mass(g)プロパティ(質量)は1〜6000000グラムの範囲です。隕石のサイズは実に幅広いですね!質量が大きくなるにつれて、ポイントの重みが増すように設定しましょう。
- 「Weight」タブを選択する。
- 「Style across data range」をクリックする。
- スタイルのベースとなる数値データフィールドを選択する画面が表示されます。「mass(g)」を選択します。
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/649915fa7a9ffe1f3e0cdeb2_IlYQxeT1lDbNXqzqsqi-NBX49xDEu-eYx8Jy8x3yz4AW3fUEy3w6pSbYQIFE_dKAozTmvwAZYrvNFMZJe_MQzGHu1ra72AxpTAB90DLsYt6jH-aCRiD1COmoptr8CdZwo0DSV1ICvnG9v9FmfM_OAMI.png)
- mass:0 のHeatmap weight:1に設定されているので、そのままの設定にして「Done」をクリックします。
- 次に、データセットの最大質量(今回はmass:6000000)に関して、weight:25に変更し、「Done」をクリックします。
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/649915f82f809380b9c06ea7_t-0S0n_63LAiPog7Qig12FePXcCLUlde8G7khIMrbmNuh_9VIaiY8peu3aXZBPNvS8TotQ-1b7842KhORYgGMpdFYY4xOZ6hz71ZysAtQlW56RO9yvhxu_mdfJJbP7Im5tQu56VdHjwkZzcNXz727c8.png)
強度(Intensity)
ヒートマップレイヤーの強度は、マップがズームインするにつれて増加し、ズーム範囲全体で同じような外観を保つことができます。
- レイヤーの「Intensity」タブを選択します。
- 「Style across zoom range」をクリックします。
- 最初は、Zoomレベル: 0、Intensity:1に設定されています。そのままにして「Done」をクリックします。
- 次に、Zoomレベル22、Intensity:10に変更し、「Done」をクリックします。
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/649915f94594c9b3c8d44884_k6g7_10me6gyfEguwZn8krm4ucfevhjrPHWWGeN6rdec8cEI-doZuVTiC6o9h9UnSa1Mb3iNd7P16JhYXocseVMe8WbQG4dPAFcT6LJNxjnVvDHRsNPlvXcaJkajAZhO0HVUdF9JBRXSExWmeY2naks.png)
以下の画像は、強度がスタイルの外観に与える影響を示しています。右の画像はデフォルトの Intensity:1を使用した強度を示し、左の画像はZoomレベルに応じて強度が増加するように設定しています。
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/649915f92f809380b9c06ed3_9mYzn6oKrF9gEfrZclevOOK_dLSM1v0q6UW_VVSF9UDPVnv2mRXMdSoq0C1ygAs1ESKgGRLYMmsO6gY9CAfPZ1iS3C5o47RFIPqSKBxiAei_kpMcsGxO1NgokzjL-Plt1dqbRiAhp8JQWqaYuX2acGA.png)
カラー(Color)
Mapbox Studioのヒートマップには、データの密度を表す鮮やかなカラーが用意されています。配色を変更してみましょう。以下の色は、地図作成に特化した色推奨サイトColor Brewerから引用しました。
- ヒートマップレイヤーの「Color」タブを選択します。
- density:0、opacity:0という設定が入っています。この設定がないと、隕石レイヤーが不透明になり、マップの他の部分が見えなくなってしまいますので、この設定のままにしておきます。
- 上から2個目のdensity:0.1をクリックし、カラーを「#ffffb2」に変更し、「Done」をクリックします。
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/649915fc4594c9b3c8d448ef_5S0xrIOSW5MsSoyjjXSlZbSM-EwLu4mM-JVKVwByf9gho0hgDtF8ZkuD7J_lR1MUEgx4bWS_8M_514MqK5FQyJG1vVYMplgMX-LN8J4OWlXxmaLCX4wsRJ3kVDUZ4QSdR1uiL4mEuyM2UgGr_qcw0S4.png)
- 残りdensityも以下の色で設定してください。素敵な色合いになりますね!
- 0.3: #feb24c
- 0.5: #fd8d3c
- 0.7: #fc4e2a
- 1.0: #e31a1c
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/649915fa47b9b686549dc184_WVvqmTgRn9z9Elg9VFrfHFMDhjuNGRDbyWToj8D2SVTRjbR7A0q92RzhomOG6xcdfPr_gK7UTj6CxDOkvphFwGoVud75TDoFMD4nFb1WM8KeiDwp7_lV3M4StldnX5fkSDJd1EeWUxqMgaXho1ChJDE.png)
不透明度(Opacity)
これでヒートマップはきれいに表示されていますが、隕石落下地点の位置ラベルはまだ読みづらいです。不透明度(Opacity)を調整して、ラベルが読めるようにしましょう。
- 「Opacity」タブを選択します。
- スライダーバーを使うか、数値を直接入力して、Opacity:0.7に変更します。
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/649915fc032091035a846f63_HR7dXG9aSejSNCznrnCgXqtVL7KoGo-cFQbLxZ0-9zLr5iZ79hTZCsvdKEzvOoPUuxM9aLyCQ4p4ud1kEFQmadXLPcUQ1lBKBbemV15YEoE55UT3WcMMYdgxel8yDwCrOAoYCB0LLAv1mLKtwF78jz0.png)
Step5. マップを公開する
マップスタイルの編集が完了したら、画面右上の「Publish」をクリックして変更を公開します。「Publish」ボタンをクリックすると、このスタイルの前のバージョンと現在のバージョンの違いがウィンドウに表示されます。変更内容に問題がなければ、「Publish」をクリックします。これで、さまざまなツールやアプリケーションからスタイルを共有できるようになります。
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/649915fc5d11aea459f2ef65_CGJV_xmgNttW3DID2BnwTWrpibDtVEv8lMOHDQbGuGyTAXng8sUxJf8nRQXdR01-UoUYoXENmlUysjBADNwOMSxfM4GjFjAerxkTRMkibWDNGqEeatzmcq5-3Cd33AWX8PcUNK6yiGfaOLL0kGbAjtw.png)
Mapbox Studioのスタイルページに戻ると、リストの一番上に新しいスタイルが表示されます。
これで皆さんは、世界中の隕石の衝突データを表示するマップスタイルを作成し、各隕石の相対質量を表示できるようになりました。お疲れ様でした!
さらなる応用
Mapbox Studioでは、作成したマップスタイルをさまざまな方法で使用できます。このマップをWebサイトやWebアプリケーション、モバイルアプリケーションで直接使用することができます。作成したスタイルの使用方法については、Mapbox Studioマニュアル「Publish style」をご覧ください。