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

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

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

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

この例では、下の地図で使用されている3つのラベルを作成します。2つの湾曲した海のラベルと、山の周りの円形のテキストを作成します。
![61f0daaa47e071b7a1ef5f8b_ltn6OslktMej2kRVM7qUTO_8qrM3ZJssCJwYYW_ZADxnCbNC2K0f9VrSH4qQ_SZBxW-8Fm5J04DTMaaQ3bYvAnrc3ugjkZ44DmuxwhyfvtqSdha7lAshgM6Lylx0PQ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2516459/45f28bf3-bb7e-4b3a-e9d3-efdf85481bea.png)
__ステップ1__  - Mapbox Studioアカウントの右上にある 「Datasets」に移動し、「New dataset 」をクリックします。
![61f0358e1b8c4c29fdcc3f4e_p2UUrPzaQGmW6uVA68a1gXaiWC7SOZPQLZaJrtrxcg0r7fIFl5_SAYM8ylx47mdRtMAqN7AONpWAijCT7gfUXmi5PKEwQHfspNzAY5hsE3jjyh26VwrFzuEj9h4pdg.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2516459/d418de54-c77a-98e7-139f-8866f20fc314.png)
__ステップ2__ - 新しいデータセットにタイトルを付けます - 例えば "Map Labels"など。このエディターでは、ラベルを配置する場所とその形状を完全にズームコントロールすることができます。
![61f0358fe37b3dae43d44924_6dQNzw_E3fbFxZsmmbM1OvQoqWNdrZ9fJzYq3Xodkoln5elLfGDs_q4fLuBfMvDqhrfWEj2LanwDElxAFHpJP1CI827dKA2x6PJDJENRhsYfdrVZmuJpjLyCKcH7_w.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2516459/f60fbc98-71e1-0ea0-b8e1-7142a59656cb.png)
__ステップ3__ - 目的のエリアを検索してズーム!
__ステップ4__ - 左上から線画ツールを選択します（独自のマーカー位置を作成したり、独自のポリゴンを描くことも可能です！）
![61f0358f135c47824baf4b7e_0dqDF9dlHA1hgXCKUDC9qyXU0N6jOAMmhXb6BQAZeMPhnlTJRLtivVfY1RJnS1SJZ4VVuS_apZGEQmDFA7sKTDD7nHHW7_hKfk_xI2sI7Zv0z9JC6jIH3oN8Nl82Ng (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2516459/74c53606-517c-bd15-c7fe-8f817afda806.png)
__ステップ5__ - 地図上に線を引くだけです。
![61f0358f52adc96a5dcc398c_O0VKTltx5_nDfoq895EgbFvkKlnqhgC5D_2kG6Msuyb7NSm41BQZa67SmEgwieNTkncdAr4XOeJ38hCcOCbMpa4ErCCM21VQEaWwVrnagNs18evCyy0uD_eWff_PjA.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2516459/b0651d28-aa5d-1283-eb4b-bd09b9646f88.png)
__ステップ6__ - 「add property」を押します。この場合、Fieldに「label」と入力し、value(値)ボックスにラベルテキストを入力します。ここでは、近くの海岸線のカーブを反映させるために、海の名前にラベルを付けています。
![61f0358f1b8c4ca6d4cc3f69_UCTNqiF_KNVfEi4kJkMIWAtmUwivt1n5Afh9IHD02l_VI7GfH-t4aHac1C0Hk6RxyPkSTY96nvF4VjFvSBUtikMYJhd95rj7BhSVppDgbk4pG6e-1uv4ejhlDY0tcg.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2516459/df41381a-fb8b-5dea-9bb8-e0bd69a795f6.png)
__ステップ7__ - 右上の「Save」をクリックし、ポップアップボックスで再度「Save」をクリックします。データセットの便利なところは、戻って編集できることです。さらに追加したり、修正したりすることができます。以下の例では、同じデータセットに3つの線を作り、それぞれに異なる形とラベルを付けています。
![61f0358f8b7365dada674815_DiP1aUyVs8p8z2IbVEL71FJwbbY9XiUsoz8NQcQmeg8TMOCUPqr0HpF5i0ezW6Z0i0t_ETaRE1MVBFmh2GeyzxFpQIMGM_6mgjKHkffqIMwQha3M_hU0oH3cUpkHvw.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2516459/d563e4c6-fdba-239e-0472-cf44154b1c2c.png)
__ステップ8__ -  「Export」をクリックした後にポップアップボックスで「Export」をもう一度クリックします。これで、Mapbox StudioのStylesページの未使用レイヤーに表示されるようになります。
## ラベルのスタイリング
ラベルの配置が決まったら、次はスタイリングです。フォント、色、テキストスペースなどを使ってラベルをスタイリングすることで、オリジナリティを表現することができます。

__ステップ1__ - 「Map Labels」データセットが未使用のデータソースに表示されているはずです - このレイヤーを選択し、「Select data」の「Type」の項目で「Symbol」スタイルを使用します。
![61f035902857ef9babe31ad4_C9Qnt-p7ESPXwxrhYZVVJHKY4QlBQ1TZ7XgJ1obLsXzxMcxnNpUlFGuEZZKVU2kEzzgaB_6Z0GbFSbg7JYuAINVajH2dN9ECXTJXigk9W593KI8cFy03ynom6EpeDQ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2516459/3ad585e2-ffa8-8de1-2c56-d3089f3ea634.png)
__ステップ2__ - レイヤーの「Style」画面にて「Insert a data field」ボタンをクリックし、「Label」フィールドを選択します。
![61f03590e37b3d0568d44926_ECOkbGLDtjjEEvO7Q71IiKt-GKK6m51VByK5oubEhuIl8F9mF7YZ9Nns2hEyw9YxK_E1kZrgmrL6R1NMztuyUtt7w2N3SSnLptPGso_SRfhwSHUTC1sQfMkrQMSobQ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2516459/4ae521c9-38cf-00c0-32b6-d6c8977b2172.png)
__ステップ3__ - 次に、「Placement」を選択し、「Line」アイコンを選択します。これで曲線のラベルが出来上がりました。
__ステップ4__ - 「Text」を選択 - フォントを選択します。Mapbox Studioには数十種類のフォントが内蔵されており、すぐに使用することができます。
![61f0359052adc94b4dcc398d_x2pUvj_vecdMHqrV_Fi_zPNHmUaGJrCET4eVz-D8NR6dkJmKLCBmpFjH3Yx42pOS1mE12Ge_ZZ7cZoQ61JSGTWvwSYKwQ_L6NMsfePhy0ELw4YGDnphZW-9UYMPsRA.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2516459/15a6bec6-df5b-f376-55c6-02f699674ed7.png)
カスタムフォントが必要な場合は、.TTFおよび.OTFフォーマットでアップロードすることができます。トップバナーから「Fonts」を選択し、「Upload new font」ボタンを押してください。フォントリストに新しいカスタムフォントが表示されます。
![61f03590e37b3d3a99d44925_ehoonDVeGetAw9w1dFCH7T_MHwxykC6cx-C1QsPSoQnjHvenRj8bdw6yZAW89OdmjfOcQDfimI00FLzfNodhN2HhMGX8nz8W_45w29LVoVOn-F5nJ62d9OfZrByFJw.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2516459/2d97df49-d13f-2043-e505-73f9a39558dc.png)
このほかにも、2つの便利な機能があります。「Transform」を使うと、文字列の大文字と小文字を変更することができます（とても便利です！）。「Halo」はテキストを縁取る際に利用し、特にマップの背景が派手な場合にテキストを目立たせる際に便利です。
![61f035901b8c4c0800cc4048_BEpbUCsxZH92i1f-tgjHzO1iso84FtkWIJveaBnzjEbrC1OfvmuSHdq9abnSBtwqxtrdvI02q0Wa38oTovLhQiUXXXhx7RequG-vg8wVmLN1I-q9O8-xpFA8vnsAFA.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2516459/b60edbe9-d1f0-ed52-4158-c01ca38247a3.png)
これらの手順が、皆さんの地図作成を助け、ラベリングに追加要素を与えることができれば幸いです。ぜひお試しください！