Mapbox Studioで行政国ポリゴンを使って国をマスキングする

![623c1406b08bb47fc079438c_zHOOEqbFE2HGze2S9rZqlTyHC3ehI9dmMG6OmWKyM20cacZVkziN2uWr4qwusgkgJhwFQICqocTncBcLHf8O3BB4dYngyGqJJbzmgUaj0PdHyT2CmPWZJWbQTMMz0ZKuBxdUKZsJ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2516459/8a7761fa-80af-2b3c-8a3d-1c2b16d78e92.png)
[高解像度の行政区域タイルセット](https://www.mapbox.jp/blog/high-resolution-administrative-country-polygons)が、Mapbox Studioを使用するすべてのユーザーの皆様に無料で提供されています。このタイルセットは、マスキング技術によって個々の国を強調する場合に最適です。

マスキングとは、地図用語の一つで、地図上の特徴を隠すことにより、不要な視覚的混乱を防ぎ、関心のある地理的領域をメインに表示することを指します。

## Mapbox Studioで国をマスキングするための5つの簡単なステップ
![614d5fe2364fe078289535b4_5f88a9161bf39c2be0774fc8_YZYTqPUpCoKd1FF65fZDZrHU0pZ0auuj6tps_yTAXXZkX7-a_Tm3kiy63j_VgevO0oDQ10PrNSuN984D00T4f_mUlOHneO6i7zsiAuJArfTw3wNj39I1UhfG11XKn277AtTQcoV_.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2516459/8d5800dc-9778-f357-c193-df086dcacebb.png)
ステップ1
まずは、Mapbox Studioで新しく「blank」のスタイルを作成することから始めます。Layersタブを選択し、[「Mapbox Satellite」レイヤー](https://docs.mapbox.com/help/how-mapbox-works/satellite-imagery/#using-satellite-imagery)から「mapbox-satellite」を追加します。
![614d5fe28bd047b38df7797b_5f88a9169775921e1c85d31b_XxNGcg3IQQYz980jJymGPh6OjZDnTGPxva96xDe5oyqA96O-ZRFK7HPJ-EE010XGTzKQ8hfLxS3Iu3lf7Cl7okq-eDWcbBTStls1Z7f8tLc71cH5y9tu54e4w43SqfnwUwxlowNd.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2516459/90ebb0ff-c2e8-3939-836a-fa0a52ccc334.png)
ステップ２
次に、「Mapbox Countries v1」レイヤーから「country-boundaries」を追加します。次のステップで色を調整します。
![614d5fe2f17661b8ece04793_5f88a9167dcf750f5ce3f024_guhtlbab2xA-L4NVXit3D_VjKleV2lFmuFm8q1xoRtyKIRgtJfAuQ_MQsunYDKk_Xnpnavp7gmvcfXhG6jEtEGEiykR5KSrR6jmVChXlRKIXf_qaZa6cm-7bKJz6-X1xskM1CNmA.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2516459/d1477cf4-e8a5-9710-92fc-91e3b9a9f023.png)
ステップ３
Mapbox Countries v1レイヤーで「Color」を選択し、「Style with data condition」からスタイル設定します。「name」のデータフィールドで「United States」と入力します。

その後、「select data」パネルを使って、地図上をクリックして好きな国を検索してください。
![614d5fe2364fe00bff9535b2_5f88a918e3a33e2b7d4c31f8_JuAjG09B6lyOs9bO_2iIRB8U3m8imZveTm1VGrBouHNbFKQLKnV4T6wCBIusZNhqKDCCcQjGdB5Qs8RBomEycynAqXFug1AyUxLqzBYm-ebuL3VQwPbdH6SVSToWnz296ifytvQv.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2516459/5ac1eceb-2969-4b1a-e9e0-0220b2fe4a3b.png)
![614d5fe2dbe52209a181579d_5f88a9169a84e137d36d42a7_gS11KZmjkQA-k8m1tuJ-Val9iJ68UgVpvtltqUv4ucsmgItnSafQHPs22mJzInFU_tLuBkMbEqtIYBS2DpMgidBXnTAJwbUy-aPC-UcNSSOI69UiO1uX0-AfJkm5t6t0cUdC-HEo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2516459/5c128ced-027d-8484-f2e1-31b9dc1e4a7f.png)
ステップ４
「United States」を選択したら、その色の不透明度（α）を「0」にします。地図は以下のように表示されます。
![614d5fe2364fe05ea09535b3_5f88a91793f2726b365b39ee_JJEuhQolkDspyuYrjQMFkMoQonXP35jhuAm1OPvvvXZ6GxNg7-L3RhZkbTeS5DAZp725K4lD64hf75VuGiv3TgLm91shtmoScFpEjEZEfMtFqfSp2ehm0lUGlF4k6yWSm2oHFC6e.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2516459/890ccfcc-8ad2-8439-6ade-959d1273f847.png)
Doneをクリックし、「Fallback value」を白、全不透明（α=100）とします。地図には、米国を除くすべての国が白色で表示されます。
![614d5fe37c943746a220f306_5f88a9160770bd694e4d718e_E_EOv9mMwfMS5lPCV-c4VGLziIoD_bd02NqFSWgHcS-8Jy2hgVM4ocPW7Bw62Cw9FyKalNg31lNkfRMAByodimvS1kt6iskgqiS2tRkrxE6OpSuZvPUS3caX8xmjz83T9ovI8a6P.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2516459/1d6b2619-be3c-732a-3fe8-a9fb797f4957.png)
ステップ５
Mapboxの「water」レイヤーを追加し、同様の手順で塗りつぶしの色を白に設定します。これで、関心のある国がマスクされたことになります。

もちろん、国のFallback valueを好きな色に設定し、そのスタイルを水のレイヤーに合わせることもできます。Webページの背景色に最も合うように、さまざまな色をお試しください！
![614d5fe324ac777f7d054427_5f88a9181bf39cec6e7750c9_XwLR_rdqSiGxxTuzxGZdO96vAHNqygbsDw5GgdBZSLu93LUn7sPFAeivZEdfQmUp3Cq-q-Q76h2vDyGwvbh-mMHV8gj24BnzXyRMMKYwiPjJHowwvlHaxfxEVTp_8YLDvhbEfPDd.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2516459/df8ac442-7883-c20b-1401-416f875e28c2.png)
## 境界線などの背景の追加
国の境界線など、周囲の微妙な地理的状況を追加するには、「country-boundaries」レイヤーを複製し、以下のように「select data」から 「type」を 「Line」に変更します。
![614d5fe3caced6d94c7b0f62_5f88a9187dcf7538bee3f0e2_7Ki1Fqkz5kN3HQ-ajqfbrs_PjGUTv3DM1Il0FVFmjjqC6mV19yIuSGxseZKa0vq_pcR1PzrY-poW14je7E3oeKObAPtrGUhW2GYsJYvTQnuiWKQNly3-aWbgaDZzodXW2ko5P1Po.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2516459/9b373f98-a978-c9be-f785-e284539c99a5.png)
新しい「country-boundaries」レイヤーをドラッグして、階層の一番上に移動させます。下の例では、線の幅を細くし、グレーに着色しています。
![614d5fe3fbc1578810a99b87_5f88a919f75f7139b5aa2f1a_PNsysI07DDdAsTv56Ds1QfQFdhtdGJykn8dMqMp5aWDbvRcPTvRA5jvVMUhV7U9JYi2CBfObgB_uXGSsV09mJz-N4kBc6hH7bc2nsgCJ1VrUSse2rEHHcCpQi8FApPbTj9udPfu-.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2516459/bfc6d7d2-143b-db0a-93c9-9cf98b9609bd.png)
## 背景のコンテキストレイヤーとして白黒の衛星レイヤーを使う
下の例では、もう一つsatelliteレイヤーを追加しています。ここでは階層の順番にご注意ください 。

「water」レイヤーの下で「country-boundaries」レイヤーの上です。また、このレイヤーのopacityを0.4とし、saturationを-1に落としました。
![614d5fe339a1a63fe579fa9a_5f88a918f5b96055ad0eabe6_TEV97BeXVGhw3e31lREEvz-c_cD72i7FMozKWagTrSACuUXktWvi9Xfmc0zr5BII0Cl5Qwg3xwFkaROOWEiN4RfbN8vdCljg-2dXqnpLrGNLO6uaxzWwKD2gpF8lgoT6xiVTFV16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2516459/ac565280-3500-150d-3bb3-c48ee62d91d3.png)


ぜひマスキングをお試しください！