mapillary / mapillary/mapillary-js
Improve scaling response (optically) => with sollution
@oscarlorentzon is already working on this.
Since Nov 19, 2019.
- Dominant language
- TypeScript
- Stars
- 516
- Forks
- 89
- PR merge metrics
- No merged PRs in 30d
Description
When the size of the mapillary element changes the canvas remains the "old" size for some time.
This is because a higher resolution image needs to be downloaded and/or the canvas needs the be recalculated for the new size. This takes some time which makes the system look a bit sluggish.
Especially when the size of the mapillary gets animated from a relatively small size to a large size the effect is beyond akward.
I fixed this (optically)!
1) I set this in CSS (the container of the canvas)
.mapillary-js-interactive {
height: 100%;
width: 100%;
}
2) Just before I do (and/or detect) the resizing of the window/div I set the canvas (with class 'mapillary-js-canvas') : to
height: 100%;
width: 100%;
3) I call mly.resize(); (after the animation of the resizing is completed!)
The result is that the image of the "old" canvas gets stretched into the new size, that way the complete area remains to be covered with the "old image". When the animation/resizing is complete the new canvas gets calculated.
this can easily be implemented into mapillary-js... no harm done and animation is very exceptable, resulting in an optically more responsive/adaptive feeling :)
PS: you could even go the whole nine yards with calculating the difference in size and alter the percentages accordingly (one at 100% an the other one more, using negative margins to center the image.. haven't done that, yet:P)
PS2: Now that I come to think of it.. why not keep it at 100%/100% by default (for the canvas ant it's container)? I see no reason to force the size of the canvas?
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.