Geojson Circle broken / even on example page

derEremit commented 2 months ago

I think the geojson circle layer is broken.

I was just starting out with maplibre and after breaking my head for a few days I realized:

it is also broken on this example page:

https://maplibre.org/maplibre-gl-js/docs/examples/multiple-geometries/

the polygon / fill is shown, the point / circle is not

if I change the type to symbol like in the "point" example https://maplibre.org/maplibre-gl-js/docs/examples/geojson-markers/

the point geometries are shown as icons

HarelM commented 2 months ago

I'm not sure I understand the issue. There's no "geojson circle layer". The geojson source provides points geometries and a polygon, each is styled differently using a layer. The points are red circles and the polygon is a semi transparent area. The example is working as expected, as far as I see.

Please better explain what you think is not working as expected.

derEremit commented 2 months ago

Thank you for the feedback I did not check on a different system so I can confirm it is not generally broken.

but on my main development system I can not do anything to get the circles to show right now that is what I mean with the geojson circle layer. the Polyline fill shows fine.

I will investigate if I can find some more info but I do not see any errors in console or network tab etc.

I tested it in 5 different browsers on my "broken" system and the circles do not show anywhere.

Maybe a webgl driver issue? how could I debug that?

HarelM commented 2 months ago

No clue, sorry... Can you see it from your phone?

derEremit commented 2 months ago

Yes, now with the feedback I started testing on different systems. It works on other linux machines or phones except my gardua linux ( which has a bit paranoid security settings) main desktop.

but the strange thing is that only type:circle is not working

fill, line and symbol work

as far as I can tell every example on the examples page works except for drawing a plain circle

Tristramg commented 4 weeks ago

Hello,

I stumbled on the same issue, it was hard to narrow down. I think the issue is with webgl.

To make things weirder, if the circle rendering has dynamic properties, then it's displayed.

Here is a way to test it : https://jsfiddle.net/nx9djmtu/1/

the red dot is always shown
the black dot not always
- The bug is the same on my computer, both with chromium and firefox
- The bug doesn't happen if I switch to software rendering with: LIBGL_ALWAYS_SOFTWARE=1 firefox

With hardware rendering:

With software rendering:

My setup

I have AMD Ryzen 7 7840U w/ Radeon 780M Graphics, running on archlinux, wayland (sway)

Here is the same code as a single html file

<!doctype html>
<html lang="fr">

<head>
    <meta charset=" utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Weird bug</title>
    <style>

    </style>
    <script src='https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js'></script>
    <link href='https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css' rel='stylesheet' />
</head>

<body>
    <div id="map"></div>
    <script>
        const map = new maplibregl.Map({
            container: 'map', // container id
            style: 'https://demotiles.maplibre.org/style.json', // style URL
            center: [0, 0], // starting position [lng, lat]
            zoom: 1 // starting zoom,
        });

        const geojson = {
            type: "Feature",
            properties: { foo: 'red' },
            geometry: {
                "coordinates": [0, 0],
                type: "Point",
            }
        }

        const geojson2 = {
            type: "Feature",
            properties: { foo: 'red' },
            geometry: {
                type: "Point",
                "coordinates": [10, 10],
            }
        }

        map.on('load', () =>
            map.addLayer({
                id: 'points',
                type: 'circle',
                source: {
                    type: 'geojson',
                    data: geojson,
                }
            }).addLayer({
                id: 'points-conditionnal',
                type: 'circle',
                source: {
                    type: 'geojson',
                    data: geojson2,
                },
                paint: {
                    'circle-color': ['get', 'foo'],
                }
            })
        )
    </script>
</body>

</html>

louwers commented 4 weeks ago

Could be a driver issue. In that case, you need to report this upstream.

Maybe try running https://registry.khronos.org/webgl/sdk/tests/webgl-conformance-tests.html

Tristramg commented 3 weeks ago

I narrowed down the error to mesa.

On archlinux, 24.0.8-1 is ok, while 24.1.0-1 is buggy.

@derEremit what is your GPU and what is the installed version of mesa on your system? If you are in a similar situation to mine, I suppose this ticket could be closed

Update: using mesa from git the problem disapears :)

baasgeo commented 3 weeks ago

Thank you @derEremit and @Tristramg for reporting this, I have the same issue on Fedora. Got it temporary working by downgrading the mesa driver to version 24.0.5

sudo dnf downgrade mesa-va-drivers

maplibre / maplibre-gl-js

Geojson Circle broken / even on example page #4062

My setup