How to use @here/harp-geoutils - 10 common examples

CopyrightElementHandler.install("copyrightNotice")
            .attach(mapView)
            .setDefaults([
                {
                    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 };
    }

function main() {
        const message = document.createElement("div");
        message.innerHTML = `
Press 'R' to rotate<br>
Press 'T' to translate<br>
Press 'V' to change the scene point of view<br>`;

        message.style.position = "absolute";
        message.style.cssFloat = "right";
        message.style.top = "10px";
        message.style.right = "10px";
        document.body.appendChild(message);

        const canvas = document.getElementById("mapCanvas") as HTMLCanvasElement;
        const geoCenter = new GeoCoordinates(52.518611, 13.376111);

        // snippet:harp_gl_freecamera_app_0.ts
        const app = new FreeCameraApp({
            decoderUrl: "./decoder.bundle.js",
            canvas,
            theme: "./resources/berlin_tilezen_base.json",
            geoCenter
        });

        app.start();
        // end:harp_gl_freecamera_app_0.ts
    }

* ```
 *
 * Here a GUI is also set up so as to fiddle with the tilt and distance from the page.
 */
export namespace CameraOrbitExample {
    // snippet:harp_gl_camera_orbit_example_0.ts
    const map = createBaseMap();
    // end:harp_gl_camera_orbit_example_0.ts

    // Be sure to see the buildings when starting the example: a zoom level does not translate into
    // the same distance depending on the viewport's height.
    const minDistanceForBuildings =
        Math.ceil(MapViewUtils.calculateDistanceToGroundFromZoomLevel(map, 16.0)) - 500;
    // snippet:harp_gl_camera_orbit_example_1.ts
    const options = { tilt: 25, distance: minDistanceForBuildings, globe: true };
    const dubai = new GeoCoordinates(25.19705, 55.27419);
    let heading = 0;
    map.addEventListener(MapViewEventNames.AfterRender, () => {
        map.lookAt(dubai, options.distance, options.tilt, (heading = (heading + 0.1) % 360));
        map.update();
        updateHTML();
    });
    // end:harp_gl_camera_orbit_example_1.ts

    const gui = new GUI({ width: 300 });
    gui.add(options, "tilt", 0, 80, 0.1);
    gui.add(options, "distance", 300, 60000, 1);
    gui.add(options, "globe").onChange(() => {
        map.projection = options.globe ? sphereProjection : mercatorProjection;
    });

    function createBaseMap(): 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);

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

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

        initializeMapViewDataSource(sampleMapView);

        return sampleMapView;
    }
    // end:datasource_style1.ts

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

        // snippet:harp_gl_hello_world_example_1.ts
        // Look at New York.
        const NY = new GeoCoordinates(40.707, -74.01);
        const map = new MapView({
            canvas,
            theme: "resources/berlin_tilezen_base.json",
            target: NY,
            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;

});

    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);
    // center the camera somewhere around Berlin geo locations
    sampleMapView.geoCenter = new GeoCoordinates(52.51622, 13.37036, 0);

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

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

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

    return sampleMapView;
}

const REGION_LIST = (geojson.features as Feature[])
        .filter(feature => {
            return feature.properties !== undefined && feature.properties.name !== undefined;
        })
        .map(feature => feature.properties.name as string);
    let askedName: string = "";

    // This will dismiss the picking and the style changes when the correct region is clicked, so
    // that the user cannot miss it in case he clicked on another one immediately after.
    let discardPick: boolean = false;

    // snippet:harp_gl_initmapview.ts
    const mapView = new MapView({
        canvas: document.getElementById("mapCanvas") as HTMLCanvasElement,
        theme: "resources/berlin_tilezen_night_reduced.json",
        target: new GeoCoordinates(42.2, 12.5),
        zoomLevel: 5.9
    });
    CopyrightElementHandler.install("copyrightNotice", mapView);
    mapView.resize(window.innerWidth, window.innerHeight);
    window.addEventListener("resize", () => {
        mapView.resize(window.innerWidth, window.innerHeight);
    });
    mapView.canvas.addEventListener("contextmenu", e => e.preventDefault());
    const baseMap = new OmvDataSource({
        baseUrl: "https://xyz.api.here.com/tiles/herebase.02",
        apiFormat: APIFormat.XYZOMV,
        styleSetName: "tilezen",
        maxZoomLevel: 17,
        authenticationCode: accessToken,
        copyrightInfo
    });

private evaluatePlanarProj(camera: THREE.Camera, projection: Projection): ViewRanges {
        assert(projection.type !== ProjectionType.Spherical);
        const clipPlanes = { ...this.minimumViewRange };
        const cameraTilt = this.getCameraTiltAngle(camera, projection);
        const lookAtDist = this.getCameraLookAtDistance(camera, projection);
        // Generally near/far planes are set to keep look at distance, then
        // margins are applied. Here margins (min/max elevations) are meant to be
        // defined as distance along the ground normal vector thus during camera
        // tilt they need to be projected on the eye vector:
        // actualMargin = margin / groundNormal.dot(eyeVec)
        // Assuming that tilt angle defined relative to actual ground normal, we have:
        let cameraEyeDotGround = Math.cos(cameraTilt);
        cameraEyeDotGround = cameraEyeDotGround === 0 ? epsilon : cameraEyeDotGround;
        clipPlanes.near = lookAtDist - this.maxElevation / cameraEyeDotGround;
        clipPlanes.far = lookAtDist - this.minElevation / cameraEyeDotGround;

        // Correct cliping planse distance for the top/bottom frustum planes (edges).
        // If we deal with perspective camera type, this step would not be required

// returns box with altitude min/max equal to zero) will be propagated as
                // min and max elevation, these tiles most probably contains features that
                // lays directly on the ground surface.
                if (useElevationRangeSource) {
                    const range = elevationRangeSource!.getElevationRange(childTileKey);
                    geoBox.southWest.altitude = range.minElevation;
                    geoBox.northEast.altitude = range.maxElevation;
                    calculationFinal =
                        calculationFinal &&
                        range.calculationStatus === CalculationStatus.FinalPrecise;
                }

                let subTileArea = 0;

                const obbIntersections: boolean =
                    this.mapView.projection.type === ProjectionType.Spherical;
                if (obbIntersections) {
                    const obb = new OrientedBox3();
                    this.mapView.projection.projectBox(geoBox, obb);
                    subTileArea = this.computeSubTileArea(obb);
                } else {
                    this.mapView.projection.projectBox(geoBox, tileBounds);
                    subTileArea = this.computeSubTileArea(tileBounds);
                }

                if (subTileArea > 0) {
                    const subTileEntry = new TileKeyEntry(
                        childTileKey,
                        subTileArea,
                        offset,
                        geoBox.southWest.altitude, // minElevation
                        geoBox.northEast.altitude // maxElevation

const newTargetPosition = rayCastWorldCoordinates(
            mapView,
            targetPositionOnScreenXinNDC,
            targetPositionOnScreenYinNDC
        );

        if (!targetPosition || !newTargetPosition) {
            return;
        }

        if (mapView.projection.type === ProjectionType.Planar) {
            // Calculate the difference and pan the map to maintain the map relative to the target
            // position.
            targetPosition.sub(newTargetPosition);
            panCameraAboveFlatMap(mapView, targetPosition.x, targetPosition.y);
        } else if (mapView.projection.type === ProjectionType.Spherical) {
            panCameraAroundGlobe(mapView, targetPosition, newTargetPosition);
        }
    }