How to use the @here/harp-mapview.CopyrightElementHandler.install function in @here/harp-mapview

function initializeMapView(id: string): MapView {
        const canvas = document.getElementById(id) as HTMLCanvasElement;
        const map = new MapView({
            canvas,
            theme: "resources/berlin_tilezen_base.json"
        });

        CopyrightElementHandler.install("copyrightNotice", map);

        // Center the camera on Manhattan, New York City.
        map.setCameraGeolocationAndZoom(new GeoCoordinates(40.6935, -74.009), 16.9, 6.3, 50);

        // Instantiate the default map controls, allowing the user to pan around freely.
        const mapControls = new MapControls(map);
        mapControls.maxTiltAngle = 50;

        // Add an UI.
        const ui = new MapControlsUI(mapControls);
        canvas.parentElement!.appendChild(ui.domElement);

        // Resize the mapView to maximum.
        map.resize(window.innerWidth, window.innerHeight);

        // React on resize events.

export function initializeMapView(id: string): MapView {
        const canvas = document.getElementById(id) as HTMLCanvasElement;

        const map = new MapView({
            canvas,
            theme: "resources/berlin_tilezen_base_globe.json"
        });

        // instantiate the default map controls, allowing the user to pan around freely.
        const controls = new MapControls(map);

        // Add an UI.
        const ui = new MapControlsUI(controls, { zoomLevel: "input", projectionSwitch: true });
        canvas.parentElement!.appendChild(ui.domElement);

        CopyrightElementHandler.install("copyrightNotice", map);

        // resize the mapView to maximum
        map.resize(window.innerWidth, window.innerHeight);

        // react on resize events
        window.addEventListener("resize", () => {
            map.resize(window.innerWidth, window.innerHeight);
        });

        return map;
    }

function initializeMapView(id: string): MapView {
        // snippet:vislib_hello_onethread_example_0.ts
        const canvas = document.getElementById(id) as HTMLCanvasElement;
        // end:vislib_hello_onethread_example_0.ts

        // snippet:vislib_hello_onethread_example_1.ts
        const sampleMapView = new MapView({
            canvas,
            theme: "resources/day.json"
        });
        // end:vislib_hello_onethread_example_1.ts

        CopyrightElementHandler.install("copyrightNotice")
            .attach(sampleMapView)
            .setDefaults([
                {
                    id: "openstreetmap.org",
                    label: "OpenStreetMap contributors",
                    link: "https://www.openstreetmap.org/copyright"
                }
            ]);

        // snippet:vislib_hello_onethread_example_2.ts
        // let the camera float over the map, looking straight down
        sampleMapView.camera.position.set(0, 0, 800);
        // center the camera somewhere around Berlin geo locations
        sampleMapView.geoCenter = new GeoCoordinates(52.518611, 13.376111, 0);

        // instantiate the default map controls, allowing the user to pan around freely.

function initMapView(
        id: string,
        gridPositionX: number,
        gridPositionY: number,
        theme: string,
        decoderUrl: string
    ): ViewControlPair {
        const canvas = document.getElementById(id) as HTMLCanvasElement;

        const mapView = new MapView({
            canvas,
            theme,
            decoderUrl
        });
        CopyrightElementHandler.install("copyrightNotice", mapView);

        // instantiate the default map controls, allowing the user to pan around freely.
        const mapControls = new MapControls(mapView);

        // Add an UI.
        if (gridPositionX === 1) {
            const ui = new MapControlsUI(mapControls);
            canvas.parentElement!.appendChild(ui.domElement);
        }

        // center the camera somewhere around Berlin geo locations
        const berlin = new GeoCoordinates(52.518611, 13.376111);
        mapView.lookAt(berlin, 1000);

        setupSyncViewsGrid(mapView, gridPositionX, gridPositionY);
        // react on resize events

this.m_mapViewState.distance,
                this.m_mapViewState.tilt,
                this.m_mapViewState.azimuth
            );

            this.m_datasource = new OmvDataSource({
                baseUrl: "https://xyz.api.here.com/tiles/herebase.02",
                apiFormat: APIFormat.XYZOMV,
                styleSetName: style || undefined,
                maxZoomLevel: 17,
                authenticationCode: accessToken,
                copyrightInfo: this.m_copyrights,
                decoder: new OmvTileDecoder()
            });

            this.m_copyrightHandler = CopyrightElementHandler.install(
                this.m_copyrightElem,
                this.m_mapView
            );

            this.m_mapView.addEventListener(
                MapViewEventNames.MovementFinished,
                this.onMovementFinished
            );

            this.m_mapView.addDataSource(this.m_datasource);
            this.m_mapView.addEventListener(MapViewEventNames.Render, this.onMapRender);

            this.emit("mapCreated");
        };

function initializeMapView(id: string): MapView {
        const canvas = document.getElementById(id) as HTMLCanvasElement;
        const themePromise: Promise = ThemeLoader.loadAsync(
            "resources/berlin_tilezen_base.json"
        );
        const map = new MapView({
            canvas,
            theme: themePromise.then(modifyTheme)
        });
        const NY = new GeoCoordinates(40.705, -74.01);
        map.lookAt(NY, 3000, 30);

        CopyrightElementHandler.install("copyrightNotice", map);

        const mapControls = new MapControls(map);
        const ui = new MapControlsUI(mapControls);
        canvas.parentElement!.appendChild(ui.domElement);

        map.resize(window.innerWidth, window.innerHeight);

        window.addEventListener("resize", () => {
            map.resize(window.innerWidth, window.innerHeight);
        });

        return map;
    }

function initializeMapView(): MapView {
        const canvas = document.getElementById("mapCanvas") as HTMLCanvasElement;
        const map = new MapView({
            canvas,
            theme: "resources/berlin_tilezen_base.json"
        });

        CopyrightElementHandler.install("copyrightNotice", map);

        const mapControls = new MapControls(map);
        mapControls.maxTiltAngle = 50;

        const moscow = new GeoCoordinates(55.7525631, 37.6234006);
        map.lookAt(moscow, 3500, 50, 300);
        map.zoomLevel = 16.1;

        const ui = new MapControlsUI(mapControls, { zoomLevel: "input", projectionSwitch: true });
        canvas.parentElement!.appendChild(ui.domElement);

        map.resize(window.innerWidth, window.innerHeight);

        window.addEventListener("resize", () => {
            map.resize(window.innerWidth, window.innerHeight);
        });

protected initialize(): MapView {
        const mapView = new MapView({
            canvas: this.canvas,
            theme: this.theme,
            decoderUrl: "decoder.bundle.js"
        });

        CopyrightElementHandler.install("copyrightNotice")
            .attach(mapView)
            .setDefaults([
                {
                    id: "here.com",
                    label: "HERE",
                    link: "https://legal.here.com/terms",
                    year: 2019
                }
            ]);

        const omvDataSource = new OmvDataSource({
            baseUrl: "https://xyz.api.here.com/tiles/herebase.02",
            apiFormat: APIFormat.XYZOMV,
            styleSetName: "tilezen",
            maxZoomLevel: 17,
            authenticationCode: "<%= access_token %>"

baseUrl: "https://xyz.api.here.com/tiles/osmbase/256/all",
            apiFormat: APIFormat.MapzenV2,
            createTileInfo: true,
            styleSetName: "tilezen",

            gatherFeatureIds: true,
            showMissingTechniques: true,
            tileFactory: new TileFactory(OmvDebugLabelsTile),
            maxZoomLevel: 17
        })
    };

    mapViews.view1.mapView.addDataSource(dataSources.omvDataSource1);
    mapViews.view2.mapView.addDataSource(dataSources.omvDataSource2);

    CopyrightElementHandler.install("copyrightNotice")
        .attach(mapViews.view1.mapView)
        .attach(mapViews.view2.mapView)
        .setDefaults([
            {
                id: "openstreetmap.org",
                label: "OpenStreetMap contributors",
                link: "https://www.openstreetmap.org/copyright"
            }
        ]);

    //filter all but one layer on one of the mapviews
    const filterBuilder = new OmvFeatureFilterDescriptionBuilder({
        processLayersDefault: true
    });

    filterBuilder.ignoreLayer("boundaries", OmvFilterString.StringMatch.Match);

function initializeMapView(id: string): MapView {
        const canvas = document.getElementById(id) as HTMLCanvasElement;

        const mapView = new MapView({
            canvas,
            theme: "resources/berlin_tilezen_base_globe.json",
            maxVisibleDataSourceTiles: 360,
            projection: sphereProjection
        });

        CopyrightElementHandler.install("copyrightNotice", mapView);

        mapView.resize(window.innerWidth, window.innerHeight);

        window.addEventListener("resize", () => {
            mapView.resize(window.innerWidth, window.innerHeight);
        });

        return mapView;
    }