Tutorial: Create a custom basemap style

Learn how to use the ArcGIS Vector Tile Style Editor to create a custom basemap layer style.

A basemap layer provides visual and geographic context for a map or scene. The basemap styles service provides vector and image tile basemaps, such as World Street Map and Light Gray Canvas, to use in applications. Vector tile layers are pre-styled vector tiles hosted in ArcGIS that are rendered on the client. They can be customized using the Vector Tile Style Editor. The layers available depend on the layers that have been defined in the original vector tile layer. In general, there are layers for land, oceans, lakes, parks, forest areas, city areas, roads, and labels for important places.The editor will store the customized basemap as a vector tile item with an item ID. You can use the item ID to access the styled basemap for your applications.

In this tutorial, you use the Vector Tile Style Editor to customize colors, patterns, and labels in a basemap.

Prerequisites

Steps

Customize a basemap

To create a custom basemap style, you start by selecting an existing basemap layer from the basemap styles service. The Quick Edit tool in the Vector Tile Style Editor groups layers into six categories: Land, Water, Roads, Boundaries, Buildings, and Nature, which allows you to easily style all of the layers at once.

1. Go to the Vector Tile Style Editor.

2. Sign in with your ArcGIS account.

3. Click + New style.

4. In the Select a style to continue panel, click Popular > Light Gray Canvas > Select Style.

5. In left-panel, click Quick Edit. Style the basemap using Colors, Font, Label Size, and Road Width. For example:

   • Colors
     • Land: #fbf8f3
     • Water: #b9dbf7
     • Roads: #f0f1f0
     • Boundaries: #ffffff
     • Buildings: #ebe7dc
     • Nature: #d0e4bb

   You can also click Randomize to generate different color schemes for the basemap.

   • Font
     • Family: Noto Sans Regular
   • Label Size
     • Click Larger
   • Road Width
     • Click Narrower

Style individual layers

To find an individual layer, you can click on the map or search for the layer by name in the Layer Style Editor list. The bottom toolbar in the editor will show you what layer is underneath the cursor. If there is a layer where you click the map, the layer editor will open. Both methods will open the editor so that you can customize style properties for the selected layer. Use these techniques to identify parks and forest areas and make them visible at a national-level.

1. In the search tool of the map, enter Yosemite National Park.

2. Click on any green area to open the Admin0 forest or park layer.

3. In the map, zoom out to level 6 so that the layer disappears.

4. In the Layer Editor > Visibility panel:

   • Click on the Visible Zoom Range (?) to reveal the available visible range.
   • Set the first number of the Visible Zoom Range to 3 to make the layer visible.

5. In the map, zoom out to level 2 and level 3 to see the new zoom range.

6. In the Layer Editor > Appearance panel, set the fill and outline color properties to change at different zoom levels using either hex codes or the color selector. For example:

   • Color > Settings icon > Set Value by Zoom level:
     • 3 #ddf0ca
     • 6 #cbe5b1
     • Click Add Stop and enter: 10 #bae291.
   • Outline Color: #bbd4a2
   • Opacity: 60%

7. In the map, zoom to levels 2-11 to see the new color transitions at different zoom levels.

Style multiple layers

To style multiple layers at once, you use the Edit Layer Styles list and the Edit by Color tool. Use these tools to change the color for all lake and ocean layers.

1. In the toolbar, click Edit Layer Styles > Water > Lake. Click Lake once more to ensure that all sub-layers are selected

2. In the editor, set the following for Colors:

   • Water: #c9def0
   • Label Colors: Pick Label Colors
     • Label Text: #497aab
     • Label Halo: e4e4e4

3. In the toolbar, click Ocean and set the same properties that you used for Lake.

4. In the map, zoom in to where you can see lakes and ocean to view style differences. You can also use the mini maps to explore all of the styles at different zoom levels.

5. In the toolbar click Save As to save your customized basemap. Enter a Title and Tags.

You should now have a custom basemap style that you can edit using the tools provided in the Vector Tile Style Editor. The style is added to your portal as an item, and you can use the item ID to access the basemap in your mapping applications.

What's Next?

Learn how to use additional tools, APIs, and location services in these tutorials:

ToolsAPIs

Create a web map

Use Map Viewer to create a web map for your application.

Map Viewer