How to refresh map markers?

[jmbeach]

I am working on trying to integrate pokemongo-map with the spoofer and I have success with the initial load, but after that I can't get it to reload. I tried using a setInterval function to run the initial load process again, but that just caused all of the pokemon that were already on the map to turn into different pokemon...

Here's what the map looks like after first load:

But then after the set timeout function executes, all of the pokemon just get swapped out with new ones instead of appearing in the correct locations.

The code I've added:

View Pokemon.js:

import React, { Component } from 'react'

class Pokemon extends Component {
  constructor(props) {
    super(props);
    this.pokemon = props.pokemon;
  }
  render() {
    return(
      <img alt='pokemon' className='pokemon' src={'./icons/'+this.pokemon.pokemon_id+'.png'} />
    );
  }
}
export default Pokemon

View Pokestop.js

import React, { Component } from 'react'

class Pokestop extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return(
      <img alt='pokemon' className='pokemon' src='./icons/Pstop.png' />
    );
  }
}
export default Pokestop

map/index.js:

  componentDidMount() {
    var getPokemon = function() {
      fetch("http://localhost:5000/raw_data?pokemon=true&pokestops=true&gyms=false&scanned=false&spawnpoints=false&swLat=33.16315382865436&swLng=-87.60809871598815&neLat=33.259523840579625&neLng=-87.51402828141784&_=1471307317717").then(function(response){return response.json();}).then(function(result) {
        if (!result) return;
        var results = [];
        var stops = [];
        for(var i = 0; i < result.pokemons.length; i++) {
          var pokemon = result.pokemons[i];
          results.push(
            pokemon
          );
        }
        for(var i = 0; i < result.pokestops.length; i++) {
          var pokestop = result.pokestops[i];
          stops.push(
            pokestop
          );
        }
        self.state = {
          pokestops: stops,
          pokemons: results
        };
      });
    }
    getPokemon();
    setInterval(function() {
      getPokemon();
    }, 10000)
  }
// ... 
          <GoogleMap
            ref={ (ref) => { this.map = ref } }
            zoom={ settings.zoom.get() }
            center={ [ latitude, longitude ] }
            onClick={ this.handleClick }
            options={ () => this.mapOptions }
            onGoogleApiLoaded={ this.handleGoogleMapLoaded }
            yesIWantToUseGoogleMapApiInternals={ true }>
            <Pokeball lat={ userLocation[0] } lng={ userLocation[1] } />
            // my additions
            {self.state.pokemons.map(function(pokemon, i) {
              return (
                <Pokemon lat={pokemon.latitude} lng={pokemon.longitude} pokemon={pokemon} />
              )
            })}
            {self.state.pokestops.map(function(pokestop, i) {
              return (
                <Pokestop lat={pokestop.latitude} lng={pokestop.longitude} />
              )
            })}
          </GoogleMap> 

I've never used react and have no clue what I'm doing... So if anyone has any suggestions I'd appreciate it!!!

[ZuzooVn]

Did you find the solution?

[jmbeach]

@ZuzooVn no I didn't

[ZuzooVn]

Could you please update your status?

[iam4x]

You should implement that into models/pokemons.js

take inspiration of https://github.com/iam4x/pokemongo-webspoof/blob/master/src/models/pokemons.js#L82-L114

[jmbeach]

@ZuzooVn No progress. @iam4x Any ideas on the refresh though?

[jmbeach]

@iam4x Oh I see it. I bet I could get it, but I haven't really been pokemon going. I'll see this weekend maybe