diff --git a/demos/jsapi-integration/README.md b/demos/jsapi-integration/README.md index c9ac394f06..72a46f0d00 100644 --- a/demos/jsapi-integration/README.md +++ b/demos/jsapi-integration/README.md @@ -1,6 +1,6 @@ # Passing authentication to the JSAPI -This demo shows how to pass an authenticated session from `arcgis-rest-js` to the ArcGIS API for JavaScript. +This demo shows how to use `arcgis-rest-js` with the ArcGIS API for JavaScript. A typical use case would be when you need to query items or feature data _before_ you are ready to display a map or scene view. In this scenario, you should load the light-weight `arcgis-rest-js` libraries first and use them to perform your queries and/or authenticate with the ArcGIS platform. Then when you are ready to show a map or scene view, you would lazy-load the ArcGIS API for JavaScript with something like [esri-loader](https://github.com/Esri/esri-loader) and use it to create the map. ## Running this demo 1. Run `npm run bootstrap` in the repository's root directory. diff --git a/demos/jsapi-integration/index.html b/demos/jsapi-integration/index.html index 9dd766a877..9030f9f0ca 100644 --- a/demos/jsapi-integration/index.html +++ b/demos/jsapi-integration/index.html @@ -18,65 +18,62 @@ <link rel="stylesheet" href="https://js.arcgis.com/4.7/esri/css/main.css"> - <script> - dojoConfig = { - paths: { - "@esri/arcgis-rest-request": "/node_modules/@esri/arcgis-rest-request/dist/umd/request.umd", - "@esri/arcgis-rest-auth": "/node_modules/@esri/arcgis-rest-auth/dist/umd/auth.umd", - "@esri/arcgis-rest-items": "/node_modules/@esri/arcgis-rest-items/dist/umd/items.umd" - } - }; - </script> + <script src="node_modules/@esri/arcgis-rest-request/dist/umd/request.umd.js"></script> + <script src="node_modules/@esri/arcgis-rest-auth/dist/umd/auth.umd.js"></script> + <script src="node_modules/@esri/arcgis-rest-items/dist/umd/items.umd.js"></script> + <!-- + NOTE: rather than include the ArcGIS API for JavaScript via a <script> tag + typically you would using something like https://github.com/Esri/esri-loader + to lazy-load the API _after_ you had used the light-weight arcgis-rest-js + libraries above to log in and fetch some data (see NOTE below) + --> <script src="https://js.arcgis.com/4.7/"></script> - <script> - require([ - "@esri/arcgis-rest-request", - "@esri/arcgis-rest-auth", - "@esri/arcgis-rest-items", - "esri/identity/IdentityManager", - "esri/views/MapView", - "esri/WebMap", - "dojo/domReady!" - ], function( - arcgis, arcgisAuth, arcgisItems, esriId, MapView, WebMap - ) { - - // private item - // https://geosaurus.maps.arcgis.com/home/item.html?id=728043ac6a574a00b8f1cd5ee0eae8cd - const itemId = "728043ac6a574a00b8f1cd5ee0eae8cd"; +</head> - // canned username/password from +<body> + <div id="viewDiv"></div> + <script> + // first, log in + // using canned username/password from // https://developers.arcgis.com/python/sample-notebooks/chennai-floods-analysis/ - const session = new arcgisAuth.UserSession({ + const session = new arcgisRest.UserSession({ username: "arcgis_python", password: "P@ssword123" }); - // fetch the private item's data, not just the metadata - arcgisItems.getItemData(itemId, { authentication: session }) + // next, fetch a private item's data (not just the metadata) + // https://geosaurus.maps.arcgis.com/home/item.html?id=728043ac6a574a00b8f1cd5ee0eae8cd + const itemId = "728043ac6a574a00b8f1cd5ee0eae8cd"; + arcgisRest.getItemData(itemId, { authentication: session }) .then(response => { - // pass the authenticated session over to the JSAPI Identity Manager - esriId.registerToken(session.getCredential()); - // dig the webmap id out of the response - var webmap = new WebMap({ - portalItem: { - id: response.map.itemId - } - }); + // once we have the private item, we can create a map + // NOTE: this is where you would lazy-load the ArcGIS API for JavaScript + require([ + "esri/identity/IdentityManager", + "esri/views/MapView", + "esri/WebMap" + ], function( + esriId, MapView, WebMap + ) { + // pass the authenticated session over to the JSAPI Identity Manager + esriId.registerToken(session.getCredential()); - // and pass it to the map view - var view = new MapView({ - map: webmap, - container: "viewDiv" - }); - }); - }); - </script> -</head> + // dig the webmap id out of the response + var webmap = new WebMap({ + portalItem: { + id: response.map.itemId + } + }); -<body> - <div id="viewDiv"></div> + // and pass it to the map view + var view = new MapView({ + map: webmap, + container: "viewDiv" + }); + }); + }); + </script> </body> -</html> \ No newline at end of file +</html>