Show and hide Leaflet map on click button

  • CehWeb

    (@cabreroehijos)


    1 year, 3 months ago

    Hello,
    I don’t know if this is the correct forum where I have to ask, but I have the next problem:
    I would like to insert some buttons in a new page, and depending on the button pressed, show a map.
    Firstly, when you enter to the page, you only see the buttons, because the map would be inside a hide div.
    The problem is the map is not loading well, as you can see in: https://imgur.com/VFPGkg4

    I have tested with some HTML and JS code:

    I have a button, with ID and CLASS: but1.

    <script>
const button1 = document.getElementById('but1');
const map1 = document.getElementById('map1');

button1.addEventListener('click', function() {
if(map1.style.display == 'none') {
map1.style.display = 'block';
} else {
map1.style.display = 'none';
}
});
</script>

    In the page I have added some HTML code, before [leaflet] map:

    <div id="map1" style="display:none";>

    And finally HTML code:

    </div>
Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Contributor hupe13

    (@hupe13)

    I think, that’s not how it will work. Loading maps and their elements is event related, so when you switch the button, the map has to be reloaded.

    Thread Starter CehWeb

    (@cabreroehijos)

    And how could I get the expected result?

    Plugin Contributor hupe13

    (@hupe13)

    Are you blocking the display of the map because GDPR? If yes, use a plugin. From FAQ:

    If you switch some elements to display, have a look to https://leafext.de/en/doku/featuregroup/

    Thread Starter CehWeb

    (@cabreroehijos)

    Hello,
    currently I am not using a plugin for GDPR, because it is a test site, but on my site I use OneTrust, and isn’t neccesary to install a plugin.

    Plugin Contributor hupe13

    (@hupe13)

    I’m sorry, my english. I mean: Why do you not want to display the map the first time? Because of GDPR? Then you can use one of the plugins or an other one.

    And how could I get the expected result?

    Reload the map.

    Thread Starter CehWeb

    (@cabreroehijos)

    Noo, it’s not related to GDPR.

    I have 4 maps and 4 buttons, of different cities, I only wanted to show an empty ‘div’, and when you press a button, then show the appropiate map. Like a ‘map switcher’.

    Maybe I find another stylish way to show them in my site.

    Plugin Contributor hupe13

    (@hupe13)

    Maybe I find another stylish way to show them in my site.

    It is better to do that. “events” are a very difficult theme (for me).

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Show and hide Leaflet map on click button’ is closed to new replies.