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.

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

Introduction Julie

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.

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 JavaScript VectorTileLayer 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+

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

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 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! 

Client-side Layer Styling Rene

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 Resources Styles

What you can do! Modern Antique Newspaper Esri Vector Tile Basemaps (continued) Modern Antique Newspaper 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 Color properties Id: unique Type: fill, line, symbol, circle, raster, background Source layer name to use Render type

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

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 Rene

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 Julie

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 http://jsapi.maps.arcgis.com/apps/View/index.html?appid=c7ec0f529a1543b08f2f941324ee09c5

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 Julie

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