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 lab, you'll use the ArcGIS Vector Tile Style Editor to create a custom basemap style that will emphasize 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. Go to ArcGIS for Developers and sign in.

  2. In your Dashboard, 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: #cac3c3
    • Buildings: #ebe7dc
    • Nature: #d0e4bb


    Font

    • Family: Noto Sans Regular
    • Contrast Ratio: High (WCAG AAA)


    Click Apply and close the panel.

  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.

  2. Click on the green area to select the Admin0 forest or park layer and open the editor.

  3. Use the Layer Editor to draw forests at a wider range:

    • In the map, zoom out to level 6 so the layer disappears.
    • In the editor panel, click on the (?) to reveal the available visible range available for the layer.
    • Set the first number of the Visible Zoom Range to 3. The layer should be visible now.


    Zoom out to level 2 and 3 to see the new wider zoom range.

  4. In the Layer Editor, 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%


    Zoom the map 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 first number of the Visible Zoom Range to 3.
    • In Color set the value to #408340.


    Zoom out to level 2 and 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 and set the following:

    • Quick Edit
      • Water: #c9def0
      • Text Color: #497aab


    Zoom in where you can see some lakes and oceans to view the style differences.

  2. 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 color with #c9def0. Click Done to dismiss the color selector.
    • Click Apply to match the oceans with lakes.
  3. Close the panel and use the map (and mini maps) to explore all of the styles at different zoom levels.

  4. 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 > Generate Random Colors to create different style sets and Apply to refresh the map.

  3. 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 background and land layers to transparent and semi-transparent to see the hillshade.

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.