caparol6991

mapa

Jul 6th, 2020
1,044
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 { height: 180px; }
  8.    </style>
  9. </head>
  10.  
  11. <body>
  12.  Aktualna lokalizacja:
  13.  <form>
  14.  <input id="lat" type="text" value="52.408041" />, <input id="lng" type="text" value="16.933636" />
  15.  <div id="mapid"></div>
  16.  <span id="counter"></span></br>
  17. <span id="weather"></span>
  18. </body>
  19.  
  20.  <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
  21.    integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
  22.    crossorigin=""></script>
  23.    
  24.    <script>
  25.    var lat = document.getElementById('lat');
  26.    var lng = document.getElementById('lng');
  27.    var mymap = L.map('mapid').setView([lat.value, lng.value], 13);
  28.    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
  29.     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>',
  30.     maxZoom: 18,
  31.     id: 'mapbox/streets-v11',
  32.     tileSize: 512,
  33.     zoomOffset: -1,
  34.     accessToken: 'pk.eyJ1IjoiY2FwYXJvbDY5OTEiLCJhIjoiY2tjYWFyemw0MXQzczJ2bWduc2M2bDdhNCJ9.y5I0CgQf51ECnoGXQND8Sw'
  35. }).addTo(mymap);
  36. var marker =  L.marker([0,0]).addTo(mymap);
  37.  
  38. function onMapClick(e) {
  39.     mymap.removeLayer(marker)
  40.     marker = L.marker(e.latlng).addTo(mymap);
  41.     console.log(e.latlng);
  42.     lat.value = e.latlng['lat'];
  43.     lng.value = e.latlng['lng'];
  44.     mymap.setView([lat.value, lng.value], 13);
  45. }
  46.  
  47. mymap.on('click', onMapClick);
  48.  
  49. var url = "https://api.openweathermap.org/data/2.5/onecall?lat=" + lat.value + "&lon=" + lng.value + "&exclude=current,minutely,hourly&lang=pl&appid=a874452b76f1cc6022316d344c4ac034"
  50.   $.post(url,
  51.   function(response, status){
  52.     var daily = response.daily;
  53.     var counter = 0;
  54.     var weathers ="";
  55.     console.log(response.daily);
  56.     for(var i = 0; i < daily.length; i++){
  57.     var weather = daily[i]['weather'][0];
  58.     if(weather['main'] == 'Rain') counter++;
  59.     weathers = weathers.concat( (i+1) + " dzień: " + weather['description'] + "<br/> ");
  60.     }
  61.     document.getElementById("counter").innerHTML = "Opady deszczu przez następne 8 dni: " + counter;
  62.     document.getElementById("weather").innerHTML = weathers;
  63. });
  64.  
  65.    </script>
RAW Paste Data