How to combine the new component Widgets to the classic Widget initialisation?

[Wimvan_Dijk]

ArcGIS JS API 4.32 uses the <arcgis-map> HTML style with Web Component for the esri/widgets/BasemapGallery component. I have hundreds of pages with the classic way to setup a mapView with the classic way to initialise widgets to the webView. How can I replace the classic Widget initialisation for the new Web Component in my existing projects?

This is the way I initialised all my projects:

webMap = new WebMap({
    portalItem: {
        id: <mymapid>,
        portal: <myarcgisportal>
    }
});
view = new MapView({
    container: "mapDiv",
    map: webMap,
});

var basemapGallery;
var basemapele = document.createElement('div');
basemapele.setAttribute('data-toggle', 'Tooltip');
basemapele.setAttribute('title', 'Basis kaarten');
basemapele.className = "esri-icon-basemap esri-widget--button esri-widget esri-interactive home";
basemapele.addEventListener('click', function(evt){
if (basemapGallery) {
    basemapGallery.destroy();
    basemapGallery = null;
}
else {
    basemapGallery = new BasemapGallery({
        view: view
    });
    view.ui.add(basemapGallery,"top-right");
}
})
view.ui.add(basemapele, "top-left");
    

I have the token mechanism in Javascript, to be able to work with private maps, so if you have a solution to work 'the other way around", meaning I change my HTML to the new style:

<arcgis-map item-id="123456789123456789" id="mapDiv">
    <arcgis-basemap-gallery></arcgis-basemap-gallery>
</arcgis-map>

How can I apply the Token to this setup, so I can work with private maps? In the classic way I assign the token with:

esriId.registerToken({
    server: <argisserver>,
    token: <mytoken>
});

It didn't find esriId in the 4.32 documentation, and I have no clue how to combine the new and old initialisations. Thanks in advance!

[ReneRubalcava]

When using the NPM package to build your apps, you can set up your authentication or api keys before importing the components. Sorry for images, but I have these on hand from presentations.

If using the CDN, you can do a couple of things. For API keys, use the global esriConfig before the script tags for core js and components.

Or similar to how you would do it in NPM, do your work first and then import the components.

[Wimvan_Dijk]

Thank you Rene for your reply. Appreciated! We are not using the NPM package, but standard plain Javascript initialisation like this:

<link rel="stylesheet" href="/arcgis_js/javascript/4.32/esri/themes/light/main.css">
<script src="/arcgis_js/javascript/4.33/init.js"></script>

(ArcGIS javascript API on our server).

What is the sequence of commands I have to use, standard Javascript, to be able to display a private map into this structure:

<arcgis-map item-id="123456789123456789" id="mapDiv">
    <arcgis-basemap-gallery></arcgis-basemap-gallery>
</arcgis-map>

[JoelBennett]

The object referred to as "esriId" is the esri/identity/IdentityManager module.  A shortcut to the documentation of the registerToken method is here.

[Wimvan_Dijk]

Thank you Joel, the variable is still accessible. I can register but I can't get a private map loaded into this element:

<arcgis-map item-id="123456789123456789" id="mapDiv">
    <arcgis-basemap-gallery></arcgis-basemap-gallery>
</arcgis-map>

With AI the suggestion is to initialise a webMap and a view and replace that in the <arcgis-map> element. That works but then the <arcgis-basemap-gallery> is gone. Most likely that won't work...

[Wimvan_Dijk]

Thank you for the comment Edvinas_S. You are right about the object, but that is not the only initialisation needed. We do not work with Node.js so this statement will not work with just basic Javascript

await import("@arcgis/map-components/dist/components/arcgis-map");

How do I solve this without Node.js?

[Edvinas_S]

I think you misread what Rene said. The first part of his comment is for node. You don't need to do that. 

If you create the esriConfig before importing calcite components and esri js api, it works in plain js. You don't need to do any other imports and awaits. Just add this object to globalThis:

<!-- New code -->
<script> 
  globalThis.esriConfig = {
    portalUrl: "https://my.portal.com/portal",
    apiKey: "API_KEY"
  }
</script>


<!-- Your imports -->
<script type="module" src="https://js.arcgis.com/calcite-components/3.0.3/calcite.esm.js"></script>
<link rel="stylesheet" href="https://js.arcgis.com/4.32/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.32/"></script>

[ReneRubalcava]

Exactly. Here's a demo for identity manager and loading components after setting up auth.

https://codepen.io/odoe/pen/mdgjKZR

[Wimvan_Dijk]

Thank you  Edvinas_S, but I am still a little in 'the dark'. I don't use esriConfig, I request a token from REST API. With that token, I use these Javascript functions:

esriId.registerToken({
server: 'https://www.arcgis.com/sharing/rest',
  token: <TOKEN_FROM_REST_API>
});
esriId.getCredential("https://www.arcgis.com/sharing");
  esriId.checkSignInStatus('https://www.arcgis.com/sharing').then(function(responseSignInStatus) {
      displayMap();
  }).catch(function(error) {
      alert("Register error message: ", error);
  });

displayMap is my custom function to display the map and add all Widgets. I need to do this because without this registration, the map won't show because it is private.

 My question: what and how should I store in the globalThis.esriConfig using a REST generated token?

Your help is appreciated.

[ReneRubalcava · Accepted solution]

See https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/how-to-combine-the-new-component-...

<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 type="module">
	const esriId = await $arcgis.import("@arcgis/core/identity/IdentityManager.js");
	const OAuthInfo = await $arcgis.import("@arcgis/core/identity/OAuthInfo.js");
	console.log(!!customElements.get("arcgis-map"));
	esriId.registerToken({
		server: 'https://www.arcgis.com/sharing/rest',
		token: "YOUR_TOKEN_HERE"
	});
	esriId.getCredential("https://www.arcgis.com/sharing");
	esriId.checkSignInStatus('https://www.arcgis.com/sharing').then(async (responseSignInStatus) => {
		await import("https://js.arcgis.com/map-components/4.32/arcgis-map-components.esm.js");
		console.log(!!customElements.get("arcgis-map"));
	}).catch(function (error) {
		alert("Register error message: ", error);
	});
</script>