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

I have a leaflet map contained in <div id="map" data-tap-disabled="false" style="width: 100%; height: 100%;"></div>

This page is divided into <ion-header>, <ion-content> and <ion-footer>. The map is contained into <ion-content>. What I would like to do is hide the header and footer with a button.

So I created a button with L.easyButton. The code is the following:

L.easyButton('click',function(){
    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.map.invalidateSize(true);
    }else{
      self.map.removeControl(toolBar);
      self.map.removeControl(setLayers);
      self.map.removeControl(setZoom);
      self.map.removeControl(setScale);
      self.disableAdditionalButtons(textButton, arrowButton);
      self.hideLayout = true;
      self.hideFooter = true;
      self.map.invalidateSize(true);
    }

And I added the following code into the <ion-footer>:

<ion-footer *ngIf="!this.mapService.hideFooter">

What happens is that the map doesn't resize and remains a white band instead of the footer

I tried to use the invalidateSize leaflet method, even with the "setInterval" but without success. I think there is something about html and css to edit but I'm not an expert yet.

Again, really thanks to everyone in advance and I hope I was clear :)

CodePudding user response：

based on your code I'll add my points;

constructor(private plt: Platform) {
    
}

L.easyButton('click', () => {
    const map = document.getElementById('map');
    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.map.invalidateSize(true);
      map.style.height = '100%';
      map.style.width = '100%';
    } else {
      self.map.removeControl(toolBar);
      self.map.removeControl(setLayers);
      self.map.removeControl(setZoom);
      self.map.removeControl(setScale);
      self.disableAdditionalButtons(textButton, arrowButton);
      self.hideLayout = true;
      self.hideFooter = true;
      self.map.invalidateSize(true);
      map.style.height = (this.plt.height() - 26)   'px';
      // 26 is the status bar, it may be 20 so u update it accordingly
      // source: https://ionicframework.com/docs/v3/theming/overriding-ionic-variables/
      map.style.width = this.plt.width()   'px';
    }

in case it didn't work, then you'll need to provide your ts code since (self) isn't much clear if it is like (this) or u just shared part of the function...

CodePudding user response：

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.

Anyway, thanks again for helping me.