React Leaflet: Custom event "onClick" for Marker component

Question

I want to define a react component for Marker element of 'react-leaflet'. E.g.

import React,{useState} from 'react'
import {Marker,useMapEvent } from 'react-leaflet'
import fireIconSvg from './fire-icon.svg'

import L from "leaflet";

const OSLocationMarker = ( {position, onClick} ) => {

  const locationIcon = new L.Icon({
    iconUrl: fireIconSvg,
    iconRetinaUrl: fireIconSvg,
    iconAnchor: null,
    popupAnchor: null,
    shadowUrl: null,
    shadowSize: null,
    shadowAnchor: null,
    iconSize: new L.Point(35, 45),
    className: 'location-icon'
});

return (
      <Marker
        data="customdata"
        position={position}
        icon={locationIcon}
        onClick={onClick}
      >
      </Marker>
  );
}

export default OSLocationMarker;

By this I want to trigger a function when one click on any OSLocationMarker (there are N markers). OSLocationMarker get the callback function as prop. This does not work. With useMapEvent() leaflet hook i did not get it working. Why is the function not being called?

Seth Lutske · Accepted Answer · 2021-05-28T05:58:59.763

11

onClick doesn't work anymore in react-leaflet v3. useMapEvent(s) applies to the map instance, not to UI components like Marker. To register an event handler on a Marker, you need to use the eventHandlers prop:

<Marker
  data="customdata"
  position={position}
  icon={locationIcon}
  eventHandlers={{ click: onClick }}
>
</Marker>

edited May 28 '21 at 05:58

answered Nov 30 '20 at 16:24

Seth Lutske

9,154
5
29
78

Hey Seth, is there another way of doing this? This is not even compiling for me. It's erroring in the colon, saying I show be having a } instead. – Daniel Tkach May 28 '21 at 05:13
2

I think that was a typo. Should be `eventHandlers={{ click: onClick }}` – Seth Lutske May 28 '21 at 05:58

React Leaflet: Custom event "onClick" for Marker component

1 Answers1

Linked