Change css filter property on React-Leaflet TileLayer with useRef

Question

I am trying to change the filter style property on the React-Leaflet TileLayer. Basically, what I want to do is to dim the tile layer without dimming/altering the markers by adjusting the filter style property on the .leaflet-tile class using a button or slider.

I have a Code Sandbox setup here with what I have tried so far.

I started by wrapping the MapContainer component in a div and attaching a ref with React's useRef hook, like this:

const tileRef = useRef(null);

<div ref={tileRef}>
    <MapContainer
        center={[51.505, -0.09]}
        zoom={13}
        scrollWheelZoom={false}
    >
        <TileLayer
            attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <Marker position={[51.505, -0.09]}>
            <Popup>
                A pretty CSS3 popup. <br /> Easily customizable.
            </Popup>
        </Marker>
    </MapContainer>
</div>

Then, I have set up a useEffect that watches a brightnessLevel state hook. Inside the useEffect, I am using the tileRef to access the style.filter property of the .leaflet-tile css class. It is accessing it and is showing it in console.log, but nothing is changing in the display:

const [brightLevel, setBrightLevel] = useState(100);

useEffect(() => {
    if (tileRef.current) {
      if (tileRef.current.querySelector(".leaflet-tile")) {
        if (tileRef.current.querySelector(".leaflet-tile").style) {
          console.log(tileRef.current.querySelector(".leaflet-tile").style);
          if (
            tileRef.current.querySelector(".leaflet-tile").style.filter ||
            tileRef.current.querySelector(".leaflet-tile").style.filter === ""
          ) {
            console.log("Check Four pass");
            console.log(tileRef.current.querySelector(".leaflet-tile").style.filter);
            tileRef.current.querySelector(".leaflet-tile").style.filter = `brightness(${parseInt(brightLevel)}%)`;
          }
        }
      }
    } else {
      console.log("No Ref");
    }
}, [brightLevel]);

I'm not really sure why I can access the property, and have it console.log as if it is updating, but nothing in the display is changing. Any ideas?

Versions:

• React-Leaflet: 3.1.0
• Leaflet: 1.7.1
• React: 17.0.1

Answer 1

You should assign tileRef to TileLayer and not the parent MapContainer's div. Use

tileRef's .getContainer().style.setProperty to change a css property in combination with an effect.

const tileRef = useRef();

  const [map, setMap] = useState(null);
  const [filter, setFilter] = useState(100);

  useEffect(() => {
    if (map) {
      tileRef.current
        .getContainer()
        .style.setProperty("filter", `brightness(${filter}%)`);
    }
  }, [map, filter]);


 <>
      <MapContainer
        center={[51.505, -0.09]}
        zoom={13}
        style={{ height: "90vh" }}
        whenReady={setMap}
      >
        <TileLayer
          ref={tileRef}
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
      </MapContainer>
      Change filter property
      <input
        type="text"
        name="name"
        onChange={(e) => setFilter(e.target.value)}
        value={filter}
      />
    </>

Demo