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?

Dichroic

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>
    )
  }
}

Wearing

Answer 2

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

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

Errant

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}

Canvasback

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)

Lacielacing

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;

Anomaly

Answer 6

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

Kathykathye

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Herstein