Node.js and Browser Applications with ArcGIS REST JS€¦ · Node.js and browser applications with...
Transcript of Node.js and Browser Applications with ArcGIS REST JS€¦ · Node.js and browser applications with...
Node.jsandbrowserapplicationswithArcGISRESTJSAllisonDavis
NoahMulnger
slides:
@araedavis
@noahmulnger
bit.ly/3aLDzaz
Agenda1.-WhatisArcGISRESTJS?Why?2.-Whoisusingit?Forwhat?3.-What'snewin2020?4.-CommonPatterns5.-Demos/code(tolearnhowitworks)
OpenSourceonGitHubCode
Doc
github.com/Esri/arcgis-rest-js
esri.github.io/arcgis-rest-js
@esri/arcgis-rest-jshelpsyoutalk
toArcGISOnlineandEnterprise
frommodernbrowsersandNode.js.
VanillaXMLHttpRequest
//constructtheurlyourselfanddon'tforgettotackonf=jsonconsturl="https://www.arcgis.com/sharing/rest/community/users/dmfenton";url+="?f=json";varxhr=newXMLHttpRequest();xhr.onreadystatechange=function()if(xhr.readyState==XMLHttpRequest.DONE)//makesureJSONresponsedoesntindicateanerrorif(!xhr.responseText.error)xhr.responseText;//firstName:"Daniel",description:"opensourcegeodev";xhr.open("GET",url,true);xhr.send(null);
VanillaFetch
consturl="https://www.arcgis.com/sharing/rest/community/users/dmfenton";fetch(url,method:"POST",//settherequesttypeheaders:"ContentType":"application/xwwwformurlencoded"//appendtherightheader,//concatandencodeparameters,appendf=jsonbody:encodeURIComponent("f=json")).then(response=>if(response.ok)returnresponse.json();//digoutthejson).then(response=>//trapforerrorsinsidea200responseif(!response.error)returnresponse;);
EvenmorecomplexityWhatarealltheerrorcodes?Howdoyouhandleauth?Howaredatessupposedtobeencoded?Properencodingforobjects?Howdoyoumanagetokensforfederatedservers?Refreshingauthenticationwhennecessary?
@esri/arcgisrestjs
importrequestfrom"@esri/arcgisrestrequest";request(url).then(response)//firstName:"Daniel",description:"opensourcegeodev"....catch((error=>if(err.name==="ArcGISAuthError")//handleanautherrorelse//handlearegularerror)
Valueaddsappendsf=jsonandrequestheadersencodesquerystringparameterscreatesFormData(whenrequired)clearandinformativeerrorhandlingproperparameterencodingsupportforauthenticationdisplayamapclientsideanalysis
requestonlyexpectsaurl,butitexposesrequestOptionstoo.
//url,IRequestOptionsrequest(url,params://anythingyouwanttopassfoo:true,bar:"baz",more:File(),num:999,when:Date().now()//etc.//httpMethod:"GET",//authentication//portal,//headers,//fetch);
therestoftheAPIbuildsontopofrequest
importgeocodefrom"@esri/arcgisrestgeocoding";//assumesyouwanttouseArcGISOnlinegeocode("LAX").then(response);//...candidates:[]//IRequestOptionsisstillavailablegeocode(singleLine:"LAX",params:forStorage:true,authentication);
GoalsNode.jsand(modern)browsersalacarte/svelteframeworkagnosticshavedownthesharpedgesalignwithJSecosystem
Disclaimer*notaproduct,noroadmapworkscratchingourownitch
inprogress
ComparisonkindofanalogoustoArcGISAPIforPythonmuchdifferentthantheArcGISAPIforJavaScript
Inthebeginning...
customers!
ArcGISforDevelopersArcGISHub
Asof2020ArcGISHubArcGISforDevelopersStorymapsWebAppBuilder(nextgeneration)ArcGISSolutionsArcGISEnterpriseArcGISAnalyticsforIoTEsriUKStartups/PartnersCustomersYou?
packages!request2.8kBauth3.6kBportal5.1kBfeaturelayer1.3kBserviceadmin746Bgeocoding1kBrouting642B
CommonPatterns
whenonlyonepieceofinformationisrequired
youcanpassinitindirectly.
importsearchItemsfrom"@esri/arcgisrestportal";searchItems("water").then(response);//total:355,etc...//orsearchItems(query:"water",httpMethod:"GET",authentication);
ifmorethanonepieceofinformationisneeded
onlyanobjectcanbepassedin, IRequestOptions
deleteFeatures(url:"https://server.arcgis.com/arcgis/rest/objectIds:[123]).then(response)
//response"deleteResults":["objectId":123,"success":true]
extends
updatewhocanaccessanitemimportsetItemAccessfrom"@esri/arcgisrestsharing";setItemAccess(id:`fe8`,//whichitem?access:`public`,//whoshouldbeabletoseeit?authentication//userallowedtoupdate).then(response);
ISetItemAccessOptions
Simplieddeveloperexperience,evenwhentheunderlyinglogicis
weensuretheresponseisdeterministicwegureoutwhichurltocall(basedonrole)
complicated
AuthenticationimportUserSessionfrom"@esri/arcgisrestauth";//ArcGISOnlinecredentialsconstauthentication=newUserSession(username,password);//ArcGISEnterprisecredentialsconstenterpriseAuth=newUserSession(username,password,portal:`https://gis.city.gov/sharing/rest`);
UserSessionkeepstrackoftokenexpiration
andwhetherornotaserveristrusted(federated)
consturl=`http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/`;constauthentication=newUserSession(username,password);request(url,authentication).then(response=>//thesametokenwillbereusedforthesecondrequestrequest(url,authentication););
sinceDevSummit2019...rest-jsv2.0.0!
(plus20additionalreleases)
What'snewinv2+
Improved
setDefaultRequestOptions()andwithOptions()
Packageandtypereorganization
SearchQueryBuilder
paging
Buildingsearchqueries//1.xconstq="TreesANDowner:USForestServiceAND(type:'WebMappingApplication'ORtype://2.xconstq=newSearchQueryBuilder().match("Trees").and().match("USForestService").in("owner").and().startGroup().match("WebMappingApplication").in("type").or().match("MobileApplication").in("type").endGroup();
Oneportalpackagetorulethemall//1.xnpminstall@esri/arcgisrestitems&&@esri/arcgisrestusers&&@esri/arcgisrestgroups&&@esri/arcgisrestsharing//2.xnpminstall@esri/arcgisrestportal
Packagesinstalltypesautomatically//1.ximportIPointfrom"@esri/arcgisrestcommontypes";importreverseGeocodefrom"@esri/arcgisrestgeocoder";reverseGeocode(x:34,y:118asIPoint);//2.ximportIPoint,reverseGeocodefrom"@esri/arcgisrestgeocoding";reverseGeocode(x:34,y:118asIPoint);
Checkoutthe forthefulllistreleasenotes
DemoOAuthinBrowser
Authpackagerest-jsviaCDN
DemoReactComponent
GeocodingpackageDownshift
DemoJSAPIIntegrationwithAngular
Resources
MoreDemos
LinktoslidesGitHubrepoDocssiteDemoatObservables
SapperWebComponentswithStencilLamdaFunctions