Leaflet – Fixing Leaflet.PolylineOffset Polyline Drawing Issues

leafletleaflet-pluginspolygon

I don't have much experience with Leaflet JS and I'm using Leaflet.PolylineOffset in order to draw a polyline around a polygon:

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

And my coordinates are

var coords= [
[27.41059824690096,-82.4097625234208],
[27.41010163347799,-82.4089700231027],
[27.411940517407686,-82.40990955739109],
[27.409994283095067,-82.41053391174971]
];

But my issue is that it overlaps the polyline segments at the bottom of my polyline like
![enter image description here

but the line should be following the polygon shape.

Is there a way to avoid this overlapping with Leaflet.PolylineOffset?

Best Answer

I am not sure about the Leaflet.PolylineOffset repository, but another way would be to use turf using the buffer and polygonToLine functions. The difference would be that the polyline would not change with the zoom-level. If that is needed you could run a function when the zoom-level changes and recalculate the buffer every time.

See: jsfiddle

const map = L.map('map').setView([27.41059824690096,-82.4097625234208], 17);
L.tileLayer(
  'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: `&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> Contributors`,
    maxZoom: 18,
}).addTo(map);

const coords= [
  [27.41059824690096,-82.4097625234208],
  [27.41010163347799,-82.4089700231027],
  [27.411940517407686,-82.40990955739109],
  [27.409994283095067,-82.41053391174971]
];

const polygon = L.polygon(coords, { fillColor: 'white', fillOpacity: 0.5, weight: 20, color: 'white', opacity: 0.5, fill: true}).addTo(map);

// Create Polyline using polylineoffset
const polylineCoords = [...coords];
polylineCoords.push(polylineCoords[0]);
const polyline = L.polyline(polylineCoords, { color: 'red', weight: 2, opacity: 0.7, fill: false, offset: 20}).addTo(map);

// Create Polyline using turf.js
const buffer = turf.buffer(polygon.toGeoJSON(), 10, {units: 'meters'});
const bufferLine = turf.polygonToLine(buffer);
const bufferPolyline = L.geoJSON(bufferLine, {
    style: function (feature) {
        return {color: "green"};
    }
}).addTo(map)
Related Question