Leaflet – Fixing Leaflet.PolylineOffset Polyline with Offset Drawn Inside Polygon

leafletleaflet-pluginspolygon

I'm new in Leaflet JS and I'm using Leaflet.PolylineOffset in order to draw a polyline around my polygon:

L.polygon(coords, { fillColor: 'red', fillOpacity: 0.5, weight: 20, color: 'red', opacity: 0.5, fill: true}).addTo(map);
coords.push(coords[0]);
L.polyline(coords, { color: 'purple', weight: 2, opacity: 0.7, fill: false, offset: 10}).addTo(map);

The problem is that when the polygon was drawn to the left like

var coords= [
[27.40839959582344,-82.40601726602196],
[27.40859871554781,-82.40638191331237],
[27.40834938302612,-82.40652231229888]
];

it adds the offset polyline outside the polygon, and that's correct, but when the polygon was drawn to the right, the polyline with the same offset is drawn on the inside of the polygon.

var coords = [
[27.408016915801475,-82.40592313259484],
[27.408532896850133,-82.40536543657525],
[27.408179675316514,-82.40446844335956]
];

Is there a way to draw the polyline on the outside of the polygon for both situations?

Best Answer

See https://datatracker.ietf.org/doc/html/rfc7946

3.1.6. Polygon

To specify a constraint specific to Polygons, it is useful to
introduce the concept of a linear ring:

o A linear ring is a closed LineString with four or more positions.

o The first and last positions are equivalent, and they MUST contain identical values; their representation SHOULD also be identical.

o A linear ring is the boundary of a surface or the boundary of a hole in a surface.

o A linear ring MUST follow the right-hand rule with respect to the area it bounds, i.e., exterior rings are counterclockwise, and holes are clockwise.

I think you should make sure that all the polygons have right winding order before using PolylineOffset. Maybe you can do that with https://github.com/mapbox/geojson-rewind

Related Question