Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
danjhd opened this issue Apr 15, 2024 · 1 comment

Comments

@danjhd
Copy link

danjhd commented Apr 15, 2024

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

working

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
Copy link

allie-tran commented May 27, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants