Visualize Leaflet map only when a button is clicked

i need an help for a javascript project. I’ve started studying html and javascript one month ago because i want to create a program which can be very usefull for my hobby.
I want to create a code able to create a page with a button (in this case the page is empty, but in future it will contain a database table) and, in case this button is clicked, make a map appear in the page.
I’ve created a script which always shows the map (without the button functionality) and it perfectly works, but as soon as I’ve inserted the button functionality I’m not able to solve the code errors.
Can you help me in create a script like this?
These are the scripts I’ve created (but they return errors); the code is composed by an html script, a ccs script and a javascript one.

This is the HTML code:

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Appearing Map</title>

      <!-- LEAFLET -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" 
  integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
  crossorigin=""/>
  <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
  integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
  crossorigin=""></script>
 
  <link rel="stylesheet" href="style.css">

  <!-- SERVE PER VISUALIZZARE I BOTTONI-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

</head>
<body>

  <div class="text-center">
    <div class="btn btn-success BTN_1"> Mostra mappa </div>
  </div>

  <script src="mappa-demo.js"></script>

  <div class=" container Screen Screen_Data  "  >   </div>
 
  <div class="Screen Template_Mappa" style="display:none;"  >
    <div id="container">
      <!-- MAP -->
      <div id="mapid" >
    </div>
  </div>
    

</body>
</html>

This html script calls the style.css script:

#mapid{
    height: 95vh;
    width: 100%;
}

and it calls mappa-demo.js script too:

var mymap = L.map('mapid').setView([36.849998, 14.766667], 3);

L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox/outdoors-v9',
    tileSize: 512,
    zoomOffset: -1,
    accessToken: 'pk.eyJ1IjoiZ2lvdmFubmFtb250aSIsImEiOiJja2NxMWR3dWoxMGlnMzNsZnY3andkb2ZwIn0.jEysB4u6XZgrYKZrOLNBCw'
}).addTo(mymap);

$(document).ready(function()
{       
    console.log("POINT 4: CI PASSA SOLO ALL'INIZIO");

    $(document).on('click', '.BTN_1', function(event) 
    {   
        console.log("PASSATO DA BOTTONE 1: CI PASSA OGNI VOTLA CLICCO BOTTONE 1");
                
        var GetTemplateData = $('.Template_Mappa').html();
        
        $('.Screen_Data').html(GetTemplateData);
        $('.Screen_Data').show();
     });
});

Thank!

86 thoughts on “Visualize Leaflet map only when a button is clicked”

  1. I was recommended this website by way of my cousin. I’m no longer positive
    whether this publish is written by him as nobody else realize such
    detailed about my difficulty. You’re amazing! Thank you!

    Reply
  2. Hi! I’ve been following your website for a long time now and finally got the courage to go ahead and
    give you a shout out from Austin Texas! Just wanted to say keep up the good job!

    Reply
  3. Great blog! Do you have any helpful hints for aspiring writers?
    I’m planning to start my own site soon but I’m a little lost on everything.
    Would you recommend starting with a free platform like WordPress
    or go for a paid option? There are so many choices out there that I’m completely confused ..
    Any suggestions? Cheers! cheap flights http://1704milesapart.tumblr.com/ cheap flights

    Reply