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

Question

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!

What error are you getting? Try onPress={() => {this._map.flyTo(featureCollection.features[0].geometry.coordinates, 1000);}} Also can you post an example of your feature? — cb64
Thanks, I've tried that too, but it always takes me to the first coordinate, not the coordinates of the specific icon. I'm not getting an error message. I've added my feature above. — kingloui
You need to capture the specific clicked target element. I'm not too versed in react but I know in normal javascript you have to reference the target layer. So it will go on in a click function like map.on('click', 'myLayer', function (e){}) and you need to capture the target with e.features[0].geometry.coordinates.slice(); so maybe try onPress={(e) => {this._map.flyTo(e.features[0].geometry.coordinates, 1000);}} or onPress={(e) => {this._map.flyTo(e.features[0].geometry.coordinates.slice(), 1000);}}; — cb64
Thank you for your suggestions, still not working unfortunately — kingloui

kingloui kingloui · Accepted Answer · 2019-03-19T16:12:25

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);

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

1 Answers