Select to view content in your preferred language

Using Web Components via 4.33 using Javascript and NOT static HTML

1585
13
Jump to solution
09-19-2025 07:10 AM
dtstopper
Occasional Contributor

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? 

0 Kudos
13 Replies
dtstopper
Occasional Contributor

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

dtstopper_0-1758739975734.png

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

0 Kudos
dtstopper
Occasional Contributor

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

dtstopper_0-1758740362163.png

 

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?

 
0 Kudos
Sage_Wall
Esri Regular Contributor

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/ma...

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/#referen...

https://developers.arcgis.com/javascript/latest/programming-patterns/#associate-components-with-a-ma...

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

Sage_Wall_0-1758746001162.png

 

0 Kudos
dtstopper
Occasional Contributor

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.