react-map-gl custom markers don't stay at exact position on zoom

Question

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).

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...

You can see that as I zoom in, the marker readjusts to its correct position. What would cause something like this?

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) => {
        return (
            <Marker
                anchor='bottom'
                key={`marker-${index}`}
                longitude={parseFloat(marker.longitude)}
                latitude={parseFloat(marker.latitude)}
            >
                <Pin width={100} onClick={(event) => this._handleClick(event, marker)} />
        </Marker>
        );
    };

    _onViewportChange = viewport => this.setState({viewport});

    render() {
    const { explorepageData, loading } = this.props;
    const { viewport } = this.state;

    return (
        <ExplorePageStyles>
            {loading && <img src='/static/loading.svg' alt='loading' className='loading-img' />}
            {explorepageData.data &&
            <Fragment>
                <Sidebar>
                    <ExploreSidebar favoriteHikes={explorepageData} />
                </Sidebar>
                <ReactMapGL
                    {...viewport}
                    mapboxApiAccessToken={MAPBOX_TOKEN}
                    width='100%'
                    height='100%'
                    style={{ float: 'right' }}
                    onViewportChange={this._onViewportChange}
                    attributionControl={false}
                >
                    {explorepageData.data.map(this._renderMarker)}
                    {this._renderPopup()}
                    <div className="nav" style={navStyle}>
                        <NavigationControl />
                    </div>
                </ReactMapGL>
            </Fragment>
            }
        </ExplorePageStyles>
    );
}

}

score 4 · Accepted Answer · answered Mar 08 '19 at 16:44

4

Ok after a few days of messing around I finally figured it out. The issue had something to do with my use of a custom icon for the Marker. Copying over the example's pin made it work correctly.

answered Mar 08 '19 at 16:44

J. Jackson

3,326
8
34
74

Hi! I had that behavior on mobile devices. In my case I accidentally commented out ``. After I uncommented this meta tag, all my pins started works as expected. – SAndriy Jun 20 '20 at 12:35

score 4 · Answer 2 · answered Jun 16 '22 at 15:56

4

Including the css file fixed this issue for me

import 'mapbox-gl/dist/mapbox-gl.css'

answered Jun 16 '22 at 15:56

Chathuranga Kasthuriarachchi

1,221
10
13

score 3 · Answer 3 · edited Jul 14 '20 at 22:21

Found one more solution:

let size = 40;

{cities.map(({ coordinates }) => (
  <Marker
    latitude={coordinates.latitude}
    longitude={coordinates.longitude}
  >
    <div
      style={{ transform: `translate(${-size / 2}px,${-size}px)` }}
      onClick={(e) => {
        setSelectedCity(coordinates);
      }}
    >
      <img
        src={process.env.PUBLIC_URL + '/assets/location.svg'}
        alt="Location-icon"
      />
    </div>
  </Marker>
))}

Most important here is :

style={{ transform: `translate(${-size / 2}px,${-size}px)\` }}

wsc · Answer 4 · 2020-12-24T07:58:29.387

because your latitude and longitude is change every time when you scrolling

const [viewport, setViewport] = useState({
  width: '100%',
  height: 240,
  latitude: 41.70123,
  longitude: 44.85137,
  zoom: 17,
  mapboxApiAccessToken: process.env.MAP_ACCESS_TOKEN
})

const [marker] = useState({
  latitude: 41.70123,
  longitude: 44.85137
})

<ReactMapGL className="map" {...viewport} onViewportChange={listenViewportChange}
>
  <Marker {...marker}>
    <img src={mapPingIcon} alt="" />
  </Marker>
</ReactMapGL>

react-map-gl custom markers don't stay at exact position on zoom

4 Answers4