search

bbecquet / Leaflet.PolylineDecorator

A plug-in for the JS map library Leaflet, allowing to define patterns (like dashes, arrows, icons, etc.) on Polylines.
MIT License
482 stars 114 forks source link

Strange arrowHead angle along polyline #70

Open Tyler-V opened 6 years ago

Tyler-V commented 6 years ago

With the following settings

L.PolylineDecorator(polyline, { patterns: [{ offset: 75, repeat: 75, symbol: L.Symbol.arrowHead({ pixelSize: 10, pathOptions: { weight: 1, color: trip.TripIcon.color, fill: true, fillOpacity: 1 } }) }] });

This is what I am seeing regularly

path

Any suggestions?

bbecquet commented 6 years ago

Hi. Are you talking about the position and angle of the triangle relatively to the line (which I think is correct, it's just at the beginning of a segment) or the shape of the triangle itself? Sadly I've never found the right way to keep sub-pixel accuracy accross all the computations. Some value rounding is introduced which may result in 1-pixel drawing differences which are sometimes apparent on smaller shapes like your triangles: the head looks a bit off the line center, or one of them looks a bit smaller compared to the others (the second to last on your screenshot for example). I could give it another try, but honestly I'm not sure there is a solution, as it may be limited by the way the browser draws vector layers.