topic Re: Using Web Components via 4.33 using Javascript and NOT static HTML in ArcGIS JavaScript Maps SDK Questions

Using Web Components via 4.33 using Javascript and NOT static HTML

dtstopper — Fri, 19 Sep 2025 14:10:35 GMT

Hello, I have a question about using the new 4.33 framework. Currently I'm using widgets that are deprecated such as ScaleBar and BasemapGallery. I have no problem putting these on my map when I dynamically render it in JS, however when I place the web components statically in the html they get lost when I render the map div with changes. I have looked everywhere but can only find static samples which are useless when compared to widgets generated on the fly. Can anyone instruct me on how to dynamically generate web components via JavaScript?

Re: Using Web Components via 4.33 using Javascript and NOT static HTML

Sage_Wall — Fri, 19 Sep 2025 14:24:22 GMT

Hi @dtstopper ,

You can use `document.createElement("arcgis-map")` in your javascript code. I've got a github repo I use for testing stuff where I create everything programmatically and not in the HTML markup. Hope this helps.

https://github.com/sagewall/vite-map-components/blob/main/src/main.ts

Re: Using Web Components via 4.33 using Javascript and NOT static HTML

JeffreyThompson2 — Mon, 22 Sep 2025 13:06:37 GMT

@Sage_Wall It would be great to see some official examples/blog posts on this technique. I think I will need it a lot when I start re-building my Experience Builder Widgets with Components.

Re: Using Web Components via 4.33 using Javascript and NOT static HTML

dtstopper — Tue, 23 Sep 2025 14:10:24 GMT

Hello @Sage_Wall,

I see your example appends the newly created elements to a calcite-block object, but what if we wanted to append the object, such as the scale and basemap gallery below, to the UI view like we were able to before the deprecation?

I have 2 examples of element creations below, please advise.

var scaleBar1 = document.createElement('arcgis-scale-bar');
scaleBar1.setAttribute("position", "bottom-right");
scaleBar1.setAttribute("bar-style", "line");
scaleBar1.setAttribute("unit", "metric");

var basemapGallery1 = document.createElement('arcgis-scale-bar');
basemapGallery1.setAttribute("position", "bottom-right");

view.ui.add(scaleBar1, "bottom-right");
view.ui.add(basemapGallery1, "bottom-right");

Re: Using Web Components via 4.33 using Javascript and NOT static HTML

Sage_Wall — Tue, 23 Sep 2025 14:51:53 GMT

Hi @dtstopper,

It looks like you're mixing the legacy API view UI with the new Web Components API. With the map components, you don’t need to add them to the view UI—just append them directly to the DOM where you want them to appear.

If you place components like the scalebar inside a <arcgis-map> or <arcgis-scene> component, they’ll automatically wire up without any additional configuration. However, if you append them outside of those components, you’ll need to use the referenceElement property to link them properly.

Since map components behave like standard HTML elements, you can use familiar DOM methods such as querySelector(), createElement(), and appendChild(). MDN has a great overview here:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting#doing_some_basic_dom_manipulation

Here’s a CodePen example that adds a scalebar and basemap gallery to a map:
https://codepen.io/sagewall/pen/VYeLxxe😁

Let me know if you run into any issues or have questions!

Re: Using Web Components via 4.33 using Javascript and NOT static HTML

dtstopper — Tue, 23 Sep 2025 22:01:11 GMT

I have to be doing something wrong because I can't get these tools to show up in the map I'm rendering with layers and other widgets. If I just do a basic map render and follow your example it works. But the second I try to do the same thing to my map it won't render the same and it appears to put the controls outside the view when I write them to the DOM.

I'm just trying to do the following:

var basemapToUse = "7ba5fedbafb747ec9d50e61b55ca0844";

// Define the web map reference
let map = new WebMap({
portalItem: {
id: basemapToUse
}});

const view = new MapView({
map: map,
container: viewDivObject,
popup: {
dockEnabled: true,
dockOptions: {
buttonEnabled: false,
breakpoint: false,
position: 'bottom-right'
}
}
});

view.when(function () {
const viewElement = document.getElementById("viewDiv");
const viewElementTest = document.getElementById("testDiv");
const scaleBar = document.createElement("arcgis-scale-bar");
scaleBar.position = "bottom-right";
scaleBar.barStyle = "line";
scaleBar.unit = "dual";
const basemapGallery = document.createElement("arcgis-basemap-gallery");
basemapGallery.position = "bottom-right";
viewElement.appendChild(scaleBar);
viewElement.appendChild(basemapGallery);
viewElementTest.appendChild(basemapGallery);
viewElementTest.appendChild(scaleBar);
});

I'm using code to render maps and layers by what we used to do via version 4.20, but now it appears I can't do what you're saying which is combing the way we used to do via v4.2 and now with v4.33 since it uses components. Is this true? Do I have to rewrite the way I render maps, views, layers, widgets, etc?

Re: Using Web Components via 4.33 using Javascript and NOT static HTML

Sage_Wall — Tue, 23 Sep 2025 22:24:50 GMT

Hi @dtstopper ,

It can be confusing and I apologize because our documentation is a mix of two different ways of doing things at the moment, but your mixing up the legacy MapView API with the new components API. Instead of creating a new MapView instance with ` new MapView()` you will need to create a new Map object and then assign the map to the component. You could use document.createElement("arcgis-map") in place of new MapView() but it's honestly probably easier to just add it to the HTML.

I've modified the codepen to demo what your trying to do by creating the web map and then instead of assigning it to a MapView assigning it to the Map component.

Hope this helps https://codepen.io/sagewall/pen/vELOPxQ?editors=1000

Re: Using Web Components via 4.33 using Javascript and NOT static HTML

Sage_Wall — Tue, 23 Sep 2025 22:32:14 GMT

Another good resource too is the programming patterns web page. It shows the new component programming patterns, including how to add layers and configure the map and layers.

https://developers.arcgis.com/javascript/latest/programming-patterns/#using-map

Re: Using Web Components via 4.33 using Javascript and NOT static HTML

dtstopper — Wed, 24 Sep 2025 15:34:50 GMT

Thank you for the references, I have another question. Are MapView objects the same for 4.33? I use this to attach all my objects in the view.map.load() function but I can't seem to make it work with 4.33 and the new web components. I used to be able to attach the scale bar via view.ui.add() and basemap gallery to widgets on the view.ui and I notice that can't be done anymore either. I'm currently looking at the documentation for this but can't perform a working example. Let me know if you guys have anything I can look at and adapt to my solution.

Do you guys have an article, documentation or solution that provides examples on how 4.33 works with all the previous ways we used to do things in version 4.23?

Re: Using Web Components via 4.33 using Javascript and NOT static HTML

Sage_Wall — Wed, 24 Sep 2025 15:44:13 GMT

Can you please provide a codepen or other sample code? I'm having a little trouble following your workflow.

MapView itself is largely unchanged. However, web components and the MapView class do not mix at the moment. In the next version we have some plans to ease the transition by adding a view property to the components, but it's currently not supported to add components to a MapView. And even if it's possible in the next release, it's not encouraged or recommended. It's only intended to be help as a temporary solution for really large applications to be able to migrate easier.

When you update your app you will no longer create a `new MapView()` and add widgets to it's UI. You also won't use the view.when() method. instead create a new `arcgis-map` component and then access the view property on the component. If you need to access MapView (through the components view property) properties, methods or events you'll need to use the components `viewOnReady` method instead of the MapView's `when()`. You can also access the map property on the component to do things like add layers. You can add other components like the scale bar in a defined position in the arcgis-map component.

It might be helpful to take a closer look at the getting started and programming patterns, then work through some. of the tutorials and samples to get a feel for the new components API. The way you create the UI out of the components is a lot different than the previous API, but once you get to the View, Map and Layers classes the API is largely the same.

Re: Using Web Components via 4.33 using Javascript and NOT static HTML

dtstopper — Wed, 24 Sep 2025 18:54:40 GMT

Hello @Sage_Wall,

As I suspected the reason the map wasn't rendering is because I was clearing out the innerHtml of the Div I was working with because it's what I had to do before to get the map to render correctly. After I removed that line it's working now but I have a question about layers now. You can see that I was able to add a feature layer to my map and it renders, however it doesn't show up in the layer list I setup.

I was able to use your code from the sandbox below, but for some reason the layers don't show up in my control panel down below.

https://github.com/sagewall/vite-map-components/blob/main/src/main.ts#L63

Is there an order or way in which I have to add the layers to get them to show in the arcgis-layer-list?

Re: Using Web Components via 4.33 using Javascript and NOT static HTML

dtstopper — Wed, 24 Sep 2025 19:02:31 GMT

Hello @Sage_Wall,

As I suspected my map wasn't rendering because of my code clearing out the innerHtml of the div I was working with before each render. I was able to create the panel below, add feature layers and the legend and basemap layer list seem to work

The sandbox you provided was most helpful in creating this

https://github.com/sagewall/vite-map-components/blob/main/src/main.ts#L63

My next issue is that when I added the feature layers to the map they aren't showing up in the arcgis-layer-list object I created. What do I have to do to show the layers in the arcgis-layer-list after I add them to the map?

Re: Using Web Components via 4.33 using Javascript and NOT static HTML

Sage_Wall — Wed, 24 Sep 2025 20:34:39 GMT

Glad to help,

My best guess is you don't have the referenceElement property set.

https://github.com/sagewall/vite-map-components/blob/3a4820b8b34a85d200e549481553f6ea89bb5a21/src/main.ts#L87C1-L88C1

The layer list is designed to show the current state of the layers in the map, but if the legend isn't a direct child of the map in the DOM you need to wire the two up to work together. We do that with the referenceElement property.

https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-layer-list/#referenceElement

https://developers.arcgis.com/javascript/latest/programming-patterns/#associate-components-with-a-map-or-scene-component

But from the screenshot above it doesn't look like the layer list is even visible only the calcite action is highlighted. The block or other element that contains it may be hidden or have no height and width. If there are no layers in a map the layer list is designed to show this message

Re: Using Web Components via 4.33 using Javascript and NOT static HTML

dtstopper — Wed, 24 Sep 2025 23:07:36 GMT

I forgot to attach the layerlist action, but I did have the correct reference. Once I attached it everything showed up correctly. I now have a fully working panel replacement instead of the old widgets, even added customized a button and handler. Thanks again for all your help, now I can move on to redoing my code that does a custom layer addition with points.