Leaflet: Overlapping GeoJSON MultiPolygon polygons not filled

Created on 21 Aug 2015  ·  3Comments  ·  Source: Leaflet/Leaflet

I am not sure whether this is related to #3498 but here we go:

If you have two partially overlapping polygons in a GeoJSON MultiPolygon in Leaflet 0.7.3 the overlapping area is filled. But in master the overlapping area is not filled while the non-overlapping area is.

Here is an example GeoJSON:

{
  "geometry": {
    "type": "MultiPolygon", 
    "coordinates": [
      [
        [
          [
            11.96485, 
            55.8434
          ], 
          [
            11.868584, 
            55.8284
          ], 
          [
            11.837216, 
            55.8925
          ], 
          [
            11.863167, 
            55.915432
          ], 
          [
            11.936167, 
            55.896618
          ], 
          [
            11.964784, 
            55.858032
          ]
        ]
      ], 
      [
        [
          [
            11.868584, 
            55.8284
          ], 
          [
            11.761567, 
            55.81378
          ], 
          [
            11.726833, 
            55.896
          ], 
          [
            11.782117, 
            55.928215
          ], 
          [
            11.8749, 
            55.92655
          ], 
          [
            11.863167, 
            55.915432
          ], 
          [
            11.936167, 
            55.896618
          ], 
          [
            11.964784, 
            55.858032
          ], 
          [
            11.96485, 
            55.8434
          ]
        ]
      ]
    ]
  }, 
  "type": "Feature", 
  "properties": {}
}

Kind regards,
Jesper

bug

Most helpful comment

Try setting fillRule: 'nonzero' in your polygon styling options. See also https://github.com/Leaflet/Leaflet/pull/2834, https://developer.mozilla.org/docs/Web/SVG/Attribute/fill-rule and https://mourner.github.io/Leaflet/reference.html#path-fillrule

Please reply here after trying that.

All 3 comments

Try setting fillRule: 'nonzero' in your polygon styling options. See also https://github.com/Leaflet/Leaflet/pull/2834, https://developer.mozilla.org/docs/Web/SVG/Attribute/fill-rule and https://mourner.github.io/Leaflet/reference.html#path-fillrule

Please reply here after trying that.

Thanks for the help Ivan. Adding fillRule: 'nonzero' fixed the issue.

I should probably also mention that it is also not possible to click on the overlapping areas when fillRule is not 'nonzero' (assuming that an event listener is attached to the layer).

I haven't closed the issue since you might want to consider whether fillRule: 'nonzero' is a better default than 'evenodd' for "multipolygon"-type features.

Best regards,
Jesper

We will leave 'evenodd' as the default for now.

Was this page helpful?
0 / 5 - 0 ratings