heremaps / harp.gl

3D web map rendering engine written in TypeScript using three.js
Apache License 2.0
1.28k stars 197 forks source link

When zooming in or out, it isn't clear if anything is loading. #1358

Closed trusktr closed 4 years ago

trusktr commented 4 years ago

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:

gmaps

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:

harpgl

nzjony commented 4 years ago

@trusktr, thanks for reporting this bug, we have a BackgroundDataSource that could handle this. See the method addGroundPlane in the TileGeometryCreator. It should be easy to add texture coordinates and a texture to these tiles as google / apple maps do this, and have this hook up to the style so that this can be configured. I will let the team now and we can look to this, I agree that this should help to provide a better sense of where the user is.

trusktr commented 4 years ago

That's great that I can configure it, thanks! :+1: A default would be great, so it doesn't give the impression nothing's happening.

trusktr commented 4 years ago

That might be a good example of what an underlying default layer could look like (but the colors would be beautified for the default experience): https://www.harp.gl/docs/master/examples/#datasource_custom.html

Then any user's custom tiles would load on top (or something). This way there would always be feedback when interacting with the map, especially on slow connections.

(In fact, in that example I thought I had to wait for something: I thought the white tiles with red lines were default tiles for that particular example, so I was waiting and waiting, but then I realized that the red lines were the example.)

nzjony commented 4 years ago

@trusktr , thanks for the added feedback. Have created internal task HARP-9401 so that one of our developers can pick it up if they have time.

trusktr commented 4 years ago

It seems like a good idea for themes to be able to style the map content as well as the tile-not-loaded-yet content.

trusktr commented 4 years ago

Oh! Another thing: by default, the background color of space is the same color as the globe, so in this case even the globe is invisible if no tiles have loaded yet and we've zoomed all the way out and expect to see a sphere. A good default would be two different colors.

nzjony commented 4 years ago

Oh! Another thing: by default, the background color of space is the same color as the globe.

Yeah, the BackgroundDataSource sets the tiles to be the clear color specified in the Theme, which would probably explain your observation. It isn't possible to style them differently, it would need a separate entry in the Theme to allow this, as you mention above.

stale[bot] commented 4 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.