'React-Leaflet How to show tooltips above layer when using panes

When using panes, the tooltip of the rectangle is shown behind the rectangle. How to fix this, so the tooltip is again above the layer as expected?

I tried to pass the pane argument to the Tooltip and also to set a higher zIndex on the tooltip, but none of this worked.

import React from "react";
import { MapContainer, Pane, Tooltip, Rectangle, TileLayer } from 'react-leaflet'

function Map(props) {

  return (
    <MapContainer
      center={[48, 11]}
      zoom={8}
    >
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Pane name="rectanglePane" style={{ zIndex: 401 }}>
        <Rectangle bounds={[[47.5, 10.5], [48.5, 11.5]]} >
          <Tooltip sticky>Rectangle Tooltip</Tooltip>
        </Rectangle>
      </Pane>
    </MapContainer>
  )
}

Using react-leaflet: 3.1.0

Wrong behaviour

leafletreact-leaflet


Solution 1:[1]

Wrap the tooltip in its own pane with a higher z index:

const Map = (props) => {
  return (
    <MapContainer center={[48, 11]} zoom={8} id="mapId">
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Pane name="rectanglePane" style={{ zIndex: 401 }}>
        <Rectangle
          bounds={[
            [47.5, 10.5],
            [48.5, 11.5]
          ]}
        >
          <Pane name="ttPane" style={{ zIndex: 402 }}>
            <Tooltip sticky>Rectangle Tooltip</Tooltip>
          </Pane>
        </Rectangle>
      </Pane>
    </MapContainer>
  );
};

Working codesandbox

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Seth Lutske

Related Questions