I'm new in Turf JS and I have a polygon with a negative offset like:
const coords= [
[25.085416706126708,55.1561039686203],
[25.085351117322578,55.15612542629241],
[25.08549687017286,55.15618711709976],
[25.08557703416652,55.15636146068573],
[25.085567317321594,55.15644192695618],
[25.085411847697962,55.15658676624298],
[25.085487153321573,55.15664041042328],
[25.085615901538485,55.156659185886376],
[25.085598897064752,55.15631586313248],
[25.085535737570268,55.15617907047272]
];
const polygon = L.polygon(coords, { fillColor: 'orange', fillOpacity: 0.5, weight: 20, color: 'white', opacity: 0.5, fill: true});
const buffer = turf.buffer(polygon.toGeoJSON(), -3, { units: 'meters' });
const buffered = L.geoJSON(buffer, {
color: 'orange',
weight: 15,
lineJoin: "miter",
//lineCap: "round",
opacity: 0.5,
fillOpacity: 0
}).addTo(map);
map.on('zoomend', function (e) {
map.eachLayer(function (layer) {
layer.setStyle({ weight: map.getZoom() > 16 ? (75 / Math.pow(2, 19 - map.getZoom())) : 15 });
layer.bringToFront();
});
}
but is missing some areas when drawn on the map, like:
The real polygon shape, without offset (or offset set to 0) is
If I'm increasing the weight
to the polygon with offset, a larger area will be missing and the same thing happen for smaller polygons with closer lines.
In the jsfiddle, the orange offset polygon should go around the red one (on the inside) but is missing some small areas. It should fill that small area from inside, even if the offset polygon borders are overlapping
Edit: I'm trying to achieve the just darker line from a polygon that has filling
For example, if I have a polygon with 40m border and filling color, 20m of the border will overlap the filling color. That area is what I'm trying to achieve. I'm changing the border width when the zoom changes to keep the same 40m. Is there a way to draw it using Turf JS?