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)

Sign up for a free developer accounthttps://developers.arcgis.com/

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”

Andy GupTechnical Product Manager,ArcGIS API for JavaScriptagup@esri.com@agup