CODEWITHSUNDEEP
leafletgeojson
Trautman
Trautman

Reputation: 35

How can I change the interior and exterior borders separately in leaflet Polygon with a hole

Is there any way to change the inner and outer line styles of a polygon/multipolygon with a hole?

I'm using leaflet and l.geoJson.

I found this example but the line style remains same for both interior and exterior borders if you change the style color. 

"style": {
    color: "black",
    opacity: 1,
    fillColor: "white",
    fillOpacity: 1
 }

Example

Upvotes: 1

Views: 1470

Answers (2)

IvanSanchez
IvanSanchez

Reputation: 19069

Is there any way to change the inner and outer line styles of a polygon/multipolygon with a hole?

No.

What you can do, however, is extract the outer ring and the inner rings beforehand. Then, use only a fill style for the polygon, a line style for the outer ring, and a different line style for the inner rings.

Upvotes: 2

Jieter
Jieter

Reputation: 4229

As far as I know, there is no way to achieve this without hacks. In case the shape is rendered using SVG, using a single <g> (example from this geojson.io link):

<path stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" stroke="#555555" stroke-opacity="1" stroke-width="2" fill="#555555" fill-opacity="0.5" class="leaflet-clickable" d="M340 -145L388 455L640 451L812 291zM437 230L628 258L602 331L537 370z"></path>

If you really need to have different colors for the inner edges, I think you should extract the inner rings from the shapes and add polygons with the correct line color without a fill. This approach will not work if you want to have your borders to be transparant, because the original border will show through.

Upvotes: 2

Related Questions