Upload
others
View
5
Download
0
Embed Size (px)
Citation preview
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