heremaps / harp.gl Goto Github PK
View Code? Open in Web Editor NEW3D web map rendering engine written in TypeScript using three.js
License: Apache License 2.0
3D web map rendering engine written in TypeScript using three.js
License: Apache License 2.0
Describe the bug
A clear and concise description of what the bug is.
To Reproduce
Steps to reproduce the behavior:
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):
Smartphone (please complete the following information):
Additional context
Add any other context about the problem here.
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
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
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
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.
Is your feature request related to a problem? Please describe.
Support terrain
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,
});
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
OmvDataSource
. No need to specify APIFormat
.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)
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
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!
In MapViewUtils, replace calculateXfromY
by getXfromY
.
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
Is it possible make clustering in harp.gl like google maps or other?
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.
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:
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?
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:
Benefits
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)
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.
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:
GeoJsonDataProvider
for every update when we want to show a new set of markers)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?
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.
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 id
s 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 id
s for the map: see file
I assume the npm packages need to be updated?
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?
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'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?
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.
UX improvement and duration / transition options for MapView
's lookAt()
method.
Use Case
lookAt()
's parameter order.lookAt()
with zoom level options.Requirements
.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.
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.
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.
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
When zoomed out over the attached GeoJSON data source there are spike-like artifacts everywhere.
To reproduce:
Here is the geojson.
countours.zip
Here is the style used.
style.txt
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:
Is there an offline harp.js file?
How to deploy offline?
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.
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?
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?
Describe the bug
There are two black holes in the Antarctic and the North Pole.
To Reproduce
Steps to reproduce the behavior:
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):
Smartphone (please complete the following information):
Additional context
Add any other context about the problem here.
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.
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
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.
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?
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:
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):
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.
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
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:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.