Toggling Leaflet map on click?toggling a list of paths in LeafletTriggering click event on Leaflet map?How to...
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
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
edited 11 mins ago
wetland
3,87743676
asked Jul 19 '18 at 13:06
Michela ZanniMichela Zanni
374
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
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
edited 11 mins ago
wetland
3,87743676
asked Jul 19 '18 at 13:06
Michela ZanniMichela Zanni
374
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
leaflet display
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
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
edited 11 mins ago
wetland
3,87743676
3,87743676
asked Jul 19 '18 at 13:06
Michela ZanniMichela Zanni
374
asked Jul 19 '18 at 13:06
Michela ZanniMichela Zanni
374
asked Jul 19 '18 at 13:06
Michela ZanniMichela Zanni
374
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 |
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
1
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
@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 |
1 Answer
1
active
oldest
votes
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
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
});
}
});
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
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
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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
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
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
answered Jul 19 '18 at 13:30
tomtom
23317
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
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
answered Jul 19 '18 at 13:30
tomtom
23317
23317
add a comment |
add a comment |
Thanks for contributing an answer to Geographic Information Systems Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
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
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
Required, but never shown
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
Required, but never shown
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
Required, but never shown
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
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
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