0

Im using leaflet to draw points defined by custom div(like the default css in the leaflet.css). I have to update the points every 30 mili secs. But it seems to be so slow.. when i reach to high number of points.

I thought about forcing leaflet to use the gpu somehow instead of using the cpu to render the points. Try to use transalte etc.. but it doesnt show any changes.

So there is anyway of using the gpu to render those points and makes my app to work faster?

Improve this question
  • Maybe I'm not understanding the question perfectly, but if it's visualization speed you're looking for have you checked out d3.js? It's beautiful for this purpose. I'm diving in to that library now. But it's great for map related needs because of the speed and the beauty. – randomblink Dec 29 '15 at 17:26
  • My question is talking about fix the bad performance of updated and render thousands of points in 30ms updates. Now i suffer of slowly and fps drops to around 1 fps. I thought the problem might be cause of the lack of usage gpu.. maybe i wrong. – Elad Israeli Dec 29 '15 at 18:00
3

What do you mean by "high number of points"? If you have hundreds to thousands, even without update, the map would get bad responsiveness on most computers.

As for your refresh rate, please realize that 30 milliseconds is just about twice the common browser / computer display refresh rate (60 Hz => 16.7 ms). You can still do many things in this interval of course, but the browser may start struggling if your updates involve several re-paints (forced displays).

Furthermore, Leaflet uses some smooth animations by default, with a duration of 250 ms I think. Disabling these animations may help in your case. Try setting L.DomUtil.TRANSITION = false just after loading Leaflet script.

As for GPU usage, I think map panning (translation) and objects translations should already use GPU on browsers that support this feature?

EDIT:

Not talking about updating the data, you may be interested in Leaflet MaskCanvas plugin to replace all your points by a tiled canvas.

As for loading only points that are in the current user view port, this is what Web Feature Services basically do: use Leaflet map.getBounds().toBBoxString() to create a request which specifies the view bounds, and the web server will send only the data that is contained within these bounds. Then at every map navigation (zooming, panning), perform a new request, so that you get receive new data for the new view bounds.

EDIT 2:

A few demos for you to play with and see what happens with different numbers of markers, icons (image or div), and very simple set-up. All these use HW-accelerated (GPU) transforms.

Depending on your computer (CPU and GPU, memory), you can see a little lag and flickering of the divs while panning around.

Improve this answer
  • High number of points its about thousands points that needed to be rendered on the map and keep updated and deleted on the map if needed and another points added instead of those whom dissapear. But i still suffer of slowly performance even if i use the global switch trick and the refresh must be about 30 ms , because it is real time information. Still doesnt understand which solution do you suggest ? – Elad Israeli Dec 29 '15 at 17:55
  • "Real time information" does not necessarily mean you have to refresh it every 30ms (or whatever rate your data is available). If trying to do so slows down your display, it is just counter-productive. The human brain can infer "real time" even with just a few updates per seconds (i.e. at a few hundreds ms interval), unless you are in an FPS game where every ms counts to shoot at a target. So my first suggestion is really to try slowing down your refresh rate until you get an acceptable balance between smoothness and responsiveness. – ghybs Dec 29 '15 at 18:06
  • In parallel, find a way not having to transmit data through network and having to process it on client side for all the points that are outside your view port (possibly with some margin). Look for WFS for example. And for low zoom levels where thousands of points may be in your view, try to cluster them on server side. – ghybs Dec 29 '15 at 18:11
  • Again the issue of using gpu is needed here , it doesnt matter if we update the display every second or 2 second still there is thousands of points on the map and still the preformance may be bad ... i need to find a way to trigger the gpu in my situation , ive tried use the translate3d in css but it seems to be non effective . – Elad Israeli Dec 30 '15 at 6:47
  • 1) Are you sure GPU is not already used, as I mentioned at the end of the answer? 2) Turning off all updates, is your map responsive with your thousands of points? If not, then you should already work on that: load only points in view, replace your thousands of markers by a single canvas, cluster your points (you may be interested in PruneCluster plugin). – ghybs Dec 30 '15 at 10:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.