React + Leaflet - Setstyle of layer is painting multiple CircleMarkers

Question

I am using React and Leaflet and trying to paint some CircleMarkers whenever I place the mouse over a div. This div contains information of 1 or more CircleMarkers' coordinates (those are the circleMarkers I want to change colors of).

I initialize the map like this:

this.map = L.map("map", { zoomControl: false });
let layer = L.tileLayer(
  "https://api.tiles.mapbox.com/v4/...",
  {   [...]   }
);

And then add the circleMarkers like this: (as suggested in https://stackoverflow.com/a/43019740/2211939)

this.totalElements.forEach(value => {
  let circle = new L.CircleMarker(
    [value.geometry.coordinates[1], value.geometry.coordinates[0]],
    {
      renderer: this.myRenderer,
      radius: 5,
      [...]
    }
  )
  .addTo(this.map)
}

Then, when I hover the div, the function executed is this one:

  changeCirclesColor = parent => {
    this.map.eachLayer(layer => {
      if (layer instanceof L.CircleMarker) {
        for (let child of parent.childrenGeometry) {
          if ( //THE GEOMETRY IS THE SAME) {
            console.log('PAINTED!');   // THIS IS PRINTED ONLY ONCE   
            layer.setStyle({
              fillColor: "#00d3be",
              [...]
            });
         [...]

However, even if there is just one child element, there are many other circleMarkers that change their style as well. If there is only one child, when I print 'layer._latlng', there's just one pair of coordinates, which (I guess) means there's only on circleMarker in that layer. Also, the layer.setStyle() function is only executed once, I'd say, since the console.log is only printed once.

What am I missing?

Can you provide a demo to be able to reproduce the issue? Why do you use `async` when looping over the `totalElements`? And if you use `react-leaflet` why not using a React Wrapper to initialize the map? — kboul, Feb 05 '20 at 12:33
Sorry, the async is because i run an async function whenever i click a marker. Also, I am not using react-leaflet, just React and the normal library of Leaflet. Finally, I'll try to set up a demo, but i have no idea how to do that, so it might take a while — chopeds, Feb 05 '20 at 12:41

score 0 · Accepted Answer · answered Feb 05 '20 at 14:01

Solved. Apparently, there was a problem with the render I was using, declared at the very top of the document: this.myRenderer = L.canvas({ padding: 0.5 });

I added this renderer to a CircleMarker every time I created one. I don't know the repercussions it might have to delete it, but the functionality works fine now, so I'll leave it like this and hope I didn't mess things up.

I would honestly delete this post since it is something so specific that I don't think anyone will have this same problem. But just in case, I'll leave it here and, hopefully, save someone some hours of work in the future.

React + Leaflet - Setstyle of layer is painting multiple CircleMarkers

1 Answers1