Studioでのマスキング：高解像度の行政区画ポリゴンを使用する

新しい高解像度行政区画境界線タイルセットが、新しいバージョンのStudioを使用するすべてのデザイナーと開発者が無料で利用できるようになりました。これは、マスキング技術を通じて個々の国を強調表示するのに最適なタイルセットです。マスキングとは、地図上のフィーチャを非表示にして、関心のある地理的領域が主な視覚領域として示されるようにし、不要な視覚的な煩雑さを軽減する地図作成用語です。

Studioで国をマスクするための5つの簡単なステップ

ステップ1

‍Studioで、新しい空白のスタイルを作成することから始めます。[レイヤー]タブを選択し、「Mapbox Satellite」レイヤーを追加します。

ステップ2

‍次に、「Mapbox Countries V1」レイヤーを追加します。デフォルトのスタイルは黒なので、慌てないでください！これは次のステップで調整されます。

ステップ3

Mapbox Countries V1 "レイヤーを色に関するデータ条件を使ってスタイル設定します。name "データフィールドを使い、"United States "と入力し、"select data "パネルを使い、地図上をクリックして希望の国を検索する。

ステップ4

「United States」を選択したら、色の不透明度に「0」の値を指定します。地図は次のようになります。

完了をクリックし、フォールバック値を白、不透明度を最大にします。地図には、米国を除くすべての国が白で表示されるはずです。

ステップ5

Mapbox の「Water」レイヤーを追加し、塗りつぶしの色を白に設定します。 

これで、対象国がマスクされました。もちろん、国のフォールバック値を好きな色でスタイルし、そのスタイルを水レイヤーに合わせる柔軟性があります。データの視覚化やWebプラットフォームの背景色に最も合うように、さまざまな色を試してください。

周辺の地理的コンテキストの追加

国境のような控えめな地理的コンテキストを追加するには、「Mapbox Countries V1」レイヤーを複製し、今回はスタイルタイプを線に変更します。

「select data」に移動し、以下に示すように「type」を「Line」に変更します。 

新しい国レイヤーを階層の最上部にドラッグして、必ず最上位に移動してください。下の例では、線がより細い幅で、灰色に着色されています。階層の最上部にある複製された国境レイヤーを参照してください。 

背景コンテキストレイヤーとしての白黒衛星レイヤー

下の例では、別の衛星レイヤーが追加されました。階層内の位置（水のレイヤーの下、国の境界線のレイヤーの上）に注意してください。また、レイヤーの不透明度の値を0.4にし、彩度を-1に下げました。

デザイナーが新しい境界線やさまざまな種類のマスクをどのように使用するかを見るのが楽しみです。#BuiltWithMapboxをつけて、新しいデザインをTwitterで共有してください。