caparol6991

Mapa2

Jul 6th, 2020
863
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <head>
  2. <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
  3.    integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
  4.    crossorigin=""/>
  5. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  6.    <style>
  7.    #mapid {
  8.    height: 400px;
  9.    width:  500px;
  10.    display:none;
  11.    }
  12.    </style>
  13. </head>
  14.  
  15. <body>
  16.  Aktualna lokalizacja:
  17.  <form>
  18.  <input id="lat" type="text" value="52.408041" />, <input id="lng" type="text" value="16.933636" />
  19.  </form>
  20.  <button id="showMap">Otwórz mapę</button>
  21.  <div id="mapid"></div></br>
  22.  <span id="counter"></span></br>
  23. <span id="weather"></span>
  24. </body>
  25.  
  26.  <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
  27.    integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
  28.    crossorigin=""></script>
  29.    
  30.    <script>
  31.    
  32.    var lat = document.getElementById('lat');
  33.    var lng = document.getElementById('lng');
  34.    var mymap = L.map('mapid').setView([lat.value, lng.value], 13);
  35.    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
  36.     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>',
  37.     maxZoom: 18,
  38.     id: 'mapbox/streets-v11',
  39.     tileSize: 512,
  40.     zoomOffset: -1,
  41.     accessToken: 'pk.eyJ1IjoiY2FwYXJvbDY5OTEiLCJhIjoiY2tjYWFyemw0MXQzczJ2bWduc2M2bDdhNCJ9.y5I0CgQf51ECnoGXQND8Sw'
  42. }).addTo(mymap);
  43. var marker =  L.marker([lat.value,lng.value]).addTo(mymap);
  44.  
  45. function onMapClick(e) {
  46.     mymap.removeLayer(marker)
  47.     marker = L.marker(e.latlng).addTo(mymap);
  48.     console.log(e.latlng);
  49.     lat.value = e.latlng['lat'];
  50.     lng.value = e.latlng['lng'];
  51.     mymap.setView([lat.value, lng.value], 13);
  52. }
  53.  
  54. mymap.on('click', onMapClick);
  55.  
  56. var url = "https://api.openweathermap.org/data/2.5/onecall?lat=" + lat.value + "&lon=" + lng.value + "&exclude=current,minutely,hourly&lang=pl&appid=a874452b76f1cc6022316d344c4ac034"
  57.   $.post(url,
  58.   function(response, status){
  59.     var daily = response.daily;
  60.     var counter = 0;
  61.     var weathers ="";
  62.     console.log(response.daily);
  63.     for(var i = 0; i < daily.length; i++){
  64.     var weather = daily[i]['weather'][0];
  65.     if(weather['main'] == 'Rain') counter++;
  66.     weathers = weathers.concat( (i+1) + " dzień: " + weather['description'] + "<br/> ");
  67.     }
  68.     document.getElementById("counter").innerHTML = "Opady deszczu przez następne 8 dni: " + counter;
  69.     document.getElementById("weather").innerHTML = weathers;
  70. });
  71.  
  72. $( "#showMap" ).click(function() {
  73.     if ($("#mapid").css('display') == 'none')
  74.     {
  75.        $("#mapid").css('display', 'block');
  76.        $("#showMap").text("Zamknij mapę");
  77.        
  78.        mymap.invalidateSize();
  79.     }else{
  80.        $("#mapid").css('display', 'none');
  81.        $("#showMap").text("Pokaż mapę");
  82.     }
  83.  
  84. });
  85.  
  86.  
  87.    </script>
RAW Paste Data