How to use the @here/harp-map-controls.MapControls function in @here/harp-map-controls

definitions: {
                    northPoleColor: {
                        type: "color",
                        value: "#11304b"
                    },
                    southPoleColor: {
                        type: "color",
                        value: "#ffffff"
                    }
                }
            },
            projection: sphereProjection
        });

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

        const ui = new MapControlsUI(mapControls);
        map.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;
    }

{
                    id: "openstreetmap.org",
                    label: "OpenStreetMap contributors",
                    link: "https://www.openstreetmap.org/copyright"
                }
            ]);
        // Add Omv data source.
        mapView.addDataSource(omvDataSource);

        // Position the camera over the map.
        mapView.camera.position.set(0, 0, 800);
        // Center the camera on Berlin.
        mapView.geoCenter = new GeoCoordinates(52.518611, 13.376111, 0);

        // Instantiate the default map controls.
        const mapControls = new MapControls(mapView);

        // Resize the mapView to fill the page (an iframe in this case).
        mapView.resize(window.innerWidth, window.innerHeight);

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

        return { mapView, mapControls };
    }

link: "https://www.openstreetmap.org/copyright"
                }
            ]);

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

        // Let the camera look down at 45 degrees:
        sampleMapView.camera.rotateX(MathUtils.degToRad(45));

        // Instantiate the default map controls, allowing the user to pan around freely, even while
        // the animation is running.
        const controls = new MapControls(sampleMapView);

        // Create a simple rotation to animate the scene:
        const rotationAnimation = new CameraRotationAnimation(
            sampleMapView,
            controls,
            {
                repeat: Infinity,
                duration: 30000
            },
            "rotationAnimation"
        );

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

definitions: {
                    northPoleColor: {
                        type: "color",
                        value: "#99cefe"
                    },
                    southPoleColor: {
                        type: "color",
                        value: "#f8fbfb"
                    }
                }
            },
            projection: sphereProjection
        });

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

        const ui = new MapControlsUI(mapControls);
        map.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 initializeBaseMap(id: string, theme: Theme): MapView {
        const canvas = document.getElementById(id) as HTMLCanvasElement;
        const mapView = new MapView({
            canvas,
            theme
        });

        mapView.lookAt(new GeoCoordinates(42, 14), 2000000, 40, -70);

        const controls = new MapControls(mapView);

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

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

        const baseMapDataSource = new OmvDataSource({
            baseUrl: "https://xyz.api.here.com/tiles/herebase.02",
            apiFormat: APIFormat.XYZOMV,
            styleSetName: "tilezen",
            maxZoomLevel: 17,
            authenticationCode: accessToken,
            copyrightInfo

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
        window.addEventListener("resize", () => {
            setupSyncViewsGrid(mapView, gridPositionX, gridPositionY);
        });

when: ["==", ["get", "kind"], "south_pole"],
                            technique: "fill",
                            attr: {
                                color: ["ref", "southPoleColor"]
                            },
                            renderOrder: 5
                        }
                    ]
                }
            },
            target: new GeoCoordinates(40, 15),
            zoomLevel: 3.2
        });
        mapView.renderLabels = false;

        const controls = new MapControls(mapView);
        controls.maxTiltAngle = 50;
        controls.maxZoomLevel = 6;

        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",
            apiFormat: APIFormat.XYZOMV,
            styleSetName: "tilezen",
            maxZoomLevel: 17,
            authenticationCode: accessToken,
            copyrightInfo

};

        const copyrights: CopyrightInfo[] = [hereCopyrightInfo];

        const omvDataSource = new OmvDataSource({
            baseUrl: "https://xyz.api.here.com/tiles/herebase.02",
            apiFormat: APIFormat.XYZOMV,
            styleSetName: "tilezen",
            maxZoomLevel: 17,
            authenticationCode: accessToken,
            copyrightInfo: copyrights
        });

        map.addDataSource(omvDataSource);

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

        map.setCameraGeolocationAndZoom(new GeoCoordinates(40.6935, -74.009), 4);
    }

function main() {
        const map = initializeMapView("mapCanvas");

        const omvDataSource = new OmvDataSource({
            baseUrl: "https://xyz.api.here.com/tiles/herebase.02",
            apiFormat: APIFormat.XYZOMV,
            styleSetName: "tilezen",
            maxZoomLevel: 17,
            authenticationCode: accessToken,
            copyrightInfo
        });

        map.addDataSource(omvDataSource);

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