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

ArcGIS API for JavaScript: What's New - GitHub Pages

Feb 14, 2022

Download

Documents

dariahiddleston
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: ArcGIS API for JavaScript: What's New - GitHub Pages

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

Page 2: ArcGIS API for JavaScript: What's New - GitHub Pages

Welcome!

Page 3: ArcGIS API for JavaScript: What's New - GitHub Pages
Page 4: ArcGIS API for JavaScript: What's New - GitHub Pages

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 - GitHub Pages

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 - GitHub Pages

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 - GitHub Pages

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 - GitHub Pages

HIGH PERFORMANCE FEATURE LAYERSEfficient querying with feature tiles & caching

PBF

WebGL

Page 9: ArcGIS API for JavaScript: What's New - GitHub Pages

PERFORMANCEImproved integrated mesh performance

Fast feature layers

9

Page 10: ArcGIS API for JavaScript: What's New - GitHub Pages

Visualization

Page 11: ArcGIS API for JavaScript: What's New - GitHub Pages

VECTOR TILE LAYERSStyle esri’s basemaps

Or create your own

11

Page 12: ArcGIS API for JavaScript: What's New - GitHub Pages

VECTOR TILE LAYERSStyle the map ahead of time with the

Vector Tile Style Editor

12

Page 13: ArcGIS API for JavaScript: What's New - GitHub Pages

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 - GitHub Pages

DATA-DRIVEN STYLINGWhere?

What?

When?

How much?14

Page 15: ArcGIS API for JavaScript: What's New - GitHub Pages

DOT DENSITYRandomly drawn dots to represent a field

value.

Configure how much each dot represents15

Page 16: ArcGIS API for JavaScript: What's New - GitHub Pages

GEOJSON LAYER Style & interact like a feature layer

18

Page 17: ArcGIS API for JavaScript: What's New - GitHub Pages

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

CIM symbols

19

Page 18: ArcGIS API for JavaScript: What's New - GitHub Pages

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 - GitHub Pages

Create custom WebGL layer views

Page 20: ArcGIS API for JavaScript: What's New - GitHub Pages

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

22

Page 21: ArcGIS API for JavaScript: What's New - GitHub Pages

FILTERINGClient-side

Decide how to style feature within filter,

and outside filter.

Page 22: ArcGIS API for JavaScript: What's New - GitHub Pages

Time

Page 23: ArcGIS API for JavaScript: What's New - GitHub Pages

TIME Time aware layers and views

Time slider widget

25

Page 24: ArcGIS API for JavaScript: What's New - GitHub Pages

1. timeInfo on the layer

2. timeExtent on the view

3. TimeSlider widget

TIME

Page 25: ArcGIS API for JavaScript: What's New - GitHub Pages

3D

Page 26: ArcGIS API for JavaScript: What's New - GitHub Pages

1. WaterSymbol3DLayer

2. Esri Web Style Symbols

3. gITF models

REALISTIC RENDERING

Page 27: ArcGIS API for JavaScript: What's New - GitHub Pages

1. Detailed exteriors / interiors

2. Slice widget

3. Filtering

BUILDING SCENE LAYER

Page 28: ArcGIS API for JavaScript: What's New - GitHub Pages

1. Round tube

2. Square tube

3. Wall

4. Strip

LINE SYMBOLS

Page 29: ArcGIS API for JavaScript: What's New - GitHub Pages

Widgets

Page 30: ArcGIS API for JavaScript: What's New - GitHub Pages

BUILD YOUR UICollection of widgets

Customizable

Easy placement

Page 31: ArcGIS API for JavaScript: What's New - GitHub Pages

SLIDERS• Generic slider class

• Useful for any kind of numeric or range

of values

Page 32: ArcGIS API for JavaScript: What's New - GitHub Pages

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 - GitHub Pages

SKETCHING • Draw graphics on the graphics layer

• Use the OOB widget

Page 35: ArcGIS API for JavaScript: What's New - GitHub Pages

EDITINGForm-based editing

Feature templates

Create & update geometry

Page 36: ArcGIS API for JavaScript: What's New - GitHub Pages

EDITOR WIDGETWidget that brings together the editing

experience

Page 37: ArcGIS API for JavaScript: What's New - GitHub Pages

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

Page 39: ArcGIS API for JavaScript: What's New - GitHub Pages

Tooling

Page 41: ArcGIS API for JavaScript: What's New - GitHub Pages

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

Page 42: ArcGIS API for JavaScript: What's New - GitHub Pages

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 - GitHub Pages

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 - GitHub Pages
Page 45: ArcGIS API for JavaScript: What's New - GitHub Pages

Section Subhead

Section Header

Page 46: ArcGIS API for JavaScript: What's New - GitHub Pages

Presenter(s)

Demo Title