Mapa2

<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
   integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
   crossorigin=""/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <style>
   #mapid {
   height: 400px;
   width:  500px;
   display:none;
   }
   </style>
</head>

<body>
 Aktualna lokalizacja:
 <form>
 <input id="lat" type="text" value="52.408041" />, <input id="lng" type="text" value="16.933636" />
 </form>
 <button id="showMap">Otwórz mapę</button>
 <div id="mapid"></div></br>
 <span id="counter"></span></br>
<span id="weather"></span>
</body>

 <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
   integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
   crossorigin=""></script>

   <script>

   var lat = document.getElementById('lat');
   var lng = document.getElementById('lng');
   var mymap = L.map('mapid').setView([lat.value, lng.value], 13);
   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/streets-v11',
    tileSize: 512,
    zoomOffset: -1,
    accessToken: 'pk.eyJ1IjoiY2FwYXJvbDY5OTEiLCJhIjoiY2tjYWFyemw0MXQzczJ2bWduc2M2bDdhNCJ9.y5I0CgQf51ECnoGXQND8Sw'
}).addTo(mymap);
var marker =  L.marker([lat.value,lng.value]).addTo(mymap);

function onMapClick(e) {
    mymap.removeLayer(marker)
    marker = L.marker(e.latlng).addTo(mymap);
    console.log(e.latlng);
    lat.value = e.latlng['lat'];
    lng.value = e.latlng['lng'];
    mymap.setView([lat.value, lng.value], 13);
}

mymap.on('click', onMapClick);

var url = "https://api.openweathermap.org/data/2.5/onecall?lat=" + lat.value + "&lon=" + lng.value + "&exclude=current,minutely,hourly&lang=pl&appid=a874452b76f1cc6022316d344c4ac034"
  $.post(url,
  function(response, status){
    var daily = response.daily;
    var counter = 0;
    var weathers ="";
    console.log(response.daily);
    for(var i = 0; i < daily.length; i++){
    var weather = daily[i]['weather'][0];
    if(weather['main'] == 'Rain') counter++;
    weathers = weathers.concat( (i+1) + " dzień: " + weather['description'] + "<br/> ");
    }
    document.getElementById("counter").innerHTML = "Opady deszczu przez następne 8 dni: " + counter;
    document.getElementById("weather").innerHTML = weathers;
});

$( "#showMap" ).click(function() {
    if ($("#mapid").css('display') == 'none')
    {
       $("#mapid").css('display', 'block');
       $("#showMap").text("Zamknij mapę");

       mymap.invalidateSize();
    }else{
       $("#mapid").css('display', 'none');
       $("#showMap").text("Pokaż mapę");
    }

});


   </script>