Leveraging Vector Tile Layersin Web Apps

Patrick Arlt | René Rubalcava

slides: https://git.io/fjrz4

1 / 21

Agenda

What are Vector Tiles?Bene�tsGotchasCool stuff

2 / 21

What are Vector Tiles?Geographic data > Pre cooked tilesTiles are just binary data ( )Styles de�ned in separate JSON �leDrawn on the client using WebGL

PBF

3 / 21

What is a style?

version - style speci�cation version. always set to 8sprite - sprite images and data, used for patterns and icons

glyphs - font source for the tiles

sources - data sources for tiles, can be multiple sources

layers - de�ne how layers of the tiles will rendered

Example Style JSON

4 / 21

Bene�ts

In�nite resolution

Smooth zoomingEasy to customizeLow disk space (world = ~20 Gb)Fast cook times (world = ~8 hours)IndexableOverzoom

5 / 21

GotchasAttribute data for styling onlyLimited interactionFeatureLayer is faster in some cases

6 / 21

Cool stuffWatercolour basemapVector Tile Style Editor

7 / 21

Vector Tile Style Editor

Customize the style of your own or Esri's vector tiles styles8 / 21

Loading Styles// Load by style url// Load by style url  newnew  VectorTileLayerVectorTileLayer(({{      url    url::  'https://www.arcgis.com/sharing/rest/content/items/.../resources/styles/root.json''https://www.arcgis.com/sharing/rest/content/items/.../resources/styles/root.json'  }}))  

// Load tile service// Load tile service  // uses default style of service// uses default style of service  newnew  VectorTileLayerVectorTileLayer(({{      url    url::  'https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer''https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer'  }}))  

// Load by portalItem// Load by portalItem  newnew  VectorTileLayerVectorTileLayer(({{      portalItem    portalItem::  {{ id id::  'itemid''itemid'  }}  }}))  

9 / 21

Load Styles// Load with style JSON// Load with style JSON  newnew  VectorTileLayerVectorTileLayer(({{    style  style::  {{      version    version::  88,,  

    sources    sources::  {{        esri      esri::  {{          type        type::  "vector""vector",,          url        url::  "https://VectorTileServiceURL""https://VectorTileServiceURL"              }}          }},,      layers    layers::  [[......]]      }}  }}))

10 / 21

Styles and InteractivityDe�ne style by JSONCan interact with Vector Style layersNo attribute data other than what's needed to renderGeometries can be split on tiles

constconst vtLayer  vtLayer ==  newnew  VectorTileLayerVectorTileLayer(({{      style    style::  {{          layers        layers::  [[......]]          glyphs        glyphs::  ......          sprite        sprite::  ......          sources        sources::  {{  ......  }}          version        version::  88          }}  }}));;  

11 / 21

Interactivity

viewview..onon(("pointer‑move""pointer‑move",,  eventevent  =>=>  {{      view    view..hitTesthitTest((eventevent))..thenthen(((({{ results  results }}))  =>=>  {{                  // returns graphics with attribute data// returns graphics with attribute data                  // on the layer in the style that you// on the layer in the style that you                  // are interacting with// are interacting with          }}));;  }}));;  

12 / 21

Interactivity

13 / 21

Paint Propertiesviewview..onon(("pointer‑move""pointer‑move",,  eventevent  =>=>  {{    view  view..hitTesthitTest((eventevent))..thenthen(((({{ results  results }}))  =>=>  {{          constconst styles  styles == results results..filterfilter((......))..mapmap((......));;      styles    styles..forEachforEach((xx  =>=>  {{  

            constconst paint  paint == vtLayer vtLayer..getPaintPropertiesgetPaintProperties((xx..layerNamelayerName));;              ifif  ((paintpaint[["fill‑color""fill‑color"]]))  {{                  // change paint fill color// change paint fill color          paint        paint[["fill‑color""fill‑color"]]  == chroma chroma..randomrandom(())..hexhex(());;          vtLayer        vtLayer..setPaintPropertiessetPaintProperties((xx..layerNamelayerName,, paint paint))              }}          }}));;      }}));;  }}))

14 / 21

Paint Properties

15 / 21

Style App to custom basemapsCSS Style guideCustom themes

.my‑theme .esri‑widget,.my‑theme .esri‑widget,  

......  

.my‑theme .esri‑widget a.my‑theme .esri‑widget a  {{      background‑colorbackground‑color:: #c69 #c69;;      colorcolor:: #fff #fff;;  }}  

<<bodybody  classclass==""my‑thememy‑theme"">>  </</bodybody>>  

16 / 21

17 / 21

Where can I get more info?

18 / 21

19 / 21

20 / 21

21 / 21