Better performing proof of concept - Urgent
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I have been working on a floor map system for a while, it takes json data and then renders out a bunch of boxes to the screen. the user can click on them to do things. The issue we have is the load time is finally wonderful, we have some advanced functions around searching to find booths. All is good but...On mobile when you try and drag/pan, zoom etc.. it lags... a lot. I have a feeling the client can handle this but that we have some complexity here that is causing problems.

Here is the test page http://bit.ly/HVkdCp

Id like to see a proof of concept that has the following.

Take our json array of data, render boxes on the page. or suppose something is precomputed on the server and given to the client. each booth needs to be an object that I can see if it is clicked on. I need pan and zoom to work well on mobile. (ios and android)

Id like to stay with SVG and D3 but at this point im open to just about anything that can get us on the right track.

I mentioned Urgent in the title as this is a bit behind now and we are feature complete with the module but...performance is now the hold up and we cant release it as is today.

Okay I have been thinking that it might be entirely needed for me to go in a different direction. I'd like to extend an alternative to this bounty which is to help make server side tiles from the code. I think using nodejs, jsdom an dD3 the server can create tiles of the map at different zoom levels and then client side we can use something like http://macwright.org/2012/08/13/images-as-maps.html . Let me know thoughts
Qdev almost 6 years ago
awarded to alixaxel

Crowdsource coding tasks.

1 Solution

Winning solution

I see no major lagging on mobile (Android 4.0), perhaps it would be useful if you could demo a short video?

I was reading a little and I found several people mentioning that by setting transform: translateZ(0), you are enabling hardware acceleration that improves dragging, panning and zooming on mobile/SVG.

I can't see any notable difference on my end, but it might be worth a shot: here's the experiment. I've also removed the opacity rules, the second floorplan as well as the Bootstrap 2.3 responsive CSS (you were using BS 3.0). EDIT: The URL I posted was incorrect, could you check it now?

Migrating to canvas should be more performant too, but I'm not savvy enough on D3 to do it myself.