The Road Ahead: Vector Tiles
Transcript of The Road Ahead: Vector Tiles
![Page 1: The Road Ahead: Vector Tiles](https://reader038.fdocuments.net/reader038/viewer/2022102811/586a5f8a1a28ab431f8b9ef2/html5/thumbnails/1.jpg)
The Road Ahead:Vector Tiles
Evan Caldwell & Craig Cleveland
February 24–25, 2016 | Washington, DC
FedGIS Conference
![Page 2: The Road Ahead: Vector Tiles](https://reader038.fdocuments.net/reader038/viewer/2022102811/586a5f8a1a28ab431f8b9ef2/html5/thumbnails/2.jpg)
Agenda
• Introduction to Vector Tiles• Vector Tiles in ArcGIS• Vector Tile Creation & Consumption• Using and Styling Vector Tiles• Common Questions
![Page 3: The Road Ahead: Vector Tiles](https://reader038.fdocuments.net/reader038/viewer/2022102811/586a5f8a1a28ab431f8b9ef2/html5/thumbnails/3.jpg)
Web Mapping To Date
• Typically vector content (points, lines, polygons)
• Displayed on top of basemaps
• Since ~2005 basemaps have usually been raster tiles
• Dynamic updates of the map consist of two things:- Updating overlay content as drawn in client- Changing the basemap
• Paradigm is changing
![Page 4: The Road Ahead: Vector Tiles](https://reader038.fdocuments.net/reader038/viewer/2022102811/586a5f8a1a28ab431f8b9ef2/html5/thumbnails/4.jpg)
Raster Tiles for High DPI Devices
Example from Google Maps
128
128
256
256
![Page 5: The Road Ahead: Vector Tiles](https://reader038.fdocuments.net/reader038/viewer/2022102811/586a5f8a1a28ab431f8b9ef2/html5/thumbnails/5.jpg)
Raster is Faster, but Vector is Corrector – Joseph Berry
![Page 6: The Road Ahead: Vector Tiles](https://reader038.fdocuments.net/reader038/viewer/2022102811/586a5f8a1a28ab431f8b9ef2/html5/thumbnails/6.jpg)
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
• Raster data still best served as raster in most circumstances
![Page 7: The Road Ahead: Vector Tiles](https://reader038.fdocuments.net/reader038/viewer/2022102811/586a5f8a1a28ab431f8b9ef2/html5/thumbnails/7.jpg)
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
![Page 8: The Road Ahead: Vector Tiles](https://reader038.fdocuments.net/reader038/viewer/2022102811/586a5f8a1a28ab431f8b9ef2/html5/thumbnails/8.jpg)
Vector Tiles in ArcGIS
• Tiles produced in ArcGIS Pro 1.2- Use the Mapbox vector tile spec
- Which uses Google protocol buffers- Styling converted to Mapbox gl style spec
• More aggressive overzoom- Builds on generalization work done in past
ArcGIS releases- Support for traditional tiling also exists
![Page 9: The Road Ahead: Vector Tiles](https://reader038.fdocuments.net/reader038/viewer/2022102811/586a5f8a1a28ab431f8b9ef2/html5/thumbnails/9.jpg)
Vector Tile Format
• Vector tiles are compressed into 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 layer- Symbol information for each layer
![Page 10: The Road Ahead: Vector Tiles](https://reader038.fdocuments.net/reader038/viewer/2022102811/586a5f8a1a28ab431f8b9ef2/html5/thumbnails/10.jpg)
Demonstration
ArcGIS Vector Tile Basemaps
![Page 11: The Road Ahead: Vector Tiles](https://reader038.fdocuments.net/reader038/viewer/2022102811/586a5f8a1a28ab431f8b9ef2/html5/thumbnails/11.jpg)
Creating Vector Tiles
![Page 12: The Road Ahead: Vector Tiles](https://reader038.fdocuments.net/reader038/viewer/2022102811/586a5f8a1a28ab431f8b9ef2/html5/thumbnails/12.jpg)
Cooking Process
• Entire world- ~ 8hrs on a desktop machine- Tiles ~ 13 GB- Multiple styles can use the same tiles
• Compared to raster- ~ many weeks on a server cluster per map style- Tiles ~ 20 TB
![Page 13: The Road Ahead: Vector Tiles](https://reader038.fdocuments.net/reader038/viewer/2022102811/586a5f8a1a28ab431f8b9ef2/html5/thumbnails/13.jpg)
Creation & Consumption
• Tile creation in ArcGIS Pro 1.2 (early 2016)
• Publish tile layers in ArcGIS Online and ArcGIS Server/Portal 10.4
• Tile consumption- ArcGIS Runtime Quartz – Beta 2
- Ground up implementation- ArcGIS JavaScript 3.15+ and 4.0 APIs
- Currently use mapbox-gl-js library- ArcGIS Pro 1.3
- Will share Runtime implementation
![Page 14: The Road Ahead: Vector Tiles](https://reader038.fdocuments.net/reader038/viewer/2022102811/586a5f8a1a28ab431f8b9ef2/html5/thumbnails/14.jpg)
Vector Tiles Created with GP Tools
• Create Vector Tile Index
• Create Vector Tile Package
• Accessory tools:- Share Package updated to support vector tiles- Extract Package updated to support vector tiles
![Page 15: The Road Ahead: Vector Tiles](https://reader038.fdocuments.net/reader038/viewer/2022102811/586a5f8a1a28ab431f8b9ef2/html5/thumbnails/15.jpg)
ArcGIS Vector Tiles Service
http://<catalog-url>/<folder>/<serviceName>/VectorTileServer|--root.json|--tilemap/|--tile|--resources
|--fonts/|--styles/|--sprites/|--info/
Service Example
![Page 16: The Road Ahead: Vector Tiles](https://reader038.fdocuments.net/reader038/viewer/2022102811/586a5f8a1a28ab431f8b9ef2/html5/thumbnails/16.jpg)
Authoring Vector Tiles in ArcGIS Pro
![Page 17: The Road Ahead: Vector Tiles](https://reader038.fdocuments.net/reader038/viewer/2022102811/586a5f8a1a28ab431f8b9ef2/html5/thumbnails/17.jpg)
Authoring Maps
• Only feature layers with simple, unique value, or class breaks renderers supported
• Maps should be re-authored for vector tiles- Limit number of layers- Limit duplication of content
• Several improvements have been made in ArcGIS Pro to assist with this- Scale dependent capabilities added to renderers- Scale based sizing added to renderers- Improvement to scale logic
![Page 18: The Road Ahead: Vector Tiles](https://reader038.fdocuments.net/reader038/viewer/2022102811/586a5f8a1a28ab431f8b9ef2/html5/thumbnails/18.jpg)
Scale Dependency on Renderers
• Each symbol class can be assigned a scale range
- Unique value- Class breaks
• Allows a multiscale map to be authored without duplicating content
![Page 19: The Road Ahead: Vector Tiles](https://reader038.fdocuments.net/reader038/viewer/2022102811/586a5f8a1a28ab431f8b9ef2/html5/thumbnails/19.jpg)
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
![Page 20: The Road Ahead: Vector Tiles](https://reader038.fdocuments.net/reader038/viewer/2022102811/586a5f8a1a28ab431f8b9ef2/html5/thumbnails/20.jpg)
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
![Page 21: The Road Ahead: Vector Tiles](https://reader038.fdocuments.net/reader038/viewer/2022102811/586a5f8a1a28ab431f8b9ef2/html5/thumbnails/21.jpg)
Demonstration
Authoring Vector Tiles in ArcGIS Pro
![Page 22: The Road Ahead: Vector Tiles](https://reader038.fdocuments.net/reader038/viewer/2022102811/586a5f8a1a28ab431f8b9ef2/html5/thumbnails/22.jpg)
Using and Styling Vector Tiles
![Page 23: The Road Ahead: Vector Tiles](https://reader038.fdocuments.net/reader038/viewer/2022102811/586a5f8a1a28ab431f8b9ef2/html5/thumbnails/23.jpg)
Using and Styling Vector Tiles
• Simple Style Copy- Save tile layer to your Portal or Online account- Hand edit JSON- Update map item
- Does not update sprites or fonts
• Vector Tile Styling Apps- ArcGIS Vector Tile Style Editor- Vector Basemap Style Editor
- Neither updates sprites or fonts
![Page 24: The Road Ahead: Vector Tiles](https://reader038.fdocuments.net/reader038/viewer/2022102811/586a5f8a1a28ab431f8b9ef2/html5/thumbnails/24.jpg)
Simple Style Copy
• Add vector tile basemap to map viewer
![Page 25: The Road Ahead: Vector Tiles](https://reader038.fdocuments.net/reader038/viewer/2022102811/586a5f8a1a28ab431f8b9ef2/html5/thumbnails/25.jpg)
Simple Style Copy
• Add vector tile basemap to map viewer
• Copy the layer in the table of contents
![Page 26: The Road Ahead: Vector Tiles](https://reader038.fdocuments.net/reader038/viewer/2022102811/586a5f8a1a28ab431f8b9ef2/html5/thumbnails/26.jpg)
Simple Style Copy
• Add vector tile basemap to map viewer
• Copy the layer in the table of contents
• Save the layer
![Page 27: The Road Ahead: Vector Tiles](https://reader038.fdocuments.net/reader038/viewer/2022102811/586a5f8a1a28ab431f8b9ef2/html5/thumbnails/27.jpg)
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
![Page 28: The Road Ahead: Vector Tiles](https://reader038.fdocuments.net/reader038/viewer/2022102811/586a5f8a1a28ab431f8b9ef2/html5/thumbnails/28.jpg)
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 roots.json file
![Page 29: The Road Ahead: Vector Tiles](https://reader038.fdocuments.net/reader038/viewer/2022102811/586a5f8a1a28ab431f8b9ef2/html5/thumbnails/29.jpg)
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
![Page 30: The Road Ahead: Vector Tiles](https://reader038.fdocuments.net/reader038/viewer/2022102811/586a5f8a1a28ab431f8b9ef2/html5/thumbnails/30.jpg)
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 roots.json file
• Update item at item details page with updated roots.json file
![Page 31: The Road Ahead: Vector Tiles](https://reader038.fdocuments.net/reader038/viewer/2022102811/586a5f8a1a28ab431f8b9ef2/html5/thumbnails/31.jpg)
DemonstrationSimple Style Copy
![Page 32: The Road Ahead: Vector Tiles](https://reader038.fdocuments.net/reader038/viewer/2022102811/586a5f8a1a28ab431f8b9ef2/html5/thumbnails/32.jpg)
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
![Page 33: The Road Ahead: Vector Tiles](https://reader038.fdocuments.net/reader038/viewer/2022102811/586a5f8a1a28ab431f8b9ef2/html5/thumbnails/33.jpg)
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
![Page 34: The Road Ahead: Vector Tiles](https://reader038.fdocuments.net/reader038/viewer/2022102811/586a5f8a1a28ab431f8b9ef2/html5/thumbnails/34.jpg)
Demonstration
ArcGIS Vector Tile Style Editor
![Page 35: The Road Ahead: Vector Tiles](https://reader038.fdocuments.net/reader038/viewer/2022102811/586a5f8a1a28ab431f8b9ef2/html5/thumbnails/35.jpg)
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
![Page 36: The Road Ahead: Vector Tiles](https://reader038.fdocuments.net/reader038/viewer/2022102811/586a5f8a1a28ab431f8b9ef2/html5/thumbnails/36.jpg)
Vector Basemap Style Editor
• Change color of layers by Color
• Use map to “Pick Color”
• Select color from Basemap Color Palette
• Narrow by Style Type
• Batch update colors, many ways to specify
desired color
![Page 37: The Road Ahead: Vector Tiles](https://reader038.fdocuments.net/reader038/viewer/2022102811/586a5f8a1a28ab431f8b9ef2/html5/thumbnails/37.jpg)
Vector Basemap Style Editor
• Change color of layers by Style
• By default all layers shown
• Narrow by:
• Current map zoom level
• Search
• Source Layer
• Update color of style, and/or toggle
visibility
![Page 38: The Road Ahead: Vector Tiles](https://reader038.fdocuments.net/reader038/viewer/2022102811/586a5f8a1a28ab431f8b9ef2/html5/thumbnails/38.jpg)
Vector Basemap Style Editor
• Selecting layer ID also exposes editable
JSON
• Use caution…
![Page 39: The Road Ahead: Vector Tiles](https://reader038.fdocuments.net/reader038/viewer/2022102811/586a5f8a1a28ab431f8b9ef2/html5/thumbnails/39.jpg)
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)
![Page 40: The Road Ahead: Vector Tiles](https://reader038.fdocuments.net/reader038/viewer/2022102811/586a5f8a1a28ab431f8b9ef2/html5/thumbnails/40.jpg)
Demonstration
Vector BasemapStyle Editor
![Page 41: The Road Ahead: Vector Tiles](https://reader038.fdocuments.net/reader038/viewer/2022102811/586a5f8a1a28ab431f8b9ef2/html5/thumbnails/41.jpg)
Common Questions
![Page 42: The Road Ahead: Vector Tiles](https://reader038.fdocuments.net/reader038/viewer/2022102811/586a5f8a1a28ab431f8b9ef2/html5/thumbnails/42.jpg)
Can my data be extracted from vector tiles?
• Think of vector tiles as generalized graphic derivations of your data. In many cases features are cut at tile boundaries, overlapped at tile boundaries, or are dissolved for optimal draw. Only a minimum number of attributes needed for feature draw are stored. It’s not raw data.
![Page 43: The Road Ahead: Vector Tiles](https://reader038.fdocuments.net/reader038/viewer/2022102811/586a5f8a1a28ab431f8b9ef2/html5/thumbnails/43.jpg)
Why don’t I see “Share as vector tiles” in ArcGIS Pro
• The initial implementation is limited to Geoprocessing tools. A full sharing experience is planned for a future ArcGIS Pro release.
![Page 44: The Road Ahead: Vector Tiles](https://reader038.fdocuments.net/reader038/viewer/2022102811/586a5f8a1a28ab431f8b9ef2/html5/thumbnails/44.jpg)
Can I create vector tiles for any map projection?
• Only Web Mercator (Auxiliary Sphere) supported for the initial release
![Page 45: The Road Ahead: Vector Tiles](https://reader038.fdocuments.net/reader038/viewer/2022102811/586a5f8a1a28ab431f8b9ef2/html5/thumbnails/45.jpg)
Should I re-author my maps for vector tiles?
• Maybe, start by reading the help topic titled Author a map for vector tile creation
![Page 46: The Road Ahead: Vector Tiles](https://reader038.fdocuments.net/reader038/viewer/2022102811/586a5f8a1a28ab431f8b9ef2/html5/thumbnails/46.jpg)
Why would I need to create raster tiles anymore?
• Consider consuming clients and map requirements before committing to vector tiles. At this time, it’s not an answer for everything. Will never be a solution for many raster datasets.
![Page 47: The Road Ahead: Vector Tiles](https://reader038.fdocuments.net/reader038/viewer/2022102811/586a5f8a1a28ab431f8b9ef2/html5/thumbnails/47.jpg)
Can I do server side vector tile creation?
• Not at this time, we have this on our roadmap for Portal / ArcGIS Online.
![Page 48: The Road Ahead: Vector Tiles](https://reader038.fdocuments.net/reader038/viewer/2022102811/586a5f8a1a28ab431f8b9ef2/html5/thumbnails/48.jpg)
Vector tiles don’t draw correctly in my browser, is this a bug?
You’re likely experiencing a problem with WebGL support in your browser. Ensure you have the latest driver for your video card from the driver manufacturer.
![Page 49: The Road Ahead: Vector Tiles](https://reader038.fdocuments.net/reader038/viewer/2022102811/586a5f8a1a28ab431f8b9ef2/html5/thumbnails/49.jpg)
Can I use any font for vector tiles?
• From a technical standpoint any TrueType or OpenType font can be processed into the vector tile font format. However, font licenses vary widely and you should ensure you’re licensed for such use.
![Page 50: The Road Ahead: Vector Tiles](https://reader038.fdocuments.net/reader038/viewer/2022102811/586a5f8a1a28ab431f8b9ef2/html5/thumbnails/50.jpg)
Does the print service support vector tiles?
• Not at this time, the JavaScript API will replace the Esri basemap vector tile layers with the Streets raster tiles. Custom services will be dropped. We hope to support vector tiles in the print service in a future release.
![Page 51: The Road Ahead: Vector Tiles](https://reader038.fdocuments.net/reader038/viewer/2022102811/586a5f8a1a28ab431f8b9ef2/html5/thumbnails/51.jpg)
Additional Resources
![Page 52: The Road Ahead: Vector Tiles](https://reader038.fdocuments.net/reader038/viewer/2022102811/586a5f8a1a28ab431f8b9ef2/html5/thumbnails/52.jpg)
Vector Tile Blogs
• Introducing Esri Vector Basemaps (Beta)
• Understanding Esri Vector Basemap File Structure
• How to Customize Esri Vector Basemaps
• Customize Esri Vector Basemap Boundaries and Labels
• Esri Vector Basemaps Reference Document
• Vector Basemaps (Beta)
![Page 53: The Road Ahead: Vector Tiles](https://reader038.fdocuments.net/reader038/viewer/2022102811/586a5f8a1a28ab431f8b9ef2/html5/thumbnails/53.jpg)
Vector Tile Basemaps
• ArcGIS Online Group• Vector Tile Demo App
![Page 54: The Road Ahead: Vector Tiles](https://reader038.fdocuments.net/reader038/viewer/2022102811/586a5f8a1a28ab431f8b9ef2/html5/thumbnails/54.jpg)
ArcGIS VectorTile Style Editor
http://esri.github.io/arcgis-vectortile-style-editor
![Page 55: The Road Ahead: Vector Tiles](https://reader038.fdocuments.net/reader038/viewer/2022102811/586a5f8a1a28ab431f8b9ef2/html5/thumbnails/55.jpg)
Vector Basemap Style Editor
• http://maps.esri.com/AGSJS_Demos/templates/VectorBasemapStyleEditor/index.html• https://github.com/jgrayson-apl/VectorBasemapStyleEditor
![Page 56: The Road Ahead: Vector Tiles](https://reader038.fdocuments.net/reader038/viewer/2022102811/586a5f8a1a28ab431f8b9ef2/html5/thumbnails/56.jpg)
Questions???Thank you for your time!
February 24–25, 2016 | Washington, DC
FedGIS Conference
![Page 57: The Road Ahead: Vector Tiles](https://reader038.fdocuments.net/reader038/viewer/2022102811/586a5f8a1a28ab431f8b9ef2/html5/thumbnails/57.jpg)
Download the Esri Events app!
Don’t forget to complete your digital session survey
![Page 58: The Road Ahead: Vector Tiles](https://reader038.fdocuments.net/reader038/viewer/2022102811/586a5f8a1a28ab431f8b9ef2/html5/thumbnails/58.jpg)
Please Take Our Survey!
Select the session you attended
Scroll down to find the survey Complete Answersand Select “Submit”
Download the Esri Events app and find your event
![Page 59: The Road Ahead: Vector Tiles](https://reader038.fdocuments.net/reader038/viewer/2022102811/586a5f8a1a28ab431f8b9ef2/html5/thumbnails/59.jpg)
Networking ReceptionSmithsonian National Museum of the American IndianThursday, 6:30 p.m. – 9:30 p.m.Bus pickup on L Street
![Page 60: The Road Ahead: Vector Tiles](https://reader038.fdocuments.net/reader038/viewer/2022102811/586a5f8a1a28ab431f8b9ef2/html5/thumbnails/60.jpg)
Print your customized Certificate of AttendancePrint stations located in the 140/150 Concourse
![Page 61: The Road Ahead: Vector Tiles](https://reader038.fdocuments.net/reader038/viewer/2022102811/586a5f8a1a28ab431f8b9ef2/html5/thumbnails/61.jpg)
GIS Solutions Expo, Hall AWednesday, 12:30 p.m. – 6:30 p.m.Welcome Social, 5:15 p.m. – 6:30 p.m.Thursday, 10:45 a.m. – 4:00 p.m.
• Exhibitors• Hands-on Learning Lab• Demo Theaters• Esri Showcase