[Bug]: HeatmapLayer does not respect filter like other layers
Nobody has claimed this yet.
- Dominant language
- Kotlin
- Stars
- 2.9k
- Forks
- 947
- Avg merge
- 6d 37m
- Merged PRs (30d)
- 1
Description
Mapbox Version
default
React Native Version
0.83.6
Platform
iOS
@rnmapbox/maps version
10.3.1
Standalone component to reproduce
import React from 'react';
import {
MapView,
ShapeSource,
HeatmapLayer,
Camera,
} from '@rnmapbox/maps';
const features = {
type: 'FeatureCollection',
features: [
{ type: 'Feature', geometry: { type: 'Point', coordinates: [-0.1276, 51.5074] }, properties: { weight: 1.0 } },
{ type: 'Feature', geometry: { type: 'Point', coordinates: [-0.0750, 51.5225] }, properties: { weight: 0.8 } },
{ type: 'Feature', geometry: { type: 'Point', coordinates: [-0.1425, 51.5390] }, properties: { weight: 0.7 } },
{ type: 'Feature', geometry: { type: 'Point', coordinates: [-0.0235, 51.5054] }, properties: { weight: 0.6 } },
{ type: 'Feature', geometry: { type: 'Point', coordinates: [-0.1145, 51.4618] }, properties: { weight: 0.5 } },
],
};
const heatmapStyle = {
heatmapWeight: ['get', 'weight'],
heatmapRadius: ['interpolate', ['linear'], ['zoom'], 0, 20, 9, 60],
heatmapColor: [
'interpolate', ['linear'], ['heatmap-density'],
0, 'rgba(0,0,255,0)',
0.5, 'cyan',
1, 'red',
],
};
export default class BugReportExample extends React.Component {
render() {
return (
<MapView style={{ flex: 1 }}>
<Camera defaultSettings={{ centerCoordinate: [-0.1276, 51.5074], zoomLevel: 9 }} />
<ShapeSource id="heatmap-source" shape={features}>
<HeatmapLayer id="heatmap-layer" sourceID="heatmap-source" style={heatmapStyle} filter={['==', ['literal', 1], ['literal', 0]]} />
</ShapeSource>
</MapView>
);
}
}
Observed behavior and steps to reproduce
If you create a CircleLayer with the same filter, it disappears as expected. The HeatmapLayer does not.
Expected behavior
The filter should be applied to the heatmap - no filters are applied at all.
Notes / preliminary analysis
Initially tested on an older version of RN (0.76.9) but tried in a brand new project and still not working.
Additional links and references
N/A
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
Run the supplied iOS reproduction with the HeatmapLayer filter and compare its behavior with the CircleLayer using the same filter. Start by tracing the HeatmapLayer and ShapeSource entry points, then verify that an always-false filter hides the heatmap while the existing heatmap styling still works.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react-native
- Domain
- mobile-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 58/100