メインコンテンツまでスキップ

Style a single country

追加の開発者リソース

In this tutorial, you will learn how to style a map with one specific country highlighted apart from other countries. You will use Mapbox Countries, Mapbox Satellite, and Mapbox Streets, three freely available tilesets, with a masking technique to do this.

Masking is a cartographic term that describes hiding features on a map so that the geographic area of interest is the main visual area illustrated, limiting unnecessary visual clutter. In this example, you will be styling The United States and masking all other countries.

Your final map style will look like this:

Getting started​

Before getting started, you will need a few things:

  • Mapbox account. You will need sign up or login to an account to use the Mapbox Studio style editor.

Create a new style​

  1. Log into your Mapbox account and navigate to your Styles page. This is where all your styles are listed.
  2. Click the dropdown next to New style.
  3. Select Blank Style from the dropdown and the style editor will automatically open.

What is a style?

A style is a set of rules for how Mapbox will draw the map on a page. It includes references to your data, map images (icons, markers, patterns), fonts, and defines how all your data should be styled on your map. For more about styles, see the Styles section of the Mapbox Studio Manual.

Step 1: Add a satellite layer​

First, you will add a new raster layer using satellite imagery from Mapbox.

  1. In Studio, click the Layers tab to open the Layers panel.
  2. Click the plus button (+) to add a new layer. This will open a Layer properties panel.
  3. In the Layer properties panel, click None selected to select a source. Then, search for "Mapbox Satellite" and click raster Mapbox Satellite to select that layer as the layer source. This will create a raster layer called mapbox-satellite.
  4. Close the Layer properties panel.

Your map should look like this:

Step 2: Add a mask layer​

Next, you will add a new fill layer using country polygons from Mapbox.

  1. Click the plus button (+) to add a new layer.
  2. In the Layer properties panel, click None selected to select a source. Then, search for "Mapbox Countries" and click the polygon country_boundaries layer from the Mapbox Countries v1 tileset.
  3. Close the Layer properties panel.

Your map will look black because the default styling for a fill layer is black:

We will adjust the styling in the next step.

Step 3: Style the mask layer​

Next, you will style all country polygons except one, to create the mask effect.

  1. In the Layers panel, click your fill country_boundaries layer.
  2. In the Layer properties panel, set the fill color to white (#ffffff).

All countries are now covered with a white color fill.

Step 4: Hide the mask for one country​

Next, you will apply a data condition to style one country differently.

  1. Click the Style with data conditions option, search for "name", and click the name property. This will open a panel where you can set a data condition to define which countries you will apply styling rules to. By default, the Data field will use the is operator.
  2. Click the pencil icon (pencil) and enter the value "United States", then click the plus sign (+) to add this value.
  3. In the Fill color section, drag the opacity slider to the left or set the a value to 0 to make the fill color transparent for features with a name property that is "United States".

Your map will look like this:

Step 5: Add a water layer​

Next, you will add a new fill layer using water data from Mapbox.

  1. Click the plus button (+) to add a new layer.
  2. In the Layer properties panel, click None selected to select a source. Then, search for "water" and click the polygon water layer from the Mapbox Streets v8 tileset.
  3. Click the Style tab and set the fill color to white (#ffffff).

Your map will look like this, with only one country visible:

Step 6: Add country borders​

Next, you will add a new line layer using national border data from Mapbox.

  1. In the Layers panel, click your fill country_boundaries layer.
  2. Click the duplicate icon (duplicate) to create a copy of this layer. The new layer will be named fill country_boundaries copy .
  3. Select the new layer to open the Layer properties panel, and click the Select data tab.
  4. Click the Type property and change the type from fill to line.

The Mapbox Studio data inspector will display the line data like this:

  1. Click the Style tab, then set the Width property to 0.3 and the Color property to gray: #cccccc.
  2. In the Layers panel, drag your fill country_boundaries copy layer to the top of the layer hierarchy, above all other layers.

Your map will look like this, with visible outlines around the masked countries:

Step 7: Show more satellite context​

Next, you will add some black-and-white satellite imagery to give the masked countries some visual context.

  1. In the Layers panel, click your mapbox-satellite layer.
  2. Click the duplicate icon (duplicate) to create another copy of this layer. The new layer will be named mapbox-satellite copy .
  3. Click the Style tab, then set the Opacity property to 0.3 and the Saturation property to 0.1.
  4. In the Layers panel, drag your fill mapbox-satellite copy layer below your water layer but above your country-boundaries layer.

Your final map style will look like this:

To begin developing with your new map style, continue to Publish your style.

Publish your style​

When you have finished editing your map style, publish your changes by clicking Publish in the upper right of the style editor. When you click the publish button, a window will display the difference between the previous and current version of this style. If you're happy with the changes, click Publish. Your style will now be available to share from a variety of tools and applications.

Final product​

You've styled a single country with the help of several freely available data sources. Mapbox Studio provides a wide variety of ways to use your new map style. You can use this map directly on your website or in a web or mobile application. Take a look at the Publish style section of the Mapbox Studio Manual to see all the ways you can use your style!

Next steps: Add a data visualization​

You can extend the workflow outlined in this tutorial to add and style additional geometries in Mapbox Studio.

  • Try adding a choropleth map visualization using the data and instructions from our Make a choropleth map tutorial.
  • We would love to see how designers use boundaries data with different masking techniques. Share your creations on Twitter with the hashtag #BuiltWithMapbox.
  • Learn more about what you can do with the Mapbox Studio style editor in the Mapbox Studio Manual.
追加の開発者リソース
このpageは役に立ちましたか？