Geojson Circle broken / even on example page #4062

derEremit · 2024-05-02T00:13:17Z

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 · 2024-05-02T05:14:30Z

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 · 2024-05-02T09:53:48Z

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 · 2024-05-02T10:01:20Z

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

derEremit · 2024-05-02T11:10:42Z

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 · 2024-06-10T10:06:54Z

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 · 2024-06-10T10:27:42Z

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 · 2024-06-11T15:26:12Z

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 · 2024-06-16T20:04:27Z

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

tomschulze · 2024-09-02T09:29:59Z

I experienced the same issue on Fedora 40. I have an AMD Ryzen 7 PRO 4750U CPU with an integrated AMD Radeon RX Vega 7 GPU. Thanks for tracking this down!

Downgrading mesa-va-drivers to 24.0.5 solved my problem.

Fixes: maplibre#4062

cutephoton · 2024-09-02T21:54:00Z

Anybody understand why this fixes this issue?

BananaSlugLabs@0764607

Fixes: maplibre#4062 See discussion here: maplibre#4402 (reply in thread)

elevenchars · 2024-10-14T22:19:51Z

Is this reported upstream? I am having this happen on the jsfiddle example with Mesa 24.1.7. The PR fixes it, though.

cutephoton · 2024-10-15T04:51:19Z

@elevenchars No. While it eats at my engineering soul, I wasn't willing to put the time/effort into developing an easily reproducible test case for a bug report. I have a plausible theory, but it remains untested. If you are interested, I'd be happy to discuss my findings and offer some direction if you want to get to the bottom of this mystery. I'd love that... but it's not going to be easy.

elevenchars · 2024-11-14T18:43:07Z

I tested today after I updated and it's fixed for me on Mesa 24.2.6. Maybe someone else got to it 😄

HarelM added the need more info Further information is requested label May 2, 2024

cutephoton added a commit to BananaSlugLabs/maplibre-gl-js that referenced this issue Sep 2, 2024

Fixes circles not rendering.

0764607

Fixes: maplibre#4062

cutephoton added a commit to BananaSlugLabs/maplibre-gl-js that referenced this issue Sep 9, 2024

Fixes circles not rendering on Mesa 24.1.

ee181b4

Fixes: maplibre#4062 See discussion here: maplibre#4402 (reply in thread)

cutephoton added a commit to BananaSlugLabs/maplibre-gl-js that referenced this issue Sep 9, 2024

Fixes circles not rendering on Mesa 24.1.

4d51151

Fixes: maplibre#4062 See discussion here: maplibre#4402 (reply in thread)

cutephoton added a commit to BananaSlugLabs/maplibre-gl-js that referenced this issue Sep 9, 2024

Fixes circles not rendering on Mesa 24.1.

4bcfea2

Fixes: maplibre#4062 See discussion here: maplibre#4402 (reply in thread)

cutephoton mentioned this issue Sep 10, 2024

Fixes circles not rendering on Mesa 24.1 with AMDGPU #4690

Merged

5 tasks

HarelM closed this as completed in #4690 Sep 12, 2024

HarelM closed this as completed in 5bd10e0 Sep 12, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Geojson Circle broken / even on example page #4062

Geojson Circle broken / even on example page #4062

derEremit commented May 2, 2024

HarelM commented May 2, 2024

derEremit commented May 2, 2024

HarelM commented May 2, 2024

derEremit commented May 2, 2024

Tristramg commented Jun 10, 2024 •

edited

Loading

louwers commented Jun 10, 2024 •

edited

Loading

Tristramg commented Jun 11, 2024 •

edited

Loading

baasgeo commented Jun 16, 2024

tomschulze commented Sep 2, 2024 •

edited

Loading

cutephoton commented Sep 2, 2024

elevenchars commented Oct 14, 2024

cutephoton commented Oct 15, 2024

elevenchars commented Nov 14, 2024

Geojson Circle broken / even on example page #4062

Geojson Circle broken / even on example page #4062

Comments

derEremit commented May 2, 2024

HarelM commented May 2, 2024

derEremit commented May 2, 2024

HarelM commented May 2, 2024

derEremit commented May 2, 2024

Tristramg commented Jun 10, 2024 • edited Loading

My setup

louwers commented Jun 10, 2024 • edited Loading

Tristramg commented Jun 11, 2024 • edited Loading

baasgeo commented Jun 16, 2024

tomschulze commented Sep 2, 2024 • edited Loading

cutephoton commented Sep 2, 2024

elevenchars commented Oct 14, 2024

cutephoton commented Oct 15, 2024

elevenchars commented Nov 14, 2024

Tristramg commented Jun 10, 2024 •

edited

Loading

louwers commented Jun 10, 2024 •

edited

Loading

Tristramg commented Jun 11, 2024 •

edited

Loading

tomschulze commented Sep 2, 2024 •

edited

Loading