Skip to content

Instantly share code, notes, and snippets.

@RobertSasak
Last active March 19, 2020 08:29
Show Gist options
  • Save RobertSasak/7fd156877b363ec83d5cf9217aadb3bd to your computer and use it in GitHub Desktop.
Save RobertSasak/7fd156877b363ec83d5cf9217aadb3bd to your computer and use it in GitHub Desktop.
Rotate user location based on heading
import React from 'react';
import MapboxGL from '@react-native-mapbox-gl/maps';
import sheet from '../styles/sheet';
import myIcon from '../assets/example.png';
import BaseExamplePropTypes from './common/BaseExamplePropTypes';
import Page from './common/Page';
const mapStyles = {
icon: {
iconImage: myIcon,
iconAllowOverlap: true,
},
};
class CustomUserLocation extends React.Component {
static propTypes = {
...BaseExamplePropTypes,
};
constructor(props) {
super(props);
this.state = {
coordinates: [0, 0],
heading: 0,
};
}
buildFeatureCollection = () => ({
type: 'FeatureCollection',
features: [
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: this.state.coordinates,
},
},
],
});
onLocationUpdate = ({coords: {longitude, latitude, heading}}) =>
this.setState({
coordinates: [longitude, latitude],
heading,
});
render() {
const featureCollection = this.buildFeatureCollection();
return (
<Page {...this.props}>
<MapboxGL.MapView style={sheet.matchParent}>
<MapboxGL.UserLocation
visible={true}
onUpdate={this.onLocationUpdate}
/>
<MapboxGL.ShapeSource
id="customUserLocation"
shape={featureCollection}>
<MapboxGL.SymbolLayer
id="customUsserLocation"
style={{...mapStyles.icon, iconRotate: this.state.heading}}
/>
</MapboxGL.ShapeSource>
</MapboxGL.MapView>
</Page>
);
}
}
export default CustomUserLocation;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment