How to Make Leaflet Map Height Variable

how to make leaflet map height variable

You need to set the parent elements to height: 100%; first

html, body {
   height: 100%;
}

Demo

Demo (This won't work as no parent height is defined)

Explanation: Why do you need to do that? So when you specify an element's height in % then the 1st question that arises is: 100% of what?
By default, a div has height of 0px, so 100% for a div simply won't work, but setting the parent elements height to 100%; will work.

Set Leaflet map to height: 100% of container

Set

#map{
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

and give its container position: relative.

How to get a leaflet map canvas to have a 100% height?

Using height: 100% does work, it only needs the parent containers to have a size too (working demo):

html, body { 
    height: 100%; 
}
#map {
  width: 100%;
  height: 100%;
}

Variable size of map container filled completely with map (preferably in leaflet)

Two Things (assuming leaflet.js is used) -

1. Define the size of map container in em, rem or px.
2. Call map.invalidateSize(), where
   
   var map= L.map("map_container_id", {center: [lat, lng]});
   
   once map has been loaded on to map container.
   
   map.invalidateSize() updates the map on change of size.

How can I dynamically resize a leaflet map after clicking a button?

Finally I found a solution that works for me. I'll post it here. I want to thank @Mostafa Harb for helping me.

L.easyButton('click', function() {
  const footerAndHeader = Array.from(document.getElementsByClassName('scroll-content') as HTMLCollectionOf<HTMLElement>)[1];

  if (self.hideLayout) {
    self.map.addControl(setLayers);
    self.map.addControl(setZoom);
    self.map.addControl(toolBar);
    self.map.addControl(setScale);
    self.enableAdditionalButtons(textButton, arrowButton);
    self.hideLayout = false;
    self.hideFooter = false;
    self.hideHeader = false;
    self.map.invalidateSize(true);

    footerAndHeader.style.marginBottom = "40px";
    footerAndHeader.style.marginTop = "54px";
  } else {
    self.hideLayout = true;
    self.hideFooter = true;
    self.hideHeader = true;
    self.map.removeControl(toolBar);
    self.map.removeControl(setLayers);
    self.map.removeControl(setZoom);
    self.map.removeControl(setScale);
    self.disableAdditionalButtons(textButton, arrowButton);
    self.map.invalidateSize(true);

    footerAndHeader.style.marginBottom = "7px";
    footerAndHeader.style.marginTop = "3px";
  }
})

In my case the problem was the <div> with "scroll-content" class that were automatically created inside the <ion-content> tag. So, using getElementsByClassName, I took the second element in my array and I adjusted margin top and margin bottom for the header and for the footer.

Surely this solution will not be optimal and there will be a better way.

Drawing a partial circle, with varying height, without gradients (for leaflet map markers)

An alternative solution would be using a line path that you clip with the circle. Now you can use the stroke-dasharray attribute to set the stroke and the gap length of the path.

I'm using an input type range only to show how the result for different values.

let len = line.getTotalLength();

itr.addEventListener("input",()=>{
  let dash = itr.value * len/100;
  line.setAttribute("stroke-dasharray",`${dash},${100 - dash}`);
  console.clear();console.log(itr.value)
})

<P><input type="range" value="25" id="itr"/></p>

<svg width="100" viewBox="0 0 100 100" version="1.1">

  <text text-anchor="middle" font-family="Verdana" font-size="320%" font-weight="bold" dominant-baseline="central" x="50" y="48" fill="#80C000">A</text>

  <clipPath id="clip">
    <path id="circ" d="M92.8,50A42.8, 42.8 0 1 1 7.2,50A42.8,42.8 0 1 1 92.8,50 M82,50A32,32 0 1 0 18,50 A32,32 0 1 0 82,50" />
  </clipPath>

  <path id="line" stroke="#80C000" stroke-width="86" d="M50,92.8V7.2" clip-path="url(#clip)"  stroke-dasharray="25 75" />

  <use href="#circ" fill="none" stroke="#80C000" />
</svg>

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

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

---

Related Topics