CODEWITHSUNDEEP
react-leaflet
Bjorn Reppen
Bjorn Reppen

Reputation: 22799

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

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?

Upvotes: 8

Views: 24556

Answers (6)

pjokar
pjokar

Reputation: 121

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

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

Upvotes: 8

Random
Random

Reputation: 11

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

Upvotes: 1

chinzano
chinzano

Reputation: 79

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)

Upvotes: 3

Anne Smets
Anne Smets

Reputation: 19

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;

Upvotes: 1

Austin Gayler
Austin Gayler

Reputation: 4376

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}

Upvotes: 3

Evan Siroky
Evan Siroky

Reputation: 9438

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

Upvotes: 10

Related Questions