Latest Contributions by ReneRubalcava

‎09-08-2025

This is the default behavior for GraphicsLayer and Views https://codepen.io/odoe/pen/RNWdObm?editors=100 The "view.graphics" or with components, "viewElement.graphics" is a graphics layer under the hood, but is always on top.

‎08-28-2025

I was finishing up for the day, but couldn't pass this up. Yes, you can do this! It's a little different today, then what I would have probably done even a year ago, but here you go. https://github.com/odoe/arcgis-ts-vite-cdn We have an $arcgis helper only available on the CDN that you can use. You need to type it yourself though and add the core typings. You'll install core, but not use it except for types. Edit - may not need this reference type, but you let me know if you can remove it, lol /// <reference types="@arcgis/core/interfaces.d.ts" /> declare global { interface Window { $arcgis: { import: <T>(modules: string | string[]) => Promise<T> }; } } export {}; Then you can do this. const [Bookmarks, Expand, MapView, WebMap] = await window.$arcgis.import< [typeof __esri.Bookmarks, typeof __esri.Expand, typeof __esri.MapView, typeof __esri.WebMap] >([ "@arcgis/core/widgets/Bookmarks.js", "@arcgis/core/widgets/Expand.js", "@arcgis/core/views/MapView.js", "@arcgis/core/WebMap.js", ]); const webmap = new WebMap({ portalItem: { id: "e691172598f04ea8881cd2a4adaa45ba", // World Topographic Map }, }); This should work. It works in this sample app, but I have never done this exact scenario until today, so take that for what it's worth. I've done lots of other TS/CDN/AMD stuff, so yeah. This is one of those things I always told myself will work, so yeah, I'm glad to see it does.

‎07-31-2025

Great question, as this has come up a couple of times. Yes, this is expected. Lots of apps will remove and add elements to the page at runtime, and custom elements have a built in lifecycle method to handle what to do when that happens. If we didn't destroy everything, this would lead memory leaks. Every map-component has an autoDestroyDisabled property you can set to disable this behavior. This is useful to maintain maps and layers that might be used in other places in your application. Note, that this now puts the responsibility of calling the component destroy method on the developer when they are done to prevent memory leaks. Not necessarily. In the next release it should be easier to hide components via css classes if you want to avoid adding/removing them.

‎07-30-2025

The `layers` property of the FeatureTable is meant as a settable property by the user. We can update this documentation to make it more clear of the purpose. It does not auto-populate with layers from the provided map that show in the dropdown. You set it to override what layers that appear in the dropdown. Here is a demo showing setting and reading `layers` when the table is used by itself.

‎07-07-2025

You can currently add custom content to an expand using the `arcgis-placement` component inside expand. https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-placement/ Here is your snippet updated. <arcgis-map basemap="gray-vector" zoom="14" center="-88.1, 41.5"> <arcgis-search position="top-left"></arcgis-search> <arcgis-zoom position="top-left"></arcgis-zoom> <arcgis-home></arcgis-home> <arcgis-locate scale="5000"></arcgis-locate> <arcgis-swipe swipe-position="32"></arcgis-swipe> <arcgis-expand position="top-right"> <arcgis-layer-list></arcgis-layer-list> </arcgis-expand> <arcgis-expand expand-icon="information" position="top-right"> <arcgis-placement> <div id="infoDiv"> <h2>Helpful Vocabulary*</h2> <p><b>CD</b> Closed Depression Area-- low area of a field with no outlet that accumulates or receives runoff. In times of spring meltdown or heavy rainfall, runoff channels may form and deliver runoff water to closed depressions. </p> </div> </arcgis-placement> </arcgis-expand> </arcgis-map> https://codepen.io/odoe/pen/LEVwaqa?editors=1000

‎07-03-2025

Found it! You have the old AMD types installed too, remove those and you should be good. https://github.com/CI-CMG/pointstore-dashboard/blob/main/package.json#L21 Probably want to remove "src" from includes in the node tsconfig too https://github.com/CI-CMG/pointstore-dashboard/blob/main/tsconfig.node.json#L27

‎07-03-2025

Tried this out with a new vite TS app and not seeing this. Could you try deleting your node_modules/package-lock.json/yarn.lock and try again? If you have a github repro, can take a look.

‎06-23-2025

"reference-element" is the attribute name, only to be used declaratively. "referenceElement" is the property name, which be accessed via "element.referenceElement". It would also be used in jsx syntax for various UI libraries. https://developers.arcgis.com/javascript/latest/programming-patterns/#attributes-and-properties

‎06-20-2025

When working with the map-components, if a component is not a child of a map or scene component, you can use a "reference-element" attribute to associate them. Associate components with a Map or Scene component Create a mapping app (tutorial that uses reference-element) 12 Days of Map Components Day 1 (yt short on reference-element)

‎06-20-2025

This is a good question! Because it highlights one of the changes and nuances of using web components and HTML in general. Documentation on boolean for reference. In HTML elements, the presence of an attribute is truthy. Even an empty string is truthy, so we don't have an attribute on the map components for `popup-enabled="false"` as that would be seen as true. Hopefully that makes sense. So what we did in the map-components is make all boolean properties false by default and we have different names for them on the components. In this case, you can just add `popup-disabled` to the element. Demo: https://codepen.io/odoe/pen/VYLErVR?editors=1000 <arcgis-map item-id="45725ba7d9fb47a0925398919b13d1fa" popup-disabled > </arcgis-map>

‎06-16-2025

You can try adding the stylesheet for the components. At the moment it only hides components that have not been loaded, but this might help with the flickering. <link rel="stylesheet" href="https://js.arcgis.com/map-components/4.32/arcgis-map-components.css" />

‎06-12-2025

You can add an arcgis-home { margin: 10px; } and it will place it correctly in the action bar. It's still has a button width/height that is different on hover, but aligns right.

‎06-02-2025

For reference, the argisViewReadyChange event will fire when one of three things happens. The `item-id` is updated The `map` property is replaced The `basemap` property is replaced Without looking at how state/page loads are being handled in a React application, tough to tell when things are being updated and re-rendered. This event is driven by the View.ready property on views. If you want to maintain the state of the map component in a SPA type app, you can enable the autoDestroyDisabled property so that the component will not destroy itself if it is removed and added back to the page.

‎05-27-2025

That documentation is not official. Someone downloaded the doc from the downloads page and put that up. 4.4 is about 8 years old, so there is no view.then anymore, view.when is what you want to use.

‎05-20-2025

If you are using React 18, you need to use the map-components-react wrapper to get proper bindings. React 19+ supports native web components, but not 18. https://www.npmjs.com/package/@arcgis/map-components-react

Online Status	Online
Date Last Visited	Thursday

My Ideas

Latest Contributions by ReneRubalcava

Re: Hybrid base map labels

Re: SDK + Vite + Typescript with the CDN

Re: Arcgis Map Component dismount - an avalanche of destruction!?

Re: arcgis-feature-table .layers Property

Re: Map Components Info Div

Re: typescript error creating MapView from TypeScript

Re: typescript error creating MapView from TypeScript

Re: basemap gallery component bugs !! automatically disabled if you move tag outside of map tag

Re: basemap gallery component bugs !! automatically disabled if you move tag outside of map tag

Re: disable popup on map using map component

Re: Flicker in widget expansion when the arcgis-map of web components is loaded.

Re: use of home component in a calcite-action-bar

Re: What is required for the arcgisMap arcgisViewReadyChange event to be fired?

Re: MapView.then()

Re: Changing time extent on an arcgis-map component with React 18, React Redux 8, and TypeScript (v5)

Re: Create a graphic with an embedded shape inside...

Re: Popups not visible over Custom div

Re: Directions component style change from 4.33 to...

Re: Intro to PopupTemplate sample code doesn't use...

Re: How to use @arcgis/map-components with ArcGIS ...