John Gravois slides:

Transcription

1 Using ArcGIS REST JS and the ArcGIS REST APIs John Gravois slides:

2 Agenda 1. Prior art 2. Getting started 3. Use cases 4. Demos (lots!)

3

4 npm Disclaimer*

5 If at rst you don't succeed...

6 github.com/esri/geoservices-js github.com/esri/node-arcgis XMLHttpRequest in lots of apps

7 Goals Node.js and (modern) browsers a la carte framework agnostic shave down the sharp edges

8 Comparison kind of analogous to ArcGIS API for Python much different than the ArcGIS API for JavaScript

9 request - 2kb feature-service bytes auth - 2.5kb groups bytes geocoder - 1kb items - 1kb

10 Geocoding npm npm import { geocode } from '@esri/arcgis-rest-geocoder'; geocode("lax").then((response) => { response.candidates[0].location; // { x: , y: , spatialreference: { wkid: 4326 } } });

11 Reverse Geocoding import { reversegeocode } from '@esri/arcgis-rest-geocoder'; // long, lat reversegeocode([ , ]).then((response) => { response.address.placename; // => "LA Airport" });

12 Reverse Geocoding import { reversegeocode } from '@esri/arcgis-rest-geocoder'; // or reversegeocode({ latitude: , latitude: }) // or reversegeocode({ x: , y: }) // wgs84 is assumed // or reversegeocode({ x: , y: , spatialreference: { wkid: 3857 })

13 Suggestions <script src=" <script <script arcgisrest.suggest("starb").then(response => { response.suggestions[0].text; // => "Starbucks" });

14 Suggestions arcgisrest.suggest("disneyl", { httpmethod: "POST", params: { countrycode: "FR", maxsuggestions: 2 } }).then(response => { console.log(response.suggestions.length); // => 2 (in France) });

15 Prior art

16 Demo ( Batch geocoding in Node.js)

17 Item Search searchitems( string or options ) const { searchitems } = require("@esri/arcgis-rest-items"); return searchitems('water').then((results) => { // work with the items... })

18 it's just q const { searchitems } = require("@esri/arcgis-rest-items"); return searchitems('water AND type: Web Map').then((results) => { // work with the items... })

19 Paging... const { searchitems } = require("@esri/arcgis-rest-items"); return searchitems({ searchform: { q: 'bike trails AND (typekeywords: hubsolutiontemplate)', start: 1203, num: 100 } }).then((results) => { // work with the items... })

20 Private Items on your Portal return searchitems({ authentication: myusersession, portal: ' searchform: { q: 'bike trails AND (typekeywords: hubsolutiontemplate)', start: 1203, num: 100, } }).then((results) => { // work with the items... })

21 CRUD createitem getitem updateitem removeitem

22 Create Item + JSON Data Web Maps, Web Apps etc let itm = { title: 'foo', owner: 'dbouwman',... data: {...createitem() handles this correctly... } }

23 function serializeitem(item: IItem): any { const clone = JSON.parse(JSON.stringify(item)); // join keywords and tags... clone.typekeywords = item.typekeywords.join(", "); clone.tags = item.tags.join(", "); // stringify json props... if (clone.data) { clone.text = JSON.stringify(clone.data); delete clone.data; } if (clone.properties) { clone.properties = JSON.stringify(clone.properties); } return clone; }

24 Other Item-y Things additemjson createiteminfolder getitemdata

25 Resources & Protection getitemresources updateitemresource * removeitemresource * protectitem unprotectitem

26 Groups searchgroups creategroup getgroup updategroup removegroup

27 Groups getgroupcontent getgroupusers protectgroup unprotectgroup

28 Node // need fetch and form-data require('isomorphic-fetch'); require('isomorphic-form-data'); // bring in modules you need... const { searchitems } = require("@esri/arcgis-rest-items"); return searchitems({ searchform: { q: 'bike trails', start: 1, num: 100 } }).then((results) => { // work with the items... })

29 Demo CLI toolkit built with commander easy to add more cli tools Hub Cleaner surgical purge for our test org

30 Feature Services

31 Use Case: Hub Open Dataset Attribute Charts

32 Node process to query stats and "statistics": { "values": [ { "value": "Yes", "count": 199, "code": "Y" }, { "value": "No", "count": 99, "code": "N" } ], "count": 2 }

33 a.k.a "Stashed cats"

34 External libraries cedar charts not always used in the context of a map

35 @esri/arcgis-rest-feature-service currently "read-only" plan to add CRUD, info, & admin functions

36 Get Feature import { getfeature } from '@esri/arcgis-rest-feature-service'; const featurelayerurl = ' getfeature({ url: featurelayerurl, id: 42 }).then(response => { response.attributes.fid; // 42 });

37 Query Features import { queryfeatures } from '@esri/arcgis-rest-feature-service'; const featurelayerurl = ' const queryparams = { where: "Condition='Poor'", returncountonly: true } queryfeatures({ url: featurelayerurl, params: queryparams }).then(response => { response.count; // 7 });

38

39 Demo demos/feature-service-browser

40 How are we using Esri? ArcGIS Hub Cedar items and groups Hub JS API harvester? Esri Lea et developers.arcgis.com

41 idea, question, issue, or success / john@esri.com

42 please, please, please ll out a session survey 1. download the Esri Events App 2. select DC Dev Summit 3. search for "libraries" 4. leave feedback! slides:

43