CODEWITHSUNDEEP
javascriptreact-nativemapsmapboxreact-native-mapbox-gl
Deekshith MR
Deekshith MR

Reputation: 93

How to get the user location in react-native-mapbox-gl?

i'm using react-native-mapbox-gl to show the map in my react app, on page load it should show the location of the user like how the google maps shows, but it fails to show instead it will show some other region of the map,

Can someone help?

Thanks in advance.

here is the snippet

import { StyleSheet, View } from "react-native";
import MapboxGL from "@react-native-mapbox-gl/maps";

MapboxGL.setAccessToken("<YOUR_ACCESSTOKEN>");

const styles = StyleSheet.create({
  page: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  },
  container: {
    height: 300,
    width: 300,
    backgroundColor: "tomato"
  },
  map: {
    flex: 1
  }
});

export default class App extends Component {
  componentDidMount() {
    MapboxGL.setTelemetryEnabled(false);
  }

  render() {
    return (
      <View style={styles.page}>
        <View style={styles.container}>
          <MapboxGL.MapView style={styles.map} />
          <MapboxGL.UserLocation />
        </View>
      </View>
    );
  }
}

Upvotes: 4

Views: 11436

Answers (3)

Wasit Shafi
Wasit Shafi

Reputation: 1539

For me, it works(was showing the wrong location as of now):

<MapboxGL.MapView style={styles.map} zoomEnabled logoEnabled={false}>
  <MapboxGL.UserLocation visible={true} />
</MapboxGL.MapView>

enter image description here

For more information you can refer to official docs.

https://github.com/nitaliano/react-native-mapbox-gl/blob/master/docs/MapView.md https://github.com/rnmapbox/maps/blob/main/docs/UserLocation.md

P.S: MapboxGL.MapView has one props showUserLocation but it seems now working now, I also tried several other props as mentioned in docs they are also not working, look docs are not updated!!

Upvotes: 0

Tijs Martens
Tijs Martens

Reputation: 296

You can pass children the MapboxGL.Mapview.

<MapboxGL.MapView style={styles.map}>
  <MapboxGL.UserLocation/>
</MapboxGL.MapView>

Upvotes: 4

joy08
joy08

Reputation: 9652

Check this article that shows how to display user location marker using Marker component.

https://github.com/react-native-mapbox-gl/maps/issues/227

https://github.com/react-native-community/react-native-maps/blob/master/docs/marker.md

react-native mapbox is not showing user location and annotation

Upvotes: 1

Related Questions