topic Re: Using arcgis-map-components in ArcGIS JavaScript Maps SDK Questions

Using arcgis-map-components

MeleKoneya1 — Wed, 27 Mar 2024 21:23:41 GMT

Hello,

Seeing the samples at Dev Summit for ArcGIS Map Components made our web team and developers wonder about migrating existing JavaScript code such as the one used here.

https://www.scottsdaleaz.gov/solid-waste

I can easily load a web map containing the layers needed, like this

but need to take it a step further and once a search is completed against our parcels, the results for the layers showing service days is displayed.

How do I include an identity function into this sample?

https://github.com/Esri/arcgis-maps-sdk-javascript-samples-beta/blob/main/packages/map-components/templates/amd-script-tag/index.html

Thank you,

Mele

Re: Using arcgis-map-components

ReneRubalcava — Wed, 27 Mar 2024 22:15:24 GMT

Hi @MeleKoneya1 you can add IdentityManager the same way you would with a regular ArcGIS Maps SDK app, by importing the IdentityManager and creating your OAuthInfos.

The pattern for this can vary slightly depending on how you build your app.

For that CDN sample, I would do an AMD require or use the $arcgis.import like in this sample https://github.com/Esri/arcgis-maps-sdk-javascript-samples-beta/blob/main/packages/coding-components/templates/amd-script-tag/index.html#L60

Note: $arcgis.import is a CDN only helper function you can use to Promisify AMD require calls.

In order for this to load before the components are loaded, I would do this work in a script tag after loading the maps sdk CDN, but before the arcgis-map-components CDN. I might even place the components CDN as the last tag of the body or add a defer attribute.

I haven't tried this in a single page CDN app, but one of these patterns should do the trick, if not, let us know,

In a built app, with vite or maybe another framework, you could run the IdentityManager and OAuthInfo code in an entry point file and before calling the defineCustomElements() method from the arcgis/map-components. A built app is a little easier to control the order of operations then in a CDN app, but it could be done.

Re: Using arcgis-map-components

ReneRubalcava — Thu, 28 Mar 2024 15:34:38 GMT

I think this will work, you can register the OAuthInfo with the IdentityManager before the components load.

<!doctype html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" /> <title>Map components AMD template</title> <link rel="icon" href="data:;base64,=" /> <style> html, body { background-color: var(--calcite-ui-foreground-2); padding: 0; margin: 0; width: 100vw; height: 100vh; } </style>  <link rel="stylesheet" href="https://js.arcgis.com/4.29/esri/themes/dark/main.css" /> <script src="https://js.arcgis.com/4.29/"></script>  <script defer type="module" src="https://js.arcgis.com/map-components/4.29/arcgis-map-components.esm.js"></script> </head> <body> <arcgis-map item-id="d5dda743788a4b0688fe48f43ae7beb9"> <arcgis-expand position="top-right"> <arcgis-search></arcgis-search> </arcgis-expand> <arcgis-legend position="bottom-left"></arcgis-legend> </arcgis-map> <script> async function load() { const IdentityManager = await $arcgis.import( "esri/identity/IdentityManager", ); const OAuthInfo = await $arcgis.import("esri/identity/OAuthInfo"); // I can register my OAuthInfo here console.log(IdentityManager, OAuthInfo); // The custom elements are not defined yet console.log(customElements.get("arcgis-map")); } load(); </script> </body> </html>

Re: Using arcgis-map-components

MeleKoneya1 — Thu, 28 Mar 2024 15:42:58 GMT

Wow! Thanks @ReneRubalcava I will work with what you sent and let you know how it goes. I appreciate the response and detailed example.