search

arthur-e / Wicket

A modest library for moving between Well-Known Text (WKT) and various framework geometries
https://arthur-e.github.io/Wicket/
Other
586 stars 226 forks source link

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

Open ireneyiu opened 3 years ago

ireneyiu commented 3 years ago

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

Actual

Screen Shot 2021-01-21 at 11 42 41 AM

Technologies

wicket: 1.3.6 leaflet: 1.5.1

arthur-e commented 3 years ago

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.