export default class Home extends Component {
  state = {
    mapRegion: { latitude: 37.78825, longitude: -122.4324, latitudeDelta: 0.0922, longitudeDelta: 0.0421 },
    markers: [{key: 1, score: 5, coordinate: {"latitude": 37.8199, "longitude": -122.4783}},
    {key: 2, score: 5, coordinate: {"latitude": 37.8059, "longitude": -122.4230}},
    {key: 3, score: 3, coordinate: {"latitude": 37.7694, "longitude": -122.4862}},
    {key: 4, score: 1, coordinate: {"latitude": 37.7941, "longitude": -122.4078}}]
  };

  _handleMapRegionChange = mapRegion => {
    this.setState({ mapRegion });
  };

  render() {
    return (
      <View style={styles.container}>
       <MapView
          style={{ alignSelf: 'stretch', flex: 1 }}
          region={this.state.mapRegion}
          provider={MapView.PROVIDER_GOOGLE}
          followsUserLocation={true}
          showsMyLocationButton={true}
          showsUserLocation={true}
          onRegionChange={this._handleMapRegionChange}
        >
        {this.state.markers.map(marker => {
        return (
            <Bike key={marker.key}
            coordinate={marker.coordinate}
            title={"Bike ID: " + marker.key.toString()}
            />
        );
        })}
        </MapView>
      </View>
    )
  }
}