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

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

function initializeBaseMap(id: string): MapView {
        // snippet:geojson_property_styling1.ts
        const canvas = document.getElementById(id) as HTMLCanvasElement;
        const mapView = new MapView({
            canvas,
            theme: "resources/reducedNight.json"
        });

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

        mapView.camera.position.set(2000000, 3500000, 6000000); // Europe.
        mapView.geoCenter = new GeoCoordinates(16, -4, 0);

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

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

        sampleMapView.camera.position.set(2000000, 3500000, 6000000); // Europe.
        sampleMapView.geoCenter = new GeoCoordinates(16, -4, 0);

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

        const sampleMapView = new MapView({
            canvas,
            theme: theme !== undefined ? theme : defaultTheme,
            decoderUrl
        });
        sampleMapView.camera.position.set(0, 0, 800);

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

        //Set the cameras height according to the given zoom level.
        sampleMapView.camera.position.setZ(
            MapViewUtils.calculateDistanceToGroundFromZoomLevel(sampleMapView, defaultZoomLevel)
        );

        // center the camera somewhere around Berlin geo locations
        sampleMapView.geoCenter = new GeoCoordinates(52.518611, 13.376111, 0);

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

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

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

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

        // let the camera float over the map, looking straight down
        sampleMapView.camera.position.set(0, 0, 800);

this.m_copyrightHandler = null;
            }

            this.emit("mapRemoved");

            const style = settings.get("editorCurrentStyle");

            let theme;
            try {
                const src = textEditor.getValue();
                theme = JSON.parse(src) as Theme;
            } catch (err) {
                logger.error(err);
            }

            this.m_mapView = new MapView({
                canvas: this.m_canvasElem,
                decoderUrl: "decoder.bundle.js",
                theme
            });

            this.m_controls = new MapControls(this.m_mapView);
            this.m_controls.enabled = true;

            this.m_mapView.lookAt(
                this.m_mapViewState.target,
                this.m_mapViewState.distance,
                this.m_mapViewState.tilt,
                this.m_mapViewState.azimuth
            );

            this.m_datasource = new OmvDataSource({

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

        const map = new MapView({
            canvas,
            theme: {
                extends: "resources/berlin_tilezen_base_globe.json",
                definitions: {
                    northPoleColor: {
                        type: "color",
                        value: "#99cefe"
                    },
                    southPoleColor: {
                        type: "color",
                        value: "#f8fbfb"
                    }
                }
            },
            projection: sphereProjection
        });

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

        const canvas = document.getElementById("mapCanvas") as HTMLCanvasElement;
        const mapView = new MapView({
            canvas,
            projection: sphereProjection,
            theme,
            target: new GeoCoordinates(10, -270),
            zoomLevel: 3.5
        });

        const controls = new MapControls(mapView);
        const ui = new MapControlsUI(controls, { projectionSwitch: true });
        canvas.parentElement!.appendChild(ui.domElement);

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

        const baseMap = new OmvDataSource({
            name: "basemap",
            baseUrl: "https://xyz.api.here.com/tiles/herebase.02",

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;
    }