Authoring and Styling Vector TilesTommy Fauvell

Craig Cleveland

Tommy Fauvell

Craig

Cleveland

Topics

• Introduction to Vector Tiles

• Design and Authoring

• Sharing and Publishing

• Re-Styling Workflows

• Questions

Introduction to vector tiles

Web GIS and Mobile MappingThe times they are a changin’

• Technology is forcing us to evolve how we deliver content

• The landscape has changed

- GPU and CPU

- High resolution displays

• Devices and browsers are more capable of handling advanced graphics processing

Raster Tiles

Example from Google Maps

• Vector basemaps traditionally delivered as

raster tiles render poorly on HD displays

- Higher DPI raster tiles?

256

25

6

512

51

2

Do we have to rasterize them?

• What if we could leverage the processing power of our mobile devices and

advances in web browser technology?

- Keep vector data as vector

- Ask the device to take on the rendering load

• Vector tiles tilesets deliver layers of geometry and rendering instructions

- Tiles

- Styles

- Sprites

- Fonts

- Index

Advantages of vector tiles

• Display quality

- Best possible resolution for HD 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

Vector tiles in ArcGIS

• Leverage several Open Source

projects

- Use the Mapbox vector tile spec

- Which uses Google protocol buffers

- Styling converted to Mapbox GL style spec

• More aggressive overzoom

- Indexed tiling scheme

- Support for traditional tiling also exists

Esri vector tile tileset contents

• Tiles

- Geometry and metadata are tiled and stored using protocol buffers

- Compact binary format for transferring data

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

attributes

• Style file

- The layer order

- Definition query for each symbol layer

- Symbol information for each symbol layer

• Fonts, symbols, tile index

Use cases

• Raster Tiles:

- Imagery Basemap

- CADRG / ECRG (Scanned Maps)

- Hillshade / Shaded Relief

- 3D Terrain

- StreetMap

- Canvas Maps

- Boundaries and Places

- Transportation

• Vector Tiles:

- StreetMap

- Canvas Maps

- Boundaries and Places

- Transportation

Creating vector tiles

• Tile creation in ArcGIS Pro 1.2+

• Publish tile layers in ArcGIS Online and ArcGIS Server/Portal 10.4+

• Created with GeoProcessing tools

- Create Vector Tile Index

- Create Vector Tile Package

• New at Pro 1.4

- Integrated sharing

- Any CRS supported by ArcGIS

Sharing and publishing vector tiles

• Integrated sharing

• Accessory tools:

- Share Package updated to support

vector tiles

- Extract Package updated to support

vector tiles

Tile creation process: Esri tileset

• Entire world

- ~ 8hrs on a desktop machine

- Tiles ~ 13 GB

- Multiple styles can use the same tiles

• Compared to raster for the entire

world

- ~ many weeks on a server cluster per map style

- Tiles ~ 20 TB

ArcGIS vector tile consumption

• Supported clients

- Pro 1.3+

- Pro 1.4 shares runtime implementation

- Printing and exporting maps in Pro 1.4 now supported

- WebGL capable browser

- Edge supported with recent Web API’s

- Developer API’s

- ArcGIS JavaScript 3.15 and 4.0 API’s

- Uses the mapbox-gl-js library

- ArcGIS JavaScript 3.18+, 4.1+, and Runtime v100.0 API’s

- Ground up implementation

Design and Authoring

Design considerations

• Only feature layers with simple, unique value, graduated, or class

breaks symbology supported

• New at Pro 1.4

- Support for Arcade label expressions

- Support for Display filters

• Maps should be re-authored for vector tiles

- Limit number of layers

- Limit duplication of content

- Be mindful of users that want to re-style your maps

Authoring maps

• Several improvements have been made in ArcGIS Pro to create

efficient and cartographically rich tilesets

- Scale dependent capabilities added to symbology

- Alternate symbols added to symbology

- Scale based sizing added to symbology

- Improvement to scale logic

Scale logic changes

• ArcMap and ArcGIS Pro 1.1

- Layers will draw AT and BETWEEN

minimum and maximum scales

• ArcGIS Pro 1.2, layers don’t draw at

max scale by default

- -Check “Draw up to and including the

maximum scale in scale ranges” to

revert to old behavior

- This is checked for old Pro projects or

imported ArcMap maps

1: 1 million

1: 500,000

1: 10,000

Option checked:Both draw

Option unchecked:Layer 2 draws

Layer 1

Layer 2

Authoring in Pro 1.4

Demo

Scale dependent symbology

• Each symbol class can be assigned

a scale range

- Unique value

- Class breaks

• Allows a multiscale map to be

authored without duplicating

content

Alternate symbols for symbology

• Symbol classes can switch

symbols at scales

- Unique value

• Allows you to change the

appearance of a symbol without

duplicating layer

Scale based symbol sizing

• Each symbol can have scale based

sizing configured

- Single symbol

- Unique value

- Class breaks

• Allows for small changes to symbol

size across scales

1pt

2pt

0.5pt

LOD147M 1K

Sharing vector tiles

Sharing workflows

Demo

Create Vector Tile Package

• Demo

Share Package

• Demo

Add new item

• Demo

Integrated Sharing

• Demo

Using and re-styling vector tiles

ArcGIS vector tiles service

http://<catalog-url>/<folder>/<serviceName>/VectorTileServer

|--root.json

|--tilemap/

|--tile

|--resources

|--fonts/

|--styles/

|--sprites/

|--info/

Service example

Using vector tiles in your applications

• Multiple ways to use vector tiles:

- Use Esri provided vector tiles / styles

- Style Esri vector tile tilesets for your own use

- Change colors

- Drop layers

- Match the needs of your application

- Create your own vector tiles from your own data

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

Simple Style Copy

• Add vector tile basemap to map viewer

Simple Style Copy

• Add vector tile basemap to map viewer

• Copy the layer in the table of contents

Simple Style Copy

• Add vector tile basemap to map viewer

• Copy the layer in the table of contents

• Save the layer

Simple Style Copy

• Add vector tile basemap to map viewer

• Copy the layer in the table of contents

• Save the layer

• From item details page download the style

Simple Style Copy

• Add vector tile basemap to map viewer

• Copy the layer in the table of contents

• Save the layer

• From item details page download the style

• Modify root.json file

Simple Style Copy

• Edit root.json by hand, save and update item

• Update colors

• Add opacity - "fill-opacity": 0.5,

• Turn off visibility - "visibility": "none“

• Remove layers

• Use an editor like Brackets

• Use caution…low threshold for JSON

formatting errors

Simple Style Copy

• Add vector tile basemap to map viewer

• Copy the layer in the table of contents

• Save the layer

• From item details page download the style

• Modify root.json file

• Update item at item details page with updated root.json file

Demonstration

Simple Style Copy

ArcGIS VectorTile Style Editor

• Open Source app for JSON editing

• Available for download on GitHub or as a live

app

• Allows editing styles of Vector Tiles saved

via ArcGIS Online/Portal items

• Can be deployed and configured to run

against your Portal

ArcGIS VectorTile Style Editor

• Search for layers or colors

• Changes made to JSON can be applied

immediately and visible on screen

• Reset, Undo or Save back to ArcGIS

Online/Portal item

Demonstration

ArcGIS Vector Tile

Style Editor

Vector Basemap Style Editor

• Open Source app created by APL

• Available on GitHub and on ArcGIS Online

• Allows editing styles of Esri Vector Basemaps

saved via ArcGIS Online items

• Focus is on color changes and layer visibility

Vector Basemap Style Editor

• Change color of layers by Color

• Narrow by Style Type

• Batch update colors, many ways to specify

desired color

Vector Basemap Style Editor

• Change color of layers by Style

• Update color of style, and/or toggle

visibility

Vector Basemap Style Editor

• Selecting layer ID also exposes editable

JSON

• Use caution…

Vector Basemap Style Editor

• Use Update Basemap Item when

finished with updates

• Use Copy Esri Basemap to quickly

create new items (i.e. mimic the Simple

Style Copy process)

Demonstration

Vector Basemap

Style Editor

Questions?

Please Take Our Survey on the Esri Events App!

Select the session

you attended

Scroll down to find

the survey

Complete Answers

and Select “Submit”

Download the Esri Events

app and find your event

Print Your Certificate of Attendance

Print stations located in the 140 Concourse

Monday

12:30 PM – 6:30 PM

GIS Solutions Expo,

Hall B

5:15 PM– 6:30 PM

Expo Social,

Hall B

Tuesday

10:45 AM– 5:15 PM

GIS Solutions Expo,

Hall B

6:30 PM– 9:30 PM

Networking Reception,

Smithsonian National Air

and Space Museum