Skip To Content ArcGIS for Developers Sign In Dashboard

Overview

You will learn: how to use the ArcGIS Vector Tile Style Editor to create a basemap with custom styles.

Esri vector basemaps are multi-scale vector tile layers that can be styled and customized for mapping applications. Vector basemaps are composed of many layers that represent geographical types such as land, water, roads, buildings, and text labels. Some of the more popular basemap styles are World Street Map, World Topographic Map, and Light Gray Canvas. With the new ArcGIS Vector Tile Style Editor application you can easily create, edit, and save your own styles. The application gives you the ability to fully customize the colors, patterns, and labels for all layers types and at all zoom levels. The result is that you can create custom basemap styles that match your brand and your application's focus.

In this tutorial, you'll use the ArcGIS Vector Tile Style Editor to create a custom basemap style that emphasizes forests, parks, and lakes at a national level.

Steps

Quick Edit

The fastest way to style a basemap is to select an existing Esri vector basemap and then customize it with the Quick Edit tool. This tool groups layers into six categories (Land, Water, Roads, Boundaries, Buildings, and Nature) and allows you to easily style all of the layers at once.

  1. Sign in to your ArcGIS account. If you don't already have one, sign-up for free.

  2. At the top right of the main menu, click > New Basemap Style > Get Started.

  3. In the Select Style window, click Popular > Light Gray Canvas > Select Style.

  4. In the Quick Edit panel, set the following properties to enhance the styles:


    Colors

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

    • Label Colors: Pick Label Colors
      • Label Text: #828282
      • Label Halo: #fbfbfb


    Font

    • Family: Noto Sans Regular


    Label Size

    • Click Larger (2x)


    Road Width

    • Click Narrower (2x)
  5. In the map and mini maps, use zoom and search to explore the styles at different locations around the world.

Style Individual Layers

The easiest way to find an individual layer is to click on the map or search for the layer by name in the Layer Style Editor list. Both techniques will open the editor so you can customize the 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 map, use search to find Yosemite National Park. Click on the green area to select the Admin0 forest or park layer and open the editor.

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

  3. 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. The layer should be visible now.


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

  4. In the Layer Editor > Appearance, set the fill and outline color properties so that the colors change at different zoom levels:

    • Color > > Set Value by Zoom Level. Set the values to:
      • 3 #ddf0ca
      • 6 #cbe5b1
      • Click Add Stop and set the value to:
        • 10 #bae291
    • Outline Color set the value to:
      • #bbd4a2
    • Opacity set the value to:
      • 60%


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

  5. In the Edit Layer Styles list, click Admin0 forest or park/label/Default to set the following label properties to draw at a wider range:

    • Set the Visible Zoom Range to start at 3.
    • Set the Color to #408340.
    • Set the Halo Color to #e4e4e4.


    In the map, zoom out to level 2 and then level 3 to see the new wider zoom range for the labels.

Style Many Layers

A convenient way to style many layers at once is to use the Edit Layer Styles list and the Edit by Color tool. Use these tools to find all lake and ocean layers and change the color to blue.

  1. In the toolbar, click Edit Layer Styles. In the list click Water > Lake. Be sure to click on Lake to select all sub-layers.

  2. In the Layer Editor, set the following:

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


    In the map, zoom in where you can see some lakes and oceans to view the style differences.

  3. In the toolbar, click Edit by Color. In the color palette follow these steps to match the ocean color with lakes:

    • Click on the first blue palette.
    • Click the swatch next to Select Color and replace the hex color with #c9def0. Click Done to dismiss the color selector.
    • Click Apply to make the changes.


    The oceans should now match the lakes.

  4. Close the panel and use the map (and mini maps) to explore all of the styles at different zoom levels.

  5. Save your style as "Forest and Parks Canvas".

Be creative!

  1. In the toolbar, click Save As to save a new map.

  2. Click Quick Edit > Colors > Randomize to create different random styles.

  3. Click Custom Colors and select each of the following:

    • Monochrome
    • Analogous
    • Triadic
    • Complementary
    • Compound
  4. Click on any of the colors to override them with your own colors.

  5. Click Save As to save any styles you like.

Congratulations, you're done!

Your styled vector basemap should look something like this.

Challenge

Add a background image

Add hillshade to the background of the map to show land topography. Hint: You will need to set the following:

 Background > opacity = 1
 Water > Ocean > Marine area > Visible Zoom Range = 0-18
 Natural > Land > Opacity = 50

Remove non-forest labels

Remove the majority of the labels for cities, provinces and states so that they don't compete with the national forest labels. Hint: Try searching in the layer list for Populated Places to find the labels to hide.

Style roads

Emphasize the roads that connect and run through the national forests and parks. Hint: To identify the roads, zoom in to some national parks and click on the roads that are visible.