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

// end:datasource_geojson_picking1.ts

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

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

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

        // snippet:datasource_geojson_picking2.ts
        canvas.addEventListener("mousedown", event => {
            handlePick(mapView, event.pageX, event.pageY);
        });
        // end:datasource_geojson_picking2.ts

        initializeMapViewDataSource(mapView);
    }

});

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

        MapControls.create(sampleMapView);
        sampleMapView.resize(window.innerWidth, window.innerHeight);

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

        // Create a [[GeoJsonDataProvider]] from a GeoJson URL and plug it into an OmvDataSource.
        const geoJsonDataProvider = new GeoJsonDataProvider(
            "points",
            new URL("resources/points.json", window.location.href)
        );
        const geoJsonDataSource = new OmvDataSource({
            dataProvider: geoJsonDataProvider,
            name: "geojson",
            styleSetName: "geojson"
        });

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();

        // Show plot with FPS, click in plot to cycle through other modes.

});

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

        MapControls.create(sampleMapView);
        sampleMapView.resize(window.innerWidth, window.innerHeight);

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

        initializeMapViewDataSource(sampleMapView);

        return sampleMapView;
    }
    // end:datasource_geojson_load1.ts

});

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

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

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

        const baseMapDataSource = new OmvDataSource({
            baseUrl: "https://xyz.api.here.com/tiles/osmbase/256/all",
            apiFormat: APIFormat.MapzenV2,
            styleSetName: "tilezen",
            maxZoomLevel: 17
        });
        mapView.addDataSource(baseMapDataSource);
        // end:geojson_property_styling1.ts

        return mapView;

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

        const omvDataSource = new OmvDataSource({
            url: "https://xyz.api.here.com/tiles/osmbase/512/all/{z}/{x}/{y}.mvt",
            urlParams: {
                access_token: accessToken
            },
            styleSetName: "tilezen",
            maxZoomLevel: 17,
            copyrightInfo
        });

        const mapControls = MapControls.create(map);

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

        map.addDataSource(omvDataSource);
    }

const canvasOverlay = document.getElementById("mapOverlay") as HTMLCanvasElement;

        const mapView = new MapView({
            canvas,
            decoderUrl: "./decoder.bundle.js",
            decoderCount,
            theme: theme.resource,
            enableStatistics: true,
            enablePhasedLoading: phasedLoading === true,
            collisionDebugCanvas: canvasOverlay,
            powerPreference
        });

        mapView.lookAt(new GeoCoordinates(52.518611, 13.376111), 8000, 0, 0);

        const mapControls = MapControls.create(mapView);

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

        window.addEventListener("resize", () => {
            if ((mapView.canvas.parentNode! as HTMLDivElement).style.position !== "absolute") {
                mapView.resize(window.innerWidth, window.innerHeight);
            }
        });

        const glInfo = getVendorFomContext(mapView.renderer.context);
        PerformanceStatistics.instance.configs.set("gl.vendor", glInfo.vendor);
        PerformanceStatistics.instance.configs.set("gl.renderer", glInfo.renderer);

        return {
            mapView,
            mapControls,