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
yesterday
1830
Posts created
227
Kudos given
395
Solutions
893
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
|
You can accomplish this by leaving the item-id and basemap empty attributes on the arcgis-map component, then creating your own map/basemap as needed. https://www.esri.com/arcgis-blog/products/js-api-arcgis/developers/how-to-use-a-basemap-with-a-specific-world-view-in-your-web-app <arcgis-map>
</arcgis-map>
<script type="module">
const VectorTileLayer = await $arcgis.import("@arcgis/core/layers/VectorTileLayer.js");
const ArcGISMap = await $arcgis.import("@arcgis/core/Map.js");
const Basemap = await $arcgis.import("@arcgis/core/Basemap.js");
const mapElement = document.querySelector("arcgis-map");
// create a VectorTileLayer from a style URL
const mapBaseLayer = new VectorTileLayer({
url: "https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/styles/arcgis/topographic",
// set the worldview as a custom parameter
customParameters: {
worldview: "unitedStatesOfAmerica"
},
});
const basemap = new Basemap({
// set the VTL as the basemap layer
baseLayers: [mapBaseLayer]
});
mapElement.map = new ArcGISMap({
basemap
});
</script> https://codepen.io/odoe/pen/dPPEvgY?editors=1000
... View more
05-19-2025
08:30 AM
|
0
|
0
|
2139
|
|
POST
|
You can set this up via the SearchSource as the resultSymbol. https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Search-LayerSearchSource.html#resultSymbol If it worked via the resultGraphic, it was in error as that is supposed to be readonly property in both the component and the widget.
... View more
05-19-2025
08:19 AM
|
0
|
0
|
794
|
|
POST
|
You can listen to the arcgisViewChange event. This event emits when stationary toggles and you can reference the properties related to the view. Demo: https://codepen.io/odoe/pen/gbbZWNP?editors=1001
... View more
05-12-2025
01:42 PM
|
0
|
1
|
1313
|
|
POST
|
Events on components are custom events, so you can find the point on "event.detail.mapPoint". We'll make this clearer in the 4.33 documentation release.
... View more
05-12-2025
09:39 AM
|
1
|
1
|
1052
|
|
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
|
692
|
|
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
|
2371
|
|
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
|
2403
|
|
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
|
2431
|
|
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
|
2467
|
|
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
|
942
|
|
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
|
2646
|
|
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
|
2733
|
|
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
|
2749
|
|
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
|
1080
|
|
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
|
2853
|
My kudoed posts
| Title | Kudos | Posted |
|---|---|---|
| 1 | 2 weeks ago | |
| 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 |
Activity Feed
- Got a Kudo for Re: esriConfig.portalURL and <arcgis-map> component. 2 weeks ago
- Posted Re: esriConfig.portalURL and <arcgis-map> component on ArcGIS JavaScript Maps SDK Questions. 2 weeks ago
- Posted Re: esriConfig.portalURL and <arcgis-map> component on ArcGIS JavaScript Maps SDK Questions. 2 weeks ago
- Posted Re: playwright and arcgis js sdk e2e tests on ArcGIS JavaScript Maps SDK Questions. 2 weeks ago
- Kudoed Re: playwright and arcgis js sdk e2e tests for JonathanDawe_BAS. 2 weeks ago
- Posted Re: playwright and arcgis js sdk e2e tests on ArcGIS JavaScript Maps SDK Questions. 3 weeks ago
- Posted Re: Using $arcgis.import() with self hosted SDK on ArcGIS JavaScript Maps SDK Questions. 3 weeks ago
- Kudoed ArcGIS Maps SDK for JavaScript - Version 5.1 released! for YixuanEmilyHu. 4 weeks 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
Contact Me
| Online Status |
Offline
|
| Date Last Visited |
yesterday
|