maps icon indicating copy to clipboard operation
maps copied to clipboard

[Bug]: UserLocation & LineLayer disappearing when adding RasterLayer

Open cixio opened this issue 1 year ago • 0 comments

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

cixio avatar Feb 15 '24 22:02 cixio