Wicket with non-legacy versions of Leaflet (version 1.0 onwards) renders holes for overlapping polygons

[ireneyiu]

Summary

Using Wicket with Leaflet versions 1.0 and onwards does not properly render islands or rings in a WKT multi-polygon (example WKT here). When there is overlap, the area is rendered as a hole.

This is not reproducible in the Wicket leaflet sandbox since it uses the legacy version of Leaflet (0.7.7). When I use the legacy version of Leaflet locally, the issue goes away for me.

This issue is similar to the one reported in Leaflet, but I have not been able to fix by specifying the fillRule as nonzero. Is this perhaps an issue with how Wicket is parsing the data for Leaflet?

Code

import React, { useEffect, useRef } from 'react';
import L from 'leaflet';
import Wkt from 'wicket/wicket-leaflet';

const wkt = new Wkt.Wkt();
const map = L.map('map');
const tileLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png');
tileLayer.addTo(map);

wkt.read(wktString); // multipolygon string
const obj = wkt.toObject();
obj.addTo(map);
map.fitBounds(obj.getBounds());

Expected behavior

Actual

Technologies

wicket: 1.3.6
leaflet: 1.5.1

[arthur-e]

Thanks @ireneyiu! Wicket probably doesn't recognize the fillRule attribute because it is lagging behind more recent developments in Leaflet. Hopefully someone has a Pull Request in mind for this.