|
POST
|
That arcgisViewReadyChange event will only fire after you provide a map, so you need to wait for the events of each one to finish and then use it. Here is a demo https://codepen.io/odoe/pen/LEEmMoG?editors=1000
... View more
05-05-2025
01:14 PM
|
0
|
3
|
1755
|
|
POST
|
You can listen to the "arcgisViewReadyChange" event of the map/scene components and when that event fires, you can create Widgets using the readonly `element.view` of the components. The `view` property provided for users migrating apps from widgets to components. https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-map/#arcgisViewReadyChange
... View more
05-05-2025
08:47 AM
|
0
|
1
|
1783
|
|
POST
|
By default, when you use item ids on the components, we can only support a single portal. However, if you need to support multiple portals in your app, you can omit the item-id attribute and assign the element.map property with your own webmap and portal url. This will allow you to work with maps from multiple portals.
... View more
05-05-2025
07:01 AM
|
0
|
3
|
1819
|
|
POST
|
You can use the `arcgisPropertyChange` event to check the state of the component. If the state is ready, than `lastRoute` has been updated. <arcgis-map center="-118,34" zoom="12" item-id="45b3b2fb35e94ab09381d0caa0da5946">
<arcgis-directions position="top-left" use-default-route-layer></arcgis-directions>
</arcgis-map>
<script type="module">
const directionsElement = document.querySelector("arcgis-directions");
directionsElement.addEventListener("arcgisPropertyChange", (e) => {
if (
event.detail.name !== "state" ||
directionsElement.state !== "ready"
) {
// You only care about when the `state` of the component is "ready"
return;
}
if (directionsElement.lastRoute) {
console.log("New directions are set");
}
})
</script> https://codepen.io/odoe/pen/Pwwpxao?editors=1001 We can look at adding the `lastRoute` to trigger this change event as well.
... View more
04-24-2025
04:22 PM
|
1
|
0
|
747
|
|
POST
|
Here is a sample Angular app that adds a layer and more. You don't instantiate components, just declare them via html elements. https://github.com/odoe/map-components-angular/blob/main/src/app/components/map/map.component.ts
... View more
04-16-2025
07:50 AM
|
0
|
1
|
2073
|
|
POST
|
See https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/how-to-combine-the-new-component-widgets-to-the/m-p/1605940/highlight/true#M86940 <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>
... View more
04-15-2025
08:55 AM
|
1
|
0
|
2183
|
|
POST
|
Exactly. Here's a demo for identity manager and loading components after setting up auth. https://codepen.io/odoe/pen/mdgjKZR
... View more
04-15-2025
04:32 AM
|
1
|
0
|
2199
|
|
POST
|
Good question! I've been wanting to update this one to show it. You can do one of two things, depending on what you need. You can create the webmaps ahead of time and set the `element.map = myMap` property or set the `element.itemId = myItemid` property. Here is a demo using the itemId https://codepen.io/odoe/pen/raaByOg?editors=1000 <body>
<div id="container">
<section class="header esri-widget">
<div class="btns">
<div class="btn-switch active-map" data-id="0">Missing Migrants</div>
<div class="btn-switch" data-id="1">Refugee Routes</div>
<div class="btn-switch" data-id="2">2015 European Sea Arrivals</div>
</div>
</section>
<arcgis-map>
</arcgis-map>
</div>
<script type="module">
const webmapids = [
"ad5759bf407c4554b748356ebe1886e5",
"71ba2a96c368452bb73d54eadbd59faa",
"45ded9b3e0e145139cc433b503a8f5ab"
];
const mapElement = document.querySelector("arcgis-map");
mapElement.itemId = webmapids[0];
document.querySelector(".btns").addEventListener("click", (event) => {
const id = event.target.getAttribute("data-id");
if (id) {
mapElement.itemId = webmapids[id];
const nodes = document.querySelectorAll(".btn-switch");
for (let idx = 0; idx < nodes.length; idx++) {
const node = nodes[idx];
const mapIndex = node.getAttribute("data-id");
if (mapIndex === id) {
node.classList.add("active-map");
} else {
node.classList.remove("active-map");
}
}
}
});
</script>
</body>
... View more
04-14-2025
10:08 AM
|
1
|
0
|
841
|
|
POST
|
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.
... View more
04-14-2025
09:18 AM
|
1
|
1
|
2303
|
|
POST
|
Since we have both the component and widget, the doc is pretty much the same for properties, so it's not copied between one and the other. The sources behave the same way. Here is a demo that updates the Search multiple sources sample to components. https://codepen.io/odoe/pen/azbgEmB?editors=1000 <arcgis-map basemap="dark-gray" center="-97,38" scale="10000000" all-placeholder="District or Senator" include-default-sources-disabled>
<arcgis-search></arcgis-search>
</arcgis-map>
<script type="module">
const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");
const searchElement = document.querySelector("arcgis-search");
const featureLayerDistricts = new FeatureLayer({
url: "https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/USA_117th_Congressional_Districts_all/FeatureServer/0",
popupTemplate: {
title: "Congressional District {DISTRICTID} </br>{NAME}, ({PARTY})",
overwriteActions: true
}
});
const featureLayerSenators = new FeatureLayer({
url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/US_Senators_2020/FeatureServer/0",
popupTemplate: {
title: "<a href={Web_Page} target='_blank'> {Name}</a>, ({Party}-{State}) ",
overwriteActions: true
}
});
searchElement.sources = [{
layer: featureLayerDistricts,
searchFields: ["DISTRICTID"],
displayField: "DISTRICTID",
exactMatch: false,
outFields: ["DISTRICTID", "NAME", "PARTY"],
name: "Congressional Districts",
placeholder: "example: 3708"
},
{
layer: featureLayerSenators,
searchFields: ["Name", "Party"],
suggestionTemplate: "{Name}, Party: {Party}",
exactMatch: false,
outFields: ["*"],
placeholder: "example: Casey",
name: "Senators",
zoomScale: 500000,
resultSymbol: {
type: "picture-marker",
url: "https://developers.arcgis.com/javascript/latest/sample-code/widgets-search-multiplesource/live/images/senate.png",
height: 36,
width: 36
}
},
{
name: "ArcGIS World Geocoding Service",
placeholder: "example: Nuuk, GRL",
apiKey: "%YOUR_ACCESS_TOKEN%",
singleLineFieldName: "SingleLine",
url: "https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer"
}
];
</script>
... View more
04-10-2025
07:32 AM
|
0
|
0
|
1380
|
|
POST
|
This isn't something that is exposed as a public API, so it's not available on the component. You can submit an enhancement request and we can take a look at adding it.
... View more
04-10-2025
07:21 AM
|
0
|
0
|
1663
|
|
POST
|
One thing to check, based on your screenshot, it looks like the fullscreen component is outside the arcgis-map component, but not based on your snippet. Make sure you are not using self-closing tags "<arcgis-fullscreen />", this is not valid for Custom Elements and cause issues like this. Also if you're component is outside the arcgis-map component, there is a reference-element attribute you can use to refer to the id or tag name of the arcgis-map component.
... View more
04-10-2025
07:17 AM
|
1
|
0
|
1432
|
|
POST
|
Like @JonathanDawe_BAS I'm not seeing this behavior either. I modified our React sample to use fullscreen and no issues. import "@arcgis/map-components/components/arcgis-map";
import "@arcgis/map-components/components/arcgis-fullscreen";
export default function App() {
return (
<arcgis-map
itemId="d5dda743788a4b0688fe48f43ae7beb9"
onarcgisViewReadyChange={(event) => {
console.log("MapView ready", event);
}}
>
<arcgis-fullscreen position="top-right"></arcgis-fullscreen>
</arcgis-map>
);
} If you have a github repo, might be able to take a look.
... View more
04-10-2025
07:14 AM
|
1
|
0
|
1432
|
|
POST
|
You can declare this on the global type in your app export declare global {
// maybe this
// var $arcgis: { import<T>?: (modules: string[]) => Promise<T> | null };
var $arcgis: { import?: (modules: string[]) => Promise<unknown> | null };
}
... View more
04-03-2025
01:02 PM
|
1
|
0
|
1222
|
|
POST
|
Unit tests and SSR are run in node, so you need to handle those use cases when using parts of the JS Core that use UI. In unit tests, you will need to set up mocks for your modules that use JS Core widgets/views. Or maybe have some factory methods you can mock. In SSR, you can try to move all UI modules to a helper module that can exposes a function that can take the containers for your views and widgets. Then you can dynamically load this module via `import("./helper.js")`. This will avoid the SSR issues.
... View more
04-03-2025
09:33 AM
|
0
|
0
|
1307
|
| Title | Kudos | Posted |
|---|---|---|
| 1 | a week ago | |
| 2 | 2 weeks ago | |
| 1 | 02-27-2026 06:31 AM | |
| 1 | 01-13-2026 02:15 PM | |
| 1 | 12-31-2025 09:05 AM |
| Online Status |
Offline
|
| Date Last Visited |
yesterday
|