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

viewWithNativeAntialiasing.mapView.canvas.style.display = "none";
    viewWithNativeAntialiasing.mapView.endAnimation();
    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;

tiltButton.innerText = "3D";
        tiltButton.id = "tiltButtonUi";

        // Optional zoom level displaying
        if (options.zoomLevel === "show") {
            const div = document.createElement("div");
            controls.mapView.addEventListener(
                MapViewEventNames.Render,
                this.m_onMapViewRenderEvent
            );
            this.m_zoomLevelElement = div;
        } else if (options.zoomLevel === "input") {
            const input = document.createElement("input");
            input.type = "number";
            controls.mapView.addEventListener(
                MapViewEventNames.Render,
                this.m_onMapViewRenderEvent
            );

            const updateZoom = (event: KeyboardEvent | FocusEvent) => {
                controls.setZoomLevel(parseFloat(input.value));
                event.preventDefault();
            };

            input.addEventListener("blur", updateZoom);
            input.addEventListener("keypress", event => {
                if (event.key === "Enter") {
                    updateZoom(event);
                }
            });
            window.addEventListener("click", this.m_onWindowClick);
            this.m_zoomLevelElement = input;

});
                }
            } else if (event.ctrlKey) {
                // Show usage of the [[ElevationProvider.getHeight]] method.
                const geoCoord = map.getGeoCoordinatesAt(event.pageX, event.pageY);
                if (geoCoord !== null) {
                    const height = sceneElevationProvider.getHeight(geoCoord);
                    if (height === undefined) {
                        return;
                    }
                    geoCoord.altitude = height;
                    const posVector = map.projection.projectPoint(geoCoord, new THREE.Vector3());
                    const cube = createPinkCube();
                    map.scene.add(cube);
                    map.update();
                    map.addEventListener(MapViewEventNames.Render, () => {
                        cube.position.copy(posVector).sub(map.worldCenter);
                    });
                }
            }
        });

);
            trackball.staticMoving = true;
            trackball.rotateSpeed = 3.0;
            trackball.zoomSpeed = 4.0;
            trackball.panSpeed = 2.0;

            trackball.addEventListener("start", () => {
                this.mapView.beginAnimation();
            });

            trackball.addEventListener("end", () => {
                this.mapView.endAnimation();
            });

            // Update the debug controls.
            this.mapView.addEventListener(MapViewEventNames.Render, () => {
                trackball.update();
                this.helpers.forEach(helper => helper.update());
            });

            window.focus();
            window.addEventListener("resize", () => {
                const { width, height } = this.mapView.canvas;
                pointOfView.aspect = width / height;
                pointOfView.updateProjectionMatrix();
                this.mapView.update();
            });

            window.addEventListener("keydown", event => {
                switch (event.code) {
                    case "KeyT":
                        transformControls.setMode("translate");

for (const pick of pickResults) {
                if (pick.point instanceof THREE.Vector3) {
                    worldPoint.copy(pick.point);
                    // Points returned from the intersectMapObjects are in local space, hence we
                    // transform to actual world space.
                    worldPoint.add(map.worldCenter);
                    break;
                }
            }
            // snippet:harp_gl_threejs_raycast_1.ts

            const cube = createPinkCube();
            map.scene.add(cube);

            // Add a callback to execute before the items are rendered.
            map.addEventListener(MapViewEventNames.Render, () => {
                // Set the cube position relative to the world center. Note, we don't subtract the
                // [[worldCenter]] from the worldMousePosition, because we need to keep the cubes
                // world position untouched.
                cube.position.copy(worldPoint).sub(map.worldCenter);
            });

            // Force the scene to be rerendered once the cube is added to the scene.
            map.update();
        });

viewWithNativeAntialiasing.mapView.endAnimation();
    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;

        /**

"rotationAnimation"
        );

        const updateHandler = () => {
            if (rotationAnimation.isRunning) {
                rotationAnimation.update();
            }
        };

        // Do not start the animation before everything is loaded:
        setTimeout(() => {
            rotationAnimation.start();
        }, 1000);

        // Update the animation every time the map is rendered:
        sampleMapView.addEventListener(MapViewEventNames.Render, updateHandler);

        MapControls.create(sampleMapView);
        // end:vislib_hello_animation_example_2.ts

        // snippet:vislib_hello_animation_example_3.ts
        // Resize the mapView to maximum
        sampleMapView.resize(window.innerWidth, window.innerHeight);

        // React on resize events
        window.addEventListener("resize", () => {
            sampleMapView.resize(window.innerWidth, window.innerHeight);
        });
        // end:vislib_hello_animation_example_3.ts

        // snippet:vislib_hello_animation_example_6.ts
        const stats = new Stats();

this.rebuildMap = () => {
            if (this.m_canvasElem === null || this.m_copyrightElem === null) {
                return;
            }

            if (this.m_datasource !== null && this.m_mapView !== null) {
                this.m_mapView.removeDataSource(this.m_datasource);
                this.m_datasource = null;
            }

            if (this.m_mapView !== null) {
                this.m_mapView.removeEventListener(MapViewEventNames.Render, this.onMapRender);
                this.m_mapView.removeEventListener(
                    MapViewEventNames.MovementFinished,
                    this.onMovementFinished
                );

                this.m_mapView.dispose();
                this.m_mapView = null;
            }

            if (this.m_controls !== null) {
                this.m_controls.dispose();
                this.m_controls = null;
            }

            if (this.m_copyrightHandler !== null) {
                this.m_copyrightHandler.destroy();

dispose() {
        if (this.m_zoomLevelElement !== null && this.m_zoomLevelElement.tagName === "INPUT") {
            window.removeEventListener("click", this.m_onWindowClick);
        }

        this.controls.mapView.removeEventListener(
            MapViewEventNames.Render,
            this.m_onMapViewRenderEvent
        );

        this.domElement.remove();
    }

const updateListener = () => {
            const time = Date.now();
            let t = (time - startTime) / 1000;

            if (t >= 1) {
                t = 1;
                mapView.endAnimation();
                mapView.removeEventListener(MapViewEventNames.Render, updateListener);
            }
            mapView.camera.position.copy(curve.getPoint(t));
            const rotation = startQuaternion.clone().slerp(targetQuaternion, t);
            mapView.camera.quaternion.copy(rotation);
            mapView.camera.updateMatrixWorld(true);
        };