I pretty new in Leaflet and I have a polygon like

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]]

I need to add a black dashed line on the border, that connects the corner points like: enter image description here

Is there a way to add another line on the border that connects the shape dots?

  • this fiddle : jsfiddle.net/hx5pxdt8 seems to do what you want to achieve and as I understand it's dashArray in style that you need to set May 13 at 12:23
  • @Maximilienjaffrès I want to keep the red border but to add the line on top of it
    – Dana D
    May 13 at 12:28
  • add the polygon a second time with another styling ? seems like a bad solution but it depends ... May 13 at 12:30
  • @Maximilienjaffrès Can't I avoid drawing another polygon? I want to be able to edit that polygon, but I don't know if I can connect two polygons when doing this
    – Dana D
    May 13 at 12:36
  • 2
    if your polygon come from an api or something you can define 2 leaflets layers of polygon with the same data source so it would be the same data. On the other topic, it seems to have no way of defining a dual border in leaflet , one dashed and one full ... you would have to choose. however you can define a style on hover like in this leaflet exemple : leafletjs.com/examples/choropleth May 13 at 12:47


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.