Marker with Modal do not works

[nautilor]

Hello,

I have created a custom component to show a marker then when pressed opens a Modal;

here's the code

<RouteModal 
    key={key} lat={lat} lng={lng} width={50}
    color={rock.color} name={name} />

the modal works fine but the marker is placed on the top left corner of the webapp (check screenshot)

by doing some checking i've seen that the lat and lng are passed correctly to the component but when rendered they somehow get lost as i don't see no transform property in the style when running the inspector.

am I missing something?

[baldulin]

Hey, I think the issue is that you don't add the Marker Component as a direct child of Map. All direct Child components of Map are cloned here and will receive a left and right property. Those properties are used in the Marker Component here to create the transform css attribute.

As you don't have the option to make the Marker a direct child of Map you have to pass the "cloned" attributes manually. Simplest way I guess is the following:

const RouteModel = (props) => {
    const [modal, setModal] = useState(false);

    return (
        <>
            <Marker onClick={() => setModal(!modal)} {...props} />
            {(modal) && (
                <Modal
                    isOpen={modal}
                    onRequestClose={() => setModal(!modal)}
                    ariaHideApp={false}
                >
                    <h2>{props.name}</h2>
                    <p>{props.name}</p>
                    <button onClick={toggleModal}>Close</button>
                </Modal>
            )}
        </>
    );
}

Note though for this to work you have to pass lat, lng the "pigeon" way as an array to a prop anchor, so this is nothing but a small wrapper around the Marker component.

[mariarivm30]

I have the same problem , could you solved?

[chasoft]

You need to put <Marker /> directly inside <Map>

So, following is valid

<Map>
     <Marker ... />
</Map>

This is also valid

<Map>
     {makersList.map(marker => ( <Marker ... />  ))}
</Map>

Following is invalid

const CustomMarker = () => (
    <Marker ... />
)
.....
<Map>
     <CustomMarker ... />
</Map>

[rozzrr]

so im running into this problem. i have a dynamic marker count that comes from an external api, so having the map and marker in the same component is not really that feasible, espeically when it comes it simulating marker movement without having to re-render whole map etc. is there a way around this? cheers

[baldulin]

To be honest this issue should be closed. And what you are asking is not really related to this.

@rozzrr

[...] re-render whole map etc. is there a way around this?

I think you can do this, you will need to write a custom component that receives all the mapping props. Most importantly latLngToPixel which enables you to calculate the pixel position of the marker based on the coordinates. The GeoJson component pretty much does something like this. But I'd advise you to first check if this is really necessary it's not like rerendering the map component really rerenders all of it's features.