How to use the @here/harp-mapview.MapViewEventNames.AfterRender function in @here/harp-mapview

// options.right = box.max.x;
            // options.top = box.max.y;
            // options.bottom = box.min.y;
            // options.near = box.min.z;
            // options.far = box.max.z;
            // console.log(box);

            if (shadowMapViewerCreated === false) {
                shadowMapViewerCreated = true;
                const lightShadowMapViewer = new ShadowMapViewer(light) as any;
                lightShadowMapViewer.position.x = 10;
                lightShadowMapViewer.position.y = 10;
                lightShadowMapViewer.size.width = 4096 / 16;
                lightShadowMapViewer.size.height = 4096 / 16;
                lightShadowMapViewer.update();
                map.addEventListener(MapViewEventNames.AfterRender, () => {
                    lightShadowMapViewer.render(map.renderer);
                });
            }
            Object.assign(light.shadow.camera, options);
            light.shadow.camera.updateProjectionMatrix();
        };

// Show plot with FPS, click in plot to cycle through other modes.
        stats.setMode(0); // 0: fps, 1: ms, 2: mb, 3+: custom

        stats.domElement.style.position = "absolute";
        stats.domElement.style.left = "0px";
        stats.domElement.style.top = "";
        stats.domElement.style.bottom = "0px";
        stats.domElement.style.zIndex = 10;

        document.body.appendChild(stats.domElement);

        sampleMapView.addEventListener(MapViewEventNames.Render, () => {
            stats.begin();
        });
        sampleMapView.addEventListener(MapViewEventNames.AfterRender, () => {
            stats.end();
        });
        // end:vislib_hello_animation_example_6.ts

        return sampleMapView;
    }

// end:vislib_performance_antialias_1.ts

    // 3. Create the GUI to allow fiddling with the antialiasing settings.
    // snippet:vislib_performance_antialias_2.ts
    createUIForAntialiasingSettings(viewWithNativeAntialiasing, viewWithoutNativeAntialising);
    // end:vislib_performance_antialias_2.ts

    // 4. Add stats widget to observe the impact of the antialiasing settings.
    // snippet:vislib_performance_antialias_3.ts
    const stats = new Stats();
    stats.domElement.id = "stats";
    document.body.appendChild(stats.domElement);
    viewWithNativeAntialiasing.mapView.addEventListener(MapViewEventNames.Render, stats.begin);
    viewWithoutNativeAntialising.mapView.addEventListener(MapViewEventNames.Render, stats.begin);
    viewWithNativeAntialiasing.mapView.addEventListener(MapViewEventNames.AfterRender, stats.end);
    viewWithoutNativeAntialising.mapView.addEventListener(MapViewEventNames.AfterRender, stats.end);
    // end:vislib_performance_antialias_3.ts

    /**
     * A pair of [[MapView]] and [[MapControls]] instances, simplifying the synchronization of the
     * different views when toggling the canvas between the native-antialias-enabled one and the
     * other.
     */
    interface ViewControlPair {
        /**
         * A [[MapView]] instance.
         */
        mapView: MapView;

        /**
         * A [[MapControls]] instance.
         */

* Here a GUI is also set up so as to fiddle with the tilt and distance from the page.
 */
export namespace CameraOrbitExample {
    // snippet:harp_gl_camera_orbit_example_0.ts
    const map = createBaseMap();
    // end:harp_gl_camera_orbit_example_0.ts

    // Be sure to see the buildings when starting the example: a zoom level does not translate into
    // the same distance depending on the viewport's height.
    const minDistanceForBuildings =
        Math.ceil(MapViewUtils.calculateDistanceToGroundFromZoomLevel(map, 16.0)) - 500;
    // snippet:harp_gl_camera_orbit_example_1.ts
    const options = { tilt: 25, distance: minDistanceForBuildings, globe: true };
    const dubai = new GeoCoordinates(25.19705, 55.27419);
    let heading = 0;
    map.addEventListener(MapViewEventNames.AfterRender, () => {
        map.lookAt(dubai, options.distance, options.tilt, (heading = (heading + 0.1) % 360));
        map.update();
        updateHTML();
    });
    // end:harp_gl_camera_orbit_example_1.ts

    const gui = new GUI({ width: 300 });
    gui.add(options, "tilt", 0, 80, 0.1);
    gui.add(options, "distance", 300, 60000, 1);
    gui.add(options, "globe").onChange(() => {
        map.projection = options.globe ? sphereProjection : mercatorProjection;
    });

    function createBaseMap(): MapView {
        document.body.innerHTML += getExampleHTML();

viewWithoutNativeAntialising.mapView.beginAnimation();
    // end:vislib_performance_antialias_1.ts

    // 3. Create the GUI to allow fiddling with the antialiasing settings.
    // snippet:vislib_performance_antialias_2.ts
    createUIForAntialiasingSettings(viewWithNativeAntialiasing, viewWithoutNativeAntialising);
    // end:vislib_performance_antialias_2.ts

    // 4. Add stats widget to observe the impact of the antialiasing settings.
    // snippet:vislib_performance_antialias_3.ts
    const stats = new Stats();
    stats.domElement.id = "stats";
    document.body.appendChild(stats.domElement);
    viewWithNativeAntialiasing.mapView.addEventListener(MapViewEventNames.Render, stats.begin);
    viewWithoutNativeAntialising.mapView.addEventListener(MapViewEventNames.Render, stats.begin);
    viewWithNativeAntialiasing.mapView.addEventListener(MapViewEventNames.AfterRender, stats.end);
    viewWithoutNativeAntialising.mapView.addEventListener(MapViewEventNames.AfterRender, stats.end);
    // end:vislib_performance_antialias_3.ts

    /**
     * A pair of [[MapView]] and [[MapControls]] instances, simplifying the synchronization of the
     * different views when toggling the canvas between the native-antialias-enabled one and the
     * other.
     */
    interface ViewControlPair {
        /**
         * A [[MapView]] instance.
         */
        mapView: MapView;

        /**
         * A [[MapControls]] instance.

const renderCallback = () => {
                if (isCancelled !== undefined && isCancelled()) {
                    mapView.endAnimation();
                    mapView.removeEventListener(MapViewEventNames.AfterRender, renderCallback);
                    resolve(undefined);
                }

                if (waitForFrameLoaded && MapViewUtils.mapViewIsLoading(mapViewApp.mapView)) {
                    mapViewApp.mapView.update();
                } else if (currentFrameNumber >= locations.length) {
                    mapView.removeEventListener(MapViewEventNames.AfterRender, renderCallback);

                    const totalTime = PerformanceTimer.now() - startTime;
                    newStats.appResults.set("flyoverFPS", (1000 * currentFrameNumber) / totalTime);
                    newStats.appResults.set("flyoverSeconds", totalTime / 1000);
                    newStats.appResults.set("flyoverFrames", currentFrameNumber);

                    if (currentFrameNumber > 1) {
                        const frameEntries = newStats.frameEvents.frameEntries;

                        // The first frame time is the wrong one, it contains the time stamp from
                        // the last frame of the previous benchmark run. To get proper statistics,
                        // we duplicate the value of the seconds frame.
                        const fullFrameTime = frameEntries.get("render.fullFrameTime")!;
                        fullFrameTime.buffer[0] = fullFrameTime.buffer[1];

                        // Same for the FPS of that first frame.

return new Promise((resolve, reject) => {
            const renderCallback = (event: RenderEvent) => {
                mapView.removeEventListener(MapViewEventNames.AfterRender, renderCallback);
                const renderedFrames = mapView.frameNumber - currentFrame;
                let lastFrameStats: SimpleFrameStatistics | undefined;

                if (returnLastFrameStats !== StatisticsMode.None) {
                    lastFrameStats = PerformanceStatistics.instance.getAsSimpleFrameStatistics(
                        returnLastFrameStats === StatisticsMode.LastFrame
                    );
                }

                resolve({ renderedFrames, lastFrameStats });
            };

            mapView.addEventListener(MapViewEventNames.AfterRender, renderCallback);
            mapView.update();
        });
    }

private resetNorth() {
        const currentTime = performance.now();
        const animationTime = (currentTime - this.m_resetNorthStartTime) / 1000;
        if (this.inertiaEnabled) {
            if (!this.m_resetNorthIsAnimated) {
                this.m_resetNorthIsAnimated = true;
                this.mapView.addEventListener(MapViewEventNames.AfterRender, this.resetNorth);
            }
            const resetNorthFinished = animationTime > this.m_resetNorthAnimationDuration;
            if (resetNorthFinished) {
                if (this.m_needsRenderLastFrame) {
                    this.m_needsRenderLastFrame = false;
                    this.stopResetNorth();
                }
            } else {
                this.m_needsRenderLastFrame = true;
            }
        }
        this.m_lastAzimuth = this.m_currentAzimuth;
        this.m_currentAzimuth = this.inertiaEnabled
            ? this.easeOutCubic(
                  this.m_startAzimuth,
                  0,

private stopResetNorth() {
        this.mapView.removeEventListener(MapViewEventNames.AfterRender, this.resetNorth);
        this.m_resetNorthIsAnimated = false;
    }