1

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?

1 Answer 1

2

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)
0

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.