How to overlay content on the Leaflet map

HTML-CSS
1

I am attempting to add a UI over top of a leaflet map. To do this, I tried putting the leaflet map and the UI overlay wrapper as fixed, but the leaflet map always goes overtop of the UI regardless of the z-index.

return (
        <>
            <MapContainer
                center={[50.000, 0.00]}
                zoom={13}
                style={{ position: "fixed", top: 0, left: 0, height: "100%", width: "100%", zIndex: 1 }}
            >
                <UserCenterManager mapStore={mapStore} />
                <TileLayer
                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                />
            </MapContainer>
            <div className="Main-UI-Container">
                <p>Content Here</p>
            </div>
        </>
    )

With the CSS of:

.Main-UI-Container {
    background: fixed;
    z-index: 9999;
    background-color: #efefef;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

How can I fix this?

2

What happens if it is a child of the MapContainer component?

Did you try using the APIs they provide for adding child content to the MapContainer?

The example section has a bunch of overlay/layer examples.

Without seeing a live example, I don’t think we can tell you what is happening.

3

https://codesandbox.io/p/sandbox/leaflettest-f97lpf?file=%2Fsrc%2FApp.js%3A24%2C11

Here is a live example.

The child components linked appear to be for map items with a lat and lon.

4 
background: fixed;

It should be position not background

1 Like
5

Thank you.

If I do the following:

.Main-UI-Container {
  position: fixed;
  z-index: 9999;
  background-color: #efefef;
  top: 0;
  left: 0;
  height: 50vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

I get the following:

image
image810Ă—892 159 KB

When I click and drag on the “Content here” section, it still clicks and drags on the map.

The content area’s z-index is higher than that of the map, but this does not disable the map’s event listener initiation in the content sections.

Since the content section will contain drag-sensitive items (e.x., draggable graphs), how can I disable the dragging in this area?

6

I have no idea how you are meant to do it. Here is an attempt using the dragging methods
https://codesandbox.io/p/sandbox/leaflettest-disable-dragging-jr5n26

It doesn’t feel like the correct way of using the React wrapper for this lib, but what do I know. I still think you are mainly meant to use the child components provided.

1 Like
7

It works bro thanks a lot

1 Like