ArcGIS API for JavaScript -...
Transcript of ArcGIS API for JavaScript -...
![Page 1: ArcGIS API for JavaScript - proceedings.esri.comproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · 2019 Esri Developer Summit Palm Springs -- Presentation,](https://reader030.fdocuments.in/reader030/viewer/2022011811/5e15f1aeeb994f3ff029d2fb/html5/thumbnails/1.jpg)
ArcGIS API for JavaScriptArcGIS API for JavaScriptProgramming Patterns and API FundamentalsProgramming Patterns and API Fundamentals
Kelly Hutchins | René Rubalcava
|
slides:
@kellyhutchins @odoenet
https://git.io/fhNcV
![Page 2: ArcGIS API for JavaScript - proceedings.esri.comproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · 2019 Esri Developer Summit Palm Springs -- Presentation,](https://reader030.fdocuments.in/reader030/viewer/2022011811/5e15f1aeeb994f3ff029d2fb/html5/thumbnails/2.jpg)
What do I get with the 4x JSAPI?What do I get with the 4x JSAPI?Simpli�ed and consistent APIWrite apps in ES6 or TypeScriptModern browser support (IE11+)Supported in 30+ locales
![Page 3: ArcGIS API for JavaScript - proceedings.esri.comproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · 2019 Esri Developer Summit Palm Springs -- Presentation,](https://reader030.fdocuments.in/reader030/viewer/2022011811/5e15f1aeeb994f3ff029d2fb/html5/thumbnails/3.jpg)
What are my options?What are my options?Needs?Resources?Time?Customizations?
![Page 4: ArcGIS API for JavaScript - proceedings.esri.comproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · 2019 Esri Developer Summit Palm Springs -- Presentation,](https://reader030.fdocuments.in/reader030/viewer/2022011811/5e15f1aeeb994f3ff029d2fb/html5/thumbnails/4.jpg)
Why start from scratch?Why start from scratch?App startersWidgets
![Page 6: ArcGIS API for JavaScript - proceedings.esri.comproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · 2019 Esri Developer Summit Palm Springs -- Presentation,](https://reader030.fdocuments.in/reader030/viewer/2022011811/5e15f1aeeb994f3ff029d2fb/html5/thumbnails/6.jpg)
Widgets!Widgets!We'll look at a few widgets
![Page 7: ArcGIS API for JavaScript - proceedings.esri.comproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · 2019 Esri Developer Summit Palm Springs -- Presentation,](https://reader030.fdocuments.in/reader030/viewer/2022011811/5e15f1aeeb994f3ff029d2fb/html5/thumbnails/7.jpg)
Widgets!Widgets!We'll look at a few ~30 Widgets out of the box
widgets
![Page 8: ArcGIS API for JavaScript - proceedings.esri.comproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · 2019 Esri Developer Summit Palm Springs -- Presentation,](https://reader030.fdocuments.in/reader030/viewer/2022011811/5e15f1aeeb994f3ff029d2fb/html5/thumbnails/8.jpg)
Widgets!Widgets!We'll look at a few ~30 Widgets out of the boxWidgets help make great apps
widgets
![Page 9: ArcGIS API for JavaScript - proceedings.esri.comproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · 2019 Esri Developer Summit Palm Springs -- Presentation,](https://reader030.fdocuments.in/reader030/viewer/2022011811/5e15f1aeeb994f3ff029d2fb/html5/thumbnails/9.jpg)
Widgets!Widgets!We'll look at a few ~30 Widgets out of the boxWidgets help make great appsLess code for you to write
widgets
![Page 10: ArcGIS API for JavaScript - proceedings.esri.comproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · 2019 Esri Developer Summit Palm Springs -- Presentation,](https://reader030.fdocuments.in/reader030/viewer/2022011811/5e15f1aeeb994f3ff029d2fb/html5/thumbnails/10.jpg)
Widgets!Widgets!We'll look at a few ~30 Widgets out of the boxWidgets help make great appsLess code for you to writeDesigned with responsive apps in mind
widgets
![Page 11: ArcGIS API for JavaScript - proceedings.esri.comproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · 2019 Esri Developer Summit Palm Springs -- Presentation,](https://reader030.fdocuments.in/reader030/viewer/2022011811/5e15f1aeeb994f3ff029d2fb/html5/thumbnails/11.jpg)
Widgets - ExpandWidgets - Expand
IconsGroupMode
Clickable button to open container
![Page 12: ArcGIS API for JavaScript - proceedings.esri.comproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · 2019 Esri Developer Summit Palm Springs -- Presentation,](https://reader030.fdocuments.in/reader030/viewer/2022011811/5e15f1aeeb994f3ff029d2fb/html5/thumbnails/12.jpg)
Widgets - Use Portal ContentWidgets - Use Portal Content
Basemap GallerySearch
![Page 13: ArcGIS API for JavaScript - proceedings.esri.comproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · 2019 Esri Developer Summit Palm Springs -- Presentation,](https://reader030.fdocuments.in/reader030/viewer/2022011811/5e15f1aeeb994f3ff029d2fb/html5/thumbnails/13.jpg)
Widgets - PopupWidgets - PopupMenu actionsDock
![Page 14: ArcGIS API for JavaScript - proceedings.esri.comproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · 2019 Esri Developer Summit Palm Springs -- Presentation,](https://reader030.fdocuments.in/reader030/viewer/2022011811/5e15f1aeeb994f3ff029d2fb/html5/thumbnails/14.jpg)
Widgets - Popup TemplateWidgets - Popup TemplateDe�ne �elds, charts, custom html content
PromisesArcade
Using a function
![Page 15: ArcGIS API for JavaScript - proceedings.esri.comproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · 2019 Esri Developer Summit Palm Springs -- Presentation,](https://reader030.fdocuments.in/reader030/viewer/2022011811/5e15f1aeeb994f3ff029d2fb/html5/thumbnails/15.jpg)
Widgets - Author popup in onlineWidgets - Author popup in online
Layer.fromPortalItemWeb Map or Web Scene
App Demo
![Page 16: ArcGIS API for JavaScript - proceedings.esri.comproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · 2019 Esri Developer Summit Palm Springs -- Presentation,](https://reader030.fdocuments.in/reader030/viewer/2022011811/5e15f1aeeb994f3ff029d2fb/html5/thumbnails/16.jpg)
Widgets - FeatureWidgets - FeatureDisplay popup template contentHover
![Page 17: ArcGIS API for JavaScript - proceedings.esri.comproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · 2019 Esri Developer Summit Palm Springs -- Presentation,](https://reader030.fdocuments.in/reader030/viewer/2022011811/5e15f1aeeb994f3ff029d2fb/html5/thumbnails/17.jpg)
Widgets - ArchitectureWidgets - ArchitectureView + View Model
![Page 18: ArcGIS API for JavaScript - proceedings.esri.comproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · 2019 Esri Developer Summit Palm Springs -- Presentation,](https://reader030.fdocuments.in/reader030/viewer/2022011811/5e15f1aeeb994f3ff029d2fb/html5/thumbnails/18.jpg)
View ModelsView ModelsCustom ViewUse the view model
Additional Examples
![Page 19: ArcGIS API for JavaScript - proceedings.esri.comproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · 2019 Esri Developer Summit Palm Springs -- Presentation,](https://reader030.fdocuments.in/reader030/viewer/2022011811/5e15f1aeeb994f3ff029d2fb/html5/thumbnails/19.jpg)
GeocodingGeocodingconstconst locator locator == newnew LocatorLocator(({{ url url:: url url }}));;
locatorlocator..addressToLocationsaddressToLocations(({{
address address:: {{
"singleLine""singleLine":: "380 New York St, Redlands, CA 92373""380 New York St, Redlands, CA 92373"
}}
}}));;
locatorlocator..locationToAddresslocationToAddress(({{ location location:: point point }}));;
![Page 20: ArcGIS API for JavaScript - proceedings.esri.comproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · 2019 Esri Developer Summit Palm Springs -- Presentation,](https://reader030.fdocuments.in/reader030/viewer/2022011811/5e15f1aeeb994f3ff029d2fb/html5/thumbnails/20.jpg)
GeocodingGeocodingconstconst searchVM searchVM == newnew SearchVMSearchVM(());;
searchVMsearchVM..searchsearch(("380 New York St, Redlands, CA 92373""380 New York St, Redlands, CA 92373"));;
searchVMsearchVM..searchsearch((locationlocation));;
![Page 21: ArcGIS API for JavaScript - proceedings.esri.comproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · 2019 Esri Developer Summit Palm Springs -- Presentation,](https://reader030.fdocuments.in/reader030/viewer/2022011811/5e15f1aeeb994f3ff029d2fb/html5/thumbnails/21.jpg)
GeocodingGeocodingconstconst portal portal == newnew PortalPortal((......));;
awaitawait portal portal..loadload(());;
portalportal..helperServiceshelperServices..geocodegeocode..mapmap((geocoderServicegeocoderService =>=> {{
// objects with details on// objects with details on
// geocode services for your portal// geocode services for your portal
}}));;
![Page 22: ArcGIS API for JavaScript - proceedings.esri.comproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · 2019 Esri Developer Summit Palm Springs -- Presentation,](https://reader030.fdocuments.in/reader030/viewer/2022011811/5e15f1aeeb994f3ff029d2fb/html5/thumbnails/22.jpg)
Widgets - StylingWidgets - StylingAvailable Themes
Theme TestingA PEN BY kellyhutchins
Run Pen
![Page 23: ArcGIS API for JavaScript - proceedings.esri.comproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · 2019 Esri Developer Summit Palm Springs -- Presentation,](https://reader030.fdocuments.in/reader030/viewer/2022011811/5e15f1aeeb994f3ff029d2fb/html5/thumbnails/23.jpg)
Widgets - StylingWidgets - StylingCSS Extension languageSASSTheme Utility
![Page 24: ArcGIS API for JavaScript - proceedings.esri.comproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · 2019 Esri Developer Summit Palm Springs -- Presentation,](https://reader030.fdocuments.in/reader030/viewer/2022011811/5e15f1aeeb994f3ff029d2fb/html5/thumbnails/24.jpg)
Map and ViewMap and View
![Page 25: ArcGIS API for JavaScript - proceedings.esri.comproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · 2019 Esri Developer Summit Palm Springs -- Presentation,](https://reader030.fdocuments.in/reader030/viewer/2022011811/5e15f1aeeb994f3ff029d2fb/html5/thumbnails/25.jpg)
Map and ViewMap and Viewconstconst map map == newnew MapMap(({{
basemap basemap:: "topo""topo"
}}));;
constconst mView mView == newnew MapViewMapView(({{
map map:: map map,,
container container:: "viewDiv""viewDiv"
}}));;
constconst sView sView == newnew SceneViewSceneView(({{
map map:: map map,,
container container:: "viewDiv""viewDiv"
}}));;
![Page 26: ArcGIS API for JavaScript - proceedings.esri.comproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · 2019 Esri Developer Summit Palm Springs -- Presentation,](https://reader030.fdocuments.in/reader030/viewer/2022011811/5e15f1aeeb994f3ff029d2fb/html5/thumbnails/26.jpg)
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
*/ */
ground ground:: "world-elevation""world-elevation"
}}));;
![Page 27: ArcGIS API for JavaScript - proceedings.esri.comproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · 2019 Esri Developer Summit Palm Springs -- Presentation,](https://reader030.fdocuments.in/reader030/viewer/2022011811/5e15f1aeeb994f3ff029d2fb/html5/thumbnails/27.jpg)
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:: {{
layers layers:: [[
newnew ElevationLayerElevationLayer(({{ url url:: elevationUrl elevationUrl }}))
]]
![Page 28: ArcGIS API for JavaScript - proceedings.esri.comproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · 2019 Esri Developer Summit Palm Springs -- Presentation,](https://reader030.fdocuments.in/reader030/viewer/2022011811/5e15f1aeeb994f3ff029d2fb/html5/thumbnails/28.jpg)
Basemap and GroundBasemap and Ground
VT BasemapsA PEN BY odoe
Run Pen
![Page 29: ArcGIS API for JavaScript - proceedings.esri.comproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · 2019 Esri Developer Summit Palm Springs -- Presentation,](https://reader030.fdocuments.in/reader030/viewer/2022011811/5e15f1aeeb994f3ff029d2fb/html5/thumbnails/29.jpg)
CollectionsCollections
CollectionA PEN BY odoe
Run Pen
esri/core/Collection
![Page 30: ArcGIS API for JavaScript - proceedings.esri.comproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · 2019 Esri Developer Summit Palm Springs -- Presentation,](https://reader030.fdocuments.in/reader030/viewer/2022011811/5e15f1aeeb994f3ff029d2fb/html5/thumbnails/30.jpg)
Working with AccessorWorking with AccessorObjects are have properties that can be:
read and setor read-onlyconstructor argumentswatchable
![Page 31: ArcGIS API for JavaScript - proceedings.esri.comproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · 2019 Esri Developer Summit Palm Springs -- Presentation,](https://reader030.fdocuments.in/reader030/viewer/2022011811/5e15f1aeeb994f3ff029d2fb/html5/thumbnails/31.jpg)
Accessor - property accessAccessor - property access
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 property
viewview..getget(("map.basemap.title""map.basemap.title"));;
viewview..setset(("map.basemap.title""map.basemap.title",, "new title""new title"));;
![Page 32: ArcGIS API for JavaScript - proceedings.esri.comproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · 2019 Esri Developer Summit Palm Springs -- Presentation,](https://reader030.fdocuments.in/reader030/viewer/2022011811/5e15f1aeeb994f3ff029d2fb/html5/thumbnails/32.jpg)
Accessor - property watchingAccessor - property watching
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}}`̀));;
}}));;
watchUtilswatchUtils..whenTruewhenTrue((viewview,, "stationary""stationary",, (()) =>=> {{
watchUtils
![Page 33: ArcGIS API for JavaScript - proceedings.esri.comproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · 2019 Esri Developer Summit Palm Springs -- Presentation,](https://reader030.fdocuments.in/reader030/viewer/2022011811/5e15f1aeeb994f3ff029d2fb/html5/thumbnails/33.jpg)
Accessor - autocasting and single constructorAccessor - autocasting and single constructor
// 4.x// 4.x
{{
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
}}
}}));;
// 3.x// 3.x
newnew SimpleMarkerSymbolSimpleMarkerSymbol((SimpleMarkerSymbolSimpleMarkerSymbol..STYLE_SQUARESTYLE_SQUARE,, 1010,,
newnew SimpleLineSymbolSimpleLineSymbol((SimpleLineSymbolSimpleLineSymbol..STYLE_SOLIDSTYLE_SOLID,,
![Page 34: ArcGIS API for JavaScript - proceedings.esri.comproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · 2019 Esri Developer Summit Palm Springs -- Presentation,](https://reader030.fdocuments.in/reader030/viewer/2022011811/5e15f1aeeb994f3ff029d2fb/html5/thumbnails/34.jpg)
PromisesPromises
![Page 35: ArcGIS API for JavaScript - proceedings.esri.comproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · 2019 Esri Developer Summit Palm Springs -- Presentation,](https://reader030.fdocuments.in/reader030/viewer/2022011811/5e15f1aeeb994f3ff029d2fb/html5/thumbnails/35.jpg)
PromisesPromisesAll asynchronous methods return a promise, no more The basic pattern looks like this:
events
layerlayer..queryFeaturesqueryFeatures((queryquery))..thenthen((handleResulthandleResult))..catchcatch((handleErrorhandleError));;
![Page 36: ArcGIS API for JavaScript - proceedings.esri.comproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · 2019 Esri Developer Summit Palm Springs -- Presentation,](https://reader030.fdocuments.in/reader030/viewer/2022011811/5e15f1aeeb994f3ff029d2fb/html5/thumbnails/36.jpg)
Promises with async/awaitPromises with async/awaitwork with native promises
constconst doQuerydoQuery == asyncasync ((queryquery)) =>=> {{
constconst results results == awaitawait layer layer..queryFeaturesqueryFeatures((queryquery));;
constconst transformedResults transformedResults == results results..mapmap((transformDatatransformData));;
returnreturn transformedResults transformedResults;;
}}
![Page 37: ArcGIS API for JavaScript - proceedings.esri.comproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · 2019 Esri Developer Summit Palm Springs -- Presentation,](https://reader030.fdocuments.in/reader030/viewer/2022011811/5e15f1aeeb994f3ff029d2fb/html5/thumbnails/37.jpg)
PromisesPromisesLoad resourcesAsychronously initialized Layer, WebMap, WebScene, View
constconst map map == newnew MapMap(({{......}}))
view view == newnew SceneViewSceneView(({{
map map:: map map,,
//...//...
}}));;
viewview..whenwhen(((()) =>=> {{
// the view is ready to go// the view is ready to go
}}));;
![Page 38: ArcGIS API for JavaScript - proceedings.esri.comproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · 2019 Esri Developer Summit Palm Springs -- Presentation,](https://reader030.fdocuments.in/reader030/viewer/2022011811/5e15f1aeeb994f3ff029d2fb/html5/thumbnails/38.jpg)
PromisesPromisesviewview..whenwhen(((()) =>=> {{
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
![Page 39: ArcGIS API for JavaScript - proceedings.esri.comproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · 2019 Esri Developer Summit Palm Springs -- Presentation,](https://reader030.fdocuments.in/reader030/viewer/2022011811/5e15f1aeeb994f3ff029d2fb/html5/thumbnails/39.jpg)
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)) {{
errorHandlererrorHandler((errorerror));;
}}
![Page 40: ArcGIS API for JavaScript - proceedings.esri.comproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · 2019 Esri Developer Summit Palm Springs -- Presentation,](https://reader030.fdocuments.in/reader030/viewer/2022011811/5e15f1aeeb994f3ff029d2fb/html5/thumbnails/40.jpg)
PatternsPatterns
![Page 41: ArcGIS API for JavaScript - proceedings.esri.comproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · 2019 Esri Developer Summit Palm Springs -- Presentation,](https://reader030.fdocuments.in/reader030/viewer/2022011811/5e15f1aeeb994f3ff029d2fb/html5/thumbnails/41.jpg)
Interactivity with view eventsInteractivity with view eventsUse view events to interact with the view
You can stop the propagation of the event to prevent the defaultbehavior
List of events
viewview..onon(("drag""drag",, eventevent =>=> {{
// user won't be able to drag// user won't be able to drag
event event..stopPropagationstopPropagation(());;
}}))
![Page 42: ArcGIS API for JavaScript - proceedings.esri.comproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · 2019 Esri Developer Summit Palm Springs -- Presentation,](https://reader030.fdocuments.in/reader030/viewer/2022011811/5e15f1aeeb994f3ff029d2fb/html5/thumbnails/42.jpg)
Interactivity with view eventsInteractivity with view eventsAccess the features on click
viewview..onon(("click""click",, (({{ x x,, y y }})) =>=> {{
constconst screenPoint screenPoint == {{xx,, y y}};;
view view..hitTesthitTest((screenPointscreenPoint))
..thenthen((responseresponse =>=> {{
// do something with the result graphic// do something with the result graphic
constconst graphic graphic == response response..resultsresults[[00]]..graphicgraphic;;
}}));;
}}));;
API Sample
![Page 43: ArcGIS API for JavaScript - proceedings.esri.comproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · 2019 Esri Developer Summit Palm Springs -- Presentation,](https://reader030.fdocuments.in/reader030/viewer/2022011811/5e15f1aeeb994f3ff029d2fb/html5/thumbnails/43.jpg)
goTo() with ViewgoTo() with ViewSets the view to a given target.
Navigate to a geometry/feature/locationAPI Sample
![Page 44: ArcGIS API for JavaScript - proceedings.esri.comproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · 2019 Esri Developer Summit Palm Springs -- Presentation,](https://reader030.fdocuments.in/reader030/viewer/2022011811/5e15f1aeeb994f3ff029d2fb/html5/thumbnails/44.jpg)
LoadablesLoadablesbrings better control, and scheduling of loading resources.extension of esri/core/Promisein 3.x, instanciating a layer loads it. in 4.0, it's an explicit callthe views automatically loads the map and its layers
![Page 45: ArcGIS API for JavaScript - proceedings.esri.comproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · 2019 Esri Developer Summit Palm Springs -- Presentation,](https://reader030.fdocuments.in/reader030/viewer/2022011811/5e15f1aeeb994f3ff029d2fb/html5/thumbnails/45.jpg)
LoadablesLoadablesWebMap / WebScene need to load:
the portal itemthe layer modulethe layer's item
MapView / SceneView need to load:the mapthe layers
![Page 46: ArcGIS API for JavaScript - proceedings.esri.comproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · 2019 Esri Developer Summit Palm Springs -- Presentation,](https://reader030.fdocuments.in/reader030/viewer/2022011811/5e15f1aeeb994f3ff029d2fb/html5/thumbnails/46.jpg)
//In a single page application, get a feature from a FeatureLayer from a WebMap without displaying i//In a single page application, get a feature from a FeatureLayer from a WebMap without displaying i
constconst webmap webmap == newnew WebMapWebMap(({{
portalItem portalItem:: {{
id id:: 'affa021c51944b5694132b2d61fe1057''affa021c51944b5694132b2d61fe1057'
}}
}}));;
webmap webmap..loadload(())
..thenthen(((()) =>=> {{
returnreturn webmap webmap..getLayergetLayer(('myFeatureLayerId''myFeatureLayerId'))..loadload(());;
}}))
..thenthen((featureLayerfeatureLayer =>=> {{
returnreturn featureLayer featureLayer..queryFeaturesqueryFeatures(({{
where where:: 'OBJECTID = 1''OBJECTID = 1'
}}));;
![Page 47: ArcGIS API for JavaScript - proceedings.esri.comproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · 2019 Esri Developer Summit Palm Springs -- Presentation,](https://reader030.fdocuments.in/reader030/viewer/2022011811/5e15f1aeeb994f3ff029d2fb/html5/thumbnails/47.jpg)
Zoom or ScaleZoom or Scale
Zoom = LOD (Level of Details)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?
}}));;
![Page 48: ArcGIS API for JavaScript - proceedings.esri.comproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · 2019 Esri Developer Summit Palm Springs -- Presentation,](https://reader030.fdocuments.in/reader030/viewer/2022011811/5e15f1aeeb994f3ff029d2fb/html5/thumbnails/48.jpg)
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!
}}));;
![Page 49: ArcGIS API for JavaScript - proceedings.esri.comproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · 2019 Esri Developer Summit Palm Springs -- Presentation,](https://reader030.fdocuments.in/reader030/viewer/2022011811/5e15f1aeeb994f3ff029d2fb/html5/thumbnails/49.jpg)
WebMap is still a MapWebMap is still a Map
Still acts like a regular MapHas some advantages
constconst map map == newnew WebMapWebMap(({{
basemap basemap:: {{ ...... }},,
layers layers:: [[ ...... ]]
}}));;
![Page 50: ArcGIS API for JavaScript - proceedings.esri.comproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · 2019 Esri Developer Summit Palm Springs -- Presentation,](https://reader030.fdocuments.in/reader030/viewer/2022011811/5e15f1aeeb994f3ff029d2fb/html5/thumbnails/50.jpg)
WebMap is still a MapWebMap is still a Map
Local bookmarksA PEN BY odoe
Run Pen
![Page 51: ArcGIS API for JavaScript - proceedings.esri.comproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · 2019 Esri Developer Summit Palm Springs -- Presentation,](https://reader030.fdocuments.in/reader030/viewer/2022011811/5e15f1aeeb994f3ff029d2fb/html5/thumbnails/51.jpg)
Sublayer to FeatureLayerSublayer to FeatureLayerYou can extract a FeatureLayer from MapImageLayer Sublayersublayer.createFeatureLayer()Can use capabilities not normally available with Sublayer
![Page 52: ArcGIS API for JavaScript - proceedings.esri.comproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · 2019 Esri Developer Summit Palm Springs -- Presentation,](https://reader030.fdocuments.in/reader030/viewer/2022011811/5e15f1aeeb994f3ff029d2fb/html5/thumbnails/52.jpg)
Sublayer to FeatureLayerSublayer to FeatureLayer
createFeatureLayerA PEN BY odoe
Run Pen
![Page 53: ArcGIS API for JavaScript - proceedings.esri.comproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · 2019 Esri Developer Summit Palm Springs -- Presentation,](https://reader030.fdocuments.in/reader030/viewer/2022011811/5e15f1aeeb994f3ff029d2fb/html5/thumbnails/53.jpg)
createQuerycreateQueryWhen you can do layer.createQuery()query object will already have the layers �lters and layerde�nitionsmore consistent
Use new Query() when you don't want prede�ned �lters to beapplied
![Page 54: ArcGIS API for JavaScript - proceedings.esri.comproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · 2019 Esri Developer Summit Palm Springs -- Presentation,](https://reader030.fdocuments.in/reader030/viewer/2022011811/5e15f1aeeb994f3ff029d2fb/html5/thumbnails/54.jpg)
createQuerycreateQuery
createQueryA PEN BY odoe
Run Pen
![Page 55: ArcGIS API for JavaScript - proceedings.esri.comproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · 2019 Esri Developer Summit Palm Springs -- Presentation,](https://reader030.fdocuments.in/reader030/viewer/2022011811/5e15f1aeeb994f3ff029d2fb/html5/thumbnails/55.jpg)
MapImageLayerMapImageLayerIf you want to modify Sublayers, do it after you load the layerDe�ning them upfront overrides the defaults
May not be what you want
![Page 56: ArcGIS API for JavaScript - proceedings.esri.comproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · 2019 Esri Developer Summit Palm Springs -- Presentation,](https://reader030.fdocuments.in/reader030/viewer/2022011811/5e15f1aeeb994f3ff029d2fb/html5/thumbnails/56.jpg)
MapImageLayerMapImageLayer
MapImageLayer - Load SublayersA PEN BY odoe
Run Pen
![Page 57: ArcGIS API for JavaScript - proceedings.esri.comproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · 2019 Esri Developer Summit Palm Springs -- Presentation,](https://reader030.fdocuments.in/reader030/viewer/2022011811/5e15f1aeeb994f3ff029d2fb/html5/thumbnails/57.jpg)
LayerViewsLayerViewsRenders the LayerWhen is it done though?
hotly debated topic!When can you actually use it!!Behavior different with optimized FeatureLayer
![Page 58: ArcGIS API for JavaScript - proceedings.esri.comproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · 2019 Esri Developer Summit Palm Springs -- Presentation,](https://reader030.fdocuments.in/reader030/viewer/2022011811/5e15f1aeeb994f3ff029d2fb/html5/thumbnails/58.jpg)
LayerViewsLayerViews
LayerView - ReadyA PEN BY odoe
Run Pen
![Page 59: ArcGIS API for JavaScript - proceedings.esri.comproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · 2019 Esri Developer Summit Palm Springs -- Presentation,](https://reader030.fdocuments.in/reader030/viewer/2022011811/5e15f1aeeb994f3ff029d2fb/html5/thumbnails/59.jpg)
![Page 60: ArcGIS API for JavaScript - proceedings.esri.comproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · 2019 Esri Developer Summit Palm Springs -- Presentation,](https://reader030.fdocuments.in/reader030/viewer/2022011811/5e15f1aeeb994f3ff029d2fb/html5/thumbnails/60.jpg)