ArcGIS API for JavaScript Programming PatternsArcGIS API for JavaScript Programming Patterns

and API Fundamentalsand API FundamentalsKristian Ekenes ( )@kekenes

1

What you get with the JS APIWhat you get with the JS APISimpli�ed and consistent web mapping APIWraps and consumes ArcGIS Services, but...You can use other data types as well

GeoJSON, CSV, OGC, Write apps in ES6 or TypeScriptModern browser support (IE11+)

Feature Collections

Supported in 30+ locales

2

What you get with the JS APIWhat you get with the JS APITechnical supportGeoNet CommunityExcellent documentation and samples

Links from the sandboxBlogs, videos, and other resources

3

FundamentalsFundamentals...and some patterns

4

Map and ViewMap and View

5

Map and ViewMap and Viewconstconst map map == newnew MapMap(({{ basemap basemap:: "topo""topo"}}));; // 2d// 2dconstconst mView mView == newnew MapViewMapView(({{ map map:: map map,, container container:: "viewDiv""viewDiv"}}));;//3d//3dconstconst sView sView == newnew SceneViewSceneView(({{ map map:: map map,,

6

Basemaps and GroundBasemaps and GroundConvenience Strings

constconst map map == newnew MapMap(({{ /*/* streets, satellite, hybrid, terrain, topo, gray, streets, satellite, hybrid, terrain, topo, gray, dark-gray, oceans, national-geographic, osm, dark-gray, oceans, national-geographic, osm, dark-gray-vector, gray-vector, streets-vector, topo-vector, dark-gray-vector, gray-vector, streets-vector, topo-vector, streets-night-vector, streets-relief-vector, streets-navigation-vector streets-night-vector, streets-relief-vector, streets-navigation-vector */ */ basemap basemap:: "streets""streets" /*/* world-elevation world-elevation */ */

7

Layer and LayerViewLayer and LayerView20+ layer types!

FeatureLayerMapImageLayerCSVLayerGeoJSONLayerWMSLayer, WMTSLayerTileLayer...

8

FeatureLayerFeatureLayerconstconst layer layer == newnew FeatureLayerFeatureLayer(({{ url url:: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Enriched_United_Sta"https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Enriched_United_Sta}}));; constconst map map == newnew MapMap(({{ basemap basemap:: "topo""topo",, layers layers:: [[ layer layer ]]}}));; constconst mView mView == newnew MapViewMapView(({{ map map:: map map,, container container:: "viewDiv""viewDiv"

Example

9

Popup TemplatesPopup Templateslayerlayer..popupTemplate popupTemplate == {{ title title:: "{NAME} County""{NAME} County",, content content:: "{POP2020} people live here.""{POP2020} people live here.",, fieldInfos fieldInfos:: [[{{ fieldName fieldName:: "POP2020""POP2020",, format format:: {{ places places:: 00,, digitSeparator digitSeparator:: truetrue }} }}]]}}

10

Popup TemplatesPopup Templates

Promises

De�ne �elds, charts, custom html contentUsing a function

Arcade

11

RenderersRenderers

Go to the Visualization with the ArcGIS API for JavaScript session later thisweek!

layerlayer..renderer renderer == {{ type type:: "simple""simple",, visualVariables visualVariables:: [[{{ type type:: "size""size",, field field:: "POP2020""POP2020",, minSize minSize:: 66,, maxSize maxSize:: 5050,, minDataValue minDataValue:: 1000010000,, maxDataValue maxDataValue:: 10000001000000 }}]]}};;

12

LayerViewLayerViewRenders the LayerProvides access to features on the clientWhen is it done?

13

LayerViewLayerView

LayerView - ReadyA PEN BY odoe

Run Pen

14

LayerView vs. Layer (Query)LayerView vs. Layer (Query)The same methods execute queries client-side (layer view) and server side

(layer)

**LayerLayer//LayerViewLayerView..queryFeaturesqueryFeatures(())**LayerLayer//LayerViewLayerView..queryFeatureCountqueryFeatureCount(())**LayerLayer//LayerViewLayerView..queryExtentqueryExtent(())**LayerLayer//LayerViewLayerView..queryObjectIdsqueryObjectIds(())

15

LayerView vs. Layer (Query)LayerView vs. Layer (Query)Same methods execute queries client-side (layer view) and server side (layer)

constconst layer layer == newnew FeatureLayerFeatureLayer(({{ url url:: "https://...""https://..." }}));;constconst view view == newnew MapViewMapView(({{ map map:: newnew MapMap(({{ layers layers:: [[ layer layer ]] }}))}}));; constconst query query == layer layer..createQuerycreateQuery(());; queryquery..where where == "Population > 40000""Population > 40000";; // layer.queryFeatures queries the server// layer.queryFeatures queries the serverconstconst response response == awaitawait layer layer..queryFeaturesqueryFeatures((queryquery));;//

16

LayerView vs. Layer (Query)LayerView vs. Layer (Query)Same methods execute queries client-side (layer view) and server side (layer)

constconst layer layer == newnew FeatureLayerFeatureLayer(({{ url url:: "https://...""https://..." }}));;constconst view view == newnew MapViewMapView(({{ map map:: newnew MapMap(({{ layers layers:: [[ layer layer ]] }}))}}));; constconst query query == layer layer..createQuerycreateQuery(());; queryquery..where where == "Population > 40000""Population > 40000";; // layerView.queryFeatures queries the server// layerView.queryFeatures queries the serverconstconst layerView layerView == awaitawait view view..whenLayerViewwhenLayerView((layerlayer)) asas FeatureLayerView FeatureLayerView;;

17

createQuerycreateQueryWhen you can do layer.createQuery()

query object will already have the layers �lters and layer de�nitionsmore consistent

Use new Query() when you don't want prede�ned �lters to be applied

18

createQuerycreateQuery

createQueryA PEN BY odoe

Run Pen

19

Basemaps and GroundBasemaps and Groundconstconst map map == newnew MapMap(({{ basemap basemap:: {{ // Layers drawn at the bottom// Layers drawn at the bottom baseLayers baseLayers:: [[ newnew TileLayerTileLayer(({{ url url:: baselayer baselayer }})) ]],, // Layers drawn on top// Layers drawn on top referenceLayers referenceLayers:: [[ newnew TileLayerTileLayer(({{ url url:: refUrl refUrl }})) ]],, }},, ground ground:: {{

20

Basemap and GroundBasemap and Ground

VT BasemapsA PEN BY odoe

Run Pen

21

CollectionsCollections

CollectionA PEN BY odoe

Run Pen

esri/core/Collection

22

Working with propertiesWorking with propertiesGetting and setting

layerlayer..opacity opacity == 0.50.5;; layerlayer..title title == "My test layer""My test layer";; // setting multiple values// setting multiple values layerlayer..setset(({{ opacity opacity:: 0.50.5,, title title:: "My test layer""My test layer"}}));; // accessing the value of a deep property// accessing the value of a deep propertyconsoleconsole..loglog((viewview..mapmap..basemapbasemap..titletitle));; viewview..setset(("map.basemap.title""map.basemap.title",, "new title""new title"));;

23

Working with propertiesWorking with propertiesWatching (no events!)

mapViewmapView..watchwatch(("scale""scale",, ((newValuenewValue,, oldValue oldValue,, property property,, target target)) =>=> {{ consoleconsole..loglog((`scale changed: `scale changed: ${${newValuenewValue}}`̀));;}}));; mapViewmapView..watchwatch(("map.basemap.title""map.basemap.title",, ((newValuenewValue,, oldValue oldValue,, property property,, target target)) =>=> {{ consoleconsole..loglog((`new basemap title: `new basemap title: ${${newValuenewValue}}`̀));;}}));; mapViewmapView..watchwatch(("ready, stationary""ready, stationary",, ((newValuenewValue,, oldValue oldValue,, property property,, target target)) =>=> {{ consoleconsole..loglog((`property `property ${${propertyproperty}}: : ${${newValuenewValue}}`̀));;

watchUtils

24

Working with propertiesWorking with propertiesAutocasting and single constructor

// 4.x// 4.x layer layer..renderer renderer == {{ type type:: "simple""simple",, symbol symbol:: {{ type type:: "simple-marker""simple-marker",, style style:: "square""square",, color color:: "red""red",, size size:: 1010,, outline outline:: {{ color color:: "rgba(255, 255, 255, 0.5)""rgba(255, 255, 255, 0.5)" width width:: 44 }}

25

PromisesPromises

26

PromisesPromisesAll asynchronous methods return a promiseNo more The basic pattern looks like this:

events

layerlayer..queryFeaturesqueryFeatures((queryquery))..thenthen((handleResulthandleResult))..catchcatch((handleErrorhandleError));;

27

Promises with async/awaitPromises with async/awaitconstconst doQuerydoQuery == asyncasync ((queryquery)) =>=> {{ constconst results results == awaitawait layer layer..queryFeaturesqueryFeatures((queryquery));; constconst transformedResults transformedResults == results results..mapmap((transformDatatransformData));; returnreturn transformedResults transformedResults;;}}

28

PromisesPromisesLoad resourcesAsychronously initialized Layer, WebMap, WebScene, View

constconst map map == newnew MapMap(({{......}})) constconst view view == newnew SceneViewSceneView(({{ map map:: map map,, //...//...}}));; viewview..whenwhen(())..thenthen(((()) =>=> {{ // the view is ready to go// the view is ready to go}}));;

29

PromisesPromisesviewview..whenwhen(())..thenthen(((()) =>=> {{ returnreturn view view..whenLayerViewwhenLayerView((mapmap..findLayerByIdfindLayerById(("awesomeLayer""awesomeLayer"))));;}}))..thenthen((layerViewlayerView =>=> {{ returnreturn watchUtils watchUtils..whenFalseOncewhenFalseOnce((layerViewlayerView,, "updating""updating"));;}}))..thenthen((resultresult =>=> {{ constconst layerView layerView == result result..targettarget;; returnreturn layerView layerView..queryFeaturesqueryFeatures(());;}}))..thenthen((doSomethingWithFeaturesdoSomethingWithFeatures))..catchcatch((errorHandlererrorHandler));;

API sample

30

async/awaitasync/awaitconstconst initinit == asyncasync ((doSomethingWithFeaturesdoSomethingWithFeatures)) =>=> {{ awaitawait view view..whenwhen(());; constconst layerView layerView == awaitawait view view..whenLayerViewwhenLayerView((mapmap..findLayerByIdfindLayerById(("awesomeLayer""awesomeLayer"))));; constconst {{ target target asas layerView layerView }} == awaitawait watchUtils watchUtils..whenFalseOncewhenFalseOnce((layerViewlayerView,, "updating""updating"));; constconst features features == awaitawait layerView layerView..queryFeaturesqueryFeatures(());; doSomethingWithFeaturesdoSomethingWithFeatures((featuresfeatures));;}};; trytry {{ initinit(());;}}catchcatch((errorerror)) {{

31

Zoom or ScaleZoom or Scale

Zoom = LOD (Level of Detail)Not all LODs are created equal

constconst view view == newnew MapViewMapView(({{ container container:: "viewDiv""viewDiv",, map map:: map map,, center center:: [[--116.5116.5,, 33.8033.80]],, zoom zoom:: 1414 // what does that really mean?// what does that really mean?}}));;

32

Zoom is not ScaleZoom is not Scale

Scale is portableScale has meaningWe still snap to closest LOD/zoom,

constconst view view == newnew MapViewMapView(({{ container container:: "viewDiv""viewDiv",, map map:: map map,, center center:: [[--116.5116.5,, 33.8033.80]],, scale scale:: 5000050000 // I know what that means!// I know what that means!}}));;

unless you disable it

33

goTo() with ViewgoTo() with ViewSets the view to a given target.

Navigate to a geometry/feature/locationAPI Sample

34

PatternsPatternsThings you can do to reduce the amount of code you write

35

How the ArcGIS JS API helps youHow the ArcGIS JS API helps youOpen source app starters and templates

36

WebMap is still a MapWebMap is still a Map

Still acts like a regular MapHas some BIG advantages

constconst map map == newnew WebMapWebMap(({{ basemap basemap:: {{ ...... }},, layers layers:: [[ ...... ]]}}));;

37

WebMap is still a MapWebMap is still a Map

Local bookmarksA PEN BY odoe

Run Pen

38

Widgets!Widgets!We'll look at a few widgets

39

Widgets!Widgets!We'll look at a few ~50 Widgets out of the box

widgets

39

Widgets!Widgets!We'll look at a few ~50 Widgets out of the boxWidgets help make great apps

widgets

39

Widgets!Widgets!We'll look at a few ~50 Widgets out of the boxWidgets help make great appsLess code for you to write

widgets

39

Widgets!Widgets!We'll look at a few ~50 Widgets out of the boxWidgets help make great appsLess code for you to writeDesigned with responsive apps in mind

widgets

39

Widgets - ExpandWidgets - Expand

IconsGroupMode

Clickable button to open container

40

Widgets - Use Portal ContentWidgets - Use Portal Content

Basemap GallerySearch

41

Widgets - ArchitectureWidgets - ArchitectureView + View Model

42

View ModelsView ModelsCustom ViewUse the view model

Additional Examples

43

Widgets - StylingWidgets - StylingAvailable Themes

Theme TestingA PEN BY odoe

Run Pen

44

Widgets - StylingWidgets - StylingCSS Extension languageSASSTheme Utility

45

46

47