How to optimize scrollable / zoomable map with multiple icons?

I'm currently working on a mobile app using Phonegap. One component of the App is a Map View, not Google Maps but a custom graphic that is scrollable / zoomable using javascript (zynga-scroller). The scrolling / zooming happens via translate3d and scale.

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:

  • transformOrigin

    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?

Answers


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.


Need Your Help

jQuery .pdf function not running in Joomla

javascript jquery pdf joomla

I've got easy folder listing installed that is outputting menu's for a website i'm working on.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.