Setting an offset creates circles

[nlafleur]

PolylineOffset creates circles whenever I set an offset to my polyline.

The polyline I use has some coordinates which are very close to eachother, this is probably the cause.

based on the following data: https://gist.github.com/nlafleur/4092716f612859335dcdeaf990ab5863#file-sectiondata

Single polyline:

Single polyline + extra polyline added on the same coordinates:

Extra polyline code:

var red = L.polyline(sectionCoords, {
  color: "red",
  opacity: 1,
  offset: 0
}).addTo(groupRef)

Single polyline + extra polyline added with the same coordinates with an offset of 5:

Offset polyline code:

var red = L.polyline(sectionCoords, {
  color: "red",
  opacity: 1,
  offset: 5
}).addTo(groupRef)

I tried adding the "smoothFactor" (https://leafletjs.com/reference.html#polyline-smoothfactor) with an high number but this doesn't fix everything + it simplifies the polyline too much.

[jamieodonnell]

Am also having this issue.

Looking in to using this library to see if i can simplify the polyline that way.

https://mourner.github.io/simplify-js/

[tsmcgrath]

I am simlilarly seeing this issue with PCT trail data collected with a GPS. It must be related to the point density but it happens without specifying any Polyline style options other than offset. pctapt = L.geoJSON(pct, { // color: 'black', // weight: 2, // opacity: 1, offset: 5 }).addTo(map);

[answerquest]

Seeing same issue at my end. Red color is what the polyline is supposed to look like. Green : I've applied offset: 50

[tombrennan06]

This forked version (https://github.com/higaa/Leaflet.PolylineOffset) seems to improve a good number of similar issues that I was having. Not perfect - some of the artifacts are still present. However, it does remove all of the circles.