Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Geojson Circle broken / even on example page #4062

Closed
derEremit opened this issue May 2, 2024 · 10 comments · Fixed by #4690
Closed

Geojson Circle broken / even on example page #4062

derEremit opened this issue May 2, 2024 · 10 comments · Fixed by #4690
Labels
need more info Further information is requested

Comments

@derEremit
Copy link

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
Copy link
Collaborator

HarelM commented May 2, 2024

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.

@HarelM HarelM added the need more info Further information is requested label May 2, 2024
@derEremit
Copy link
Author

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
Copy link
Collaborator

HarelM commented May 2, 2024

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

@derEremit
Copy link
Author

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
Copy link

Tristramg commented Jun 10, 2024 •
edited
Loading

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:

image

With software rendering:
image

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
Copy link
Collaborator

louwers commented Jun 10, 2024 •
edited
Loading

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
Copy link

Tristramg commented Jun 11, 2024 •
edited
Loading

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
Copy link

baasgeo commented Jun 16, 2024

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
Copy link

tomschulze commented Sep 2, 2024 •
edited
Loading

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.

cutephoton added a commit to BananaSlugLabs/maplibre-gl-js that referenced this issue Sep 2, 2024
@cutephoton
Fixes circles not rendering.
0764607 
Fixes: maplibre#4062
@cutephoton
Copy link
Contributor

Anybody understand why this fixes this issue?

BananaSlugLabs@0764607

cutephoton added a commit to BananaSlugLabs/maplibre-gl-js that referenced this issue Sep 9, 2024
@cutephoton
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
@cutephoton
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
@cutephoton
Fixes circles not rendering on Mesa 24.1.
4bcfea2 
Fixes: maplibre#4062
See discussion here: maplibre#4402 (reply in thread)
@cutephoton cutephoton mentioned this issue Sep 10, 2024
Merged
5 tasks
@HarelM HarelM closed this as completed in 5bd10e0 Sep 12, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
need more info Further information is requested
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fixes circles not rendering on Mesa 24.1 with AMDGPU BananaSlugLabs/maplibre-gl-js
7 participants
@Tristramg @louwers @derEremit @baasgeo @HarelM @cutephoton @tomschulze