CODEWITHSUNDEEP
reactjsmapboxreact-map-gl
J. Jackson
J. Jackson

Reputation: 3774

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

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

mapbox

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

zoomed in mapbox

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>
    );
}

}

Upvotes: 3

Views: 7036

Answers (4)

Chathuranga Kasthuriarachchi
Chathuranga Kasthuriarachchi

Reputation: 1623

Including the css file fixed this issue for me

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

Upvotes: 7

wsc
wsc

Reputation: 29

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>

Upvotes: 2

fristyr
fristyr

Reputation: 169

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)\` }}

Upvotes: 3

J. Jackson
J. Jackson

Reputation: 3774

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.

Upvotes: 4

Related Questions