How to make a component show on top of MapContainer?

Question

I have a react app that uses React-Leaflet. The Application renders a map, and on top of the map there should be a component that shows a modal. Instead, the modal is shown underneath the map. How can I make the modal show on top of the map instead like it's supposed to?

Code:

export default function AssignArea() {
  return (
    <Container maxWidth="sm" style={{ position:"absolute", zIndex: 100 }}>
      <Typography variant="h1" component="h2">
        ASSIGN AREA
      </Typography>
      <Input placeholder="Title"></Input>
      <SketchPicker />
      <Input></Input>
      <Button color="error" variant="text"><DeleteIcon/>CANCEL</Button>
      <Button color="primary" variant="text"><RoomIcon/>CONFIRM</Button>
    </Container>
  );
}

return (
  <MapContainer
    center={[mapBase.lat, mapBase.lng]}
    zoom={mapBase.zoom}
    maxBounds={bounds}
    style={{ height: '100vh', width: '100%', position: 'relative', zIndex: 0 }}
    zoomControl={true}
    attributionControl={true}
  >
    {/* Base map layer */}
    <TileLayer
      url='https://tile.openstreetmap.org/{z}/{x}/{y}.png'
      maxZoom={20}
      zoomOffset={-1}
      tileSize={512}
      zIndex={0}
    />
    <RemoveUkraineFlag />
    <Markers />
    <Zones />
    <UiBase />
    <Dropdown />
    {showAssignModalAtomValue ? <AssignArea /> : null}
  </MapContainer>
);

The MapContainer has a lower z-Index than the AssignArea component, but it still renders under the map. How come?

I don't think this can be fixed with zIndex, have you looked into createPortal? — ninadepina
– ninadepina, Commented Nov 4 at 14:39
Try to move modal outside MapContainer and then use position: fixed & higher zIndex. — Sajjan Nehal
– Sajjan Nehal, Commented Nov 4 at 15:20
Please edit to include a complete minimal reproducible example (including imports and dependency versions) such that readers can run the code and attempt to reproduce any issues you are describing. Be sure to include any exact reproduction steps if they are necessary, complete error messages and stacktraces, and debugging logs and details from any investigation. This should help readers better understand what you are asking. — Drew Reese
– Drew Reese, Commented Nov 4 at 15:50

Alexander Bogoslawski · Accepted Answer · 2025-11-05 13:04:36Z

0

Try to add the classes leaflet-top and leaflet-left to your overlay. This should add the required styles to make it a map overlay.

<Container className="leaflet-top leaflet-left">

Should do the trick.

See the docs here: https://react-leaflet.js.org/docs/example-react-control/.

An alternative would be to put the overlay outside of the MapContainer. If your map is 100% height an width it maybe should not be necessary to put it as a child of the map.

edited Nov 5 at 13:04

answered Nov 5 at 13:00

Alexander Bogoslawski

12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to make a component show on top of MapContainer?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related