Transitioning to vector tiles in your web map

Aubrey Drescher has an M.S. in Earth Systems Science from George Mason University. She fell in love with GIS in college. Over time, programming began to look interesting to her, so she took classes in .NET. She got her first developer job at a small company and learned JavaScript on the job. 5 years ago, she moved to Austin and into local government where she learned about python and map services. She currently works at the Texas Water Development Board and helps to plan each year’s ATX GIS Day.

Transcript

1. 1 Transi)oning to vector )les in your web map Texas GeoRodeo May 16, 2019 Aubrey Drescher
2. What are vector )les? •  Pioneered by the open source community •  Vector data (geometries and metadata) packaged into gridded )les •  Can be used as opera)onal or basemap layers •  Faster to load than other types of map services 2 Image credit: Julien Gaffuri, Toward Web Mapping with Vector Data, 2012
3. Why might you use them? 1. You can change styles aOer caching 3
4. Why else might you use them? 2. It takes less )me to create a cache 3. They look beQer in high-defini)on 4 Vector Tile Layer Dynamic Map Service
5. Steps to Transi)on On the server •  ArcMap ArcGIS Pro •  ArcGIS Server ArcGIS Online •  ArcPy 2.7 Python 3 Conda In the ESRI JavaScript API web map (version 3.x) •  Legend swatches •  Zoom levels •  Basemap gallery 5
6. ArcMap to ArcGIS Pro 6 1.  Download and install ArcGIS Pro 2.  Sign in to your portal 3.  Author or import your map(s)
7. Publishing to ArcGIS Online 7
8. Hos)ng on ArcGIS Online 8 var serviceAreasTileService = new VectorTileLayer( "https://tiles.arcgis.com/ tiles/.../arcgis/rest/ services/Public_Water_Service_Areas/VectorTileServer", { opacity: 0.5, id: "Water Service Boundaries" }); map.addLayer(serviceAreasTileService);
9. Update the layer with Python 9 User = "ArcGIS Online Username" pw = "ArcGIS Online Password" inItemID = "Item ID of the uploaded VTPK" layerName = "Service Name of the service to overwrite" tpk = "path to .vtpk file"
10. Create )le package with Python 10 #Open ArcGIS Pro project aprx = arcpy.mp.ArcGISProject("path to .aprx file") #Open a map within the project map = aprx.listMaps()[index] #Create a vector tile package from the map arcpy.CreateVectorTilePackage_management(in_map = map, output_file = "path to .vtpk file", service_type = "ONLINE", tiling_scheme = "", tile_structure = "INDEXED", min_cached_scale = 295828763.795777, max_cached_scale = 564.248588) tpk = "path to .vtpk file"
11. Move your IDE to Python 3 Point your python script editor to C:\Program Files\ArcGIS\Pro\bin\Python\envs\ arcgispro-py3\python.exe In PyCharm 1.  File > Sedngs > Project Interpreter > Add > Conda Environment > Exis)ng Environment = <path above> 2.  Run > Edit Configura)ons > Python Interpreter > Python 3.6 Import arcview, arceditor or arcinfo before arcpy 11
12. Schedule your script Point the task scheduler to "C:\Program Files\ArcGIS\Pro\bin\Python\Scripts\propy.bat" 12 In quotes!
13. Legend Swatches 13 //Create legend swatches for the Vector Tile Layers var pwsSwatch = domConstruct.toDom( '<div id="esri_dijit_Legend_0_Water Service Boundaries_3" class="" style="display: block;"> <table cellpadding="0" cellspacing="0" width="95%" class="esriLegendLayer"> <tbody><tr><td width="35" align="left"> <img src="data:image/png;base64,base64-encoded string" border="0" style="opacity:0.5"> </td></tr></tbody></table></div>'); var LayerListDijit = new LayerList({ map: map, layers: [{ layer: serviceAreasTileService, showLegend: false, showSubLayers: false, showOpacitySlider: true, content: pwsSwatch }] }, "tocDiv");
14. Zoom Levels in ArcGIS Pro 14 Unchecked!
15. Levels of Detail in JavaScript 15 var lods = [ paste from above ]; var map = new Map("map", { lods: lods });
16. Vector Basemaps 16 var antiqueBasemapLayer = new BasemapLayer({ type: "VectorTileLayer", styleUrl: "https://www.arcgis.com/sharing/rest/ content/items/.../resources/styles/ root.json?f=pjson" });
17. Basemap Gallery 17 var antiqueBasemap = Basemap({ layers: [antiqueBasemapLayer], title: "Antique", thumbnailUrl: "https://www.arcgis.com/ sharing/rest/content/items/.../info/ thumbnail/ModernAntique.jpg" }); basemaps.push(antiqueBasemap); var basemapGallery = new BasemapGallery({ showArcGISBasemaps: false, basemaps: basemaps, map: map }, "basemapGallery");
18. Ques)ons? 18 Aubrey.Drescher@twdb.texas.gov @AubreyRhea