Custom Basemaps with
Vector Tile Style Editor

Patrick Arlt and Allison Davis

http://bit.ly/2CSLnYX

<!-- Allison --> ## Vector Tile Refresher * Compressed vector geographic data * Binary indexed tile scheme * Transfer and render *LOTS* of features * Styled on the client * Seperation of data (tiles) and style

<!-- Allison --> ## Styling Spec * [Mapbox Style Specification](https://docs.mapbox.com/mapbox-gl-js/style-spec/) * Styles have ~150-300 layers * Each layer has a "source" layer * Layers can have an optional "filter" for data * Background, fill, symbol, line layers * Hard to write by hand

<!-- Allison --> ## Vector Tile Style Editor * A visual editor for styling vector tile data * Extra tools for editing Esri basemaps * OSM support coming soon! * Goal: a complete editing experience <aside class="notes"> Web application built by the Developer Experience team in Angular. Currently available via the Developers website. Will be integrated into ArcGIS Online later this year. We'll demo OSM today, will be released very very soon </aside>

<!-- Pat --> ## Showcase <a href="https://esripdx.maps.arcgis.com/apps/Cascade/index.html?appid=9a79059a75e249039d24740758e4624b"><img src="vse-1920x1080.png" alt="" style="width: 50%;"></a> [Showcase App](https://esripdx.maps.arcgis.com/apps/Cascade/index.html?appid=9a79059a75e249039d24740758e4624b)

<!-- Pat --> ## Editor Overview [Let's get started](https://developers.arcgis.com/vector-tile-style-editor) <aside class="notes"> open a basemap, click through the tools, show minimaps, toggle hillshade, click the map, save the basemap </aside>

<!-- Pat --> ## Quick Editor * Fast, bulk styling for Esri basemaps * 6 color groups * ~500-1000 styling rules * Label and road size editing [Demo](https://developers.arcgis.com/vector-tile-style-editor)

<!-- Pat --> ## Inside Quick Editor 1. 6 color groups 2. Style rules run 3. Labels colored to meet contrast threshold 4. Shadows and road casings colored for contrast 5. Icons and patterns are tinted to match color groups

<!-- Allison --> ## Group Editor * Bulk edit 1 category of layers * Same rules as quick editor * Great for categories like Roads > Major and Roads > Minor * Edit a large number of layers fast

<!-- Allison --> ## Layer Editor * Edit any propery of any layer * Verbose, but detailed editing * Use steps for different style across zoom levels * Show/hide layers * Customize zoom levels * High level of control

<!-- Allison --> ## Sprite Editor * Recolors icons and patterns * Upload new sprites

<!-- Allison --> ## Color Editor * Find and replace colors in a style * Great for auditing a map to identify out of place colors

<!-- Pat --> ## [Let's make a style](https://developers.arcgis.com/vector-tile-style-editor) <p class="fragment">Please shout out ideas</p>

<!-- Allison --> ## Roadmap * OSM support - coming very soon! * ArcGIS Online integration - 2019 * Layer management and reordering - TBD * Upload custom fonts - TBD * Editing raw JSON - TBD

<!-- Allison --> ## Frequent Questions * Can I style my own basemaps with the VTSE? * When will this be available in ArcGIS Enterprise? * When will this leave beta?

<!-- Allison --> ## How do I get started? * [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/) * Feedback on Geonet: https://bit.ly/2RzadCc

<br><br><br><br><br><br> Slides at http://bit.ly/2CSLnYX