Publish a vector tile layer

Learn how to use ArcGIS Online to publish a vector tile layer.

To create a vector tile layer, you first import data as a hosted feature layer and then publish it as a hosted vector tile layer. This workflow is helpful when you need to render large datasets on the client. Using a vector tile layer can significantly improve display performance of the data in a map.

In this tutorial, you use the Publish tool in ArcGIS Online to convert a hosted feature layer to a hosted vector tile layer using the Santa Monica Mountains Parcels dataset, which contains a large amount of polygon features that represent property parcels.

Prerequisites

You need an ArcGIS account to access your dashboard and manage hosted layers. Sign up for an account for free.

Steps

Download the data

Use the Santa Monica Mountains Parcles dataset as the basis for this tutorial. However, you can also use your own feature layer created in either the Import data as a feature layer or Create a new feature layer tutorials.

  1. Download the Santa Monica Mountains Parcles dataset. Do not unzip this file, you will upload it as is.

Create a feature layer

Import the downloaded Shapefile to create a hosted feature layer.

  1. Sign in to your account in ArcGIS Online.

  2. Click Content > Add Item > Upload from computer.

  3. Upload the Santa_Monica_Mountains_Parcels.zip Shapefile. Wait for the upload to complete. When it completes, you will be directed to the item page of the new feature layer.

Style the feature layer

Before publishing a vector tile layer, it is recommended to style the feature layer. When you style the feature layer, the styles will be applied to the vector tile layer when it's published. You can also associate attributes with the vector tile layer that is published.

  1. Go back to the item page page > Visualization.

  2. In the left panel, click the Change style icon.

  3. Under Choose an attribute to show select: UseType.

  4. Under Select a drawing style > Types(Unique symbols) > Options.

  5. Click Symbols to select a color ramp to display different colors for each type of parcel.

  6. Click Outline and set the following:

    • Hex code: #1A1A1A.
    • Uncheck Adjust outline automatically.
    • Transparency: 5%.
    • Line Width: 1 px.
  7. Click OK

  8. Set the Overall Transparency to 50% > OK > Done.

  9. Click Save to save the stylings for your layer.

Publish a vector tile layer

  1. Go back to the item page page of the feature layer.

  2. On the right-side of the page, click Publish > Vector Tile layer.

  3. Click Select attributes and select UseType and Roll_LandV.

  4. At minimum, enter a Title and Tags for your vector tile layer. Click OK.

    Once you click OK, you will be directed to the item page page for the new vector tile layer. Wait for the the cache to build.

  5. In the item page, click Share > Everyone (public).

View the vector tile layer

  1. In the item page, click Open in Map Viewer to view the vector tile layer.

Your vector tile layer should look something like this.

Find the URL endpoint and style definition

The item for a vector tile layer defines the service properties and its styles.

  1. In the item page, scroll down the page and click View to view the vector tile layer metadata and its service URL. To access the vector tile data in an application, use the URL+tile/{z}/{y}/{x}.pbf. For example:

    https://vectortileservices3.arcgis.com/<YOUR_ORG>/arcgis/rest/services/<YOUR_VECTOR_TILE>/VectorTileServer/tile/{z}/{y}/{x}.pbf

  2. Go back to the item page. To view the style, click View style. The style will look something like this:

                                                                                                                                                                                   
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    {
      "version":8,
      "sprite":"../sprites/sprite",
      "glyphs":"../fonts/{fontstack}/{range}.pbf",
      "sources":{
         "esri":{
            "type":"vector",
            "url":"../../"
         }
      },
      "layers":[
         {
            "id":"Santa_Monica_Mountains_Parcels_Styled/Residential",
            "type":"fill",
            "source":"esri",
            "source-layer":"Santa_Monica_Mountains_Parcels_Styled",
            "filter":[
               "==",
               "_symbol",
               0
            ],
            "layout":{
    
            },
            "paint":{
               "fill-color":"#FC921F",
               "fill-outline-color":"#1A1A1A"
            }
         },
         {
            "id":"Santa_Monica_Mountains_Parcels_Styled/Commercial",
            "type":"fill",
            "source":"esri",
            "source-layer":"Santa_Monica_Mountains_Parcels_Styled",
            "filter":[
               "==",
               "_symbol",
               1
            ],
            "layout":{
    
            },
            "paint":{
               "fill-color":"#5C5C5C",
               "fill-outline-color":"#1A1A1A"
            }
         },
         {
            "id":"Santa_Monica_Mountains_Parcels_Styled/Government",
            "type":"fill",
            "source":"esri",
            "source-layer":"Santa_Monica_Mountains_Parcels_Styled",
            "filter":[
               "==",
               "_symbol",
               2
            ],
            "layout":{
    
            },
            "paint":{
               "fill-color":"#FFDE3E",
               "fill-outline-color":"#1A1A1A"
            }
         },
         {
            "id":"Santa_Monica_Mountains_Parcels_Styled/Industrial",
            "type":"fill",
            "source":"esri",
            "source-layer":"Santa_Monica_Mountains_Parcels_Styled",
            "filter":[
               "==",
               "_symbol",
               3
            ],
            "layout":{
    
            },
            "paint":{
               "fill-color":"#00C5FF",
               "fill-outline-color":"#1A1A1A"
            }
         },
         {
            "id":"Santa_Monica_Mountains_Parcels_Styled/Institutional",
            "type":"fill",
            "source":"esri",
            "source-layer":"Santa_Monica_Mountains_Parcels_Styled",
            "filter":[
               "==",
               "_symbol",
               4
            ],
            "layout":{
    
            },
            "paint":{
               "fill-color":"#149ECE",
               "fill-outline-color":"#1A1A1A"
            }
         },
         {
            "id":"Santa_Monica_Mountains_Parcels_Styled/Irrigated Farm",
            "type":"fill",
            "source":"esri",
            "source-layer":"Santa_Monica_Mountains_Parcels_Styled",
            "filter":[
               "==",
               "_symbol",
               5
            ],
            "layout":{
    
            },
            "paint":{
               "fill-color":"#A7C636",
               "fill-outline-color":"#1A1A1A"
            }
         },
         {
            "id":"Santa_Monica_Mountains_Parcels_Styled/Recreational",
            "type":"fill",
            "source":"esri",
            "source-layer":"Santa_Monica_Mountains_Parcels_Styled",
            "filter":[
               "==",
               "_symbol",
               6
            ],
            "layout":{
    
            },
            "paint":{
               "fill-color":"#F789D8",
               "fill-outline-color":"#1A1A1A"
            }
         },
         {
            "id":"Santa_Monica_Mountains_Parcels_Styled/Miscellaneous",
            "type":"fill",
            "source":"esri",
            "source-layer":"Santa_Monica_Mountains_Parcels_Styled",
            "filter":[
               "==",
               "_symbol",
               7
            ],
            "layout":{
    
            },
            "paint":{
               "fill-color":"#B7814A",
               "fill-outline-color":"#1A1A1A"
            }
         },
         {
            "id":"Santa_Monica_Mountains_Parcels_Styled/Other",
            "type":"fill",
            "source":"esri",
            "source-layer":"Santa_Monica_Mountains_Parcels_Styled",
            "filter":[
               "==",
               "_symbol",
               8
            ],
            "layout":{
    
            },
            "paint":{
               "fill-color":"#AAAAAA",
               "fill-outline-color":"rgba(153,153,153,0.25)"
            }
         }
      ]
    }
    

With the vector tile layer published, you can now access the layer using the {z}/{y}/{x}.pbf path. Or, you can access the style with the service URL+root.json. For example:

https://vectortileservices3.arcgis.com/<YOUR_ORG>/arcgis/rest/services/<YOUR_VECTOR_TILE>/VectorTileServer/resources/styles/root.json

What's Next?

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

ToolsAPIs

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.