Vector tile style editor workshop
•Download as PPTX, PDF•
0 likes•595 views
The Esri Vector Tile Style Editor helps you quickly and easily create custom basemap styles that match your brand and the type of apps you are building. Start by selecting an existing Esri vector basemap (e.g. World Street Map or Light Gray Canvas) and then begin customizing the layers from there. The edited styles are saved as items in ArcGIS Online. The ArcGIS Online Map Viewer or any custom application can then reference the item to display the basemap. Come to this workshop to learn how you can style your own basemaps using the Esri Vector Tile Style Editor.
More Related Content
What's hot
What's hot (20)
Similar to Vector tile style editor workshop
Similar to Vector tile style editor workshop (20)
More from Aileen Buckley
More from Aileen Buckley (20)
Recently uploaded
Recently uploaded (20)
Vector tile style editor workshop
- 1. Vector Tile Style Editor Christopher French Aileen Buckley Slides on Slideshare.net
- 3. Vector Tile Style Editor: a WYSIWYG editor for vector tile styles • Editor for vector tile styles • Edit Esri basemaps • Open Street Maps support • ArcGIS Online integration • ArcGIS Enterprise (soon)
- 4. Practical applications / what are vector tile style layers? • Compressed vector geographic data • Binary indexed tile scheme • Used to transfer and render LOTS of features • Styled on the client side • Separation of data (tiles) and styles
- 5. Under the hood: VTSE is manipulates a JSON file Workflow: Manually edit a vector style JSON file • Download the style you want to edit (JSON file) • Edit the JSON file in a text editor or IDE • In the portal page for that vector tile layer, click Update and upload the edited JSON file
- 6. Example • Use the VTSE to make changes to vector tile styles • When using VTSE in ArcGIS Online, you need to choose a vector basemap • Mapbox style specification: https://docs.mapbox.com/ma pbox-gl-js/style-spec/
- 7. Style layer titles and labels may need to be hand edited for i18n https://www.arcgis.com/home/item.html?id=c8cb478cd4da4206a56e2a2fba545ccf
- 10. Accessing the editor and adding a vector basemap • Accessing the editor though ArcGIS Online • Finding Living Atlas vector basemaps • The editor web app • Working with rReference overlay layers
- 15. Editor overview
- 16. Working with vector tile style layers • Top-level layer types: - Natural - Populated Places - Land Use - Transportation - Water - Buildings - Roads - Boundaries • Change colors, patterns, visibility, etc. • Click on the map to select layers, or use the layer widget
- 17. Quick Editor • Choose and randomize color themes • Pick contrasting colors and labels • Shadows and road casings colored for contrast • Choose different sizes and tints for labels • Change road size • Icons and patterns are tinted to match color groups • Fast, bulk styling for Esri basemaps
- 18. Layer Editor • Edit any property of any layer • Verbose but detailed editing • Vary styles by zoom level • Show / hide layers • Customize zoom levels • High level of control
- 19. Color Editor • Find and replace colors • Audit map colors • Tint sprites and labels • Add halos and outlines
- 20. Group Editor • Bulk edit one category of layers • Great for categories like Roads > Major and Roads > Minor • Edit a large number of layers • Set the default font • Change visibility of layer groups
- 21. Edit styles and colors of layers by group
- 23. Sprite Editor • Recolor icons and patterns • Upload new sprites
- 24. Let’s edit a style Tutorial: Style a vector basemap https://developers.arcgis.com/labs/arcgisonline/style-a-vector-basemap/
- 25. Adding hillshade • Turn hillshade on: • Select a style layer and lower the opacity below 100%
- 26. Change style layer visibility or opacity to display background imagery
- 27. Let’s share the style Tutorial: Display a styled basemap in your app https://developers.arcgis.com/labs/javascript/display-a-styled-vector-basemap/
- 28. Resources • Feedback on GeoNet: https://bit.ly/2RzadCc • Documentation: https://developers.arcgis.com/documentation/vector-tile-style-editor/ • Tutorial: Style a vector basemap https://developers.arcgis.com/labs/arcgisonline/style- a-vector-basemap/ • Tutorial: Display a styled basemap in your app https://developers.arcgis.com/labs/javascript/display-a-styled-vector-basemap/ • Blog posts: - Design custom basemaps with the new ArcGIS Vector Tile Style Editor https://www.esri.com/arcgis-blog/products/developers/mapping/design-custom-basemaps- with-the-new-arcgis-vector-tile-style-editor/ - Edit Vector Tiles in Style from Map Viewer https://www.esri.com/arcgis-blog/products/arcgis-online/mapping/edit-vector-tiles-in-style- from-map-viewer/
- 29. Thank you! Slides on Slideshare.net
Editor's Notes
- The Esri Vector Tile Style Editor helps you quickly and easily create custom basemap styles that match your brand and the type of apps you are building. Start by selecting an existing Esri vector basemap (e.g. World Street Map or Light Gray Canvas) and then begin customizing the layers from there. The edited styles are saved as items in ArcGIS Online. The ArcGIS Online Map Viewer or any custom application can then reference the item to display the basemap. Come to this workshop to learn how you can style your own basemaps using the Esri Vector Tile Style Editor.