0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Mapbox Studioで地図ラベルの形状を変更する

Posted at

ラベルは、地図上で視認性を高める重要な要素であり、Mapbox Studioでは、カスタムラベルを簡単に作成できます。この記事ではその方法をご紹介します。

地図ラベルに形状を付ける

ラベルの配置や形状によって、テキストと強調された地形の間に関係が生まれます。湾曲した弧を描く海岸線とそれに対応する海のラベル、蛇行する川とその流れに沿ったラベル、名前に囲まれた山の頂上などです。

Mapbox Studioで新しいデータセットを作成すれば、曲線ラベルや形状、方向性のあるラベル(斜め線、半円など)を簡単に作ることができます。

この例では、下の地図で使用されている3つのラベルを作成します。2つの湾曲した海のラベルと、山の周りの円形のテキストを作成します。
61f0daaa47e071b7a1ef5f8b_ltn6OslktMej2kRVM7qUTO_8qrM3ZJssCJwYYW_ZADxnCbNC2K0f9VrSH4qQ_SZBxW-8Fm5J04DTMaaQ3bYvAnrc3ugjkZ44DmuxwhyfvtqSdha7lAshgM6Lylx0PQ.png
ステップ1 - Mapbox Studioアカウントの右上にある 「Datasets」に移動し、「New dataset 」をクリックします。
61f0358e1b8c4c29fdcc3f4e_p2UUrPzaQGmW6uVA68a1gXaiWC7SOZPQLZaJrtrxcg0r7fIFl5_SAYM8ylx47mdRtMAqN7AONpWAijCT7gfUXmi5PKEwQHfspNzAY5hsE3jjyh26VwrFzuEj9h4pdg.png
ステップ2 - 新しいデータセットにタイトルを付けます - 例えば "Map Labels"など。このエディターでは、ラベルを配置する場所とその形状を完全にズームコントロールすることができます。
61f0358fe37b3dae43d44924_6dQNzw_E3fbFxZsmmbM1OvQoqWNdrZ9fJzYq3Xodkoln5elLfGDs_q4fLuBfMvDqhrfWEj2LanwDElxAFHpJP1CI827dKA2x6PJDJENRhsYfdrVZmuJpjLyCKcH7_w.png
ステップ3 - 目的のエリアを検索してズーム!
ステップ4 - 左上から線画ツールを選択します(独自のマーカー位置を作成したり、独自のポリゴンを描くことも可能です!)
61f0358f135c47824baf4b7e_0dqDF9dlHA1hgXCKUDC9qyXU0N6jOAMmhXb6BQAZeMPhnlTJRLtivVfY1RJnS1SJZ4VVuS_apZGEQmDFA7sKTDD7nHHW7_hKfk_xI2sI7Zv0z9JC6jIH3oN8Nl82Ng (1).png
ステップ5 - 地図上に線を引くだけです。
61f0358f52adc96a5dcc398c_O0VKTltx5_nDfoq895EgbFvkKlnqhgC5D_2kG6Msuyb7NSm41BQZa67SmEgwieNTkncdAr4XOeJ38hCcOCbMpa4ErCCM21VQEaWwVrnagNs18evCyy0uD_eWff_PjA.png
ステップ6 - 「add property」を押します。この場合、Fieldに「label」と入力し、value(値)ボックスにラベルテキストを入力します。ここでは、近くの海岸線のカーブを反映させるために、海の名前にラベルを付けています。
61f0358f1b8c4ca6d4cc3f69_UCTNqiF_KNVfEi4kJkMIWAtmUwivt1n5Afh9IHD02l_VI7GfH-t4aHac1C0Hk6RxyPkSTY96nvF4VjFvSBUtikMYJhd95rj7BhSVppDgbk4pG6e-1uv4ejhlDY0tcg.png
ステップ7 - 右上の「Save」をクリックし、ポップアップボックスで再度「Save」をクリックします。データセットの便利なところは、戻って編集できることです。さらに追加したり、修正したりすることができます。以下の例では、同じデータセットに3つの線を作り、それぞれに異なる形とラベルを付けています。
61f0358f8b7365dada674815_DiP1aUyVs8p8z2IbVEL71FJwbbY9XiUsoz8NQcQmeg8TMOCUPqr0HpF5i0ezW6Z0i0t_ETaRE1MVBFmh2GeyzxFpQIMGM_6mgjKHkffqIMwQha3M_hU0oH3cUpkHvw.png
ステップ8 - 「Export」をクリックした後にポップアップボックスで「Export」をもう一度クリックします。これで、Mapbox StudioのStylesページの未使用レイヤーに表示されるようになります。

ラベルのスタイリング

ラベルの配置が決まったら、次はスタイリングです。フォント、色、テキストスペースなどを使ってラベルをスタイリングすることで、オリジナリティを表現することができます。

ステップ1 - 「Map Labels」データセットが未使用のデータソースに表示されているはずです - このレイヤーを選択し、「Select data」の「Type」の項目で「Symbol」スタイルを使用します。
61f035902857ef9babe31ad4_C9Qnt-p7ESPXwxrhYZVVJHKY4QlBQ1TZ7XgJ1obLsXzxMcxnNpUlFGuEZZKVU2kEzzgaB_6Z0GbFSbg7JYuAINVajH2dN9ECXTJXigk9W593KI8cFy03ynom6EpeDQ.png
ステップ2 - レイヤーの「Style」画面にて「Insert a data field」ボタンをクリックし、「Label」フィールドを選択します。
61f03590e37b3d0568d44926_ECOkbGLDtjjEEvO7Q71IiKt-GKK6m51VByK5oubEhuIl8F9mF7YZ9Nns2hEyw9YxK_E1kZrgmrL6R1NMztuyUtt7w2N3SSnLptPGso_SRfhwSHUTC1sQfMkrQMSobQ.png
ステップ3 - 次に、「Placement」を選択し、「Line」アイコンを選択します。これで曲線のラベルが出来上がりました。
ステップ4 - 「Text」を選択 - フォントを選択します。Mapbox Studioには数十種類のフォントが内蔵されており、すぐに使用することができます。
61f0359052adc94b4dcc398d_x2pUvj_vecdMHqrV_Fi_zPNHmUaGJrCET4eVz-D8NR6dkJmKLCBmpFjH3Yx42pOS1mE12Ge_ZZ7cZoQ61JSGTWvwSYKwQ_L6NMsfePhy0ELw4YGDnphZW-9UYMPsRA.png
カスタムフォントが必要な場合は、.TTFおよび.OTFフォーマットでアップロードすることができます。トップバナーから「Fonts」を選択し、「Upload new font」ボタンを押してください。フォントリストに新しいカスタムフォントが表示されます。
61f03590e37b3d3a99d44925_ehoonDVeGetAw9w1dFCH7T_MHwxykC6cx-C1QsPSoQnjHvenRj8bdw6yZAW89OdmjfOcQDfimI00FLzfNodhN2HhMGX8nz8W_45w29LVoVOn-F5nJ62d9OfZrByFJw.png
このほかにも、2つの便利な機能があります。「Transform」を使うと、文字列の大文字と小文字を変更することができます(とても便利です!)。「Halo」はテキストを縁取る際に利用し、特にマップの背景が派手な場合にテキストを目立たせる際に便利です。
61f035901b8c4c0800cc4048_BEpbUCsxZH92i1f-tgjHzO1iso84FtkWIJveaBnzjEbrC1OfvmuSHdq9abnSBtwqxtrdvI02q0Wa38oTovLhQiUXXXhx7RequG-vg8wVmLN1I-q9O8-xpFA8vnsAFA.png
これらの手順が、皆さんの地図作成を助け、ラベリングに追加要素を与えることができれば幸いです。ぜひお試しください!

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?