How to use @here/harp-map-controls - 10 common examples

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

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

        mapView.addDataSource(baseMapDataSource);

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

        return { mapView, mapControls };
    }

tilt: 50,
            heading: -20,
            zoomLevel: 16.1
        });
        // end:harp_gl_hello_world_example_1.ts

        CopyrightElementHandler.install("copyrightNotice", map);

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

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

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

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

        addOmvDataSource(map);

        return map;
    }

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.
        window.addEventListener("resize", () => {
            map.resize(window.innerWidth, window.innerHeight);
        });
        const sceneElevationProvider = new SceneElevationProvider(map);
        map.setElevationSource(
            new DummyElevationSource(),
            new DummyElevationRangeSource(),
            sceneElevationProvider
        );