How to use the @here/harp-geoutils.GeoCoordinates function in @here/harp-geoutils

To help you get started, we’ve selected a few @here/harp-geoutils examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github heremaps / harp.gl / @here / harp-examples / src / performance_antialias.ts View on Github external
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 };
    }
github heremaps / harp.gl / @here / harp-examples / src / getting-started_free-camera.ts View on Github external
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
    }
github heremaps / harp.gl / @here / harp-examples / src / getting-started_orbiting-view.ts View on Github external
* ```
 *
 * 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 {
github heremaps / harp.gl / @here / harp-examples / src / datasource_geojson_styling.ts View on Github external
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
github heremaps / harp.gl / @here / harp-examples / src / getting-started_hello-world_npm.ts View on Github external
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;
github heremaps / harp.gl / @here / harp-examples / src / datasource_hello.ts View on Github external
});

    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;
}
github heremaps / harp.gl / @here / harp-examples / src / datasource_geojson_styling_game.ts View on Github external
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
    });
github heremaps / harp.gl / @here / harp-mapview / lib / PolarTileDataSource.ts View on Github external
const latB = b.latitude;

        let lonA = a.longitude;
        let lonB = b.longitude;

        if (Math.abs(latA) === 90) {
            lonA = lonB;
        }
        if (Math.abs(latB) === 90) {
            lonB = lonA;
        }
        const deltaLat = latB - latA;
        const deltaLon = lonB - lonA;
        const scale = (latitude - latA) / deltaLat;

        return new GeoCoordinates(latitude, lonA + deltaLon * scale, 0);
    }
github heremaps / harp.gl / @here / harp-examples / src / datasource_features_lines-and-points.ts View on Github external
function createBaseMap(): MapView {
        document.body.innerHTML += getExampleHTML();

        const canvas = document.getElementById("mapCanvas") as HTMLCanvasElement;
        const mapView = new MapView({
            canvas,
            theme: "resources/berlin_tilezen_day_reduced.json",
            tileWrappingEnabled: false
        });
        mapView.setCameraGeolocationAndZoom(new GeoCoordinates(10, -150), 2.6);

        const controls = new MapControls(mapView);
        const ui = new MapControlsUI(controls);
        canvas.parentElement!.appendChild(ui.domElement);

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

        const hereCopyrightInfo: CopyrightInfo = {
            id: "here.com",
            year: new Date().getFullYear(),
            label: "HERE",
            link: "https://legal.here.com/terms"
        };
        const copyrights: CopyrightInfo[] = [hereCopyrightInfo];

        const baseMap = new OmvDataSource({
github heremaps / harp.gl / @here / harp-examples / src / threejs_shadows.ts View on Github external
function initializeMapView(id: string, theme: Theme): MapView {
        const canvas = document.getElementById(id) as HTMLCanvasElement;
        const map = new MapView({ canvas, theme, enableShadows: true });
        map.renderLabels = false;

        CopyrightElementHandler.install("copyrightNotice", map);

        const mapControls = new MapControls(map);
        mapControls.maxTiltAngle = 50;

        const NY = new GeoCoordinates(40.707, -74.01);
        map.lookAt(NY, 2000, 45, 0);
        const ui = new MapControlsUI(mapControls);
        canvas.parentElement!.appendChild(ui.domElement);
        map.resize(window.innerWidth, window.innerHeight);

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

        addOmvDataSource(map);

        map.update();

        return map;
    }