46
ArcGIS API for JavaScript: What's New Julie Powell | Noah Sager

ArcGIS API for JavaScript: What's New...PERFORMANCE Faster loading. >100kb less JS Vector tile optimizations Faster rendering of line features Highly performant FeatureLayers through

  • Upload
    others

  • View
    19

  • Download
    0

Embed Size (px)

Citation preview

Page 1: ArcGIS API for JavaScript: What's New...PERFORMANCE Faster loading. >100kb less JS Vector tile optimizations Faster rendering of line features Highly performant FeatureLayers through

ArcGIS API for JavaScript: What's NewJulie Powell | Noah Sager

Page 2: ArcGIS API for JavaScript: What's New...PERFORMANCE Faster loading. >100kb less JS Vector tile optimizations Faster rendering of line features Highly performant FeatureLayers through

Welcome!

Page 3: ArcGIS API for JavaScript: What's New...PERFORMANCE Faster loading. >100kb less JS Vector tile optimizations Faster rendering of line features Highly performant FeatureLayers through
Page 4: ArcGIS API for JavaScript: What's New...PERFORMANCE Faster loading. >100kb less JS Vector tile optimizations Faster rendering of line features Highly performant FeatureLayers through

PERFORMANCE

Faster loading. >100kb less JS

Vector tile optimizations

Faster rendering of line features

Highly performant FeatureLayers through Feature Tiles

Fast renderer updates → no flashing!4

4.11 4.12

4.11 4.12

Page 5: ArcGIS API for JavaScript: What's New...PERFORMANCE Faster loading. >100kb less JS Vector tile optimizations Faster rendering of line features Highly performant FeatureLayers through

Maximizing performance: a look under the hood

1. Query in an efficient way

2. Minimize size of data delivered to browser

3. Fast rendering

FEATURE [TILE] LAYERS

Page 6: ArcGIS API for JavaScript: What's New...PERFORMANCE Faster loading. >100kb less JS Vector tile optimizations Faster rendering of line features Highly performant FeatureLayers through

Maximizing performance: a look under the hood

1. Query in an efficient way -> feature tiles & caching

2. Minimize size of data delivered to browser-> binary format (PBF) & brotli compression

3. Fast rendering -> WebGL (all layers)

FEATURE [TILE] LAYERS

Page 7: ArcGIS API for JavaScript: What's New...PERFORMANCE Faster loading. >100kb less JS Vector tile optimizations Faster rendering of line features Highly performant FeatureLayers through

FEATURE FETCH STRATEGY• Feature tile queries

• Progressive feature tile subdivisions

• Smaller tiles in feature dense areas

Page 8: ArcGIS API for JavaScript: What's New...PERFORMANCE Faster loading. >100kb less JS Vector tile optimizations Faster rendering of line features Highly performant FeatureLayers through

HIGH PERFORMANCE FEATURE LAYERSEfficient querying with feature tiles & caching

PBF

WebGL

Page 9: ArcGIS API for JavaScript: What's New...PERFORMANCE Faster loading. >100kb less JS Vector tile optimizations Faster rendering of line features Highly performant FeatureLayers through

PERFORMANCEImproved integrated mesh performance

Fast feature layers

9

Page 10: ArcGIS API for JavaScript: What's New...PERFORMANCE Faster loading. >100kb less JS Vector tile optimizations Faster rendering of line features Highly performant FeatureLayers through

Visualization

Page 11: ArcGIS API for JavaScript: What's New...PERFORMANCE Faster loading. >100kb less JS Vector tile optimizations Faster rendering of line features Highly performant FeatureLayers through

VECTOR TILE LAYERSStyle esri’s basemaps

Or create your own

11

Page 12: ArcGIS API for JavaScript: What's New...PERFORMANCE Faster loading. >100kb less JS Vector tile optimizations Faster rendering of line features Highly performant FeatureLayers through

VECTOR TILE LAYERSStyle the map ahead of time with the

Vector Tile Style Editor

12

Page 13: ArcGIS API for JavaScript: What's New...PERFORMANCE Faster loading. >100kb less JS Vector tile optimizations Faster rendering of line features Highly performant FeatureLayers through

VECTOR TILE LAYERSLoad the style of your choice, or

Style the layer in code.

Option to update it without a reload (4.10)

13

Page 14: ArcGIS API for JavaScript: What's New...PERFORMANCE Faster loading. >100kb less JS Vector tile optimizations Faster rendering of line features Highly performant FeatureLayers through

DATA-DRIVEN STYLINGWhere?

What?

When?

How much?14

Page 15: ArcGIS API for JavaScript: What's New...PERFORMANCE Faster loading. >100kb less JS Vector tile optimizations Faster rendering of line features Highly performant FeatureLayers through

DOT DENSITYRandomly drawn dots to represent a field

value.

Configure how much each dot represents15

Page 16: ArcGIS API for JavaScript: What's New...PERFORMANCE Faster loading. >100kb less JS Vector tile optimizations Faster rendering of line features Highly performant FeatureLayers through

GEOJSON LAYER Style & interact like a feature layer

18

Page 17: ArcGIS API for JavaScript: What's New...PERFORMANCE Faster loading. >100kb less JS Vector tile optimizations Faster rendering of line features Highly performant FeatureLayers through

VECTOR MARKER SYMBOLS More than 100 new 2D web style symbols

CIM symbols

19

Page 18: ArcGIS API for JavaScript: What's New...PERFORMANCE Faster loading. >100kb less JS Vector tile optimizations Faster rendering of line features Highly performant FeatureLayers through

SMART MAPPINGParity with 3.x, plus more. i.e.:

• Scale-driven outline thickness

• Icon sizing based on scale20

Page 19: ArcGIS API for JavaScript: What's New...PERFORMANCE Faster loading. >100kb less JS Vector tile optimizations Faster rendering of line features Highly performant FeatureLayers through

Create custom WebGL layer views

Page 20: ArcGIS API for JavaScript: What's New...PERFORMANCE Faster loading. >100kb less JS Vector tile optimizations Faster rendering of line features Highly performant FeatureLayers through

INTERACTIVITYClient-side • Querying• Filtering• Statistics• Geometric operations

22

Page 21: ArcGIS API for JavaScript: What's New...PERFORMANCE Faster loading. >100kb less JS Vector tile optimizations Faster rendering of line features Highly performant FeatureLayers through

FILTERINGClient-side

Decide how to style feature within filter,

and outside filter.

Page 22: ArcGIS API for JavaScript: What's New...PERFORMANCE Faster loading. >100kb less JS Vector tile optimizations Faster rendering of line features Highly performant FeatureLayers through

Time

Page 23: ArcGIS API for JavaScript: What's New...PERFORMANCE Faster loading. >100kb less JS Vector tile optimizations Faster rendering of line features Highly performant FeatureLayers through

TIME Time aware layers and views

Time slider widget

25

Page 24: ArcGIS API for JavaScript: What's New...PERFORMANCE Faster loading. >100kb less JS Vector tile optimizations Faster rendering of line features Highly performant FeatureLayers through

1. timeInfo on the layer

2. timeExtent on the view

3. TimeSlider widget

TIME

Page 25: ArcGIS API for JavaScript: What's New...PERFORMANCE Faster loading. >100kb less JS Vector tile optimizations Faster rendering of line features Highly performant FeatureLayers through

3D

Page 26: ArcGIS API for JavaScript: What's New...PERFORMANCE Faster loading. >100kb less JS Vector tile optimizations Faster rendering of line features Highly performant FeatureLayers through

1. WaterSymbol3DLayer

2. Esri Web Style Symbols

3. gITF models

REALISTIC RENDERING

Page 27: ArcGIS API for JavaScript: What's New...PERFORMANCE Faster loading. >100kb less JS Vector tile optimizations Faster rendering of line features Highly performant FeatureLayers through

1. Detailed exteriors / interiors

2. Slice widget

3. Filtering

BUILDING SCENE LAYER

Page 28: ArcGIS API for JavaScript: What's New...PERFORMANCE Faster loading. >100kb less JS Vector tile optimizations Faster rendering of line features Highly performant FeatureLayers through

1. Round tube

2. Square tube

3. Wall

4. Strip

LINE SYMBOLS

Page 29: ArcGIS API for JavaScript: What's New...PERFORMANCE Faster loading. >100kb less JS Vector tile optimizations Faster rendering of line features Highly performant FeatureLayers through

Widgets

Page 30: ArcGIS API for JavaScript: What's New...PERFORMANCE Faster loading. >100kb less JS Vector tile optimizations Faster rendering of line features Highly performant FeatureLayers through

BUILD YOUR UICollection of widgets

Customizable

Easy placement

Page 31: ArcGIS API for JavaScript: What's New...PERFORMANCE Faster loading. >100kb less JS Vector tile optimizations Faster rendering of line features Highly performant FeatureLayers through

SLIDERS• Generic slider class

• Useful for any kind of numeric or range

of values

Page 32: ArcGIS API for JavaScript: What's New...PERFORMANCE Faster loading. >100kb less JS Vector tile optimizations Faster rendering of line features Highly performant FeatureLayers through

WIDGETS

34

• Use OOB or customize/extend

• Widget view / view model architecture

• On deck: Layer swipe

Original Alternative view Custom view

Page 34: ArcGIS API for JavaScript: What's New...PERFORMANCE Faster loading. >100kb less JS Vector tile optimizations Faster rendering of line features Highly performant FeatureLayers through

SKETCHING • Draw graphics on the graphics layer

• Use the OOB widget

Page 35: ArcGIS API for JavaScript: What's New...PERFORMANCE Faster loading. >100kb less JS Vector tile optimizations Faster rendering of line features Highly performant FeatureLayers through

EDITINGForm-based editing

Feature templates

Create & update geometry

Page 36: ArcGIS API for JavaScript: What's New...PERFORMANCE Faster loading. >100kb less JS Vector tile optimizations Faster rendering of line features Highly performant FeatureLayers through

EDITOR WIDGETWidget that brings together the editing

experience

Page 37: ArcGIS API for JavaScript: What's New...PERFORMANCE Faster loading. >100kb less JS Vector tile optimizations Faster rendering of line features Highly performant FeatureLayers through

Use client-side geometric operationsBuffer, cut, merge, validation workflows, etc…

Page 39: ArcGIS API for JavaScript: What's New...PERFORMANCE Faster loading. >100kb less JS Vector tile optimizations Faster rendering of line features Highly performant FeatureLayers through

Tooling

Page 41: ArcGIS API for JavaScript: What's New...PERFORMANCE Faster loading. >100kb less JS Vector tile optimizations Faster rendering of line features Highly performant FeatureLayers through

Plan your week… http://esriurl.com/uc2019webdev

Page 42: ArcGIS API for JavaScript: What's New...PERFORMANCE Faster loading. >100kb less JS Vector tile optimizations Faster rendering of line features Highly performant FeatureLayers through

Share your apps and suggestions with us…

[email protected]

• Your apps!

• Your impressions on the latest API

• Ideas for next UC or Developer Summit related to web development

Page 43: ArcGIS API for JavaScript: What's New...PERFORMANCE Faster loading. >100kb less JS Vector tile optimizations Faster rendering of line features Highly performant FeatureLayers through

Please Share Your Feedback in the App

Download the Esri

Events app and find

your event

Select the session

you attended

Scroll down to

“Survey”

Log in to access the

survey

Complete the survey

and select “Submit”

Page 44: ArcGIS API for JavaScript: What's New...PERFORMANCE Faster loading. >100kb less JS Vector tile optimizations Faster rendering of line features Highly performant FeatureLayers through
Page 45: ArcGIS API for JavaScript: What's New...PERFORMANCE Faster loading. >100kb less JS Vector tile optimizations Faster rendering of line features Highly performant FeatureLayers through

Section Subhead

Section Header

Page 46: ArcGIS API for JavaScript: What's New...PERFORMANCE Faster loading. >100kb less JS Vector tile optimizations Faster rendering of line features Highly performant FeatureLayers through

Presenter(s)

Demo Title