1

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?

8
  • That extra weight parameter in your polygon weight:20, is that necessary?
    – ranggalawe
    Jun 27 at 3:20
  • @ranggalawe What do you mean by my polygon extra weight?
    – LAffair
    Jun 27 at 3:31
  • Nothing, just to make sure map visual is clean. When changes of coordinates also change offset, the answer by @user30184 is most likely correct. As alternative to leaflet.Polyline offset, library such as turf.js >> turfjs.org/docs/#rewind maybe useful to get what you want. A safer way to get the offset line: first buffer the polygon e.g (turfjs.org/docs/#buffer) and then get the buffered line using turfjs.org/docs/#polygonToLine
    – ranggalawe
    Jun 27 at 4:36
  • If Leaflet accepts polygons in both way, maybe you could create a buffered polygon with a negative buffer distance and render just the outline of the buffered polygon. EDIT sorry, suggested already in the previous comment.
    – user30184
    Jun 27 at 8:21
  • 1
    @user30184 I think I found a solution to my problem. I'm checking if the polygon is clockwise and if it is I'm making the offset negative
    – LAffair
    Jun 27 at 9:51

2 Answers 2

2

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

2
  • 2
    turf.js functions turf.booleanClockwise and turf.rewind can also be used for that purpose.
    – TomazicM
    Jun 27 at 7:55
  • 1
    Using also @TomazicM suggestion, I've checked if the polygon was drawn clockwise and I just made the offset negative if so. I've used the solution from stackoverflow.com/a/1165943/4689583 to check for the polygon orientation
    – LAffair
    Jun 27 at 15:27
1

As you found out, offset depends on the order of line string coordinates, and as @user30184 pointed out, this depends on order of liner ring coordinates that constitutes the polygon: clockwise or counterclockwise.

On possible way to check order of polygon coordinates is to use turf.js function turf.booleanClockwise. You can also use turf.rewind function to change coordinates order.

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.