1. LEVERAGING VECTOR TILE LAYERS IN WEB APPS
Rene Rubalcava, Julie Powell
Leveraging Vector Tile Layers in Web Apps
Come to this session to learn about some of the benefits of vector tiles include the ability to enable map interactivity and client-side styling, without compromising performance. We will do an overview of vector tile mapping, demonstrate how you can style vector tiles, and examples of apps consuming vector tiles.

2. Introduction to vector tile layers
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

3. Introduction
Julie

4. 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
Apple and Google use vector maps in proprietary specifications. Google forced the upgrade this year in browser, so default map experience no longer uses raster tiles.

5. 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

6. Considerations IE11+ Work best on machines with newer hardware
Printing is still in the works (on the roadmap for 2017)

7. 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

8. Vector tile basemaps Available with ArcGIS Online since November 2015
Street (with and w/o relief), Topo, Night, Navigation, Dark Canvas, Light Canvas, Hybrid

9. 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

10. Vector tiles in the ArcGIS API for JavaScript
VectorTileLayer
Configured in web maps or added directly in code (VectorTileLayer)
Supported in and 4.0
Works with all published Vector Tiles
Tiles drawn in WebGL
IE 11+

11. Demo Using and styling ArcGIS vector tile basemaps
This demo will be a quick look at:
Esri’s beta 2 vector tile basemaps
Consume a basemap in a web app
Create a copy of the basemap and customize the style, save back to the item (using one of the two styling apps)
Show the updated app with the styled basemap

12. 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:
ID]/resources/styles/root.json
Create the vector tile layer from the service URL. Looks like:

13. Styling vector tiles Simple Style Copy Hand editing JSON
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! 

14. Client-side Layer Styling
Rene

15. Client-side Layer Styling
Vector Tiles Hacking agenda
DIY styles
Change colors
Remove layers
Suit them to your needs
Create your own vector tiles!

16. Client-side Layer Styling
Resources
Styles

17. What you can do! Modern Antique Newspaper
Esri Vector Tile Basemaps (continued)
Modern Antique
Newspaper
Vector Tiles: Styling Your Own Base Maps

18. 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

19. 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
Color properties
Id: unique
Type: fill, line, symbol, circle, raster, background
Source layer name to use
Render type

20. Client-side Layer Styling
Branded Basemaps
Match UI to Map
Id: unique
Type: fill, line, symbol, circle, raster, background

21. Working with sublayers
Can add/remove layers as needed
Less layers = less styling

22. Working with sublayers
Demos -

23. Beyond basemaps
Rene

24. Not just for basemaps
Vector Tiles for large datasets to display client-side
Used in conjunction with basemaps
Display Vector Tiles, Query Features

25. Not just for basemaps Author data in ArcGIS Pro
Create Vector Tile Package
Publish vtpk to ArcGIS Online
Publish buddy Feature Service (optional)

26. Not just for basemaps
Author data in ArcGIS Pro

27. Not just for basemaps
Create an Index (recommended)

28. Not just for basemaps
Create Vector Tile Package > Publish vtpk to ArcGIS Online > Publish buddy Feature Service (optional) 1 2 3

29. Not just for basemaps Result webmap - http://arcg.is/28SVHnj
Useful application -

30. Labeling
Julie

31. 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

32. 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

33. 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

34. Disputed boundaries
Julie

35. Q&A

36. 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

37. Please take our Survey: Leveraging Vector Tile Layers in Web Apps
Your feedback allows us to help maintain high standards and to help presenters
Find your event in the Esri Events App
Find the session you want to review
Scroll down to the bottom of the session
Answer survey questions and submit