maplibre-gl-js
maplibre-gl-js copied to clipboard
maplibre
Geojson Circle broken / even on example page
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
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.
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?
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
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>
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
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 :)
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
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.
Anybody understand why this fixes this issue?
https://github.com/BananaSlugLabs/maplibre-gl-js/commit/0764607fef7c4bb5867c4d5a4c8e574048d767b4
Is this reported upstream? I am having this happen on the jsfiddle example with Mesa 24.1.7. The PR fixes it, though.
@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.