CODEWITHSUNDEEP
react-leaflet
kristyna
kristyna

Reputation: 2079

React-leaflet: Change marker opacity on mouse event

I am trying to change marker opacity on mouseover event.

<Marker position={} icon={} opacity={0.7}
    eventHandlers={{
        mouseover: (event) => {
            // change opacity here?
            // I tried:
            event.target.options.opacity = 1;
        }
    }}
/>

That doesn't work. I am thinking the only way to do it is to hold a state for every marker, but I don't like that idea. This is just a simple task and I don't want to hold all states for this.

EDIT:

This is a method I call in render() inside the MapContainer tag.

const parseObjects = () => {
    let markers = [];
    Object.values(nodes).map( (node) => {
        const marker = useRef(null);
        markers.push(
            <Marker position={node.getPosition()}
                ref={marker}
                key={marker.id}
                ...>
                     // pop up and tooltip
            </Marker>
        );
    });

    // More objects being parsed... 
    
    return markers;
}

return (
    <MapContainer>
        {parseObjects()}
    </MapContainer>
)

I turned it into this:

return (
    <MapContainer>
        Object.values(nodes).map( (node) => {
            const marker = useRef(null);
            return <Marker position={node.getPosition()}
                ref={marker}
                key={marker.id}
                ...>
                     // pop up and tooltip
                </Marker>
            );
        });
    </MapContainer>
)

Both of these examples give me

React Hook "useRef" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function react-hooks/rules-of-hooks

Upvotes: 0

Views: 510

Answers (1)

flaky
flaky

Reputation: 7404

You can try like this:


<>
  {markers.map(marker => {

    // reference - no need for array
    const marker = useRef(null);

    return (
      <Marker
        ref={marker}
        key={marker.id}
        position={[marker.lat, marker.lng]}
        eventHandlers={{
          mouseover: () => (marker.current._icon.style['opacity'] = 0.5),
          mouseout: () => (marker.current._icon.style['opacity'] = 1),
        }}
      >
      </Marker>
    );
  })}
</>

it uses a ref to get a handle on the HTML element and changes styles directly on it.

Upvotes: 1

Related Questions