Post on 04-Jul-2020
transcript
ArcGIS API for JavaScript:An Introduction
Andy Gup, @agupArcGIS API for JavaScript team
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
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)
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!
What’s under the hood
• AMD module pattern• 2D demo
Maps and Views
• Maps manage references to basemaps and layers.• Views display layers, handle user interaction, popups and widgets
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/
Data, data, data
The API works with many different types of data:
https://developers.arcgis.com/javascript/latest/api-reference/index.html#layers
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
Data & layer demo
USGS Earthquake CSVCSVLayer for display
https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=layers-csv
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
Add a renderer to the FeatureLayer demo
• https://jsbin.com/kobiyip/edit?html,output
Add a visual variables to the FeatureLayer demo
• https://jsbin.com/vapayuq/edit?html,output
Add a popup to a FeatureLayer
• https://jsbin.com/dowavux/edit?html,output
Add CSV to Webmaphttps://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.csv
Add Webmap to custom JS map app
• https://jsbin.com/gubopen/edit?html,output
And now for some more cool stuff
Sketch
• Demo
Edit
• Demo
Arcade
• What is Arcade?• Popups, labels, renderers
Demo 1 – NYC taxisDemo 2 – SDK samples
Widgets
• Measurement in 3D
View UI controls
• Demo• Mapview.ui
Responsive Popups
• Demo• Mapview.breakpoints
Client-side Geometry Engine
• Demo
Some developer things about Web GIS
ArcGIS REST API
https://developers.arcgis.com/ > Documentation
Mapping AppArcGIS Online/
ArcGIS EnterpriseArcGIS REST API
Services:• Map tiles• Features• Imagery• And, more!
REST API Demo
• Demo feature service debugging
• What is .pbf?? ProtocalBuffer Binary Format• What is Brotli? Better compression that .zip
Development Environments (IDEs)
A partial list of the most popular:• Visual Studio Code (free)• Visual Studio• WebStorm • IntelliJ
Bonus slides!
Be aware of app performance“Responsive” also means User Interface performanceUsers will notice any operation longer than . . .
16ms** 60Hz or 60 FPS
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
Lazy load
• Avoid huge require() statements…wait till you need it
Lazy load layers
• Don’t load’em until you need’em!
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”