テキストラベルはマップの読みやすさを左右するポイントであり、Mapbox Studioでカスタマイズすることで、視認性を向上させることができます。
この記事では、テキストラベルを編集する方法をご紹介します。今回は山の名前と高度、そして山の説明を示すラベルを作成していきます。
まずは「Layers」の中から「natural-label」レイヤーを開き、「Type」では「Symbol」と設定します。(下図では、レイヤーをフィルタリングしています。)
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/62593a1d0261c35650d5872c_SQnFFr3WhE_u5ig2_F7L8l-hsYr_6GUnyiRflhEODP5okf0Vet21UIfA6bjnRSmjY-UXO8XYtzFRY3ecHR7YMXxn7dy_GWSbmRpSjDxyTOF-R3_V0FI2w9JuZFK-419qCpPjxWO3.png)
今回スタイルパネルでは、スタジオチュートリアルを参考に、ラベルに使用するアイコン(細い白線のSVG)をアップロードして追加しています。
続いて、「Style」パネルから「Text field」を選択し、「name」フィールドを選択します。これで山の名前のラベルが追加できました。
文字色は見やすいように「Color」を白に変更します。
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/62593a1ddb803b0ef592fd19_OFqORIDqXSEGjBGRap8kIf9LpTfxRFKsNzcq0-5dxkMMa2H3UuEpo54rDdo2r4WHZ3PjuHCBQneGwHBllg_UsYa0ceomCHmPnQVEUTI6m8JFyMkwVQPDkE7lI8MslsoPIz2sbRT_.png)
「Position」の「Text offset」では。xとyの値を入力することでテキストラベルの位置を変更します。
さらに、下にある 「Icon offset」は、アイコンの位置を調整するためのものです。
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/62593a1d0f614546645d0867_OKqS8fN6b0N57X2PqfyvG-SjDaG9uW6LRukvKD9ucLfP56YtekWWs-xDI41O2Vkn0XXu0OT-w1JJSE9cXyY6uSM2hBeugC3MXtVT8txozX2lysFaThrqf8a1L05NPFz51nHvdDPR.png)
ラベルに接頭辞や接尾辞、データドリブンテキストを追加する
レイヤーのデータドリブンフィールド、文章、またはアップロードしたカスタムデータからの文字を含めることで、ラベルを強調することができます。
作成したレイヤーを複製し、テキストのソースに 「elevation_ft」フィールドを使用します。テキストフィールドの数式ボックスで「coalesce」関数を使用して、prefix(接頭辞)を追加します。今回は高度を表す「FT」とメートルを表す「M」の文字を追加するためのレイヤー(下図ではPrefix MとPrefix FT)を作成しています。
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/62593a1eed1325f3fd7990ff_7d5sqPTp_Q1HnTnakQjlXduHKJ_7HvKdO1VVtAV_mdPZwbFw0WZgvnlN5DX2eCLPEQO6hrLqDgSYK5hyuwdv9Nr08S2PXNsG9LeBjqU6jgXPB1Lrbv00-8ZUMYdc9KMWtrkJOcs_.png)
ラベルの選択肢は無限大です。
下図は、ラベルに文章を記載する例です。””で囲むことにより、文章をそのまま表現することができます。
「Some contextual info about the mountain peak. This peak is xx feet high.」(「山頂についての説明を追加できます。この山頂は高さ○○フィート。」)
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/614d5ffa266cd642c3cfd459_6000aff5b7e3b5c1b710eeb4_Screenshot%25202021-01-14%2520at%252014.29.29.png)
このテキストも、上で説明した「Text offset」のテクニックを使って位置を変更することができます。
テキストとアイコンを組み合わせてラベルにすることで地図の価値を高めることができます。3D地形を使用すると、とても見栄えが良くなりますのでオススメです。
スタジオで3D地形を使ってラベルを山に付ける
他にも、3Dで山にラベルをつけたり、空のコントロールのグラデーション機能を使って空の光線を追加することもできます。
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/62593a1edb803b6e6492fd91_hm1YsPUhqKbeLyNaei3qthbTz2tt80C1Qe0SY6aUGQari3W6Bat4XQXw8W4HUJ0K9EYXHBaa7onv5ut7uIi9rCHhDapP3j6Zce3fH5vyB7m6fc4pdiZwsAKZyBaIEAUhIDl5U4rM.png)
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/614d60669542f7af1801beca_601af4fde0cb20478d29beff_image2.png)
ラベルを使った実装を楽しんで、是非みなさんが作った地図を共有してみてくださいね!
*本記事は、Mapbox Inc. Blogの翻訳記事です。