To start the mapviewer instance, define domNode, define minimal height/width for domNode and load boot.js script

        1.) mapviewer div element needs an initial width and height definition
        

         2.) Create an iframe referencing to a mapviewer instance
        

            
        

    

To receive results and responses from the integrationAPI, define an eventListener:

    //2.) add an eventListener implementation for "message"-type
    //To keep it simple, we only show the "zoomTo" function
    window.addEventListener(
        "message",
        (evt) => {
            const functionName = evt.data.functionName
            if (functionName === "zoomTo") {
                console.log("ZoomTo was called")
                console.log("ZoomTo response: " + JSON.stringify(evt.data.detail))
            } else {
                console.log("Other function was called")
            }
        },
        false
    );
        

To use the integrationAPI, define function to call it and define params:

    //3.) implement function to call "postMessage" function
    //PLEASE NOTE THAT YOU NEED ASSIGN THE "contentWindow" OBJECT TO OUR VARIABLE TO ACCESS THE OUTER WINDOW
    function postEvent(functionName, detail) {
        const integrationElement = document.getElementById('mapIntegrationElement').contentWindow;
        if(integrationElement){
            integrationElement.postMessage({functionName: functionName, detail: detail, target: "", eventName: "message", identifier: "my_custom_identifier"}, "*")
        }
    }
    //4.) define example params
    const parameter = {
        geometry: {
            type: "point",
            x: 405647,97489873506,
            y: 5662584,6720447205,
            spatialReference: {
                wkid: 25833
            }
        },
        scale: 50000
    }
    //5.) Define function (implemented in 6.)) and pass params (defined in 7.))
    let zoom = () => {
        postEvent("zoomTo", parameter )
    }