Transitioning to vector tiles in your web map

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.

    1 Transi)oning to vector )les in your web map Texas

    GeoRodeo May 16, 2019 Aubrey Drescher
  2. 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. 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
  4. 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
  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)
  6. 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);
  7. 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"
  8. 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"
  9. 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
  10. 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");
  11. 15.

    Levels of Detail in JavaScript 15 var lods = [

    paste from above ]; var map = new Map("map", { lods: lods });
  12. 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" });
  13. 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");