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 © <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!
P.S.
After the first comment, I've updated the code, no errors are shown in the console but I can't load the map correctly. Here an image of the problem:
