arcgis api for javascript: an introduction...• 2d and true 3d (above ground, below ground, fully...
TRANSCRIPT
![Page 1: ArcGIS API for JavaScript: An Introduction...• 2D and true 3D (above ground, below ground, fully interactive) • Many different layers • Out-of-the-box widgets • Client-side](https://reader031.vdocuments.mx/reader031/viewer/2022013021/5f1e5e9c37e67b32c97c4e5f/html5/thumbnails/1.jpg)
ArcGIS API for JavaScript:An Introduction
Andy Gup, @agupArcGIS API for JavaScript team
![Page 2: ArcGIS API for JavaScript: An Introduction...• 2D and true 3D (above ground, below ground, fully interactive) • Many different layers • Out-of-the-box widgets • Client-side](https://reader031.vdocuments.mx/reader031/viewer/2022013021/5f1e5e9c37e67b32c97c4e5f/html5/thumbnails/2.jpg)
ArcGIS API for JavaScript: COOL DEMOS!
• Animate large number of features• Interactive 3D• 3D underground• Client-side data projection and fast query• Color visualization driven by statistics• 3D Globe animation• 3D Fly Circle
![Page 3: ArcGIS API for JavaScript: An Introduction...• 2D and true 3D (above ground, below ground, fully interactive) • Many different layers • Out-of-the-box widgets • Client-side](https://reader031.vdocuments.mx/reader031/viewer/2022013021/5f1e5e9c37e67b32c97c4e5f/html5/thumbnails/3.jpg)
Resources for getting started
Online Tutorials => https://developers.arcgis.com/labs/Over 200 samples => https://developers.arcgis.com/javascriptGeoDev Webinars => https://www.esri.com/en-us/landing-page/product/2018/geodev-webinar-series
GeoNet – ArcGIS API for JavaScript2018 DevSummit Tech Sessions (2019 will be available soon)2019 DevSummit Plenary (Youtube)
![Page 5: ArcGIS API for JavaScript: An Introduction...• 2D and true 3D (above ground, below ground, fully interactive) • Many different layers • Out-of-the-box widgets • Client-side](https://reader031.vdocuments.mx/reader031/viewer/2022013021/5f1e5e9c37e67b32c97c4e5f/html5/thumbnails/5.jpg)
Capabilities
https://developers.arcgis.com/javascript/latest/api-reference/
• 2D and true 3D (above ground, below ground, fully interactive)• Many different layers• Out-of-the-box widgets• Client-side geometry engine• Client-side projection engine• Tasks• And so much more!
![Page 6: ArcGIS API for JavaScript: An Introduction...• 2D and true 3D (above ground, below ground, fully interactive) • Many different layers • Out-of-the-box widgets • Client-side](https://reader031.vdocuments.mx/reader031/viewer/2022013021/5f1e5e9c37e67b32c97c4e5f/html5/thumbnails/6.jpg)
What’s under the hood
• AMD module pattern• 2D demo
![Page 7: ArcGIS API for JavaScript: An Introduction...• 2D and true 3D (above ground, below ground, fully interactive) • Many different layers • Out-of-the-box widgets • Client-side](https://reader031.vdocuments.mx/reader031/viewer/2022013021/5f1e5e9c37e67b32c97c4e5f/html5/thumbnails/7.jpg)
Maps and Views
• Maps manage references to basemaps and layers.• Views display layers, handle user interaction, popups and widgets
![Page 8: ArcGIS API for JavaScript: An Introduction...• 2D and true 3D (above ground, below ground, fully interactive) • Many different layers • Out-of-the-box widgets • Client-side](https://reader031.vdocuments.mx/reader031/viewer/2022013021/5f1e5e9c37e67b32c97c4e5f/html5/thumbnails/8.jpg)
How do I get the library?
• Content Delivery Network (CDN)
• Or, locally custom builds hosted (npm or webpack)
https://developers.arcgis.com/javascript/latest/guide/using-webpack/
![Page 9: ArcGIS API for JavaScript: An Introduction...• 2D and true 3D (above ground, below ground, fully interactive) • Many different layers • Out-of-the-box widgets • Client-side](https://reader031.vdocuments.mx/reader031/viewer/2022013021/5f1e5e9c37e67b32c97c4e5f/html5/thumbnails/9.jpg)
Data, data, data
The API works with many different types of data:
https://developers.arcgis.com/javascript/latest/api-reference/index.html#layers
![Page 10: ArcGIS API for JavaScript: An Introduction...• 2D and true 3D (above ground, below ground, fully interactive) • Many different layers • Out-of-the-box widgets • Client-side](https://reader031.vdocuments.mx/reader031/viewer/2022013021/5f1e5e9c37e67b32c97c4e5f/html5/thumbnails/10.jpg)
What the what?
Data – 2D, 3D, spatial or non-spatial
Service – makes data accessible via HTTP
Layer – displays a collection of spatial data in vector or raster format
![Page 11: ArcGIS API for JavaScript: An Introduction...• 2D and true 3D (above ground, below ground, fully interactive) • Many different layers • Out-of-the-box widgets • Client-side](https://reader031.vdocuments.mx/reader031/viewer/2022013021/5f1e5e9c37e67b32c97c4e5f/html5/thumbnails/11.jpg)
Data & layer demo
USGS Earthquake CSVCSVLayer for display
https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=layers-csv
![Page 12: ArcGIS API for JavaScript: An Introduction...• 2D and true 3D (above ground, below ground, fully interactive) • Many different layers • Out-of-the-box widgets • Client-side](https://reader031.vdocuments.mx/reader031/viewer/2022013021/5f1e5e9c37e67b32c97c4e5f/html5/thumbnails/12.jpg)
Data + Service + FeatureLayer Demo
Take the Earthquake CSV and convert to hosted FeatureLayerExample: https://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/2_5_week/FeatureServer
Example Demo
![Page 13: ArcGIS API for JavaScript: An Introduction...• 2D and true 3D (above ground, below ground, fully interactive) • Many different layers • Out-of-the-box widgets • Client-side](https://reader031.vdocuments.mx/reader031/viewer/2022013021/5f1e5e9c37e67b32c97c4e5f/html5/thumbnails/13.jpg)
Add a renderer to the FeatureLayer demo
• https://jsbin.com/kobiyip/edit?html,output
![Page 14: ArcGIS API for JavaScript: An Introduction...• 2D and true 3D (above ground, below ground, fully interactive) • Many different layers • Out-of-the-box widgets • Client-side](https://reader031.vdocuments.mx/reader031/viewer/2022013021/5f1e5e9c37e67b32c97c4e5f/html5/thumbnails/14.jpg)
Add a visual variables to the FeatureLayer demo
• https://jsbin.com/vapayuq/edit?html,output
![Page 15: ArcGIS API for JavaScript: An Introduction...• 2D and true 3D (above ground, below ground, fully interactive) • Many different layers • Out-of-the-box widgets • Client-side](https://reader031.vdocuments.mx/reader031/viewer/2022013021/5f1e5e9c37e67b32c97c4e5f/html5/thumbnails/15.jpg)
Add a popup to a FeatureLayer
• https://jsbin.com/dowavux/edit?html,output
![Page 16: ArcGIS API for JavaScript: An Introduction...• 2D and true 3D (above ground, below ground, fully interactive) • Many different layers • Out-of-the-box widgets • Client-side](https://reader031.vdocuments.mx/reader031/viewer/2022013021/5f1e5e9c37e67b32c97c4e5f/html5/thumbnails/16.jpg)
Add CSV to Webmaphttps://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.csv
![Page 17: ArcGIS API for JavaScript: An Introduction...• 2D and true 3D (above ground, below ground, fully interactive) • Many different layers • Out-of-the-box widgets • Client-side](https://reader031.vdocuments.mx/reader031/viewer/2022013021/5f1e5e9c37e67b32c97c4e5f/html5/thumbnails/17.jpg)
Add Webmap to custom JS map app
• https://jsbin.com/gubopen/edit?html,output
![Page 18: ArcGIS API for JavaScript: An Introduction...• 2D and true 3D (above ground, below ground, fully interactive) • Many different layers • Out-of-the-box widgets • Client-side](https://reader031.vdocuments.mx/reader031/viewer/2022013021/5f1e5e9c37e67b32c97c4e5f/html5/thumbnails/18.jpg)
And now for some more cool stuff
![Page 19: ArcGIS API for JavaScript: An Introduction...• 2D and true 3D (above ground, below ground, fully interactive) • Many different layers • Out-of-the-box widgets • Client-side](https://reader031.vdocuments.mx/reader031/viewer/2022013021/5f1e5e9c37e67b32c97c4e5f/html5/thumbnails/19.jpg)
Sketch
• Demo
![Page 20: ArcGIS API for JavaScript: An Introduction...• 2D and true 3D (above ground, below ground, fully interactive) • Many different layers • Out-of-the-box widgets • Client-side](https://reader031.vdocuments.mx/reader031/viewer/2022013021/5f1e5e9c37e67b32c97c4e5f/html5/thumbnails/20.jpg)
Edit
• Demo
![Page 21: ArcGIS API for JavaScript: An Introduction...• 2D and true 3D (above ground, below ground, fully interactive) • Many different layers • Out-of-the-box widgets • Client-side](https://reader031.vdocuments.mx/reader031/viewer/2022013021/5f1e5e9c37e67b32c97c4e5f/html5/thumbnails/21.jpg)
Arcade
• What is Arcade?• Popups, labels, renderers
Demo 1 – NYC taxisDemo 2 – SDK samples
![Page 22: ArcGIS API for JavaScript: An Introduction...• 2D and true 3D (above ground, below ground, fully interactive) • Many different layers • Out-of-the-box widgets • Client-side](https://reader031.vdocuments.mx/reader031/viewer/2022013021/5f1e5e9c37e67b32c97c4e5f/html5/thumbnails/22.jpg)
Widgets
• Measurement in 3D
![Page 23: ArcGIS API for JavaScript: An Introduction...• 2D and true 3D (above ground, below ground, fully interactive) • Many different layers • Out-of-the-box widgets • Client-side](https://reader031.vdocuments.mx/reader031/viewer/2022013021/5f1e5e9c37e67b32c97c4e5f/html5/thumbnails/23.jpg)
View UI controls
• Demo• Mapview.ui
![Page 24: ArcGIS API for JavaScript: An Introduction...• 2D and true 3D (above ground, below ground, fully interactive) • Many different layers • Out-of-the-box widgets • Client-side](https://reader031.vdocuments.mx/reader031/viewer/2022013021/5f1e5e9c37e67b32c97c4e5f/html5/thumbnails/24.jpg)
Responsive Popups
• Demo• Mapview.breakpoints
![Page 25: ArcGIS API for JavaScript: An Introduction...• 2D and true 3D (above ground, below ground, fully interactive) • Many different layers • Out-of-the-box widgets • Client-side](https://reader031.vdocuments.mx/reader031/viewer/2022013021/5f1e5e9c37e67b32c97c4e5f/html5/thumbnails/25.jpg)
Client-side Geometry Engine
• Demo
![Page 26: ArcGIS API for JavaScript: An Introduction...• 2D and true 3D (above ground, below ground, fully interactive) • Many different layers • Out-of-the-box widgets • Client-side](https://reader031.vdocuments.mx/reader031/viewer/2022013021/5f1e5e9c37e67b32c97c4e5f/html5/thumbnails/26.jpg)
Some developer things about Web GIS
![Page 27: ArcGIS API for JavaScript: An Introduction...• 2D and true 3D (above ground, below ground, fully interactive) • Many different layers • Out-of-the-box widgets • Client-side](https://reader031.vdocuments.mx/reader031/viewer/2022013021/5f1e5e9c37e67b32c97c4e5f/html5/thumbnails/27.jpg)
ArcGIS REST API
https://developers.arcgis.com/ > Documentation
Mapping AppArcGIS Online/
ArcGIS EnterpriseArcGIS REST API
Services:• Map tiles• Features• Imagery• And, more!
![Page 28: ArcGIS API for JavaScript: An Introduction...• 2D and true 3D (above ground, below ground, fully interactive) • Many different layers • Out-of-the-box widgets • Client-side](https://reader031.vdocuments.mx/reader031/viewer/2022013021/5f1e5e9c37e67b32c97c4e5f/html5/thumbnails/28.jpg)
REST API Demo
• Demo feature service debugging
• What is .pbf?? ProtocalBuffer Binary Format• What is Brotli? Better compression that .zip
![Page 29: ArcGIS API for JavaScript: An Introduction...• 2D and true 3D (above ground, below ground, fully interactive) • Many different layers • Out-of-the-box widgets • Client-side](https://reader031.vdocuments.mx/reader031/viewer/2022013021/5f1e5e9c37e67b32c97c4e5f/html5/thumbnails/29.jpg)
Development Environments (IDEs)
A partial list of the most popular:• Visual Studio Code (free)• Visual Studio• WebStorm • IntelliJ
![Page 30: ArcGIS API for JavaScript: An Introduction...• 2D and true 3D (above ground, below ground, fully interactive) • Many different layers • Out-of-the-box widgets • Client-side](https://reader031.vdocuments.mx/reader031/viewer/2022013021/5f1e5e9c37e67b32c97c4e5f/html5/thumbnails/30.jpg)
Bonus slides!
![Page 31: ArcGIS API for JavaScript: An Introduction...• 2D and true 3D (above ground, below ground, fully interactive) • Many different layers • Out-of-the-box widgets • Client-side](https://reader031.vdocuments.mx/reader031/viewer/2022013021/5f1e5e9c37e67b32c97c4e5f/html5/thumbnails/31.jpg)
Be aware of app performance“Responsive” also means User Interface performanceUsers will notice any operation longer than . . .
16ms** 60Hz or 60 FPS
![Page 32: ArcGIS API for JavaScript: An Introduction...• 2D and true 3D (above ground, below ground, fully interactive) • Many different layers • Out-of-the-box widgets • Client-side](https://reader031.vdocuments.mx/reader031/viewer/2022013021/5f1e5e9c37e67b32c97c4e5f/html5/thumbnails/32.jpg)
Improve app performance – be kind!
Test using real scenarios – test on phone over cellular not WiFi
Lazy Load
Use fewer map layers
Simplify rendering
Use Web workers
![Page 33: ArcGIS API for JavaScript: An Introduction...• 2D and true 3D (above ground, below ground, fully interactive) • Many different layers • Out-of-the-box widgets • Client-side](https://reader031.vdocuments.mx/reader031/viewer/2022013021/5f1e5e9c37e67b32c97c4e5f/html5/thumbnails/33.jpg)
Lazy load
• Avoid huge require() statements…wait till you need it
![Page 34: ArcGIS API for JavaScript: An Introduction...• 2D and true 3D (above ground, below ground, fully interactive) • Many different layers • Out-of-the-box widgets • Client-side](https://reader031.vdocuments.mx/reader031/viewer/2022013021/5f1e5e9c37e67b32c97c4e5f/html5/thumbnails/34.jpg)
Lazy load layers
• Don’t load’em until you need’em!
![Page 35: ArcGIS API for JavaScript: An Introduction...• 2D and true 3D (above ground, below ground, fully interactive) • Many different layers • Out-of-the-box widgets • Client-side](https://reader031.vdocuments.mx/reader031/viewer/2022013021/5f1e5e9c37e67b32c97c4e5f/html5/thumbnails/35.jpg)
Please Take Our Survey on the App
Download the Esri Events app and find your event
Select the session you attended
Scroll down to find the feedback section
Complete answersand select “Submit”
![Page 37: ArcGIS API for JavaScript: An Introduction...• 2D and true 3D (above ground, below ground, fully interactive) • Many different layers • Out-of-the-box widgets • Client-side](https://reader031.vdocuments.mx/reader031/viewer/2022013021/5f1e5e9c37e67b32c97c4e5f/html5/thumbnails/37.jpg)