title: react-map-gl custom markers don't stay at exact position on zoom
body: <p>I'm working to load a Mapbox map using Uber's react-map-gl library. I have successfully loaded the map with custom markers via JSON served from my API (as you can see from this first image).</p>
  
  <p><a href="https://i.stack.imgur.com/S8xKi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/S8xKi.png" alt="mapbox"></a></p>
  
  <p>If you look at the green marker near Houston though, it's off somewhere in the Gulf of Mexico for some reason. However if I zoom into that area...</p>
  
  <p><a href="https://i.stack.imgur.com/K6972.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/K6972.png" alt="zoomed in mapbox"></a></p>
  
  <p>You can see that as I zoom in, the marker readjusts to its correct position. What would cause something like this?</p>
  
  <pre><code>import ReactMapGL, { Marker, NavigationControl, Popup } from 'react-map-gl';
  import CityInfo from './city-info';
  import 'mapbox-gl/dist/mapbox-gl.css';
  
  class ExplorePage extends Component {
      state = {
          viewport: {
              width    : 400,
              height   : 400,
              latitude : 38.789093,
              longitude: -95.295881,
              zoom     : 3.7,
          },
          popupInfo: null,
      };
  
      componentDidMount() {
          this.props.dispatch(explorepageActions.getFavoriteHikes());
      }
  
      _renderMarker = (marker, index) =&gt; {
          return (
              &lt;Marker
                  anchor='bottom'
                  key={`marker-${index}`}
                  longitude={parseFloat(marker.longitude)}
                  latitude={parseFloat(marker.latitude)}
              &gt;
                  &lt;Pin width={100} onClick={(event) =&gt; this._handleClick(event, marker)} /&gt;
          &lt;/Marker&gt;
          );
      };
  
      _onViewportChange = viewport =&gt; this.setState({viewport});
  
      render() {
      const { explorepageData, loading } = this.props;
      const { viewport } = this.state;
  
      return (
          &lt;ExplorePageStyles&gt;
              {loading &amp;&amp; &lt;img src='/static/loading.svg' alt='loading' className='loading-img' /&gt;}
              {explorepageData.data &amp;&amp;
              &lt;Fragment&gt;
                  &lt;Sidebar&gt;
                      &lt;ExploreSidebar favoriteHikes={explorepageData} /&gt;
                  &lt;/Sidebar&gt;
                  &lt;ReactMapGL
                      {...viewport}
                      mapboxApiAccessToken={MAPBOX_TOKEN}
                      width='100%'
                      height='100%'
                      style={{ float: 'right' }}
                      onViewportChange={this._onViewportChange}
                      attributionControl={false}
                  &gt;
                      {explorepageData.data.map(this._renderMarker)}
                      {this._renderPopup()}
                      &lt;div className="nav" style={navStyle}&gt;
                          &lt;NavigationControl /&gt;
                      &lt;/div&gt;
                  &lt;/ReactMapGL&gt;
              &lt;/Fragment&gt;
              }
          &lt;/ExplorePageStyles&gt;
      );
  }
  </code></pre>
  
  <p>}</p>