Create examples of custom myLocationButton and zoomButtons

[alvelig]

No description provided.

[ozluy]

Any work for that????

[samReact]

Some problem for me, I want to know how to change position of my current location button...

[andresmafra]

Is this available?

[gyurka00]

Any update?

[HughBerriez]

Custom myLocationButton example:

Here's the component I made in case you'd like to create your own. I tried getting the packages location button to work for my project on Android and nearly became bald because of it (All those solutions with re-rendering the Map component upon mapDidLoad or whatever definitely didn't work for me) so here's a snippet of my own code (no need to worry about my !isListingSelected statement etc). The use of refs here is the trick - you steal snippets from the baked in methods of the MapListing component with the refs - and then call the method you'd like when your custom component is tapped.

this.state = {
      latitude: INITIAL_REGION.latitude,
      longitude: INITIAL_REGION.longitude,
      error: null,
      isListingSelected: false
    }

/**
   * Sets the overall lat long of the map viewport and thus the animation engages
   */
  getCurrentPosition = () => {
    navigator.geolocation.getCurrentPosition(
      position => {
        this.setState({
          latitude: position.coords.latitude,
          longitude: position.coords.longitude,
          error: null
        })
        _mapView.animateToCoordinate(
          {
            latitude: this.state.latitude,
            longitude: this.state.longitude
          },
          1000
        )
      },
      error => {
        console.log(error)
        this.setState({ error: error.message })
      }
    )
  }

/**
   * Show find my location button
   * TODO: needs to have SDK26 permissions added to it in the near future
   */
  renderShowLocationButton = () => {
    if (!this.state.isListingSelected) {
      return (
        <TouchableOpacity
          style={styles.myLocationButton}
          onPress={() => {
            this.getCurrentPosition()
          }}
        >
          <MaterialCommunityIcons name='crosshairs-gps' size={24} />
        </TouchableOpacity>
      )
    }
    return
    // Should add error handling if needed too
  }

//In your map component
render() {
    ...
    <MapView
    ref={mapView => {
            _mapView = mapView
          }}
    {this.renderShowLocationButton()}
    ...
    />
}

const styles = StyleSheet.create({
  map: {
    ...StyleSheet.absoluteFillObject
  },
  myLocationButton: {
    backgroundColor: colors.surface,
    position: 'absolute',
    bottom: 10,
    right: 10,
    padding: 15,
    elevation: 3,
    alignItems: 'center',
    alignSelf: 'flex-end',
    justifyContent: 'center',
    borderRadius: 50
  }
})

[Anytram]

Could someone help with zoom in/out buttons? I can't make it work properly... And there is no valid and working examples in Internet... (Typescript, React 0.60)

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Louisten]

any update?

[john73-cloud]

is there any update concerning the show my location button location