test

ニュースレター購読

デジタルマップ活用の業界別事例

Mapbox Japanでは、業界別デジタルマップの活用方法やデジタルマップ導入による効果について紹介した資料をご用意しております。無料でダウンロードいただけますので、ぜひMapboxのビジネス活用のご参考にご利用ください。

いますぐダウンロード

地図ゲーム開発におけるMapbox活用ガイド - Mapbox Gaming Solution

Mapbox Japanでは、地図ゲーム開発におけるMapboxのプロダクト活用方法や地図ゲーム開発向け基本APIを紹介した資料を無料でご提供しております。ぜひMapbox活用のご参考にご利用ください。

いますぐダウンロード

【デモ】Mapboxと歩く京都観光マップ

観光名所、京都の街を舞台にMapboxを活用したデモマップを作成しました。 旅行・観光業界の方はもちろん、Mapboxでどのようなマップが作れるのか知りたい方にもおすすめです。

無料でデモをみる

デザイン

【チュートリアル】Mapbox Studioで隕石落下地点のヒートマップを作成してみる|地図デザインの基礎

csvデータのインポートからレイヤープロパティ設定まで5ステップで解説

2023
06
28

Mapboxのサービス概要資料はこちら

無料でダウンロード無料でダウンロード

Mapboxのアカウント作成はこちら

今すぐ無料登録

お問い合わせはこちら

お問い合わせ

このブログでは、チュートリアルを参考に、Mapbox Studioを使用して世界中の隕石落下地点を表示するヒートマップを作成します。また、各隕石の重量(グラム)を使用して、各隕石の相対的な大きさを表示します。

以下の順番で解説していきます。

Step1. データをアップロードする

Step2. マップスタイルを作成する

Step3. ヒートマップレイヤーを追加する

Step4. レイヤープロパティを設定する(半径、重み、強度、色、透明度)

Step5. マップを公開する

必要なもの

このブログでは、以下が必要です。

  1. Mapbox Studioのアカウントとアクセストークン
  2. 隕石の衝突データ:NASA のオープンデータ・ポータル(英語)からの隕石衝突に関する情報を使用します。以下のCSVファイルをコンピュータにダウンロードしておいてください。

   CSVをダウンロード

Step1. データをアップロードする

Mapbox Studioで隕石落下情報をスタイルに追加するには、まずアカウントにデータをアップロードする必要があります。このファイルをMapbox Studioにアップロードするには、

  1. Tilesetsページにアクセスします。
  2. New tileset」ボタンをクリックします。
  1. 「Select a file」をクリックし、「meteorites.csv」を選択します。
  2. Confirm」をクリックして、ファイルをアカウントにアップロードします。
  3. アップロードが完了すると、画面右下に通知アイコンが表示されます。

Step2. マップスタイルを作成する

隕石落下情報をタイルセットとしてアップロードしたので、それを新しいマップスタイルに追加することができます。

  1. Mapbox StudioのStyleページに移動します。
  2. New style」ボタンをクリックします。お好きなスタイルテンプレートを利用していただけますが、今回このブログでは「Streets」スタイルを選択し、「Customize Streets」をクリックします。
  1. これで、Mapbox Studioを使ってマップスタイルを作成することができます。わかりやすいように、新しいスタイルの名前を変更します。画面左上のタイトルフィールドをクリックし、タイトルを「隕石」に変更しておきましょう。

Step3. ヒートマップレイヤーを追加する

隕石衝突データをヒートマップレイヤーとして追加してスタイルを設定するには、作成したスタイルに新しいレイヤーを追加する必要があります。

  1. Components」パネルが左側に表示されているため、「Layers」タブをクリックして切り替えます。
  2. レイヤーパネルの上部で、「」をクリックしてレイヤーを追加します。
  3. Source」のリストで、”meteorites”を検索し、先ほどインポートした隕石衝突タイルセットを選択します。
  4. Type」オプションをクリックし、「Heatmap」を選択します。
  1. パネル上部の「Style」タブをクリックします。
  2. 隕石衝突タイルセットがスタイルのヒートマップレイヤーになりました。レイヤー名をクリックし、"meteorite strikes "に変更します。

Step4. レイヤープロパティを設定する(半径、重み、強度、色、透明度)

Mapbox Studioのヒートマップには異なるレイヤープロパティオプションがあります。ヒートマップを作成するための鍵となる、それぞれのプロパティをご紹介します。

半径(Radius)

ヒートマップの滑らかさを保つために、ズームされるにつれてポイントの半径を大きくする必要があります。このチュートリアルでは、デフォルト(すべてのズームレベルで半径30px)を変更し、マップがズームされるにつれて半径が大きくなるようにします。

  1. ヒートマップ レイヤーの「Radius」タブを選択します。
  2. Style across zoom range」を選択します。
  3. まず、Zoomレベル0 (=最大までズームアウトした状態) での半径を5pxに変更し、「Done」をクリックします。
  4. 続いて、既にZoomレベル22(=最大までズームインした状態)で半径30pxに設定されている部分はこの設定のままにしておきます。

重み(Weight)

アップロードしたタイルセットの mass(g)プロパティ(質量)は1〜6000000グラムの範囲です。隕石のサイズは実に幅広いですね!質量が大きくなるにつれて、ポイントの重みが増すように設定しましょう。

  1. 「Weight」タブを選択する。
  2. Style across data range」をクリックする。
  3. スタイルのベースとなる数値データフィールドを選択する画面が表示されます。「mass(g)」を選択します。
  1. mass:0 のHeatmap weight:1に設定されているので、そのままの設定にして「Done」をクリックします。
  2. 次に、データセットの最大質量(今回はmass:6000000)に関して、weight:25に変更し、「Done」をクリックします。

強度(Intensity)

ヒートマップレイヤーの強度は、マップがズームインするにつれて増加し、ズーム範囲全体で同じような外観を保つことができます。

  1. レイヤーの「Intensity」タブを選択します。
  2. Style across zoom range」をクリックします。
  3. 最初は、Zoomレベル: 0、Intensity:1に設定されています。そのままにして「Done」をクリックします。
  4. 次に、Zoomレベル22Intensity:10に変更し、「Done」をクリックします。

以下の画像は、強度がスタイルの外観に与える影響を示しています。右の画像はデフォルトの Intensity:1を使用した強度を示し、左の画像はZoomレベルに応じて強度が増加するように設定しています。

カラー(Color)

Mapbox Studioのヒートマップには、データの密度を表す鮮やかなカラーが用意されています。配色を変更してみましょう。以下の色は、地図作成に特化した色推奨サイトColor Brewerから引用しました。

  1. ヒートマップレイヤーの「Color」タブを選択します。
  2. density:0、opacity:0という設定が入っています。この設定がないと、隕石レイヤーが不透明になり、マップの他の部分が見えなくなってしまいますので、この設定のままにしておきます。
  3. 上から2個目のdensity:0.1をクリックし、カラーを「#ffffb2」に変更し、「Done」をクリックします。
  1. 残りdensityも以下の色で設定してください。素敵な色合いになりますね!
  • 0.3: #feb24c
  • 0.5: #fd8d3c
  • 0.7: #fc4e2a
  • 1.0: #e31a1c

不透明度(Opacity)

これでヒートマップはきれいに表示されていますが、隕石落下地点の位置ラベルはまだ読みづらいです。不透明度(Opacity)を調整して、ラベルが読めるようにしましょう。

  1. Opacity」タブを選択します。
  2. スライダーバーを使うか、数値を直接入力して、Opacity:0.7に変更します。

Step5. マップを公開する

マップスタイルの編集が完了したら、画面右上の「Publish」をクリックして変更を公開します。「Publish」ボタンをクリックすると、このスタイルの前のバージョンと現在のバージョンの違いがウィンドウに表示されます。変更内容に問題がなければ、「Publish」をクリックします。これで、さまざまなツールやアプリケーションからスタイルを共有できるようになります。

Mapbox Studioのスタイルページに戻ると、リストの一番上に新しいスタイルが表示されます。

これで皆さんは、世界中の隕石の衝突データを表示するマップスタイルを作成し、各隕石の相対質量を表示できるようになりました。お疲れ様でした!

さらなる応用

Mapbox Studioでは、作成したマップスタイルをさまざまな方法で使用できます。このマップをWebサイトやWebアプリケーション、モバイルアプリケーションで直接使用することができます。作成したスタイルの使用方法については、Mapbox Studioマニュアル「Publish style」をご覧ください。

No items found.
No items found.

Mapboxのサービス概要資料はこちら

Mapbox Japanでは、プロダクトの概要や導入事例を紹介した資料をご用意しております。無料でダウンロードいただけますので、ぜひMapboxのビジネス活用のご参考にご利用ください。

無料でダウンロード無料でダウンロード

Mapboxのアカウント作成はこちら

Mapboxではお得な無料枠をご用意しているため、お気軽にご利用を開始することができます。ご登録がお済みでない方は今すぐMapboxアカウントに登録してMapboxのツール・サービスをお試しください。

今すぐ無料登録

お問い合わせはこちら

Mapboxのプロダクトや企業情報に関するご質問・ご不明点はこちらからお問い合わせください。

お問い合わせ

関連記事