Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: UserLocation & LineLayer disappearing when adding RasterLayer #3379

Open
cixio opened this issue Feb 15, 2024 · 0 comments
Open

[Bug]: UserLocation & LineLayer disappearing when adding RasterLayer #3379

cixio opened this issue Feb 15, 2024 · 0 comments
Labels
bug 🪲 Something isn't working

Comments

@cixio
Copy link
Contributor

cixio commented Feb 15, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🪲 Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant