CODEWITHSUNDEEP
reactjsreact-nativegoogle-mapsmapboxopenstreetmap
mr geek
mr geek

Reputation: 87

React Native MapBox Get Clicked Location

I successfully added @react-native-mapbox-gl/maps to my project. Now I don't need user's current location but I just need to get the coordinates (lat & lng) of where ever the user clicks on the map. I've tried everything but nothing works! my code:

import MapboxGL, {MapView, UserLocation} from '@react-native-mapbox-gl/maps';

MapboxGL.setAccessToken(
    'MyAccessToken', );


export default class .... .... {

getLastLocation(location) {

        ToastMaker(location, 'short')

    }

render() {

        return (
                <View style={{flex: 1}}>
                    <View style={{height: '100%',
                        width: '100%',
                        backgroundColor: 'blue'}}>
                        <MapView style={{ flex: 1}}

                          //These Don't Work!
                        //onUserLocationUpdate={(property) => this.getLastLocation(property)}
                        //onLongPress={(property) => this.getLastLocation(property[0].coordinates)}
                        //onLongPress={(property) => this.getLastLocation(property.geometry) }
                        //onLongPress={(property) => ToastMaker(property.properties.screenPointY,'short') }
                       >
                            <MapboxGL.PointAnnotation
                                draggable={true}
                                id={'1'}
                                selected={true}
                                coordinate={this.state.coordinates}
                            />
                        </MapView>
                    </View>
                </View>
        )
    }

}

* All I need is the coordinates of where the user selects on the map Thanks *

Upvotes: 2

Views: 3327

Answers (1)

mfazekas
mfazekas

Reputation: 5709

Use MapView#onPress property.

<MapView
  ... 
  onPress={(feature)=>console.log('Coords:', feature.geometry.coordinates)}
>
  ...
</MapView>

See ShowPointAnnotation.js for complete example

Edited: fixed variable error "feature" in the function

Upvotes: 7

Related Questions