[Bug]: UserLocation & LineLayer disappearing when adding RasterLayer
Open
Nobody has claimed this yet.
bug 🪲
- Dominant language
- Kotlin
- Stars
- 2.9k
- Forks
- 947
- Avg merge
- 6d 37m
- Merged PRs (30d)
- 1
Description
Mapbox Implementation
Mapbox
Mapbox Version
default
Platform
iOS, Android
@rnmapbox/maps version
10.1.13
Standalone component to reproduce
import React, {useState} from 'react';
import {
Pressable,
Platform,
Text,
View
} from 'react-native';
import Mapbox from '@rnmapbox/maps';
const App = () => {
const [userLocationPermission,setUserLocationPermission] = useState((Platform.OS == 'android')?false:true);
React.useEffect(() => {
if (Platform.OS == 'android') { Mapbox.requestAndroidLocationPermissions().then(setUserLocationPermission); }
}, []);
const [showRaster, setShowRaster] = React.useState(false);
return (
<>
<Mapbox.MapView style={{flex:1}}>
{ (showRaster) &&
<Mapbox.RasterSource key={"tile"+ Date.now() } id={"tile"} tileUrlTemplates={["https://tile.openstreetmap.de/{z}/{x}/{y}.png"]} tileSize={256}>
<Mapbox.RasterLayer
id={"tileLayer"}
sourceID={"tile"}
style={{ rasterOpacity: 1 }}
/>
</Mapbox.RasterSource>
}
{userLocationPermission &&
<Mapbox.UserLocation showsUserHeadingIndicator={true} />
}
<Mapbox.ShapeSource id="shapesource" lineMetrics={true} shape={{
type: 'Feature',
geometry: {
type: 'LineString',
coordinates: [[-75,41],[13,53]],
},
}}
>
<Mapbox.LineLayer id="linelayer" style={{
lineColor: '#007AFF',
lineCap: 'round',
lineJoin: 'round',
lineWidth: 5,
}} />
</Mapbox.ShapeSource>
<Mapbox.MarkerView
id={"marker"}
coordinate={[-75,41]}
anchor={{ x: 0.5, y: 0.5 }}
allowOverlap={true}
>
<Text>❌</Text>
</Mapbox.MarkerView>
</Mapbox.MapView>
<View style={{position: "absolute", bottom: 100, zIndex: 200}}>
<Pressable onPress={() => { setShowRaster(!showRaster); }} style={{backgroundColor: 'orange',padding: 20}}><Text style={{fontSize: 20, fontWeight: "bold"}}>PRESS HERE TO CHANGE MAP</Text></Pressable>
</View>
</>
);
}
export default App;
Observed behavior and steps to reproduce
Click button to show openstreetmap tile layer and watch the linelayer & userlocation disappear. the markerview stays on the map.
(line is from new york to berlin)
Expected behavior
linelayer and userlocation should stay
Notes / preliminary analysis
No response
Additional links and references
No response
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
Start with the standalone App reproduction and the button that toggles RasterSource/RasterLayer; compare UserLocation and LineLayer before and after the toggle on iOS and Android. Done means the line layer and user location remain visible while the raster layer is shown in the provided reproduction.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react-native
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100