Search code examples
leafletreact-leaflet

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

Solution

  • 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