Latest Contributions by ReneRubalcava

The other Accessor you were seeing is because you were mixing cdn and esm classess. When you import the JS Core AMD CDN, you can't import from the ESM CDN. We do provide a helper to import modules in AMD that is closer to ESM imports. Fixed your codepen here. https://codepen.io/odoe/pen/oNOQzMw?editors=0011

Pushed a fix for that this week, and it went into the "next" version recently. Glad you got the fix.

Please provide a GitHub repo, stackblitz, or codesandbox that reproduces the issue. Don't know the version of JS SDK or webpack, so that will help. Could be a webpack config issue or how things are loading, but no way to tell.

Please provide a github repo, stackblitz, or codesandbox that reproduces this issue. As Sam pointed out, no way to pinpoint the problem without it.

The two CDNs are different. The AMD CDN can be used in production apps. We do recommend using ESM with arcgis/core npm package, but the AMD CDN is still viable for lots of folks. The ESM CDN is available for testing purposes, it's not optimized and will a lot of files. There is an option for the AMD CDN to use a Promise based import, using $arcgis.import. There will be better doc on this with 4.30, but it's mentioned here. https://developers.arcgis.com/javascript/latest/components-programming-patterns/#using-a-proxy Ideally, if you want other users to use this component, that's why I suggested that the web component module not import any maps sdk modules on it's own. You can't mix AMD and ESM CDN. Complex objects and classes can only be set via JS on web components, so you wouldn't be able to have an only HTML solution, you'd need some JS to set props. Attributes can only be strings/numbers/booleans.

This is cool! I put it into a codepen, just to see how it felt going through the code. Nice work! https://codepen.io/odoe/pen/bGJMJpV This actually looks really good. If I were to do anything different, I might apply the css to your button via an embedded style tag in the shadow dom, but that is just a minor comment. This is a useful pattern to write some web comps that you can still pass to the view ui. If you want to keep this pattern, I would suggest using the AMD CDN, simply for perf purposes. You may also want to pass the class for GraphicsLayer to the component so that it's completely encapsulated, and the component doesn't reference any JS SDK modules directly, if that makes sense. This way it would work for quick apps that you test with the ESM CDN or when you use the AMD CDN. Here is what I meant by encapsulating the JS SDK classes, this way the component is a little more portable. https://codepen.io/odoe/pen/BaExgYb?editors=0010

It would be the same thing minus the application part. You can expose the view or map on your components for users. You could even build a thin API of methods on your components to handle custom tasks, like zoom to graphics or turn layers on/off. You would probably want to use a build tool like Vite to bundle your components. With Vite you can set the maps sdk as an external dependency. I forget if it's directly in Vite config or as part of the rollup plugin part. But you don't want the maps sdk in your bundles, let the app do that. There is also an option to use any of the web component compilers/frameworks out there like Stencil or Lit, even Svelte can compile to WC.

Here is a version of an app I have done before in various frameworks, but this one uses vanilla web components. https://github.com/odoe/nearby-app-vanilla If you are using Vite, you can use arcgis/core to build your app and components. Not sure I understand reference to the mapView question, but you could expose a method to like `getMapView` or maybe even a property for when you use the component. If you plan on building your components as your own package that you can use across various apps, do not build the JS SDK modules into your components. You want to treat them as external modules. You can do this by looking at the documentation for your build tools.

You would listen to the edits event of the Layer you are interested in. The Editor itself will not give you this information.

I think this will work, you can register the OAuthInfo with the IdentityManager before the components load. <!doctype html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" /> <title>Map components AMD template</title> <link rel="icon" href="data:;base64,=" /> <style> html, body { background-color: var(--calcite-ui-foreground-2); padding: 0; margin: 0; width: 100vw; height: 100vh; } </style>  <link rel="stylesheet" href="https://js.arcgis.com/4.29/esri/themes/dark/main.css" /> <script src="https://js.arcgis.com/4.29/"></script>  <script defer type="module" src="https://js.arcgis.com/map-components/4.29/arcgis-map-components.esm.js"></script> </head> <body> <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> async function load() { const IdentityManager = await $arcgis.import( "esri/identity/IdentityManager", ); const OAuthInfo = await $arcgis.import("esri/identity/OAuthInfo"); // I can register my OAuthInfo here console.log(IdentityManager, OAuthInfo); // The custom elements are not defined yet console.log(customElements.get("arcgis-map")); } load(); </script> </body> </html>

‎03-27-2024

Hi @MeleKoneya1 you can add IdentityManager the same way you would with a regular ArcGIS Maps SDK app, by importing the IdentityManager and creating your OAuthInfos. The pattern for this can vary slightly depending on how you build your app. For that CDN sample, I would do an AMD require or use the $arcgis.import like in this sample https://github.com/Esri/arcgis-maps-sdk-javascript-samples-beta/blob/main/packages/coding-components/templates/amd-script-tag/index.html#L60 Note: $arcgis.import is a CDN only helper function you can use to Promisify AMD require calls. In order for this to load before the components are loaded, I would do this work in a script tag after loading the maps sdk CDN, but before the arcgis-map-components CDN. I might even place the components CDN as the last tag of the body or add a defer attribute. I haven't tried this in a single page CDN app, but one of these patterns should do the trick, if not, let us know, In a built app, with vite or maybe another framework, you could run the IdentityManager and OAuthInfo code in an entry point file and before calling the defineCustomElements() method from the arcgis/map-components. A built app is a little easier to control the order of operations then in a CDN app, but it could be done.

‎03-26-2024

Could you provide a codepen, github repo, stackblitz, or codesandbox to repro case to look at. It's possible there is data on the map with empty popup template, or some logic in the app to open the popup on click, but not way to tell otherwise.

‎03-25-2024

There is a DirectionalPad widget, it's not in the corners though, not sure if that would meet your needs https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-DirectionalPad.html

‎03-19-2024

Sogou isn't in the list of supported browsers, but according to the doc, the root in IntersectionObserver can be Element or Document, as long as it has a viewport. This might be an issue in Sogou.

‎03-14-2024

If you can provide a repro sample in stackblitz or github, would have a better idea, but not able to repro this issue in samples.

Online Status	Offline
Date Last Visited	Wednesday

My Ideas

Latest Contributions by ReneRubalcava

Re: Map Component: Switching maps triggers error with null viewpoint

Re: Map Component: Switching maps triggers error with null viewpoint

Re: Illegal constructor error on calcite components loading on the map using JS Maps SDK

Re: Too many active WebGL contexts. Oldest context will be lost.

Re: Using SDK classes in custom components

Re: Using SDK classes in custom components

Re: Using SDK classes in custom components

Re: Using SDK classes in custom components

Re: How to catch delete event on Editor widget.

Re: Using arcgis-map-components

Re: Using arcgis-map-components

Re: Map: wherever I click it opens a popup

Re: Pan controls ArcGIS4

Re: Failed to construct 'IntersectionObserver': member root is not of type Element.

Re: Updated from 4.28.10 to 4.29.7 and sketch and coordinate conversion widget no longer working

Re: Map Component: Switching maps triggers error w...

Re: Too many active WebGL contexts. Oldest context...

Re: How to catch delete event on Editor widget.

Re: Using arcgis-map-components

Re: Using arcgis-map-components