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.) Provide the link top the mapviewer boot.js file. This is needed to change some config params as well as launching an app from params

        <script src="https://geoviewer.sachsen.de/mapviewer/resources/jsregistry/root/apprt-boot/latest/boot.js">

        Also define the div element where the app should be placed
        


    

Use the apprt framework to lauch the app from param:

        //3.) Optionally: Define some params for local mapviewer development
        //For all other use-case (like developing an integration scenario) nothing needs to be changed here
        //START - OPTIONAL SETTING FOR LOCAL MAPVIEWER DEVELOPMENT ONLY
        let configLocation = "builderapps";
        let isLocalTestEnvironment = "false";
        let proxyrules = [];
        let proxyUrl = "//geoviewer.sachsen.de/mapviewer/proxy";
        "www.forsten.sachsen.de,forsten.sachsen.de,pegelonline.wsv.de,geodienstetest.sachsen.de,geodienste.sachsen.de,www.smul.sachsen.de,smul.sachsen.de,kosm.geoinformation.htw-dresden.de".split(/\s*,\s*/).forEach(function(rule) {
            var rule = rule.split(/\s*\|\s*/);
            var origin = rule[0];
            if (!origin || origin.startsWith("@")) {
                return;
            }
            var url = rule[1] || proxyUrl;
            proxyrules.push({
                origin: origin,
                proxyUrl: url
            });
        });
        $apprt.changeConfig({
            ct: {
                amdPackages: ["apprt@^4.11.1"],
                ensureLangParameter: false,
                integrationAPIConfig: {
                     //Defines the EventTypeName to which the map application should listen.
                     //Ensure that your custom-application also use the same EventTypeName for your custom eventLister
                     eventName: "customEventTypeForDIVIntegration",
                     //Special case for the "integrationApiReady" event and if more than one map application are used!
                     //Target identifier will be returned by the "integrationApiReady" event, so the concrete mapviewer application state is present
                     target: "customTarget"
                }
            },
            apprt: {
                request: {
                    trustedServers: ["https://geoviewer.sachsen.de/mapviewer"],
                    proxyUrl: proxyUrl,
                    proxyRules: proxyrules
                }
            }
        });
        if (isLocalTestEnvironment === "true") {
            $apprt.changeConfig({
                packages: [
                    // add local apps directory as amd package
                    {name: "localapps", location: "//geoviewer.sachsen.de/mapviewer/js/apps/"},
                    // add local bundles directory as amd package
                    {name: "localbundles", location: "//geoviewer.sachsen.de/mapviewer/resources/jsregistry/root"}
                ]
            });
            configLocation = "localapps";
        }
        //END - OPTIONAL SETTING FOR LOCAL MAPVIEWER DEVELOPMENT ONLY
        //4.) Using  provided apprt runtime (injeced via the boot.js script), the mapviewer launcher can be used to start an mapviewer application
        /**
         * @description
         * This function starts a mapviewer application
         * @property {configlocation} string    Usually defined as "builderapps".
         * @property {param} string    The param handle by startApp function. Usually defined as "app".
         * @property {app=} string    The appId (mapviewer profile) which should be started.
         * @property {domId=} string    The domId where the mapviewer should be placed.
         */
        $apprt.startApp({
            configLocation: configLocation,
            param: "app",
            app: "egov_demo",
            domId: "mapIntegrationElement"
        //callback for a successfull app startup
        }, function (framework) {
            console.log("App will be started")
        //callback for an error during app startup
        }, function (error) {
            console.error("Error in app startup")
        });
        

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

    //5.) add an eventListener implementation for "message"-type
    //To keep it simple, we only show the "zoomTo" function
    //"myResponseEvent" is the name of the event you set in your client response, you see at step 6)
    window.addEventListener(
        "myResponseEvent",
        (evt) => {
            const functionName = evt.data.functionName
            if (functionName === "zoomTo") {
                console.log("zoomTo was called")
            } else {
                console.log("Other function was called")
            }
        },
        false
    );
        

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

    //6.) implement function to call "postMessage" function
    //PLEASE NOTE THAT WE ACCESS THE GLOBAL window OBJECT LATER ON

     const postEvent = (functionName, data, eventName) => {
        const mapIntegrationElement = document.getElementById(target);
        if (mapIntegrationElement) {
            return mapIntegrationElement.postMessage({functionName: functionName, detail: data, eventName: eventName, target: "", identifier: "my_custom_identifier"}, "*")
        }
    }

    //7.) define example params
    const parameter = {
        geometry: {
            type: "point",
            x: 405647.97489873506,
            y: 5662584.6720447205,
            spatialReference: {
                wkid: 25833
            }
        },
        scale: 50000
    }
    //8.) Define function (implemented in 6.)) and pass params (defined in 7.))
    let zoom = () => {
        postEvent("zoomTo", parameter, "customEventTypeForDIVIntegration" )
    }