CODEWITHSUNDEEP
react-nativemapbox
kingloui
kingloui

Reputation: 161

How do you center the map on a clicked symbol using MapBox and React Native?

Spent a long time trying to do this: Mapbox show how to do it here, but I'm unsure how it works in React Native: https://docs.mapbox.com/mapbox-gl-js/example/center-on-symbol/

I'm using ShapeSource and SymboLayer, getting my markers from a geoJson. I can't seem to target the specific icon and its' coordinates. I've tried something like this, but it just takes be to the first feature location (not the location of the specific icon clicked):

onPress={() => {this._map.flyTo(featureCollection.features.geometry(0).coordinates, 1000);}}

My features look like this:

{ "type": "FeatureCollection", "features": [ { "type": "Feature", "id": 1, "properties": { "name": "Hotel", "icon": "sleep" }, "geometry": { "type": "Point", "coordinates": [ 12.584664, 55.680532 ] } }, { "type": "Feature", "id": 2, "properties": { "name": "Restaurant", "icon": "food" }, "geometry": { "type": "Point", "coordinates": [ 12.585264, 55.683441 ] } } }

Thanks!

Upvotes: 0

Views: 1812

Answers (1)

kingloui
kingloui

Reputation: 161

I think I've found a working answer to this, but please correct me if you have a better answer:

constructor(props) {
    super(props);
    this.onPress = this.onPress.bind(this);
  }

  async onPress(e) {
    const feature = e.nativeEvent.payload;
    this.map.flyTo(feature.geometry.coordinates, 1000);

Upvotes: 2

Related Questions