Rendering of self-intersect polygon is inconsistant & not good form

[Jeromearsene]

maplibre-gl-js version: 2.3.0

Problem description

For self-intersect polygons, we have 2 problems:

• the render is not consistant & change when zoom:

• the form is not good:

Steps to Trigger Behavior

1. Draw a polygon with self intersection.

   Example:

   {
   "type": "FeatureCollection",
   "features": [
       {
           "type": "Feature",
           "properties": {
               "id": "dd2857b6-aae2-4437-91bb-766b79993b58",
               "fillColor": "#00796B",
               "stroke": "#00796B",
               "color": "#00796B",
               "weight": 2,
               "opacity": 0.8,
               "dashArray": null,
               "fillOpacity": 0.35
           },
           "geometry": {
               "type": "Polygon",
               "coordinates": [
                   [
                       [
                           2.47217,
                           47.52403
                       ],
                       [
                           2.40693,
                           47.49713
                       ],
                       [
                           2.44607,
                           47.43679
                       ],
                       [
                           2.57104,
                           47.48553
                       ],
                       [
                           2.39251,
                           47.44793
                       ],
                       [
                           2.47217,
                           47.52403
                       ]
                   ]
               ]
           }
       }
   ]
   }

Link to Demonstration

JSfiddle example

Expected Behavior

1. Like to Leaflet (exemple here), keep the same render, no matter the zoom.
2. Have a good form:

Actual Behavior

1. Render changed depend to zoom.
2. The form is not good:

[HarelM]

Can you check older versions? I don't think this issue was introduced recently. But in general, self intersecting polygon is not a valid polygon when checking the geojson spec so I would consider fixing the data and not the rendering as an initial solution.

[Jeromearsene]

Can you check older versions? I don't think this issue was introduced recently. But in general, self intersecting polygon is not a valid polygon when checking the geojson spec so I would consider fixing the data and not the rendering as an initial solution.

Thanks for you quick answer !

I also think that the problem is not recent.

Geojson is agnostic to coordinates from Features ¹. I can format Geojson with Turf. By example, I can use unkinkPolygon to format Geojson features:

But they are some "problems":

• properties are not automatically copied. So, the style is different by example, and must be re-add.
• this approach split one feature into 3. Depending on the case but transform 1 feature into 3 can be break existing treatment.

Sources

1. https://github.com/mclaeysb/geojson-polygon-self-intersections & https://github.com/mapbox/mapbox-gl-draw/issues/319#issuecomment-225695148

[HarelM]

Why not use a multipolygon in this case?

[Jeromearsene]

Why not use a multipolygon in this case?

Sometimes I've not the choice. If I get a Geojson with this format, I want have possibility to display correctly, without manual changes. With Leaflet, I didn't ask myself the question. Ideally, I wish I didn't have to worry about it 😅

[HarelM]

Ideally I agree. You have two options here: fix the geometry, or send a PR to fix the code here. I'll let you decide which is simpler. 😀

[Jeromearsene]

Ideally I agree. You have two options here: fix the geometry, or send a PR to fix the code here. I'll let you decide which is simpler. 😀

Yeah, for the moment I will fix the geometry with Turf.

Thanks

[tiokmu1731]

First, I thank everyone participating in maplibre developing project.

But in general, self intersecting polygon is not a valid polygon when checking the geojson spec so I would consider fixing the data and not the rendering as an initial solution.

I also consider fixing the self intersecting is the first step towards solution. But I now found the case that

• The original geojson is not self intersecting.
• As a result of simplify in converting to vector-tile by maplibre, generated vector tile becomes self intersecting.
• maplibre-gl-js version:4.5.0(latest)

I've also reported this case at the geojson-vt project. Please refer "here" for more information.

In this case, I hope maplibre will display the form that is not self intersecting, becase the original geojson is as well. Is it technologically difficult to fix maplibre and realize it?

The code blow is how I got the self intersecting WKT using the geojson that is not self intersecting. (ZoomLevel=10, Latitude=28.4441, Longitude=129.6784) I attached the WKT I got by this code as well.

A20-070402_46_AmamiIslands_kasari_10_28.4441_129.6784.txt

map.addSource('amami', {
    type: 'geojson',
    data: './geojson/A20-070402_46_AmamiIslands_kasari.json',
},);

map.addLayer({
    id: 'amami_polygon',
    type: 'fill',
    source: 'amami',
    paint: {
        'fill-color': "rgb(255,0,0)",
        'fill-opacity': 0.5,
        'fill-outline-color': "rgb(0,0,255)",
        'fill-antialias': true,
    },
});

// get WKT
map.on('click', 'amami_polygon', function (e) {
    const coordinates = e.features[0].geometry.coordinates[0];
    let cood = "POLYGON((";
    for (let i = 0; i < coordinates.length; i++) {
        cood+= coordinates[i][0] + (' ') + coordinates[i][1] + ',';
    }
    cood += "))";
    console.log(cood);
    }
);