Improve scaling response (optically) => with sollution

[mrAceT]

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?

[oscarlorentzon]

Thanks for reporting.

What browsers do you experience the problems you are seeing in?

Testing with https://bl.ocks.org/oscarlorentzon/raw/5af00c5c07448233bcb62f5e2124ab39/ shows black background at the right and bottom borders briefly when increasing the browser size for me in Firefox only.