40
ArcGIS API for JavaScript: What's New Bjorn Svensson, Julie Powell, Noah Sager

ArcGIS API for JavaScript: What's New - Esri€¦ · MAKING BETTER PROMISES A promise is an object that represents a potential future value. More resources. Title: ArcGIS API for

  • Upload
    others

  • View
    8

  • Download
    0

Embed Size (px)

Citation preview

Page 1: ArcGIS API for JavaScript: What's New - Esri€¦ · MAKING BETTER PROMISES A promise is an object that represents a potential future value. More resources. Title: ArcGIS API for

ArcGIS API for JavaScript:

What's NewBjorn Svensson, Julie Powell, Noah Sager

Page 2: ArcGIS API for JavaScript: What's New - Esri€¦ · MAKING BETTER PROMISES A promise is an object that represents a potential future value. More resources. Title: ArcGIS API for
Page 3: ArcGIS API for JavaScript: What's New - Esri€¦ · MAKING BETTER PROMISES A promise is an object that represents a potential future value. More resources. Title: ArcGIS API for

4.8 & 3.25 Released July 5th

Page 4: ArcGIS API for JavaScript: What's New - Esri€¦ · MAKING BETTER PROMISES A promise is an object that represents a potential future value. More resources. Title: ArcGIS API for

CHECK OUT THE RELEASE NOTES New features, guide topics, samples

Page 5: ArcGIS API for JavaScript: What's New - Esri€¦ · MAKING BETTER PROMISES A promise is an object that represents a potential future value. More resources. Title: ArcGIS API for

4.8 SAMPLESSearch for “4.8” or go under “Latest Samples”

12+ new samples

Page 7: ArcGIS API for JavaScript: What's New - Esri€¦ · MAKING BETTER PROMISES A promise is an object that represents a potential future value. More resources. Title: ArcGIS API for

Clustering, heatmap, smartmapping, Arcade

expressions, labeling, ...

Visualization

Page 8: ArcGIS API for JavaScript: What's New - Esri€¦ · MAKING BETTER PROMISES A promise is an object that represents a potential future value. More resources. Title: ArcGIS API for

LABELING 2D labeling of client-side features *

Add something shiny here

too

Page 9: ArcGIS API for JavaScript: What's New - Esri€¦ · MAKING BETTER PROMISES A promise is an object that represents a potential future value. More resources. Title: ArcGIS API for

RELATIONSHIP RENDERERa renderer for exploring the potential

relationship between two numeric attributes

… a.k.a. Bivariate Choropleth Maps

Page 10: ArcGIS API for JavaScript: What's New - Esri€¦ · MAKING BETTER PROMISES A promise is an object that represents a potential future value. More resources. Title: ArcGIS API for

HEATMAP RENDERER (2D)visualize large, dense point datasets as a

raster surface to emphasize areas with a

high density of features.

Add something shiny here

Page 11: ArcGIS API for JavaScript: What's New - Esri€¦ · MAKING BETTER PROMISES A promise is an object that represents a potential future value. More resources. Title: ArcGIS API for

Better feature layers & client-side processing

Do more with more:

Page 12: ArcGIS API for JavaScript: What's New - Esri€¦ · MAKING BETTER PROMISES A promise is an object that represents a potential future value. More resources. Title: ArcGIS API for

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)

3. Fast rendering -> WebGL (opt in)

FEATURE LAYERS

Page 13: ArcGIS API for JavaScript: What's New - Esri€¦ · MAKING BETTER PROMISES A promise is an object that represents a potential future value. More resources. Title: ArcGIS API for

FEATURE FETCH STRATEGY• Feature tile queries

• Progressive feature tile subdivisions

• Smaller tiles in feature dense areas

Page 14: ArcGIS API for JavaScript: What's New - Esri€¦ · MAKING BETTER PROMISES A promise is an object that represents a potential future value. More resources. Title: ArcGIS API for

FEATURE TILE QUERIES AND RESPONSE CACHING• Tile requests are consistent.

• Cache feature tiles in the browser, CDN,

and Online

Public Layer

Browser cache

Does the browser cache have the latest data ?

DataFeature tile cache

No

Does the feature tile cache have the latest data ?

Execute a new query.

Feature layer

Query is sent to the feature layer

CDN cache

No

Does the CDN cache have the latest data ?

Page 15: ArcGIS API for JavaScript: What's New - Esri€¦ · MAKING BETTER PROMISES A promise is an object that represents a potential future value. More resources. Title: ArcGIS API for

FEATURE TILE QUERIES AND RESPONSE CACHING• Server-side caching of private data

happens within Online

• Authorized users have access

Private Layer

Browser cache

Does the browser cache have the latest data ?

DataFeature tile cache

No

Does the feature tile cache have the latest data ?

Execute a new query.

Feature layer

Query is sent to the feature layer

https://www.esri.com/arcgis-blog/products/arcgis-online/data-management/scalable-hosted-feature-layers-in-arcgis-online-tile-queries-and-response-caching/

Page 16: ArcGIS API for JavaScript: What's New - Esri€¦ · MAKING BETTER PROMISES A promise is an object that represents a potential future value. More resources. Title: ArcGIS API for

Build interactive workflows with the data

• Client-side querying & statistics

• Geometry engine

• Projection engine

Page 17: ArcGIS API for JavaScript: What's New - Esri€¦ · MAKING BETTER PROMISES A promise is an object that represents a potential future value. More resources. Title: ArcGIS API for

CLIENT-SIDE QUERYING & STATISTICS• Done on FeatureLayerView

• 4.8 added full spatial queries &

expressions for fields & stats

Page 18: ArcGIS API for JavaScript: What's New - Esri€¦ · MAKING BETTER PROMISES A promise is an object that represents a potential future value. More resources. Title: ArcGIS API for

GEOMETRY ENGINENot new! But you can use it in new ways

with other updates such as sketching.

Page 19: ArcGIS API for JavaScript: What's New - Esri€¦ · MAKING BETTER PROMISES A promise is an object that represents a potential future value. More resources. Title: ArcGIS API for

CLIENT-SIDE PROJECTION• Same engine as ArcGIS Pro

• Uses WebAssembly

Page 20: ArcGIS API for JavaScript: What's New - Esri€¦ · MAKING BETTER PROMISES A promise is an object that represents a potential future value. More resources. Title: ArcGIS API for

Drawing & Widgets

Building a great UX

Page 21: ArcGIS API for JavaScript: What's New - Esri€¦ · MAKING BETTER PROMISES A promise is an object that represents a potential future value. More resources. Title: ArcGIS API for

DRAW & SKETCHVIEWMODELDraw is the basic building block.

SketchViewModel is one way to put it

together.

Page 22: ArcGIS API for JavaScript: What's New - Esri€¦ · MAKING BETTER PROMISES A promise is an object that represents a potential future value. More resources. Title: ArcGIS API for

WIDGETSLayerList, Legend, CoordinateConversion,

AreaMeasurement3D, Popup, Bookmarks

Page 23: ArcGIS API for JavaScript: What's New - Esri€¦ · MAKING BETTER PROMISES A promise is an object that represents a potential future value. More resources. Title: ArcGIS API for

COMBINE LAYERLIST AND LEGEND WIDGETSAdd a Legend widget to a LayerList

widget to create a single UI element.

Page 24: ArcGIS API for JavaScript: What's New - Esri€¦ · MAKING BETTER PROMISES A promise is an object that represents a potential future value. More resources. Title: ArcGIS API for

LEGEND WIDGET CARD STYLEA responsive style that renders the legend with a landscape (horizontal) layout in large views, and in a more compact card layout in small views.

Page 25: ArcGIS API for JavaScript: What's New - Esri€¦ · MAKING BETTER PROMISES A promise is an object that represents a potential future value. More resources. Title: ArcGIS API for

POPUP WITH DOM NODEPopulate the content of a Popup using a

function that returns a DOM node.

Page 26: ArcGIS API for JavaScript: What's New - Esri€¦ · MAKING BETTER PROMISES A promise is an object that represents a potential future value. More resources. Title: ArcGIS API for

Better underground, 3D mobile, and more

3D: expanding the reach

Page 27: ArcGIS API for JavaScript: What's New - Esri€¦ · MAKING BETTER PROMISES A promise is an object that represents a potential future value. More resources. Title: ArcGIS API for

MOBILE SUPPORT IN 3D

Officially supported devices:

• iOS — iPhone 8, iPad Pro (Safari browser)

• Android — Samsung S8, Samsung Tab S3

(Chrome browser)

http://doc.arcgis.com/en/arcgis-online/reference/best-practices-scene-performance.htm

Page 28: ArcGIS API for JavaScript: What's New - Esri€¦ · MAKING BETTER PROMISES A promise is an object that represents a potential future value. More resources. Title: ArcGIS API for

MOBILE SUPPORT IN 3DOfficially supported devices:

• iOS — iPhone 8, iPad Pro (Safari browser)

• Android — Samsung S8, Samsung Tab S3

(Chrome browser)

http://doc.arcgis.com/en/arcgis-online/reference/best-practices-scene-performance.htm

Page 29: ArcGIS API for JavaScript: What's New - Esri€¦ · MAKING BETTER PROMISES A promise is an object that represents a potential future value. More resources. Title: ArcGIS API for

INTERACT WITH MORE FEATURES• Point feature layers

• Dynamic loading & display

• Point scene layers

Page 30: ArcGIS API for JavaScript: What's New - Esri€¦ · MAKING BETTER PROMISES A promise is an object that represents a potential future value. More resources. Title: ArcGIS API for

EDGE RENDERING• For 3D Object SceneLayers (i.e.

buildings)

• “Sketch” and solid styles

Page 31: ArcGIS API for JavaScript: What's New - Esri€¦ · MAKING BETTER PROMISES A promise is an object that represents a potential future value. More resources. Title: ArcGIS API for

UNDERGROUND NAVIGATION

• Now global scenes

• Ground partial transparency

• Control the ground color (great when not using a basemap)

Page 32: ArcGIS API for JavaScript: What's New - Esri€¦ · MAKING BETTER PROMISES A promise is an object that represents a potential future value. More resources. Title: ArcGIS API for

CUSTOM BACKGROUND COLOR Transparent or set to a custom color

Page 33: ArcGIS API for JavaScript: What's New - Esri€¦ · MAKING BETTER PROMISES A promise is an object that represents a potential future value. More resources. Title: ArcGIS API for

npm, webpacks, cli, promises

API Improvements

Page 35: ArcGIS API for JavaScript: What's New - Esri€¦ · MAKING BETTER PROMISES A promise is an object that represents a potential future value. More resources. Title: ArcGIS API for

USING NPM FOR CUSTOM BUILDSUse the npm package of the ArcGIS API

for JavaScript if you wanted to create

local builds of your application.

Page 36: ArcGIS API for JavaScript: What's New - Esri€¦ · MAKING BETTER PROMISES A promise is an object that represents a potential future value. More resources. Title: ArcGIS API for

USING WEBPACK TO BUNDLE YOUR ASSETSUse webpack to process your code and

bundle it up (into one or more files) to be

dynamically loaded at runtime.

Page 40: ArcGIS API for JavaScript: What's New - Esri€¦ · MAKING BETTER PROMISES A promise is an object that represents a potential future value. More resources. Title: ArcGIS API for