Using React Fragments or any other React Component to wrap a Marker affects the Transform

[danjhd]

Hi,

I am using Pigeon Maps to display the location of a few different items onto a Map. I want to render the Marker from within my own custom component, however it seems that unless the Marker component is a direct child (nothing in between) of the Map component the style transform is missed and so the Marker renders in the top left corner of the map.

Is this a known problem? Is there a solution i can use to get it to work?

I will supply a basic sample code to help explain what i am seeing:

import { Map, Marker } from "pigeon-maps";

const MyMarker = () => {
  return <Marker width={50} anchor={[50.879, 4.6997]} color="blue" />;
};

export function App() {
  return (
    <Map height={300} defaultCenter={[50.879, 4.6997]} defaultZoom={11}>
      <MyMarker />
    </Map>
  );
}
export default App;

Here is a screenshot showing the Marker in the TL corner and the dev tools open showing that the transform is missing:

Here is a screenshot of me doing the same thing but without using a "wrapper component", here you can see the Marker is correctly positioned and the transform is found in the dev tools.

I know that this could be resolved by not using a custom component but in my real world case i have a lot of extra code specific to this Marker and so keeping it all in one file is a real mess. Any help you could offer to explain how i might fix this would be gratefully received....

[allie-tran]

Hi there. I'm not sure you still have the same issues. But I encountered the same problem and managed to solve it by passing props into the custom components like this.

const CustomMarker = ( props : { props? PigeonProps}) => <Marker {...props}/> 

I'm on mobile so there might be a typo.