Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Cancel
- Home
- :
- About ReneRubalcava
ReneRubalcava
Esri Frequent Contributor
since
07-04-2014
Online
1826
Posts created
226
Kudos given
395
Solutions
892
Kudos received
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
My Ideas
(0 Idea Submissions)Latest Contributions by ReneRubalcava
|
POST
|
Tough to tell, could you provide a basic repro on github? Not sure how the modal is created, is it a react portal or do you add/remove the map? A repro would really help to figure it out.
... View more
05-08-2025
08:06 AM
|
1
|
0
|
672
|
|
POST
|
There is no way to remove the depreciation warning if that's what you're asking. You will need to eventually migrate to components, as widgets will go away in a future release.
... View more
05-06-2025
03:50 AM
|
0
|
1
|
2327
|
|
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
|
2359
|
|
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
|
2387
|
|
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
|
2423
|
|
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
|
917
|
|
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
|
2581
|
|
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
|
2683
|
|
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
|
2699
|
|
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
|
1046
|
|
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
|
2803
|
|
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
|
1995
|
|
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
|
2082
|
|
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
|
1872
|
|
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
|
1872
|
My kudoed posts
| Title | Kudos | Posted |
|---|---|---|
| 2 | 05-19-2026 02:12 PM | |
| 1 | 04-24-2026 11:01 AM | |
| 2 | 04-21-2026 07:06 AM | |
| 1 | 02-27-2026 06:31 AM | |
| 1 | 01-13-2026 02:15 PM |
Activity Feed
- Posted Re: Using $arcgis.import() with self hosted SDK on ArcGIS JavaScript Maps SDK Questions. yesterday
- Kudoed ArcGIS Maps SDK for JavaScript - Version 5.1 released! for YixuanEmilyHu. a week ago
- Got a Kudo for Re: Trouble Using Reactive Utils On Initially Undefined Variable. 05-21-2026 09:02 AM
- Kudoed Re: Trouble Using Reactive Utils On Initially Undefined Variable for JasonBartling1. 05-20-2026 10:28 AM
- Got a Kudo for Re: Trouble Using Reactive Utils On Initially Undefined Variable. 05-20-2026 09:58 AM
- Posted Re: Trouble Using Reactive Utils On Initially Undefined Variable on ArcGIS JavaScript Maps SDK Questions. 05-19-2026 02:12 PM
- Got a Kudo for Re: Custom Component Shadow DOM not fully loaded on "componentOnReady" promise / "arcgisReady" event. 04-27-2026 10:58 AM
- Posted Re: Custom Component Shadow DOM not fully loaded on "componentOnReady" promise / "arcgisReady" event on ArcGIS JavaScript Maps SDK Questions. 04-24-2026 11:01 AM
- Got a Kudo for Re: Custom Component Shadow DOM not fully loaded on "componentOnReady" promise / "arcgisReady" event. 04-23-2026 06:27 AM
- Got a Kudo for Re: Custom Component Shadow DOM not fully loaded on "componentOnReady" promise / "arcgisReady" event. 04-21-2026 07:18 AM
- Posted Re: Custom Component Shadow DOM not fully loaded on "componentOnReady" promise / "arcgisReady" event on ArcGIS JavaScript Maps SDK Questions. 04-21-2026 07:06 AM
- Kudoed Re: @arcgis/create - package-lock.json in .gitignore for OmarKawach. 03-16-2026 01:11 PM
- Kudoed Re: <arcgis-sketch> Selection event for lasso / rectangle for WesleyO. 03-13-2026 09:08 AM
- Kudoed Re: Set initial extent on page load for MatthewDriscoll. 03-11-2026 07:59 AM
- Posted Re: ArcGIS JS API Map-Componets: Load-Portal-Item not using correct PortalUrl or ProxyUrl on ArcGIS JavaScript Maps SDK Questions. 03-10-2026 06:22 AM
- Posted Re: Custom Component Slots - slot="manual" on ArcGIS JavaScript Maps SDK Questions. 03-05-2026 03:57 PM
- Posted Re: Draw / DrawAction event typing issue on 5.x on ArcGIS JavaScript Maps SDK Questions. 03-03-2026 06:27 AM
- Got a Kudo for Re: syntax error in SceneView.js. 03-02-2026 09:22 AM
- Posted Re: syntax error in SceneView.js on ArcGIS JavaScript Maps SDK Questions. 02-27-2026 06:31 AM
- Got a Kudo for Re: How to fix the visual order of components on a map using arcgis-map-components. 01-22-2026 12:21 PM
Contact Me
| Online Status |
Online
|
| Date Last Visited |
an hour ago
|