I pretty new in Leaflet and I'm trying to increase the border transparent area for a polygonpolygon. The red darker border needs to remain the same weight but the area that I've marked with green should be increased. I've marked it only on one side with green just to highlight the area, but should apply for the entire polygon.

L.polygon(poly, { title: 'test', colorfillColor: '#F16E60', fillOpacity: 0.5, weight: 20, color: '#F16E60', opacity: 0.5, fill: true});
poly = [
   [27.409550697482818, -82.4161570071192],
   [27.408793809505223, -82.41609048836837],
   [27.40876330512483, -82.41643166538779],
   [27.409230402899265, -82.41645312305991],
   [27.409567856048245, -82.41651105870916]]

The current weight is 20. If I change it to 40, it also makes the darker border line bigger.

Is there a way to make only the transparent border bigger?

  • Hi @DanaD - the red border - i.e. the "stroke" / the line - in most tools is on the outside of a shape [or inside for any holes]. Possibly you could draw a lineless transparency at the bigger size, and a fill-less polygon at the line size??
    – Mr R
    May 3 at 19:21
  • @MrR can you, please, give me an example?
    – Dana D
    May 3 at 19:29
  • 1
    This sounds like a problem for github.com/bbecquet/Leaflet.PolylineOffset - draw the polygon without stroke, then add a separate offset polyline using the polygon's geometry. May 3 at 19:42
  • @IvanSanchez Isn't there a way to avoid the drawing of a second polygon? If I would add the option to draw on the map a custom polygon, point by point, I don't know if I can draw two polylines at the same time
    – Dana D
    May 3 at 20:02
  • Polygon border is drawn so that is extends perpendicular half of border width to each side of actual polygon border. What you call "darker border" is inner half of polygon border that overlaps with the interior, and since they both have opacity of 0.5 it looks like darker line. Whatever the width of border is, outer part od the border will always have the same width as inner part. The only solution there is what @IvanSanchez suggests.
    – TomazicM
    May 3 at 20:42


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.