Just ran through the getting started instructions and used the npx -p yo -p @here/generator-harp.gl yo @here/harp.gl generator.

In index.html, the map ids do not match.
The CSS uses mapCanvas:

#mapCanvas {
   position: absolute;
   border: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   overflow: hidden;
    z-index: -1
}

while the html uses map:

<canvas id="map"></canvas>

This causes a map that is approximately 2x the size of the screen that is cut off. Since the body and map both have overflow: none, it is not clear what is going on, there is somewhat pixelated map and labels.

This repository's @here/generator-harp.gl appears to be updated with matching ids for the map: see file

I assume the npm packages need to be updated?

I've come across a few people (including myself) asking about configuration instructions on how to use the harp.gl modules from the github source. This way one can use the most recent features committed to master, but not yet available in the npm packages. Can we add a quick guide in this repository on how to do this?

cc @tomasberkeley

Enable any absolute url to be passed in OmvDataSource. Currently, the developer is limited to a set of choices in OmvRestClient.ts
. This means that, unless the developer builds harp.gl from github source and adds their own APIFormat, harp.gl does not let you use a custom vector tile source.

Use case:
As a developer with a custom vector data source of:
https://my-base-url.com/vector-tiles/{z}/{x}/{y}.mvt

I would like to easily visualize it in harp.gl without having to modify harp.gl source code.

Requirements

1. Pass absolute URL when creating OmvDataSource. No need to specify APIFormat.
2. Pass query parameters in key value format. These will be appended and aded onto the url request. (optional)
3. Pass headers to the request. These will be sent with the request

Example implementation

const vector = new OmvDataSource({
   url: "https://my-base-url.com/vector-tiles/{z}/{x}/{y}.mvt",
   styleSetName: "tilezen",
   params: {
      "apikey": "adavadv",
      "param2": "berlin"
   }
});

(HARP-7392)

I have a question about the mapAnchor node, specifically how are they positioned? I have positioned a building on the map using the .geoPosition property and wanted to set it as the target for an orbit camera. However, I am facing an issue where getting it's position is not at the visible location of the building. I added a box helper to visualise the boundaries and in-fact the helper is showing me another location up in the sky. I feel like I am doing something wrong here.

Here on the left you can see the building positioned on the map. And on the right you can see the box helper set to encapsulate the building.

Hi,

I would like to use harp.gl in my embedded web project. Unfortunately, the project is running on typescript transpiled to esnext as target.
This means I cannot use harp.gl at the moment.

I tried to port it but it seems to be a lot more work than expected.
Are there any plans to support it in the future or can you suggest an alternative?

I really love what you have done with this library and being able to use harp.gl would be awesome.

Hi Guys,

How can I add a custom map to an android project?

Is there an SDK or is only a WebView supported now?

Would really love to replace my google 3D maps with this?

Thank you.

I've noticed that the MapView.scene is rotated perpendicular relative to the map (tiles). In a test, I positioned two cubes two units apart on the Z axis (these cubes exist in the MapView.scene). I believe the expected result here is to see two cubes parallel to the map (tiles) 2 units apart. In fact the result shows two cubes positioned two units apart going up, perpendicular to the map (tiles) .

Here I've added a grid helper & axis helper to the MapView scene

Is this normal behaviour?

Describe the bug
See #1373, setting a camera to the pointOfView should also add that camera to the scene, so that the matrices are automatically updated, see: https://threejs.org/docs/#manual/en/introduction/How-to-update-things.

Currently I have a map with various objects anchored to the map, but the issue I'm having is that road labels and other related stuff are being rendered on top of my objects, I want them to be rendered under my objects. Is there a way to do this, or would I have to render my objects onto a separate canvas?

Hello!
Very awesome project!! I really like it!

I have been trying to get the globe of harp.gl and use it in a-frame (is also using threejs).
Part of the project I am prototyping is a webvr with a globe with markers on it.

So far I found the threejs objects in mapView.worldRootObject. I saw a really big number for the size (something like 30000). I tried importing it into a a-frame component. Sort of works but I never see any object, but in the inspector it shows up.

I am wondering what I should do to import it into a-frame.

If this question is out of scope I would understand.
Thank you

Under poor network conditions attempting to add a datasource often results in the following error being returned

Failed to connect to datasource anonymous-datasource#x: Timeout exceeded when waiting for first message from worker

I would assume that removing the bad datasource and trying to add another would be the way to continue, but every time I've caused the above error to happen, every following attempt to add another datasource to replace the bad one instantly fails with the same message.

To be more exact in what I did, I used the DataSourceConnect event to tell when the error occurred and removed the bad datasource using MapView.removeDataSource(), then created a new OmvDataSource and added it using MapView.addDataSource()

I though maybe there is some kind of worker that needs to be reset when this happens, but I couldn't find anything relevant in the documentation. Any help would be appreciated, thanks

Describe the bug
There are two black holes in the Antarctic and the North Pole.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

UX improvement and duration / transition options for MapView's lookAt() method.

Use Case

1. I would like to easily set camera options without having to remember lookAt()'s parameter order.
2. I would like to use lookAt() with zoom level options.
3. I would like to perform camera durations (flys) between views
4. I would like to access the current map view's look at settings.

Requirements

1. Prefer zoom level instead of distance for vertical camera value. Option (please comment your opinion): allow both zoom level and distance in meters? If developer passes both, default to one?
2. Transform function parameters into single object. This is a preferable UX, as the developer doesn't have no remember which order each parameter is.
3. Enable camera transitions. Developer can specify duration and timing functions. Normal CSS timing functions should be supported.
4. New .getLookAt() method to return map view's look at settings. This method will return center, zoom or distance, tilt, and azimuth). Please comment with naming suggestion of this method.

Example

map.lookAt({
   center: new GeoCoordinates(47, -122),
   zoom: 13,
   tilt: 40,
   azimuth: 20,
   options: { animate: true, duration: 400, timingFunction: 'ease-in-out' }
})

map.getLookAt()
/* Returns:
{
   center: new GeoCoordinates(47, -122),
   zoom: 13,
   tilt: 40,
   azimuth: 20,
}
*/

Is your feature request related to a problem? Please describe.

import { TextCanvas } from '@here/harp-text-canvas';

Error: 'TextCanvas' is not exported by node_modules\@here\harp-text-canvas\index.js

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

In MapViewUtils, replace calculateXfromY by getXfromY.

Is your feature request related to a problem? Please describe.
3D Earth mode can change the angle of view

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Hello, the docs aren't aligned with what's release. The tutorial mentions several times to use the XYZ API which is deprecated and I had no luck getting it to work.

Additionally the tutorial mentions we can do things like

    mapControls.maxPitchAngle = 90;
    mapControls.setRotation(6.3, 50);

but those APIs do not exist in the current release (TypeScript has a type error on the missing property and method).

It'd be great to keep the docs aligned with whatever is the current release, otherwise people may try to do things that simply won't work.

What should we write instead of

    mapControls.maxPitchAngle = 90;
    mapControls.setRotation(6.3, 50);

?

The Mapbox API to fetch vector tiles is defined in harp-omv-datasource/OmvRestClient.ts
But it is not used in any example, mainly because they use a different scheme for they data. The current datasources we have in the examples are using HERE data that uses tilezen scheme.

This ticket is to track the task to fix this so that the Mapbox data is remapped to tilezen schema on-the-fly and therefore all the examples and code that exists today can be used out of the box but with a different datasource.
Of course it would need to be done in such a way that a token could be provided to be used, as there are no official public free tokens to be used with Mapbox data.

See #768 for a similar issue to fix TomTom datasource

Is your feature request related to a problem? Please describe.
We'd like to integrate the library usage into our TypeScript project.

Describe the solution you'd like
We'd like to have a Type Definition file (.d.ts) that corresponds to the public types in the HarpGL library.

Describe alternatives you've considered
We've been developing our own but its both laborious, hard to maintain and not fully respective of the actual API as an official Type Definition.

Hi, is there is any possibility to get the actual extruded feature building as an object reference right now?
Something the same as https://developer.here.com/documentation/android-premium/dev_guide/topics/map-extruded-buildings.html
I want to get the building faces and add some textures on them.

In the picture both the red dots and the green lines share the same exact coordinates however the red dots do not appear exactly on top of the line and exhibit a somewhat "wobbly" behavior.

Is your feature request related to a problem? Please describe.

I have project that use build systems other than webpack. It'd be great if Harp wasn't coupled to Webpack (or if the docs showed how to set up plain JS projects (with ES Module format is fine as most tools handle that part).

Describe the solution you'd like

Non-webpack users would want to follow a getting started guide for plain JS. This should include how to set up the WebWorker in plain JS, etc, without relying on hidden Webpack settings to do the magic.

Describe alternatives you've considered

Additional context
Add any other context or screenshots about the feature request here.

Your library looks great and provide opportunity to create realistic 3d maps. But for render-like images it will be cool to draw texture pattern on roads

When adding a new OmvDataSource to the map, nothing will appear unless style rules are also passed with setStyleSet(). Provide default styling rules for data that does not have a style set passed.

Use case

1. As a developer who would quickly like to visualize the shape of my data, I want harp to display my data as easily as possible. I do not care about the style or colors
2. As a developer who is new to harp.gl and does not know about the detailed styling syntax, I would like to visualize my data as easily as possible

Benefits
Adding default styling rules removes the amount of code and understanding of harp.gl syntax required for basic visualization use cases.

Suggested implementation / example

const traffic = new OmvDataSource({
   name: "traffic",
   baseUrl: "https://xyz.api.here.com/hub/spaces/" + config.space + "/tile/web",
   apiFormat: harp.APIFormat.XYZSpace,
   authenticationCode: config.token,
});
map.addDataSource(traffic) //Nothing more!

Default styles:

• point: 5px #48dad0 (HERE Aqua)
• polyline: 3px #48dad0
• polygon: 3px #48dad0 outline, #48dad0 fill w/ 0.3 opacity

Describe the bug

Looks like after certain interactions with the globe, the surfaces get erroneously culled at the edges of the screen.

To Reproduce

Steps to reproduce the behavior:

1. Zoom all the way in, out, in
2. Eventually it happens.

Expected behavior

There should be no culling at the edge of the viewport.

Screenshots

Here's a screen recording: https://youtu.be/Bv1pBGnFvuU

In the video, as I zoom in, you can see the black space come in from the edge of viewport.

Desktop (please complete the following information):

• OS: [e.g. iOS] - Linux
• Browser [e.g. chrome, safari] - Firefox
• Version [e.g. 22] -

When zoomed out over the attached GeoJSON data source there are spike-like artifacts everywhere.

To reproduce:

1. Load GeoJSON data source onto then map.
2. Zoom out high over the data source.

• OS: Windows 10 (64-bit)
• Browser: Brave Browser - Version 1.5.123 Chromium: 80.0.3987.163 (Official Build) (64-bit)
• Version: 0.14

Here is the geojson.
countours.zip

Here is the style used.
style.txt

Reported by Tomas Gerlich (Internal/Berkeley)

These are not clouds in the satellite imagery.

Might be due to lighting in theme file?

Where can I find HERE's advanced city models data? I am specifically interested in the textured buildings asset.

Is it available for public consumption?

Go to: http://harp.gl.s3-website-us-east-1.amazonaws.com/docs/master/doc/modules/harp_examples.html

Click on: "Camera with free movement", which links to: http://harp.gl.s3-website-us-east-1.amazonaws.com/docs/master/doc/modules/src/camera_free.ts

This gives a 403 forbidden.

Reported here: https://twitter.com/timothyjmartin/status/1143139074938683393?s=20

Internal: HARP-5701

Use Case
As a developer, I would like to get a map with a specific view up and running as quickly as possible. This removes the need to use map.setCameraLocationAndZoom().

Requirements
Enable center, zoom, tilt, and azimuth as MapView constructor parameters.

Example

const map = new MapView({
   canvas: document.querySelector('.map'),
   theme: "https://assets.vector.hereapi.com/styles/berlin/base/harp.gl/tilezen",
   center: new GeoCoordinates(47, -122),
   zoom: 12,
   tilt: 10,
   azimuth: 10,
});

I uploaded it to github pages but the map is not coming. There are appear only keys.

Github pages are not running Python. Can problem relevant it?
thanks in advance.

Hello harp team! The current master sometimes stalls when failing an assertion:

Uncaught Error: ASSERTION failed
    at Object.assert (assert.js:24)
    at TextElementStateCache.replaceElement (TextElementStateCache.js:257)
    at TextElementGroupState.traverseVisibleElements (TextElementGroupState.js:76)
    at TextElementStateCache.update (TextElementStateCache.js:186)
    at TextElementsRenderer.placeText (TextElementsRenderer.js:306)
    at MapView.prepareRenderTextElements (MapView.js:1974)
    at MapView.render (MapView.js:1864)
    at MapView.renderFunc (MapView.js:1724)

The corresponding code in TextElementStateCache.ts is:

replaceElement(zoomLevel, elementState) {
        assert(elementState.visible);
        const cacheResult = this.findDuplicate(elementState, zoomLevel);
        if (cacheResult === undefined || cacheResult.index === -1) {
            // No replacement found;
            return;
        }
        const replacement = cacheResult.entries[cacheResult.index];
        assert(!replacement.visible); // This is the assertion that sometimes fails.
        replacement.replace(elementState);
    }

Beyond the actual problem in the text rendering process, does the condition need an assertion that stops the app? Couldn't it just skip the following line instead?

The TomTom API to fetch vector tiles is defined in harp-omv-datasource/OmvRestClient.ts
But it is not used in any example, mainly because they use a different scheme for they data. The current datasources we have in the examples are using HERE data that uses tilezen scheme.
The class harp-omv-datasource/OmvTomTomFeatureModifier.ts contains some no-longer-working code that tries to remap on the fly the TomTom data to a different scheme.
This ticket is to track the task to fix this so that the TomTom data is remaped to tilezen schema on-the-fly and therefore all the examples and code that exists today can be used out of the box but with a different datasource.
Of course it would need to be done in such a way that a token could be provided to be used, as there are no official public free tokens to be used with TomTom data.

Is your feature request related to a problem? Please describe.
Currently the whole view is filled with tiles coming from the same data-level. This leads to a lot of tiny tiles rendered at the horizon with a bad impact in performance. This also forces us to keep the horizon quite close to the camera.

Describe the solution you'd like
It should be possible to mix tiles from different data-levels in one view so that the size of the tiles on the screen are more or less equal.

Hi! I am currently using Cesium on a project but have been running into some limitations when trying to visualize large quantities of polygons over time. Harp has peaked my interest as it appears it may be able to handle such a use-case.

With that said, I was curious if harp supports a similar concept to Cesium's time-dynamic functionality.

https://cesium.com/blog/2018/03/21/czml-time-animation/

If not, would you have a recommendation on how this may be accomplished using harp?

Thanks!

When using the theme mentioned in this example
https://www.harp.gl/docs/master/examples/#rendering_post-effects_themes.html

both themes doesn't display labels
and also i see this WebGL error on the console

is there a way to display labels on this theme

New data source module for easy interaction with XYZ Space modules. To extend OmvDataSource with a few simple modifications.

Use case
As a developer, I would like to easily interact with XYZ Spaces in my harp.gl application:

1. Add XYZ Space to harp.gl application by specifying XYZ Space parameters in constructor.
2. Filter data in my application by employing XYZ Space's server-side filtering capabilities.

Benefits

1. Increase advertising for XYZ Spaces within harp.gl. Separate data source module, ideally, leads to increased exposure for XYZ Space (and harp integration).
2. Exposure of XYZ Space server-side filtering through harp.gl APIs, leading to a more simple development experience.

Suggested implementation / example
Constructor:

const myCustomTiledData = new XYZDataSource({
   name: "traffic",
   spaceId: "xyz-id-here",
   authenticationCode: "xyz-token-here",
   filters: ["height>=30", "city=Berlin"]
});

Add a filter:

myCustomTiledData.addFilter("height<40");

Remove a filter:

myCustomTiledData.removeFilter("height<40");

Get filters:

myCustomTiledData.getFilters();
//["height>=30", "city=Berlin"]

(HARP-7391)

Is your feature request related to a problem? Please describe.
Support terrain

Is your feature request related to a problem? Please describe.
See the following comment on issue #1383: #1383 (comment)

The question is, if the api format is specified, and there is a method: getDefaultAuthMethod on the OmvRestClient which specifies which is the default authentication method, and the GettingStartGuide.md shows an example with the apikey, should this now be the default method? It would at least make the OmvDataSource easier to create.

Describe the solution you'd like
Change the getDefaultAuthMethod to return a default authentication method using the apikey.

@musculman, what do you think? Have I missed something?

I saw the blog posts, for example, but it didn't go into much depth beyond making a geojson provider.

I'm wondering how to make and manage map markers on a global scale.

This video shows a more complicated harp.gl example, but no link to any source code example: https://www.youtube.com/watch?v=9jB-3AyqkoE

Suppose we want:

• custom geometry for map markers
• billboard the markers
• clustering when zooming out
• showing the same amount of markers at any zoom level, but which markers are shown depends on importance at that zoom level (like a regular Google Maps type of a thing).
• tool tips for the markers showing information (images/text)
• to manage all the markers efficiently (for example instead of creating a new GeoJsonDataProvider for every update when we want to show a new set of markers)
• fading them in and out

Any thoughts or ideas on those points? Correct me if I'm wrong, but this stuff still needs to be implemented on top of harp.gl, and there's no such tools yet, right?

Is it possible make clustering in harp.gl like google maps or other?

Is your feature request related to a problem? Please describe.
See issue: #1369 Adding something to a MapAnchor requires a separate call to update the object. It should be possible to do some reflection on the objects in the MapAnchors and update them if they have this method.

Describe alternatives you've considered
The alternative is to have some sort of method:

map.addEventListener(MapViewEventNames.Render, () => { box.update(); });

I'm fairly certain I'm following the examples correctly, but I get 401 errors so tiles don't load.

This is my code:

    // import OmvTileDecoderService inside a web Worker with vanilla JS, thanks to
    // the JSPM ES Module CDN (https://jspm.io).
    const workerCode = `
        async function main() {
            const { OmvTileDecoderService } = (
                await import('https://dev.jspm.io/@here/harp-omv-datasource/index-worker')
            ).default

            OmvTileDecoderService.start()
        }

        main()
    `;
    const blob = new Blob([workerCode], { type: "application/javascript" });
    // const worker = new Worker(URL.createObjectURL(blob), { type: "module" });

    const canvas = document.getElementById("harpCanvas");
    const map = new MapView({
        canvas,

        // theme:
        //     "https://unpkg.com/@here/harp-map-theme@latest/resources/berlin_tilezen_night_reduced.json",
        theme:
            "https://unpkg.com/@here/[email protected]/resources/berlin_tilezen_base.json",

        decoderUrl: URL.createObjectURL(blob),

        //For tile cache optimization:
        maxVisibleDataSourceTiles: 40,
        tileCacheSize: 100
    });

    map.setCameraGeolocationAndZoom(
        new GeoCoordinates(1.278676, 103.850216),
        16
    );

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

    mapControls.maxPitchAngle = 90;
    // mapControls.setRotation(6.3, 50);
    // mapControls.camera.rotation

    map.resize(window.innerWidth, window.innerHeight);
    window.onresize = () => map.resize(window.innerWidth, window.innerHeight);

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

    map.addDataSource(omvDataSource);

where XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX is my API key that I created by first making a new JavaScript App ID, then for that app making an API key and pasting that key in my Harp example.

Any ideas why?

the sample link is dead. see:
https://github.com/heremaps/harp.gl/blob/master/%40here/harp-examples/src/getting-started_hello-world_js-bundle.html

Reported here: https://twitter.com/CihadTurhan/status/1142507682500419586

Internal link: HARP-6295

Is there an offline harp.js file?
How to deploy offline？

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

I'm trying to make custom added objects visible behind or when intersecting the 3d buildings meshes. Now I know they are not transparent but I don't understand how are the other map features visible behind them and custom objects not. Can anyone point me in the right direction on how to achieve this:

Describe the bug
after adding litener for click to examle
map.addDataSource(featuresDataSource).then(() => { map.canvas.addEventListener("click", (e: MouseEvent) => { const intersectionResults = map.intersectMapObjects(e.pageX, e.pageY); const usableResults = intersectionResults.filter(result => result.userData !== undefined); console.log(intersectionResults, usableResults) }); });
has error in console

Is your feature request related to a problem? Please describe.

When zooming in or out, especially on low bandwidth internet, the old tiles disappear, and there is some time until the new tiles are loaded.

During this time, the whole screen is blank, and it isn't apparent if anything is happening.

Describe the solution you'd like

Maybe the map should show a loading animation, or some placeholder tiles, or keep the old tiles in place until the new ones load (like Google Maps and Mapbox do).

In Google Maps, for example, when you zoom in or out, you still see the old content in place. If you continue to zoom in or out, you get immediate response even if the new content is not loaded yet.

With harp.gl, when the screen is empty (after a zoom), if we try to zoom or pan some more, we can not tell that anything is happening because even the old content is gone so we can not see the old content being animated.

For reference, here are two videos. In both of them, I do the exact same user interaction. I'll start with the Google Maps video first to clearly show what I will do:

As you can see, I jiggle the zoom after zooming out, to show that I can still perceive my interaction with the map.

Now with harp.gl, I will zoom and then jiggle, but it will seem like nothing happens until finally content loads: