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 layerA basemap layer is the layer in a map or scene that displays basemap data. The data source for a basemap layer is typically a basemap service.Learn more provides visual and geographic context for a map or scene. The basemap styles serviceThe ArcGIS Basemap Styles service, also referred to as the Basemap Styles service, is a location service that provides basemap styles and data for the world. It returns styles as Mapbox styles and web maps, and data as vector tiles and/or map tiles. It supports all of the styles in the ArcGIS Basemap style and Open Basemap style family. An ArcGIS Location Platform or ArcGIS Online account is required to use the service.Learn more provides vector and image tile basemaps, such as World Street Map and Light Gray Canvas, to use in applications. Vector tile layersA vector tile layer is a data layer used to access and display tiled data and its corresponding styles.Learn more 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 itemAn item, also known as a content item, is a resource stored in a portal such as a web map, hosted layer, style, script tool, file, or notebook.Learn more with an item IDAn item ID is a unique identifier representing a single item stored, managed, and accessed in a portal, such as a web map, hosted layer, or file.Learn more. 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 layerA basemap layer is the layer in a map or scene that displays basemap data. The data source for a basemap layer is typically a basemap service.Learn more from the basemap styles serviceThe ArcGIS Basemap Styles service, also referred to as the Basemap Styles service, is a location service that provides basemap styles and data for the world. It returns styles as Mapbox styles and web maps, and data as vector tiles and/or map tiles. It supports all of the styles in the ArcGIS Basemap style and Open Basemap style family. An ArcGIS Location Platform or ArcGIS Online account is required to use the service.Learn more. 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.

5. In the 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 layerA layer is a reference to a collection of geographic data that is used to access and display data. The data for layers are typically provided by the basemap layer service and data services.Learn more, 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 layersA layer is a reference to a collection of geographic data that is used to access and display data. The data for layers are typically provided by the basemap layer service and data services.Learn more 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 itemAn item, also known as a content item, is a resource stored in a portal such as a web map, hosted layer, style, script tool, file, or notebook.Learn more, and you can use the item IDAn item ID is a unique identifier representing a single item stored, managed, and accessed in a portal, such as a web map, hosted layer, or file.Learn more to access the basemap in your mapping applications.

What's Next?

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

Display a custom basemap style

Add and display a styled vector tile basemap layer.

JavaScript Maps SDKLeafletMapLibre GL JSOpenLayers