How to optimize scrollable / zoomable map with multiple icons?
One layer above the scrollable / zoomable image there are icons and / or popovers that are not transformed via scale, but only with translate3d with the coordinates multiplied with the scale.
Because on scroll / zoom the calculation has to be calculated and applied for each element on each frame, on slower devices the map gets a bit slow. Without the icons or only with a few of them it's really fast.
Until now, I had the following idea of optimizing this a bit:
tried setting the coordinates of the icons as transformOrigin, so I would only have to update these values on zoom. This didn't work because transformOrigin seems to only work with percentage values. I could calculate them too if there seems to be no other possibility.
Is there anything else I overlooked? Some property that prevents scale to get applied on certain elements for example?
I'm not sure if I explained my problem properly, but now I found the following solution:
Now I have all the icons in the same container as the map image itself. When you zoom in to zoomlevel 0.3, scale(0.3) gets applied on the container. To leave the icons at the size they were before, I neutralize the scale by applying scale( 1 / zoomlevel ) to the icons.
This way the style of the icons only needs to be recalculated when zooming and the map feels much more responsive on slower devices, especially when scrolling.