onMapMarkerClicked handling

[AhmedAliIS]

hello, Im trying to handle an event when clicking on a marker that will show the title, so I want to click on the title or the marker again to trigger a function to do something I want. is that possible? and how to controller the events in general since the docs of the lib is poor.

thank you,

[boma25]

hello, Im trying to handle an event when clicking on a marker that will show the title, so I want to click on the title or the marker again to trigger a function to do something I want. is that possible? and how to controller the events in general since the docs of the lib is poor.

thank you,

hey man not a solution but i am trying to display markers and they are not showing how did you go about yours? thank you.

[noedelcroix]

@boma25 check the example file here : example/src/App.tsx.

[nbarsova]

This can be done via adding the id to the marker and then in the map messages you get this id in the payload. Like this:

let marker= {
                    lat: 0, lng:0
                    },
                    title: 'some title',
                    id: 11111
            });

and in the leaflet component:

<LeafletView
                mapMarkers={[marker]}
                onMessageReceived={(msg)=> {
                      //...
                      doSomething(msg.payload?.mapMarkerID);
                }}
            />

[amalpba]

The marker constant holds an array of marker objects with position, title, and id properties.

In the component, you can pass mapMarkers={[marker]}, which means you can pass an array containing your marker array as a prop named mapMarkers.

Then, you have an onMessageReceived prop, which presumably gets triggered when some message is received. Inside the callback function for onMessageReceived, you're logging the mapMarkerID property of the received data.

`const marker = [ { position: { lat: 454.344, lng: 123.456 }, title: 'Alexa', // Corrected typo id: 1234 } ];

<LeafletView mapMarkers={marker} // Corrected array passing onMessageReceived={(data)=> { console.log(data.payload?.mapMarkerID); // marker array id will appear here }} /> `