Arcgis mapview issue with anywidget: [esri.views.MapView] #container element not found

[icduck]

Hi All,
I am not sure if anyone get below issues or have any work around for this issue with ArcGIS MapView.
I am using Anywidget to make a super simple esri map widget for use in the solara web app. Then, I got into the problem: [esri.views.MapView] #container element with id 'viewDiv' not found because ; It's because the map view gets loaded first, then it cannot find the container 'viewDiv'.

anyone has any idea how to solve this? I tried to use DOMContentLoaded to wait for the HTML to be loaded, still no luck.

Thank you.
Simplified code as below

import anywidget
import solara

class fake_widget(anywidget.AnyWidget): 
    # Widget front-end JavaScript code
    _esm = """
        import Map from "https://js.arcgis.com/4.27/@arcgis/core/Map.js";
        import MapView from "https://js.arcgis.com/4.27/@arcgis/core/views/MapView.js";
        export function render(view) {
            //map holder
            const container = document.createElement("div");
            container.setAttribute("id","viewDiv")
            var map = new Map({
                basemap: "topo-vector" 
            });
            var view_map = new MapView({
                container:"viewDiv",
                map: map
            });
            view.el.appendChild(container);
        }
    """
@solara.component
def Page():
    with solara.Column():
        fake_widget.element()`

**error:  [esri.views.MapView] #container element with id 'viewDiv' not found**

[iisakkirotko]

Hi @icduck,

If you put a timeout on drawing the map, so that the container is added in before the map is appended to it, the map loads in. However after that you run into some other weirdness, with some FBO element resizing constantly, and your map flying beyond the screen quite rapidly. I'm not sure why this happen, perhaps you have some idea.

So I did something like

function makeMap(){
    var map = new Map({
        basemap: "topo-vector" 
    });
    var view_map = new MapView({
        container:"viewDiv",
        map: map
    });
}
view.el.appendChild(container);
setTimeout(makeMap, 100);

[icduck]

Hi @iisakkirotko,

Thanks for the hint, kudos!
The timeout is a very good work around. I managed to fix FBO by adding width/height for the container with a dynamic widget size change, Just put the code here for any one need a quick reference in future.

export function render(view) {

    //header
    let getWidth    = ()=>view.model.get("width");
    let getHeight   = ()=>view.model.get("height");
    const container = document.createElement("div");
    container.setAttribute("id","viewDiv")
    container.style.width = getWidth();
    container.style.height = getHeight();
    view.el.appendChild(container);


    function mMap1(){
        const map = new Map({
        basemap: "topo-vector"
        });

        const view = new MapView({
        map: map,
        center: [-118.805, 34.027], // Longitude, latitude
        zoom: 13, // Zoom level
        container: "viewDiv" // Div element
        });

    }

    //Fixed by @iisakkirotko
    //thread: https://github.com/widgetti/solara/discussions/271
    setTimeout(()=>{
        const map = new Map({
            basemap: "topo-vector"
            });
    
        const view = new MapView({
            map: map,
            center: [-118.805, 34.027], // Longitude, latitude
            zoom: 13, // Zoom level
            container: "viewDiv" // Div element
        });
        //TODO: Port the existing map widget

    }, 100);

    view.model.on("change:width", () => {
        container.style.width = getWidth();
    }); 
    view.model.on("change:height", () => {
        container.style.height = getHeight();

    });
}

[icduck]

Note for quick reference:

with solara.Column(style={"height": "100%","width":"100%"}):
Map.element()

This could help to dynamically change the map size following parent widget