LEVERAGING VECTOR TILE LAYERS

IN WEB APPS

Rene Rubalcava, Julie Powell

Agenda

• Introduction to vector tile layers

- ArcGIS Online vector tile basemaps

- Custom vector tile layers using ArcGIS Pro

- Styling vector tile layers

• Use vector tile layers in your web app

• Client-side layer styling

• Working with sublayers

• Labeling

- Localization

- Map rotation

• Q&A

Introduction

Why vector tiles?

• GPUs have changed the landscape

- On your devices (OpenGL)

- In your browser (WebGL)

- On your desktop (DirectX, OpenGL)

- Even in virtualized systems (vGPU)

• Vector data can remain vector, draw at native resolution

• Raster data still best served as raster in most circumstances

Advantages of vector tiles

• Display quality

- Best possible resolution for Retina displays

- Small efficient format

• Dynamic labeling

- Clearer, more readable text

- On the fly labeling for heads up display

• Map Styling

- Streets, Topo, Canvas from one tileset

- Day and Night mode

- Restyling

Labels rotate and flip

Considerations

• IE11+

• Work best on machines with newer hardware

• Printing is still in the works (on the roadmap for 2017)

Vector tile format

• Vector tiles are stored using protocol buffers

- Compact binary format for transferring data

- Data is organized into layers of geometry with key/value pairs of attributes

• A style file defines

- The layer order

- Definition query for each symbol layer

- Symbol information for each symbol layer

Vector tile basemaps

• Available with ArcGIS Online since November 2015

• Street (with and w/o relief), Topo, Night, Navigation, Dark Canvas, Light Canvas, Hybrid

Using vector tiles in your applications

• Multiple ways to use vector tiles:

- A) Use Esri provided vector tiles / styles

- B) Style Esri vector tiles for your own use

- Change colors

- Drop features

- Match the needs of your application

- C) Create your own vector tiles from your own data

Vector tiles in the ArcGIS API for JavaScriptVectorTileLayer

• Configured in web maps or added directly in code (VectorTileLayer)

• Supported in 3.15+ and 4.0

• Works with all published Vector Tiles

• Tiles drawn in WebGL

• IE 11+

Using and styling ArcGIS vector tile basemaps

Demo

How to bring a Vector Tile Layer into your JS app

• Include the vector tile layer in a web map

• Reference one of the ArcGIS Online basemaps in the map constructor by name

- i.e. “streets-vector”

• Create the vector tile layer from the item’s style JSON, located here:

- https://www.arcgis.com/sharing/rest/content/items/[ITEM ID]/resources/styles/root.json

• Create the vector tile layer from the service URL. Looks like:

- http://basemaps.arcgis.com/b2/arcgis/rest/services/World_Basemap/VectorTileServer

Styling vector tiles

• Simple Style Copy

- Save tile layer to your Portal or Online account

• Hand editing JSON

- Update map item

• Two additional sample Vector Styling Apps simplify this:

- Vector Style JSON Editor - GitHub

- Vector Basemap Style Editor - GitHub

Thanks for the styling tools, Rene Rubalcava and John Grayson!

Client-side Layer Styling

Client-side Layer Styling

• Vector Tiles Hacking agenda

- DIY styles

- Change colors

- Remove layers

- Suit them to your needs

- Create your own vector tiles!

Client-side Layer Styling

Styles Resources

What you can do!

• Modern Antique

• Newspaper

Esri Vector Tile Basemaps (continued)

Vector Tiles: Styling Your Own Base Maps

Client-side Layer Styling

• Dissecting a style

- Glyphs – Url to fonts

- Sprite – Images, like Highway shields, markers, etc…

- Sources – Information on the source URL for Vector Tiles

- Layers – Group of layer styles and annotations

https://www.mapbox.com/mapbox-gl-style-spec/

Client-side Layer Styling

{

"id": "Building",

"layout": {},

"minzoom": 15,

"paint": {

"fill-color": "#552582",

"fill-outline-color": "#D9D1B8"

},

"source": "esri",

"source-layer": "Building",

"type": "fill"

}

Must be unique

Can also have maxZoom

Render type

Color properties

Source layer name to use

Client-side Layer Styling

• Branded Basemaps

• Match UI to Map

Working with sublayers

• Can add/remove layers as needed

• Less layers = less styling

Working with sublayers

• Demos - https://github.com/odoe/esrijs-vt-demos

Beyond basemaps

Not just for basemaps

• Vector Tiles for large datasets to display client-side

• Used in conjunction with basemaps

• Display Vector Tiles, Query Features

Not just for basemaps

• Author data in ArcGIS Pro

• Create Vector Tile Package

• Publish vtpk to ArcGIS Online

• Publish buddy Feature Service (optional)

Not just for basemaps

• Author data in ArcGIS Pro

Not just for basemaps

• Create an Index (recommended)

Not just for basemaps

• Create Vector Tile Package > Publish vtpk to ArcGIS Online > Publish buddy Feature Service (optional)

1 2 3

Not just for basemaps

• Result webmap - http://arcg.is/28SVHnj

• Useful application - https://odoe.github.io/esrijs4-vt-misc/vector-tile-query.html

Labeling

Labeling

• Label information is packaged with the vector tiles

• Can select attribute(s) to use for labeling when creating custom tile layers in Pro

• Label font can be customized

Localization

• Esri vector basemaps have two

options:

- global (default)

- local

• Can create localized content for

custom tile layers (in Pro)

• Select the local in the style file:

- 1 style per language configuration

Local version of the world street map

Map Rotation

• Supported in 4.0

• Useful with tablets/mobile devices

• Aligning the map for geographical significance (i.e. a coastline)

• Labels rotate with the map

Disputed boundaries

Q&A

More sessions about vector tile layers

• Vector Tiles: Styling Your Own Base Maps

- Wed 3:15-4:30

• Styling Vector Tiles (DT)

- Thurs 10:30-11:15

• Designing Esri's Vector Tile Basemaps (DT)

- Thurs 12-12:30

• Best Practices for Caching Maps and Vector Tile Layers

- Thurs 1:30-2:45

• Desktop Mapping: Creating Vector Tiles

- Thurs 3:15-4:30

Please take our Survey: Leveraging Vector Tile Layers in Web AppsYour feedback allows us to help maintain high standards and to help presenters

Find the sessionyou want to review

Find your event in the Esri Events App

Scroll down to the bottom of the session

Answer survey questions and submit