Using arcgis-map-components

MeleKoneya1

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/te...

Thank you,

Mele

ReneRubalcava

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...

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.

ReneRubalcava

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>
	<!-- Load the ArcGIS Maps SDK for JavaScript -->
	<link rel="stylesheet" href="https://js.arcgis.com/4.29/esri/themes/dark/main.css" />
	<script src="https://js.arcgis.com/4.29/"></script>

	<!-- Load the Map Components, but defer loading -->
	<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>

MeleKoneya1

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