nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

ArcGIS JS API Map-Componets: Load-Portal-Item not using correct PortalUrl or ProxyUrl

ColbyMorris

error: o

details: {url: 'https://www.arcgis.com/sharing/rest/content/items/My_Portal_Url}

I am getting this error when trying to convert to Arcgis/Map-Components. I set the PortalURL and ProxyURL in NgOnInit()

I also have a boolean on the map to wait to render until the config is set.

esriConfig.request.proxyRules = [

{

urlPrefix: myPortalUrl,

proxyUrl: myProxyUrl

}

];

But the request from the {arcgis-map} is still trying to find the portalUrl through arcgis. I did try setting the portalUrl in the {arcgis-map portal-url="myUrl" item-id="My_Portal_Url"}. Neither of these seem to work.

Any help with this would be great.

Find more posts tagged with

Accepted answers

TJSimons

Hi @ColbyMorris - To load a webmap from your portal, you need to set the config.portalUrl to "https://{yourportal}/portal". Set the config before the API is loaded to make sure some requests are not still made to arcgis.com. For example, with this template you could place it in the app.config.ts.

import esriConfig from "@arcgis/core/config";

esriConfig.portalUrl = "your_portal_url";

For the arcgis-map, set the item-id to your portal webmap's item id.

The proxy rules may not be needed. Unless there is something specific to your environment that requires it.

All comments

ColbyMorris

Great!

Thank you for the solutions. The app is now up and running with your help.

TJSimons

import esriConfig from "@arcgis/core/config";

esriConfig.portalUrl = "your_portal_url";

For the arcgis-map, set the item-id to your portal webmap's item id.

The proxy rules may not be needed. Unless there is something specific to your environment that requires it.

ReneRubalcava

This will depend on how you are building your app.

They key is to set this up before the map-components load or added to the DOM. One good way is to set them on the global esriConfig object.

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

<head>
	<script>
		// use the global esriConfig variable to initialize properties
		var esriConfig = {
			// No map will load with fake portal
			portalUrl: "https://myHostName.esri.com/arcgis"
		};
	</script>
	<script type="module" src="https://js.arcgis.com/5.0/"></script>

</head>
<body>
	<arcgis-map item-id="d5dda743788a4b0688fe48f43ae7beb9">
		<arcgis-expand slot="top-right">
			<arcgis-search></arcgis-search>
		</arcgis-expand>
		<arcgis-legend slot="bottom-left"></arcgis-legend>
	</arcgis-map>
</body>

You can also use a script tag in the <head> to set this up. Then you can write your app code in a script tag in the last element of the body.

https://developers.arcgis.com/javascript/latest/programming-patterns/#set-the-portalurl-in-a-cdn-application

Another way is to create the WebMap yourself and assign it to the map component.

https://developers.arcgis.com/javascript/latest/programming-patterns/#using-webmap-or-webscene

https://developers.arcgis.com/javascript/latest/programming-patterns/#set-the-portalurl-in-an-esm-application

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.