Blue dot (current location) circle is overlapping with beta4 fill-extrusion-flood-light
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 12.4k
- Forks
- 2.4k
- PR merge metrics
- No merged PRs in 30d
Description
**mapbox-gl-js version**: v3.0.0-beta.4
**browser**: Chrome, Firefox, Safari
### Steps to Trigger Behaviour:
Run your app with Mapbox v3.0.0-beta.4 release. The app should have blue dot (current user position).
Blue dot - it's rendered using Mapbox SDK: symbol layer + circle layer.
### Problem:
Flood light from extrusions is overlapping blue dot.
### Demonstration:
With extrusion flood light on:

With extrusion flood light off:

Code snippet for a extrusions layer:
```
// This layer is for extruded rooms
map.addLayer({
'filter': ['any',
['==', 'featureClass', FeatureClass.ROOM_EXTRUSION]
],
'id': MI_ROOMS_LAYER,
'type': 'fill-extrusion',
'slot': 'middle',
'source': MI_GEOJSON_SOURCE,
'paint': {
'fill-extrusion-color': ['get', 'fillColor'],
'fill-extrusion-opacity': extrusionOpacity,
'fill-extrusion-height': ['get', 'height'],
'fill-extrusion-ambient-occlusion-ground-attenuation': 1,
'fill-extrusion-flood-light-color': '#FFFFFF',
'fill-extrusion-flood-light-ground-radius': 10,
'fill-extrusion-flood-light-intensity': 0.3,
'fill-extrusion-flood-light-ground-attenuation': 1,
'fill-extrusion-ambient-occlusion-intensity': 0
}
});
```
Code snippets for blue dot layer:
```
map.addLayer({
'id': MI_POSITION_FILL_LAYER,
'filter': ['all', ['==', '$type', 'Polygon']],
'type': 'fill',
'source': MI_POSITION_SOURCE,
'paint': {
'fill-color': ['get', 'fillColor'],
'fill-opacity': ['to-number', ['get', 'fillOpacity']]
}
});
map.addLayer({
'id': MI_POSITION_CIRCLE_LAYER,
'filter': ['all', ['==', '$type', 'Point']],
'type': 'circle',
'source': MI_POSITION_SOURCE,
'paint': {
'circle-color': ['get', 'fillColor'],
'circle-radius': ['get', 'radius'],
'circle-opacity': ['get', 'fillOpacity'],
'circle-stroke-width': ['get', 'strokeWeight'],
'circle-stroke-color': ['get', 'strokeColor'],
'circle-stroke-opacity': ['get', 'fillOpacity'],
'circle-pitch-alignment': 'map',
'circle-pitch-scale': 'viewport'
}
});
```
When I comment out/remove 'fill-extrusion-flood-light-intensity': 0.3', the problem disappears, but I cannot use light effects.
I also tried to place blue-dot layer on top of everything.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
No source files or tests are named. Reproduce the issue in Mapbox GL JS v3.0.0-beta.4 with a fill-extrusion layer using flood-light settings and the blue-dot circle layer; done means the blue dot no longer overlaps the flood light while the light effect remains enabled.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- computer-graphics, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100