React-map-gl: Marker moves when I zoom out the map

[ahlag]

I have created a marker while using the map tiles from maptiler. The marker moves away from the location when I zoom out the map. Is there a way to solve this issue?

import React from "react";
import { useState } from 'react';
import ReactMapGL, {Marker} from 'react-map-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
import Pin from './pin'

function FindHospitalPage() {
  const [viewport, setViewport] = useState({
    width: 1300,
    height: 600,
    latitude: 51.5,
    longitude: -0.09,
    zoom: 16
  });

  return (
    <ReactMapGL
      {...viewport}
      mapboxApiAccessToken={'not-needed'}
      mapStyle={"https://api.maptiler.com/maps/streets/style.json?key=RVqrAzdxmF8lTLoFpOJa"}
      onViewportChange={setViewport}
    >
      <Marker latitude={51.5} longitude={-0.09}>
        <Pin />
      </Marker>
    </ReactMapGL>
  );
}

export default FindHospitalPage;

[Pessimistress]

Do you see this problem with https://uber.github.io/react-map-gl/examples/controls ? If so, please include a screenshot/GIF.

Otherwise, provide a code sandbox link so that we can reproduce your issue.

[dfalling]

I ran into the same issue, but it was a problem on my end. I looked through the examples and realized I needed to do a transform of my markers.

const SIZE = 20;
const UNIT = "px";

<Marker style={{transform: `translate(${SIZE/2 + UNIT}, ${SIZE/2 + UNIT}` />

[aperkaz]

Looking into the docs and other issues @ahlag, setting the offsetTop and offsetLeft props in the Marker component fixed it for me.

Example:
Given you use an icon as a marker of size 20px (height) and 14px (width) such as this one, in order to set the marker's bottom-center as the center for the latitude/longitute and avoid the zooming issues, you can:

<Marker offsetTop={-heigth}  offsetLeft={-width/2} ...otherProps />
     // offsetTop={-20}      offsetLeft={-7} 

[wkennedy8]

@aperkaz thank you!!

[ahlag]

@aperkaz
That worked for me! Thank you!