React-map-gl: Marker not anchoring correctly when zoomed

[ckalas]

I am using standard template stuff to display some markers on a map, however when I zoom they move. Here is the instantiation the markers, as well as screen shots of the behaviour. I'm fairly certain the style sheet is being correctly imported as it appears under the page resources.

 <ReactMapGL

                mapStyle='mapbox://styles/mapbox/light-v9'
                {...this.state.viewport}

                onChangeViewport={this.onChangeViewport}
                mapboxApiAccessToken = 'xxxxxx'
>


                {this.state.nodes.map(x =>
                    <Marker latitude={x.lat} longitude={x.lng} anchor={"bottom-left"}>
                        <div className='mapMarkerStyle'/>
                    </Marker>
                )}

</ReactMapGL>



.mapMarkerStyle {
  background-image: url('pin.svg');
  background-size: cover;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
}

[GunnarSturla]

What's happening is that the marker is being anchored in the top-left of the div (if you look closely, the top-left looks like its in pretty much the same location). What you need to do is set the offsetLeft to half the icon size and offsetTop to the full height of the icon, in order to set the anchor at the point of you marker icon. You can read more about it in the marker documentation

<Marker 
  latitude={x.lat}
  longitude={x.lng}
  anchor={"bottom-left"}
  offsetLeft={-25}
  offsetTop={50}
>
  <div className='mapMarkerStyle'/>
</Marker>

Edit: Removed anchor={"bottom-left"} prop that wasn't doing anything.

[timendez]

@GunnarSturla I don't see the anchor property in the uber docs, only the mapbox-gl-js docs. Does this mean it won't work? Because theoretically you should just be able to set the anchor as "bottom" and not have to set an offset.

[GunnarSturla]

Right.. I must have mixed things up with the anchor, I don't think it's doing anything in there, and there's no code using it in marker.js.

The important bit in the code is the offsetLeft and offsetTop, they're essentially anchoring the icon to the bottom-center.

Sorry for the mix up, and thanks for noticing!

[timendez]

Ok, good to know, thanks @GunnarSturla!

[chasen-bettinger]

In case it helps anyone, both of the offsets were supposed to be negative for me.

For example:

offsetTop={-50}
offsetLeft={-25}