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
