Vjylku

It's a yearly task, alright

How to deal with a cynical class?

2D counterpart of std::array in C++17

Bash replace string at multiple places in a file from command line

Counting certain elements in lists

Humanity loses the vast majority of its technology, information, and population in the year 2122. How long does it take to rebuild itself?

What has been your most complicated TikZ drawing?

How do anti-virus programs start at Windows boot?

Fill color and outline color with the same value

How could a female member of a species produce eggs unto death?

Could the Saturn V actually have launched astronauts around Venus?

What is a good source for large tables on the properties of water?

Using "wallow" verb with object

Is a lawful good "antagonist" effective?

Sword in the Stone story where the sword was held in place by electromagnets

At what level can a dragon innately cast its spells?

Connecting top and bottom SMD component pads using via

How to generate globally unique ids for different tables of the same database?

Does the statement `int val = (++i > ++j) ? ++i : ++j;` invoke undefined behavior?

Rules about breaking the rules. How do I do it well?

Brexit - No Deal Rejection

Can elves maintain concentration in a trance?

How to simplify this time periods definition interface?

Know when to turn notes upside-down(eighth notes, sixteen notes, etc.)

Toggling Leaflet map on click?

toggling a list of paths in LeafletTriggering click event on Leaflet map?How to open overlay content from leaflet popupLeaflet map loads incorrectly when inside a Bootstrap .collapse elementToggling Leaflet LegendsHow to instantiate a new map with proj4leaflet projections from a Bootstrap dropdown menuToggling data source in Chloropeth map with LeafletBuilding an interactive web map that displays table data in a static portion of the page separate from the map?Leaflet timeline plugin issueleaflet search control not showing up in geodjango app

2

I have created a Leaflet map on my web page and I would like to show/hide it when I click on a button. When I first load the page, I'd like the map to be hidden.

HTML code:

<div class="dropdown" id="gw-dropdown1">

    <button type="button" class="button button--default expandable__button" aria-controls="gw-example-button-dropdown1" aria-expanded="false" id="gw-example-expandable-button1">Select on the map</button>                         

</div>

<div class="map" id="gw_map1"></div>

CSS:

#gw_map1 {

display: none;

}

jQuery:

$("#gw-example-expandable-button1").click(function() {

    $("#gw_map1").toggle();

});

If I click on the button the map div appears and disappears, but the content of the map is not correctly displayed.

In fact, If I do not set the 'display' into css the map is correctly loaded into the page as in the figure:

but if I set the 'display' to 'none' and then I click on the button the map is displayed incomplete and even if I drag on the map it is always incomplete and polygons are not visible.

Any suggestions?

leaflet display

share|improve this question

edited 11 mins ago

wetland

3,87743676

asked Jul 19 '18 at 13:06

Michela ZanniMichela Zanni

374

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  @tom beat me to the answer, but I am guessing you are hiding the div element from the start before the map is created. It is trying to use a minimum or browser reported size for the hidden element when it is finally displayed. You changed its size programmatically through JQuery and Leaflet isn't in the loop; you'll have to tell it about the new state.
  
  – RomaH
  Jul 19 '18 at 13:37
  

  
  
  
  

add a comment | 

2

I have created a Leaflet map on my web page and I would like to show/hide it when I click on a button. When I first load the page, I'd like the map to be hidden.

HTML code:

<div class="dropdown" id="gw-dropdown1">

    <button type="button" class="button button--default expandable__button" aria-controls="gw-example-button-dropdown1" aria-expanded="false" id="gw-example-expandable-button1">Select on the map</button>                         

</div>

<div class="map" id="gw_map1"></div>

CSS:

#gw_map1 {

display: none;

}

jQuery:

$("#gw-example-expandable-button1").click(function() {

    $("#gw_map1").toggle();

});

If I click on the button the map div appears and disappears, but the content of the map is not correctly displayed.

In fact, If I do not set the 'display' into css the map is correctly loaded into the page as in the figure:

but if I set the 'display' to 'none' and then I click on the button the map is displayed incomplete and even if I drag on the map it is always incomplete and polygons are not visible.

Any suggestions?

leaflet display

share|improve this question

edited 11 mins ago

wetland

3,87743676

asked Jul 19 '18 at 13:06

Michela ZanniMichela Zanni

374

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  @tom beat me to the answer, but I am guessing you are hiding the div element from the start before the map is created. It is trying to use a minimum or browser reported size for the hidden element when it is finally displayed. You changed its size programmatically through JQuery and Leaflet isn't in the loop; you'll have to tell it about the new state.
  
  – RomaH
  Jul 19 '18 at 13:37
  

  
  
  
  

add a comment | 

I have created a Leaflet map on my web page and I would like to show/hide it when I click on a button. When I first load the page, I'd like the map to be hidden.

HTML code:

<div class="dropdown" id="gw-dropdown1">

    <button type="button" class="button button--default expandable__button" aria-controls="gw-example-button-dropdown1" aria-expanded="false" id="gw-example-expandable-button1">Select on the map</button>                         

</div>

<div class="map" id="gw_map1"></div>

CSS:

#gw_map1 {

display: none;

}

jQuery:

$("#gw-example-expandable-button1").click(function() {

    $("#gw_map1").toggle();

});

If I click on the button the map div appears and disappears, but the content of the map is not correctly displayed.

In fact, If I do not set the 'display' into css the map is correctly loaded into the page as in the figure:

but if I set the 'display' to 'none' and then I click on the button the map is displayed incomplete and even if I drag on the map it is always incomplete and polygons are not visible.

Any suggestions?

leaflet display

share|improve this question

edited 11 mins ago

wetland

3,87743676

asked Jul 19 '18 at 13:06

Michela ZanniMichela Zanni

374

<div class="dropdown" id="gw-dropdown1">

    <button type="button" class="button button--default expandable__button" aria-controls="gw-example-button-dropdown1" aria-expanded="false" id="gw-example-expandable-button1">Select on the map</button>                         

</div>

<div class="map" id="gw_map1"></div>

#gw_map1 {

display: none;

}

$("#gw-example-expandable-button1").click(function() {

    $("#gw_map1").toggle();

});

share|improve this question

edited 11 mins ago

wetland

3,87743676

asked Jul 19 '18 at 13:06

Michela ZanniMichela Zanni

374

share|improve this question

edited 11 mins ago

wetland

3,87743676

asked Jul 19 '18 at 13:06

Michela ZanniMichela Zanni

374

edited 11 mins ago

wetland

3,87743676

edited 11 mins ago

wetland

3,87743676

asked Jul 19 '18 at 13:06

Michela ZanniMichela Zanni

374

asked Jul 19 '18 at 13:06

Michela ZanniMichela Zanni

374

1 Answer
1

active

oldest

votes

2

You need to call invalidateSize() on your map object - this checks if the map container has changed and updates it as necessary.

API reference: https://leafletjs.com/reference-1.3.2.html#map-invalidatesize

share|improve this answer

answered Jul 19 '18 at 13:30

tomtom

23317

add a comment | 

Your Answer

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "79"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fgis.stackexchange.com%2fquestions%2f289975%2ftoggling-leaflet-map-on-click%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

2

You need to call invalidateSize() on your map object - this checks if the map container has changed and updates it as necessary.

API reference: https://leafletjs.com/reference-1.3.2.html#map-invalidatesize

share|improve this answer

answered Jul 19 '18 at 13:30

tomtom

23317

add a comment | 

2

You need to call invalidateSize() on your map object - this checks if the map container has changed and updates it as necessary.

API reference: https://leafletjs.com/reference-1.3.2.html#map-invalidatesize

share|improve this answer

answered Jul 19 '18 at 13:30

tomtom

23317

add a comment | 

You need to call invalidateSize() on your map object - this checks if the map container has changed and updates it as necessary.

API reference: https://leafletjs.com/reference-1.3.2.html#map-invalidatesize

share|improve this answer

answered Jul 19 '18 at 13:30

tomtom

23317

share|improve this answer

answered Jul 19 '18 at 13:30

tomtom

23317

answered Jul 19 '18 at 13:30

tomtom

23317

answered Jul 19 '18 at 13:30

tomtom

23317