How to add onClick event handler to objectManager in React yandex maps?

298 Views Asked by At

I'm using react-yandex-maps (https://github.com/R1ZEN/react-yandex-maps) library and I need to handle clicking on individual placemarks, and I'm having trouble with figuring out how to do so. How can I add onClick to rendedred objects on map?

<YMaps>
    <Map className="w-full h-full"
        state={{ center: center, zoom: 12 }}
        onBoundsChange={handleBoundsChange}
    >
        <ObjectManager
            options={{
                clusterize: true,
            }}
            objects={{
                preset: "islands#greenDotIcon",
            }}
            clusters={{
                preset: "islands#redClusterIcons",
            }}
            defaultFeatures={data.result.data.map((el: APZ) => ({
                type: "Feature",
                id: el.id,
                geometry: {
                    type: "Point",
                    coordinates: [el.lat, el.long],
                },
            }
            ))}
        />
    </Map>
</YMaps>
2

There are 2 best solutions below

2
Muhammad Jawad Mansoor On

Here is how to do it.

 <ObjectManager
  //Rest of code is same
   onObjectClick={(e) => {
        const id = e.get('objectId'); // Get Id 
        console.log(`Id is: ${id}`);
      }}

/>
0
Yelizaveta Chepurina On

Try:

<ObjectManager
  ...
  instanceRef={ref => ref.objects.events.add('click', () => console.log('click'))}
 />

This worked for me