CODEWITHSUNDEEP
javascriptandroidreact-native
Carlove
Carlove

Reputation: 449

How to zoom in on the last marker set down?

I got everything working but can't seem to find the right code to get the app zoomed in on the last marker placed down.

This is my code:

getEarthquakes(){       
    return fetch('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson')
    .then(response => response.json())
    .then(responseData =>{
       var markers = [];
        for (var i = 0; i < responseData.features.length; i++) {
          var coords = responseData.features[i].geometry.coordinates;
          var marker = {
            key: responseData.features[i].id,
            coordinate: {
              latitude: coords[1],
              longitude: coords[0],
            }
          }
          markers.push(marker);
        }

        this.setState({
         markers: markers,
         loaded: true,
         marker: markers,
         latitude: coords[1],
         longitude: coords[0]
        });
      }
    ).done();
}


render() {
  return (
      <View style={styles.container}>
        <MapView.Animated
          style={styles.map}
          region={this.state.marker}
          showsUserLocation={true}
          followUserLocation={true}>

             {this.state.markers.map(marker => (
                <MapView.Marker
                  key={marker.key}
                  coordinate={marker.coordinate}
                />
             ))}
        </MapView.Animated>
      </View>
     );
  }
}

I am calling up all the earthquakes in the past 30 days. So I thought I'd just place down region={this.state.marker} to get it zoomed into the last marker, but that doesn't work. It just places me above Africa, where no markers are set. Does anyone know what could work?

Edit:

My constructor / componentWillMount:

class Additional extends React.Component {
  constructor() {
    super();
    this.state = {
      region: {
        latitude: LATITUDE,
        longitude: LONGITUDE,
        latitudeDelta: LATITUDE_DELTA,
        longitudeDelta: LONGITUDE_DELTA
      },
      markers: [],
      loaded: false
    }

  }

componentDidMount() {
    navigator.geolocation.getCurrentPosition(
      (posData) => {
        this.setState({
          region: {
            latitude: posData.coords.latitude,
            longitude: posData.coords.longitude,
            latitudeDelta: LATITUDE_DELTA,
            longitudeDelta: LONGITUDE_DELTA,
            accuracy: posData.coords.accuracy
          }
        });
      },
      (error) => alert(error.message),
      {timeout: 10000}
    );
    this.getEarthquakes()
  }

UPDATE 18-01-2018:

After not having worked on it for almost a month I found the piece of code that is throwing sadness into the mix.

UPDATE 18-01-2018:

I thought I found the piece of code that threw sadness into the mix. But it now works after repasting the code. Very confusing. It might just be Lihini's keen eye.

Upvotes: 2

Views: 58

Answers (1)

Lizzy
Lizzy

Reputation: 2163

You haven't defined this.state.marker anywhere for it to work. Try setting the state first.

getEarthquakes(){       
    return fetch('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson')
    .then(response => response.json())
    .then(responseData =>{
       var markers = [];
        for (var i = 0; i < responseData.features.length; i++) {
          var coords = responseData.features[i].geometry.coordinates;
          var marker = {
            key: responseData.features[i].id,
            coordinate: {
              latitude: coords[1],
              longitude: coords[0],
            }
          }
          markers.push(marker);
        }

        this.setState({
          markers: markers,
          loaded: true,
          marker: markers[markers.length-1]   // set marker state
        });
      }
    ).done();   
}

EDIT

Notice this code piece. You're using this.state.marker as the region.

<MapView.Animated
      style={styles.map}
      region={this.state.marker}
      showsUserLocation={true}
      followUserLocation={true}>

         {this.state.markers.map(marker => (
            <MapView.Marker
              key={marker.key}
              coordinate={marker.coordinate}
            />
         ))}
</MapView.Animated>

And now notice what you're storing as the state in the below code piece.

this.setState({
      region: {
        latitude: posData.coords.latitude,
        longitude: posData.coords.longitude,
        latitudeDelta: LATITUDE_DELTA,
        longitudeDelta: LONGITUDE_DELTA,
        accuracy: posData.coords.accuracy
      }
});

You're setting this.state.region whereas you should be setting this.state.marker based on your above code. Hence try changing above to

this.setState({
      marker: {
        latitude: posData.coords.latitude,
        longitude: posData.coords.longitude,
        latitudeDelta: LATITUDE_DELTA,
        longitudeDelta: LONGITUDE_DELTA,
        accuracy: posData.coords.accuracy
      }
});

Upvotes: 2

Related Questions