Is there a way to resize a leaflet map dynamically upon clicking a button?

Within the 

<div id="map" data-tap-disabled="false" style="width: 100%; height: 100%;"></div>
, there is a leaflet map.

The structure of this page includes <ion-header>, <ion-content>, and <ion-footer>. The map is located in the <ion-content> section. My goal is to hide both the header and footer with a button.

To achieve this, I have implemented a button using L.easyButton. Here is the code snippet:

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

I also included the following code within the <ion-footer>:

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

The issue I'm facing is that the map does not resize properly and leaves a white space instead of showing the footer.

https://i.sstatic.net/K6Kiu.png

I attempted to use the invalidateSize method from leaflet, even with the setInterval function, but unfortunately, I was unsuccessful. I believe there might be some adjustments needed in the HTML and CSS, although I'm still learning and not an expert on these matters.

Thank you in advance for any assistance, and I hope my explanation was clear :)

htmlcssionic-frameworkleafletionic3

Answer №1

After reviewing your code snippet, I have some additional points to contribute:

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 refers to the status bar height, which might be 20 in some cases
      // Reference: https://ionicframework.com/docs/v3/theming/overriding-ionic-variables/
      map.style.width = this.plt.width() + 'px';
    }

If the solution doesn't work for you, please share more of your TypeScript code as the usage of `(self)` is ambiguous. It's unclear whether it should be replaced with `(this)` or if it's intentional.

Answer №2

After much searching, I have finally discovered a solution that works perfectly for me. Grateful to @Mostafa Harb for the assistance provided.

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 situation, the issue stemmed from the <div> element with the "scroll-content" class automatically generated within the <ion-content> tag. By using getElementsByClassName, I accessed the second item in the array and adjusted the margin top and bottom for both the header and footer sections accordingly.

This may not be the most efficient solution, but it has resolved my problem for now.

Answer №3

CSS

.mymap{
    using flexbox to style the map container
}

HTML

<div id="map" data-tap-disabled="false" class="mymap">
    // your code here
</div>
  • make sure to add display: flex and specify height and width

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Leveraging the Bootstrap 3 audio player, although displaying a standard HTML5 output

When trying to use the Bootstrap 3 player to display an audio player, I'm encountering an issue where the page only shows a default black HTML5 audio player output. Here is my current directory structure: miuse/ application/ bootstrap/ ...

phphtmlcodeigniteraudiotwitter-bootstrap-3

What is the best way to format a list <li> inline within PHP code?

Is there a way to display this list horizontally? Using list-inline makes the list horizontal, but it doesn't style the <li> elements. I would like to apply a specific class to the li elements, but I'm unsure where in the code to add the s ...

phpcsswordpresstwitter-bootstrap-3

Capturing information from a modifiable table using Javascript

Creating an HTML Editable table with the property CONTENTEDITABLE, each TD has a unique ID (even though it's a long process and I only have basic JS knowledge) to keep track of the information inside. The table is wrapped by a form. At the end of the ...

javascripthtmljsonfirebasedom-events

Using CSS to position a pair of divs containing text and images side by side

Is there a better approach to creating two divs and two pictures without using negative margins, similar to the example shown here? ...

csslayout

Strange spacing appears after image tags

My efforts to remove the space (red) between the <img> and the <div> have been unsuccessful. I have minimized it as much as possible. After researching similar threads, it seems that whitespace or newlines between inline-box elements can cause ...

htmlcss

How can I incorporate a counter into my ng-repeat loop in Angular?

Do you know where I can find documentation on adding a numbered count to each item returned by an ng-repeat in Angular? This is not like assigning an Id, but more like, if 4 items are returned, each JSON object could include a number before the data. Her ...

javascripthtmlangularjsjson

Divs placed side by side are displaying a 1px gap in Safari, however, this issue is

On the website , there is a noticeable 1px gap between adjacent divs in Safari. However, this issue does not occur in other browsers such as Chrome and Firefox. The menu div is floated left and occupies 34% of the width, while the gallery div is floated r ...

csshtmlsafari

Sharing details of html elements using ng-click (AngularJS)

I am currently exploring options to enable users to click on a "open in new tab" link, which would essentially transfer that HTML element into a fresh window for their convenience. I am seeking advice on how to achieve this. At the moment, I am able to la ...

javascripthtmlangularjs

What is the method to deactivate multiple links using jQuery?

Below is the HTML code: <a title="Login" data-href="/MyAccount/Access/Login" data-title="Admin" data-entity="n/a" id="loginLink" class="nav-button dialogLink"><b>Login</b></a> <a title="Register" data-href="/MyAccou ...

javascriptjquerycss

Having trouble getting PHP to upload images?

Hey everyone, I'm currently working on a project where I need to upload an image using PHP to a file. However, since I'm new to this language, I could really use some assistance. The problem lies in the fact that the code doesn't seem to be ...

phphtmlcss

Incorporate an external website into HTML5 code

I have a dilemma with embedding one website into another. I am currently utilizing embed code for this purpose. <object data="http://mywebsite.com" width="100%" height="100%"> <embed src="http://mywebsite.com" width="100%" height="100%"> ...

htmlembedresponsive

Get rid of the border surrounding the JavaFX ScrollPane scroll bar when it is not in focus

I'm experiencing a quirky problem. I've customized the scroll-bar of my ScrollPane in JavaFX with CSS, but there's a strange behavior where the border disappears whenever the ScrollPane is in focus. However, if I interact with a button outsi ...

cssjavafx

Repairing the Performance of the 'Save' Feature

Can the 'Save' button in my code save team assignments for players selected using drag and drop? I'm considering using localStorage, but unsure about implementation. Note: To run the code properly, copy it as an HTML file on your computer. ...

javascriptjqueryhtmlcss

Easiest script for creating multiple fade effects

I need a script that functions like the overlay effect on Dribbble when you hover over an image. However, it needs to be flexible enough to be utilized for multiple images across my website. The simpler and more user-friendly, the better. Appreciate any ...

javascripthtmlcss

Exploring an XML document with HTML

I have an XML file that is paired with an XSL file. The resulting output can be located here. I am working on creating an HTML webpage where users can input a search query, such as 'Year < 2009', into a search box. The table above will then d ...

javascripthtmlxmlxsltfiltering

Numerous translateX Functions in JavaScript (Webkit)

Trying to apply a .style.webkitTransform = 'translateX(10px)'; on an element and then adding another .style.webkitTransform = 'translateX(10px)'; to achieve a total of 20px is not feasible. The element will still remain at 10px. Is the ...

javascriptiphonehtmlwebkit

Fetching an image stored in a database and showing it, along with instructions on how to create a pop-up window for enhanced image visibility

I need to fetch an image from a MYSql Database and display it on a web page. Once the images are displayed, I want them to appear in a clear pop-up when I hover my mouse over them. Here is the code for retrieving the images: <table align=center class=" ...

javascriptphpjqueryhtmlmysql

Having a fixed footer in JQuery mobile does not adjust its position downwards as intended

I attempted to move the footer down using the provided code below, but it doesn't seem to be working. I even went ahead and removed all standard text from the CSS file to eliminate any potential issues. It should normally shift downward with <div ...

jqueryhtmlcssmobile

Fixing issues in PHP File Editor

At our web development company, we have created an online file editor and file manager script for our website users to easily manage their files and customize their templates. This script is written in PHP and allows users to edit html, text, php, js, jque ...

phphtml

Struggling to extract information with Python Selenium XPATH?

I've been attempting to execute this Python code, but I'm not seeing anything when trying to print the 'titles' variable. Here is the code snippet: from selenium import webdriver from selenium.webdriver.common.by import By import pandas ...

pythonhtmlselenium