Merge pull request #221 from Esri/demo/more-typical-jsapi

docs(demos): jsapi integration demo shows more typical scenario
Esri · Jun 14, 2018 · 0878793 · 0878793
2 parents db13178 + 1892ec9
commit 0878793
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 50 deletions.
diff --git 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
@@ -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>
+</html>