Make react-leaflet map component resize itself to fit available space

Question

Setting the width of the Map component works, but height seems to only respond to an absolute size in pixels.

Is it possible to make the map control automatically consume available space inside the parent element?

Answer 1

I was able to create a component that passed in a component state value for the height of the map. I created a helper function that would resize the height to make it all responsive.

...

export default class MapContainer extends React.Component {

  updateDimensions() {
    const height = window.innerWidth >= 992 ? window.innerHeight : 400
    this.setState({ height: height })
  }

  componentWillMount() {
    this.updateDimensions()
  }

  componentDidMount() {
    window.addEventListener("resize", this.updateDimensions.bind(this))
  }

  componentWillUnmount() {
    window.removeEventListener("resize", this.updateDimensions.bind(this))
  }

  ...

  render() {
    ...
    return (
      <div class="map-container" style={{ height: this.state.height }}>
        <Map>
          ...
        </Map>
      </div>
    )
  }
}

Answer 2

Setting min-height & height to 100% on MapContainer worked form me:

<div style={{ height: "175px" }}><MapContainer style={{ height: "100%", minHeight: "100%" }} ...</div>

Answer 3

I solved this by using the react-container-dimensions component, which passes width/height as props to its child:

<div className="div that can resize""
ContainerDimensions>
<MyMapContainer/>
</ContainerDimensions>
</div>

...

style.width = Math.floor(this.props.width);                                                                                                                                                                                                                                                                                              
return (                                                                                                                                                                          
  <Map style={style}

Answer 4

I've solved this problem using display: flex, combining with flex: 1 for <MapContainer />. Full solution looks like this:

<div classname="map-container">
   <MapContainer
      .
      .
      style={{ flex: 1, width: '100%' }}
   />
</div>

.map-container {
   display: flex;
   height: whatever u want;
}

Works good, if our component is flexed by column direction (header & footer fixed height, then add to .map-container flex-property flex: 1)

Answer 5

I solved this by setting the height of leaflet-container to 100% in my .css file.

.leaflet-container {
    height: 100%;
}

With my Map component looking like this:

const Map = () => {

    return (
        <MapContainer center={[51.4381, 5.4752]} zoom={10} >
            <TileLayer
                maxZoom='20'
                attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />
        </MapContainer> 
    )
}

export default Map;

Answer 6

include import "leaflet/dist/leaflet.css" in your component.