Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

More Decks by Texas Natural Resources Information System

Other Decks in Technology

Transcript

  1. 1
    Transi)oning to vector )les
    in your web map
    Texas GeoRodeo
    May 16, 2019
    Aubrey Drescher

    View full-size slide

  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

    View full-size slide

  3. Why might you use them?
    1. You can
    change styles
    aOer caching
    3

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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)

    View full-size slide

  7. Publishing to ArcGIS Online
    7

    View full-size slide

  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);

    View full-size slide

  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"

    View full-size slide

  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"

    View full-size slide

  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 =
    2.  Run > Edit Configura)ons > Python Interpreter > Python 3.6
    Import arcview, arceditor or arcinfo before arcpy
    11

    View full-size slide

  12. Schedule your script
    Point the task scheduler to
    "C:\Program Files\ArcGIS\Pro\bin\Python\Scripts\propy.bat"
    12
    In quotes!

    View full-size slide

  13. Legend Swatches
    13
    //Create legend swatches for the Vector Tile Layers
    var pwsSwatch = domConstruct.toDom(
    '
    class="esriLegendLayer">

    border="0" style="opacity:0.5">
    ');
    var LayerListDijit = new LayerList({ map: map,
    layers: [{
    layer: serviceAreasTileService,
    showLegend: false, showSubLayers: false,
    showOpacitySlider: true, content: pwsSwatch }]
    }, "tocDiv");

    View full-size slide

  14. Zoom Levels in ArcGIS Pro
    14
    Unchecked!

    View full-size slide

  15. Levels of Detail in JavaScript
    15
    var lods = [ paste from above ];
    var map = new Map("map", { lods: lods });

    View full-size slide

  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" });

    View full-size slide

  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");

    View full-size slide