Wicket
Wicket copied to clipboard
Wicket with non-legacy versions of Leaflet (version 1.0 onwards) renders holes for overlapping polygons
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
![Screen Shot 2021-01-21 at 11 45 36 AM](https://user-images.githubusercontent.com/5784271/105403921-38dff200-5bde-11eb-9d84-7f0b8d207a80.png)
Actual
![Screen Shot 2021-01-21 at 11 42 41 AM](https://user-images.githubusercontent.com/5784271/105403630-d1c23d80-5bdd-11eb-85a9-248ca3ab86f5.png)
Technologies
wicket: 1.3.6 leaflet: 1.5.1
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.