Comments (9)
from leaflet.polylinedecorator.
@bbecquet just letting you know that I've updated to 1.3.2 and the performance is excellent, even on my 2000+ point polylines, thanks a bunch!
from leaflet.polylinedecorator.
Hi,
Sorry for this very late answer. You're right, there was a big and long-standing performance issue because of bad optimization. The number of symbols to draw increased with the zoom because even the invisible ones were computed and created. I changed this in the latest release (v1.3.0), so the number of drawn symbols keep roughly constant interdependently of the zoom. This should solve your issue.
Let me know :)
from leaflet.polylinedecorator.
@Talkless I updated your jsfiddle with a CDN to the latest leaflet.polylinedecorator (1.3.0) and removed the lines of code you added that were just the plugin
https://jsfiddle.net/3rmk0nou/27/
(To get a CDN link for any github javascript file, just grab the github raw URL, then go to http://rawgit.com/ and paste the link there)
It seems the performance has improved lots! Doesn't seem slow when zooming in anymore, this is great, thanks @bbecquet
Unfortunately, in my webapp, it still seems super slow. I'm pretty sure it's using the 1.3.0 update but I'll have to double check. It's likely because I'm drawing some really really long, complicated polyline's - if I split these up, into multiple polylines, do you think this would this help zoomed in performance at all? are there any other suggestions you might have for improving performance?
Over 2000 points in the polyline
When zoomed in lots, you can see how many tracks there are (these are trucks that drive the same path pretty much 24/7)
from leaflet.polylinedecorator.
Hi @Techn1x!
Well, the 1.3.0 update solves what was by far the biggest performance bottleneck, which was drawing invisible symbols.
But it still computes all the positions first, before deciding whether to draw them or not. This part's complexity actually grows with the number and complexity of polylines. This is not really noticeable with simple ones, but as you seem to have long ones, and many of them, this could be the cause of your issue.
I would say that splitting them in smaller ones wouldn't solve the problem, as the raw number of vertices and projections to make would be the same.
The good news is I'm currently rewriting the algorithm, which was quite dirty and uselessly complex. It's turning into something easier to read and improve, and I'll introduce optimizations step-by-step. I've done tests with very long polylines like yours, and I'm already experiencing better performance. Hopefully I'll release it soon.
Thanks for the screenshots BTW, always nice to see the plugin used in so many different ways !
from leaflet.polylinedecorator.
That's great to hear :) let me know if there's anything I can do to help with the rewrite.
The screenshots I gave were a worst case scenario in my webapp - most polylines that are drawn are much shorter and are in fact very quick. The problem stems from the fact that I am trying to show 24 hours of track for the selected vehicle, and this is fine for most vehicles, but for these trucks it seems to be just too much (at least with the current algorithm). To help with the issue I might reduce the window to 12 hours or something like that.
from leaflet.polylinedecorator.
I updated your jsfiddle with a CDN to the latest leaflet.polylinedecorator (1.3.0) and removed the lines of code you added that were just the plugin
Thanks, though I do not see decorator arrows in that jsfiddle any more.
from leaflet.polylinedecorator.
Hmm, that's strange. It definitely works for me, when I click the button..
from leaflet.polylinedecorator.
I get:
TypeError: L.Symbol is undefined _display:94:8
createPolyline https://fiddle.jshell.net/_display/:94:8
onclick https://fiddle.jshell.net/_display/:1:1
from leaflet.polylinedecorator.
Related Issues (20)
- How in leaflet add custom data to polyline?
- I'd like to ask you how to add slashes to polygons, like this
- how do i delete some arrow on the map HOT 1
- Separate colors for stroke, fill HOT 1
- Markers Color HOT 9
- Leaflet polyline decorator HOT 1
- Decorator onclick event retrieve property HOT 1
- How to disable arrow auto scale? HOT 2
- Using polylineDecorator with ant-path is not working HOT 1
- Show/Hide Polylinedecorators dynamically (based on other variable) in React Leaflet
- Is there any option to prevent collision between arrows?
- How to add multiple arrows in one line๏ผ HOT 2
- How do I make my arrowhead pointy? HOT 2
- Issue with Leaflet.PolylineOffset
- When creating Symbols the pathOptions argument is not shallow copied
- Double rotation is applied to markers if this package is used along with RotatedMarker
- PolylineDecorator always top layer even when calling bringToBack() HOT 3
- Polyline decorator doesn't preserve the state of symbol styling HOT 1
- Problem with fullscreen control
- Problem with using method setPaths
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from leaflet.polylinedecorator.