arcgis api for javascript: what's new - esri€¦ · making better promises a promise is an...
TRANSCRIPT
![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](https://reader030.vdocuments.us/reader030/viewer/2022013022/5f488e116659485aa2086444/html5/thumbnails/1.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022013022/5f488e116659485aa2086444/html5/thumbnails/2.jpg)
![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](https://reader030.vdocuments.us/reader030/viewer/2022013022/5f488e116659485aa2086444/html5/thumbnails/3.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022013022/5f488e116659485aa2086444/html5/thumbnails/4.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022013022/5f488e116659485aa2086444/html5/thumbnails/5.jpg)
4.8 SAMPLESSearch for “4.8” or go under “Latest Samples”
12+ new samples
![Page 6: 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](https://reader030.vdocuments.us/reader030/viewer/2022013022/5f488e116659485aa2086444/html5/thumbnails/6.jpg)
SDK IMPROVEMENTSGuide pages, Shortcuts, Quick Links,
Sample search and tags
![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](https://reader030.vdocuments.us/reader030/viewer/2022013022/5f488e116659485aa2086444/html5/thumbnails/7.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022013022/5f488e116659485aa2086444/html5/thumbnails/8.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022013022/5f488e116659485aa2086444/html5/thumbnails/9.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022013022/5f488e116659485aa2086444/html5/thumbnails/10.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022013022/5f488e116659485aa2086444/html5/thumbnails/11.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022013022/5f488e116659485aa2086444/html5/thumbnails/12.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022013022/5f488e116659485aa2086444/html5/thumbnails/13.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022013022/5f488e116659485aa2086444/html5/thumbnails/14.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022013022/5f488e116659485aa2086444/html5/thumbnails/15.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022013022/5f488e116659485aa2086444/html5/thumbnails/16.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022013022/5f488e116659485aa2086444/html5/thumbnails/17.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022013022/5f488e116659485aa2086444/html5/thumbnails/18.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022013022/5f488e116659485aa2086444/html5/thumbnails/19.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022013022/5f488e116659485aa2086444/html5/thumbnails/20.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022013022/5f488e116659485aa2086444/html5/thumbnails/21.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022013022/5f488e116659485aa2086444/html5/thumbnails/22.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022013022/5f488e116659485aa2086444/html5/thumbnails/23.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022013022/5f488e116659485aa2086444/html5/thumbnails/24.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022013022/5f488e116659485aa2086444/html5/thumbnails/25.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022013022/5f488e116659485aa2086444/html5/thumbnails/26.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022013022/5f488e116659485aa2086444/html5/thumbnails/27.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022013022/5f488e116659485aa2086444/html5/thumbnails/28.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022013022/5f488e116659485aa2086444/html5/thumbnails/29.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022013022/5f488e116659485aa2086444/html5/thumbnails/30.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022013022/5f488e116659485aa2086444/html5/thumbnails/31.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022013022/5f488e116659485aa2086444/html5/thumbnails/32.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022013022/5f488e116659485aa2086444/html5/thumbnails/33.jpg)
npm, webpacks, cli, promises
API Improvements
![Page 34: 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](https://reader030.vdocuments.us/reader030/viewer/2022013022/5f488e116659485aa2086444/html5/thumbnails/34.jpg)
CUSTOM BUILDS AND DEV TOOLS npm, webpack, cli
![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](https://reader030.vdocuments.us/reader030/viewer/2022013022/5f488e116659485aa2086444/html5/thumbnails/35.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022013022/5f488e116659485aa2086444/html5/thumbnails/36.jpg)
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 37: 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](https://reader030.vdocuments.us/reader030/viewer/2022013022/5f488e116659485aa2086444/html5/thumbnails/37.jpg)
ADD POWER WITH THE ARCGIS CLIScaffold new applications, custom widgets,
and include unit testing, without having to
click a button.
![Page 38: 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](https://reader030.vdocuments.us/reader030/viewer/2022013022/5f488e116659485aa2086444/html5/thumbnails/38.jpg)
MAKING BETTER PROMISESA promise is an object that represents a
potential future value.
![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](https://reader030.vdocuments.us/reader030/viewer/2022013022/5f488e116659485aa2086444/html5/thumbnails/40.jpg)