Community
Select to view content in your preferred language

Component would not be rendered in a DOM element that is added to MapView.ui in V4.33

41
1
5 hours ago
AllenHuang
by
Occasional Contributor
5 hours ago

Using JS API V4.33

I was attemping to add a search component into a DOM element and added to the the top right corn of the map.

I used the following code

 let arcgisMap = document.querySelector('arcgis-map');
 let infoPanel = document.createElement('DIV');
 let widget = document.createElement('arcgis-search');
 
 infoPanel.className = 'infoPanel border';
 infoPanel.innerHTML = 'Info Panel';
 infoPanel.style.borderWidth = '1px';
 infoPanel.style.borderColor = 'blue';
 infoPanel.style.borderStyle = 'solid';
 infoPanel.appendChild(widget);
 arcgisMap.view.ui.add(infoPanel, 'top-right');

 

However, the arcgis-search component would always be added to the top-left position of the map instead.

I tried the same code in API 4.34 and it was able to render the arcgis-search placement correctly inside the infoPanel element and added to the top-right position of the map.

Did I make a mistake somewhere, or is this a bug in V4.33?

0 Kudos
1 Reply
ReneRubalcava
by Esri Frequent Contributor
Esri Frequent Contributor
22m ago

With components, you should not be adding elements to the `view.ui`. You can add them directly to the map component.

In 4.33, you can use the placement component to help with this.

    let arcgisMap = document.querySelector('arcgis-map');
    let infoPanel = document.createElement('DIV');
    let widget = document.createElement('arcgis-search');
    let placement = document.createElement('arcgis-placement');
    placement.position = "top-right";
    infoPanel.className = 'infoPanel border';
    infoPanel.innerHTML = 'Info Panel';
    infoPanel.style.borderWidth = '1px';
    infoPanel.style.borderColor = 'blue';
    infoPanel.style.borderStyle = 'solid';
    
    infoPanel.appendChild(widget);
    placement.appendChild(infoPanel);
    arcgisMap.appendChild(placement);

https://codepen.io/odoe/pen/YPqVQOp?editors=1001

 

In 4.34, you can set the `infoPanel.slot ="top-right"` and  `arcgisMap.appendChild(infoPanel)`

0 Kudos