Satellite Tiles not displayed with (HereTileProvider, HereWebTileDataSource)

[vadFit]

Describe the bug
I try to display Satellite tiles on the GlobeMap (HarpGL)
When i pushed my code i had no error but nothing displayed on the Globe (Look Sample 1 after)

It work with (OmvDataSource) but not with (HereWebTileDataSource)

I Have this result with (HereWebTileDataSource)

and this result with (OmvDataSource) :

**MY CODE **

 const dataSource = new HereWebTileDataSource({ authenticationCode: process.env.REACT_APP_HERE_APIKEY , 
 tileBaseAddress: HereTileProvider.TILE_AERIAL_SATELLITE});
 map.addDataSource(dataSource)

[vadFit]

I ve this now (I updated this line: mapView.addDataSource(webTileDataSource) like Earth Harp Sample.
https://www.harp.gl/docs/master/examples/codebrowser.html?src=src%2Fdatasource_satellite-tile.ts

Same result .No return for Satellite tiles.

[FraukeF]

Hello @PanetoneCake ,

I am sorry you are having issues reproducing this example.
From your code, as far as I can see, everything looks fine. The errors you posted are strange, as for the first one I actually see in you example that you pass options to MapView, so it shouldn´t be undefined. Do you have a stacktrace for that, to maybe better see, how options could become undefined?
The second error points to a line in the code, where there is only a comment, so I guess, that maybe the sourcemaps dont match?

Regarding the satellite tiles, could you check what response you get from the network for the requests of the satellite tiles?
The url should look something like: "https://1.aerial.maps.ls.hereapi.com/maptile/2.1/maptile/newest/satellite.day/4/8/6/512/png8?apikey=${your-api-key} "

Frauke

[vadFit]

Hi @FraukeF
Thank for your feedback
For url :
"https://1.aerial.maps.ls.hereapi.com/maptile/2.1/maptile/newest/satellite.day/4/8/6/512/png8?apikey=${your-api-key} "
when i test it manualy , i have this :

For stacktrace i have this but I don't understand well the diagnostic :

and my config here

{
"name": "harpgl-map-reactjs",
"version": "0.1.0",
"private": true,
"dependencies": {
"@here/generator-harp.gl": "^0.21.2",
"@here/harp-debug-datasource": "^0.21.1",
"@here/harp-features-datasource": "^0.21.1",
"@here/harp-map-controls": "^0.21.1",
"@here/harp-map-theme": "^0.21.1",
"@here/harp-mapview": "^0.21.1",
"@here/harp-omv-datasource": "^0.21.1",
"@here/harp-vectortile-datasource": "^0.21.1",
"@here/harp-webtile-datasource": "^0.21.1",
"@material-ui/core": "4.11.0",
"@material-ui/icons": "^4.9.1",
"@mui-treasury/styles": "1.13.0",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"material-ui-icons": "^1.0.0-beta.36",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.0",
"react-virtualized": "^9.22.2",
"styled-components": "^5.2.0",
"three": "^0.120.1",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"build:harp-gl-decoder": "webpack --config ./harp-gl-decoder.config.js"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"webpack-cli": "^4.2.0"
}
}

[vadFit]

I tried again whith "map" instead "mapView" i could see this in ConsoleLog :

& I have empty Globe

[vadFit]

@FraukeF I saw this also in the report . Visibly it failed to load tiles :

[FraukeF]

Hi @PanetoneCake

this looks indeed as if the loading of tile does not work, .. can you check in your network tab in your browser what responses you get for the satellite tiles

[vadFit]

I ve this feedback (@FraukeF ) :



(When i click on PNG8)

[FraukeF]

@PanetoneCake
You are getting a "401" for the tile request, which means your authentication fails. Seeing the request that is fired, this is caused by the missing "apiKey" query parameter.

In your code, please make sure to pass <your-api-key> here:

const webTileDataSource = new HereWebTileDataSource({
apikey: "<your-api-key>",
tileBaseAddress: HereTileProvider.TILE_AERIAL_SATELLITE
});

I see, that currently you are passing it as "authenticationCode" which is used for bearerToken authentication...

[vadFit]

Thank you very much @FraukeF
It work well now 👍🏽

[FraukeF]

@PanetoneCake great to hear, that it works now. Glad I could help.