API tools faq
paste
wbushey

Source of http://openweathermap.org/city/5045360

wbushey
May 1st, 2014
333
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 50.12 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. <meta charset="utf-8">
  6. <title>OpenWeatherMap. Forecast for Saint Paul </title>
  7.  
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  9. <meta name="keywords" content="weather, world, Openstreetmap, weather, layer" />
  10. <meta name="description" content="Current weather conditions in cities for world wide" />
  11. <meta name="domain" content="OpenWeatherMap.org" />
  12. <meta http-equiv="pragma" content="no-cache" />
  13. <meta http-equiv="Expires" content="-1" />
  14. <link rel="shortcut icon" href="/images/sun_mini.png" />
  15. <link rel="apple-touch-icon" href="/images/sun_mini.png" />
  16.  
  17.     <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
  18.     <!--[if lt IE 9]>
  19.      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  20.    <![endif]-->
  21.  
  22. <script src="/js/jquery-1.7.2.min.js" ></script>
  23. <script src="/js/jquery-ui.js" ></script>
  24. <script src="/js/bootstrap-tab.js" ></script>
  25. <script src="/js/bootstrap-alert.js" ></script>
  26. <script src="/js/bootstrap-carousel.js" ></script>
  27.  
  28. <link href="/stylesheets/bootstrap.css" rel="stylesheet">
  29. <link href="/stylesheets/toggle-switch.css" rel="stylesheet">
  30. <link href="/stylesheets/main.css" rel="stylesheet">
  31.  
  32. <style type="text/css">
  33.   body {
  34.     padding-top: 60px;
  35.   }
  36.  
  37.   #map-container {
  38.         padding: 6px;
  39.         border-width: 1px;
  40.         border-style: solid;
  41.         border-color: #ccc #ccc #999 #ccc;
  42.         -webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
  43.         -moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
  44.         box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
  45.         width: 100%;
  46.   }
  47.  
  48. .olControlLayerSwitcher .layersDiv {
  49.     background-color:#575757 !important;
  50.  
  51.     /* for IE */
  52.     filter:alpha(opacity=90);
  53.     /* CSS3 standard */
  54.     opacity:0.9;
  55.     border-radius: 4px;
  56.     color: white;
  57.  
  58.     font-family: sans-serif;
  59.     font-size: smaller;  
  60.     font-weight: bold;
  61. }
  62.  
  63. .olControlAttribution {
  64.     background: #575757;
  65.     color: white;
  66.     z-index:1000;
  67.     font-size: 1em;
  68.     text-align: left;
  69.     position: absolute;
  70.     right: 3px;
  71.     bottom: 0.2em;
  72.     padding: 4px;
  73.     /* for IE */
  74.     filter:alpha(opacity=90);
  75.     /* CSS3 standard */
  76.     opacity:0.9;
  77.     border-radius: 4px;
  78. }
  79.  
  80. /*hack*/
  81. .olButton {
  82.   color: white;
  83.   font-family: arial;  
  84.   display: inline;
  85. }
  86.  
  87. </style>
  88.  
  89. <script type="text/javascript">
  90.  
  91. function ShowSuccessMess(mess)
  92. {
  93.     var html = '<div class="alert alert-success" ><a class="close" data-dismiss="alert" href="#">&times;</a>'+mess+'</div>';
  94.     $("#alert_body").html(html);
  95. }
  96.  
  97. function ShowInfoMess(mess)
  98. {
  99.     var html = '<div class="alert alert-info" ><a class="close" data-dismiss="alert" href="#">&times;</a>'+mess+'</div>';
  100.     $("#alert_body").html(html);
  101. }
  102.  
  103. function ShowAlertMess(mess)
  104. {
  105.     var html = '<div class="alert alert-error" ><a class="close" data-dismiss="alert" href="#">&times;</a>'+mess+'</div>';
  106.     $("#alert_body").html(html);
  107. }
  108.  
  109. function  errorHandler(e)
  110. {
  111.     ShowAlertMess(e.status +' '+e.statusText);
  112. }
  113.  
  114.  
  115. function ParseJson(JSONtext)
  116. {
  117.     try{
  118.         JSONobject = JSON.parse(JSONtext);
  119.     }catch(e){
  120.         ShowAlertMess('Error JSON');
  121.         return;
  122.     }
  123.  
  124.     if(JSONobject.cod != '200') {
  125.         ShowAlertMess('Error '+ JSONobject.cod + ' ('+ JSONobject.message +')');
  126.         return;
  127.     }
  128.     var mes = JSONobject.cod;
  129.     if(JSONobject.calctime)
  130.         mes = mes + ' ' + JSONobject.calctime;
  131.     if(JSONobject.message)
  132.         mes = mes + ' ' + JSONobject.message;
  133.     console.log( mes );
  134.     return JSONobject;
  135. }
  136.  
  137. function ShowCalcTime(mess)
  138. {
  139.   console.log( mess );
  140. }
  141.  
  142. function set_cookie(name, value, expires)
  143. {
  144. if (!expires)
  145. {
  146. expires = new Date();
  147. }
  148. document.cookie = name + "=" + escape(value) + "; expires=" + expires.toGMTString() +  "; path=/";
  149. }
  150.  
  151. function get_cookie(name) {
  152.     var matches = document.cookie.match(new RegExp(
  153.         "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
  154.       ))
  155.   return matches ? decodeURIComponent(matches[1]) : undefined
  156. }
  157.  
  158. function set_lang(lang)
  159. {
  160.     expires = new Date();                  
  161.     expires.setTime(expires.getTime() + (1000 * 60 * 60 * 24));
  162.     set_cookie('lang', lang, expires);
  163.     window.location.reload();
  164. }
  165.  
  166. function set_units()
  167. {
  168.   var units = 'metric';
  169.   if( document.getElementById("units_check").checked ) units = 'imperial';
  170.   expires = new Date();        
  171.   expires.setTime(expires.getTime() + (1000 * 60 * 60 * 24));
  172.   set_cookie('units', units, expires);
  173.   window.location.reload();
  174. }
  175.  
  176. </script>
  177.  
  178. </head>
  179.  
  180. <body>
  181.  
  182.     <div class="navbar navbar-fixed-top">
  183.       <div class="navbar-inner">
  184.         <div class="container">
  185.  
  186.           <a class="brand" href="/">Open Weather Map <span class="label label-warning">beta</span></a>
  187.  
  188.           <div class="nav-collapse">
  189.             <ul class="nav">
  190.               <li class="active"><a href="/Maps">Maps</a></li>
  191.               <li class="active"><a href="/API">API</a></li>
  192.               <li class="active"><a href="/price">Price</a></li>
  193.  
  194.         <li class="active"><a href="/login">Login / Register</a></li>
  195.  
  196.  
  197.             </ul>
  198.           </div>
  199.  
  200. <!--
  201. <form action="/map" method="get" enctype="multipart/form-data" class="navbar-search pull-right">
  202. &nbsp;<img src="/images/flags/gb.png" alt="English" title="English" onclick="set_lang('en');" />
  203. &nbsp;<img src="/images/flags/ru.png" alt="Russian" title="Russian" onclick="set_lang('ru');" />
  204. </form>
  205. -->
  206. <div class="pull-right">
  207. <label class="toggle candy blue" style="width:100px" onclick="">
  208.     <input id="units_check" type="checkbox" />
  209.     <p onclick="set_units()">
  210.       <span>&nbsp °C &nbsp</span>
  211.      <span>&nbsp °F &nbsp</span>
  212.    </p>  
  213.    <a class="slide-button" ></a>
  214.  </label>  
  215.  
  216. </div>
  217.  
  218.        </div><!--/container -->
  219.  
  220. <div id="stat" class="pull-right">
  221. </div>
  222.      </div>
  223.    </div>
  224.  
  225.    <div class="container">
  226.  
  227.    <div id="alert_body">
  228.    </div>
  229.  
  230.  
  231.  
  232. <script src="/js/highcharts/highcharts.js"></script>
  233. <script src="/js/highcharts/highcharts-more.js"></script>
  234. <script type="text/javascript" src="/js/suncalc-min.js"></script>
  235. <script src="http://openlayers.org/api/OpenLayers.js"></script>
  236.  
  237.  
  238. <script type="text/javascript">
  239.  
  240.  
  241. var time_zone = 1000 * (new Date().getTimezoneOffset())*(-60);
  242. var forecast = [{"dt":1398945600,"main":{"temp":3.7,"temp_min":3.7,"temp_max":3.75,"pressure":983.54,"sea_level":1022.23,"grnd_level":983.54,"humidity":98,"temp_kf":-0.05},"weather":[{"id":500,"main":"Rain","description":"light rain","icon":"10d"}],"clouds":{"all":92},"wind":{"speed":6.91,"deg":334.502},"rain":{"3h":0.25},"sys":{"pod":"d"},"dt_txt":"2014-05-01 12:00:00"},{"dt":1398956400,"main":{"temp":4.51,"temp_min":4.51,"temp_max":4.55,"pressure":984.73,"sea_level":1023.06,"grnd_level":984.73,"humidity":100,"temp_kf":-0.05},"weather":[{"id":500,"main":"Rain","description":"light rain","icon":"10d"}],"clouds":{"all":92},"wind":{"speed":7.16,"deg":333.505},"rain":{"3h":0.5},"sys":{"pod":"d"},"dt_txt":"2014-05-01 15:00:00"},{"dt":1398967200,"main":{"temp":6,"temp_min":6,"temp_max":6.05,"pressure":985.26,"sea_level":1023.32,"grnd_level":985.26,"humidity":99,"temp_kf":-0.04},"weather":[{"id":804,"main":"Clouds","description":"overcast clouds","icon":"04d"}],"clouds":{"all":88},"wind":{"speed":7.08,"deg":330},"rain":{"3h":0},"sys":{"pod":"d"},"dt_txt":"2014-05-01 18:00:00"},{"dt":1398978000,"main":{"temp":8.37,"temp_min":8.37,"temp_max":8.41,"pressure":985.15,"sea_level":1023,"grnd_level":985.15,"humidity":92,"temp_kf":-0.04},"weather":[{"id":803,"main":"Clouds","description":"broken clouds","icon":"04d"}],"clouds":{"all":80},"wind":{"speed":6.58,"deg":323.006},"rain":{"3h":0},"sys":{"pod":"d"},"dt_txt":"2014-05-01 21:00:00"},{"dt":1398988800,"main":{"temp":8.94,"temp_min":8.94,"temp_max":8.97,"pressure":985.37,"sea_level":1023.26,"grnd_level":985.37,"humidity":85,"temp_kf":-0.04},"weather":[{"id":804,"main":"Clouds","description":"overcast clouds","icon":"04n"}],"clouds":{"all":88},"wind":{"speed":5.67,"deg":323.002},"rain":{"3h":0},"sys":{"pod":"n"},"dt_txt":"2014-05-02 00:00:00"},{"dt":1398999600,"main":{"temp":7.27,"temp_min":7.27,"temp_max":7.31,"pressure":986.11,"sea_level":1024.32,"grnd_level":986.11,"humidity":83,"temp_kf":-0.04},"weather":[{"id":803,"main":"Clouds","description":"broken clouds","icon":"04n"}],"clouds":{"all":80},"wind":{"speed":4.32,"deg":314.501},"rain":{"3h":0},"sys":{"pod":"n"},"dt_txt":"2014-05-02 03:00:00"},{"dt":1399010400,"main":{"temp":6.24,"temp_min":6.24,"temp_max":6.28,"pressure":985.7,"sea_level":1024.16,"grnd_level":985.7,"humidity":84,"temp_kf":-0.03},"weather":[{"id":803,"main":"Clouds","description":"broken clouds","icon":"04n"}],"clouds":{"all":76},"wind":{"speed":3.86,"deg":292.5},"rain":{"3h":0},"sys":{"pod":"n"},"dt_txt":"2014-05-02 06:00:00"},{"dt":1399021200,"main":{"temp":5.08,"temp_min":5.08,"temp_max":5.11,"pressure":984.87,"sea_level":1023.37,"grnd_level":984.87,"humidity":86,"temp_kf":-0.03},"weather":[{"id":803,"main":"Clouds","description":"broken clouds","icon":"04n"}],"clouds":{"all":56},"wind":{"speed":4.08,"deg":284.004},"rain":{"3h":0},"sys":{"pod":"n"},"dt_txt":"2014-05-02 09:00:00"},{"dt":1399032000,"main":{"temp":4.09,"temp_min":4.09,"temp_max":4.12,"pressure":983.87,"sea_level":1022.21,"grnd_level":983.87,"humidity":86,"temp_kf":-0.03},"weather":[{"id":803,"main":"Clouds","description":"broken clouds","icon":"04d"}],"clouds":{"all":56},"wind":{"speed":3.71,"deg":261.508},"rain":{"3h":0},"sys":{"pod":"d"},"dt_txt":"2014-05-02 12:00:00"},{"dt":1399042800,"main":{"temp":8.98,"temp_min":8.98,"temp_max":9.01,"pressure":982.2,"sea_level":1020.11,"grnd_level":982.2,"humidity":95,"temp_kf":-0.03},"weather":[{"id":804,"main":"Clouds","description":"overcast clouds","icon":"04d"}],"clouds":{"all":92},"wind":{"speed":3.81,"deg":244.503},"rain":{"3h":0},"sys":{"pod":"d"},"dt_txt":"2014-05-02 15:00:00"},{"dt":1399053600,"main":{"temp":10.45,"temp_min":10.45,"temp_max":10.47,"pressure":980.48,"sea_level":1017.94,"grnd_level":980.48,"humidity":93,"temp_kf":-0.02},"weather":[{"id":500,"main":"Rain","description":"light rain","icon":"10d"}],"clouds":{"all":68},"wind":{"speed":3.21,"deg":194.002},"rain":{"3h":0.5},"sys":{"pod":"d"},"dt_txt":"2014-05-02 18:00:00"},{"dt":1399064400,"main":{"temp":12.73,"temp_min":12.73,"temp_max":12.75,"pressure":978.56,"sea_level":1015.96,"grnd_level":978.56,"humidity":82,"temp_kf":-0.02},"weather":[{"id":801,"main":"Clouds","description":"few clouds","icon":"02d"}],"clouds":{"all":24},"wind":{"speed":5.42,"deg":252.502},"rain":{"3h":0},"sys":{"pod":"d"},"dt_txt":"2014-05-02 21:00:00"},{"dt":1399075200,"main":{"temp":12.59,"temp_min":12.59,"temp_max":12.61,"pressure":978.81,"sea_level":1016.13,"grnd_level":978.81,"humidity":76,"temp_kf":-0.02},"weather":[{"id":802,"main":"Clouds","description":"scattered clouds","icon":"03n"}],"clouds":{"all":48},"wind":{"speed":6.76,"deg":303.502},"rain":{"3h":0},"sys":{"pod":"n"},"dt_txt":"2014-05-03 00:00:00"},{"dt":1399086000,"main":{"temp":10.53,"temp_min":10.53,"temp_max":10.55,"pressure":980.37,"sea_level":1018.09,"grnd_level":980.37,"humidity":74,"temp_kf":-0.02},"weather":[{"id":803,"main":"Clouds","description":"broken clouds","icon":"04n"}],"clouds":{"all":64},"wind":{"speed":6.62,"deg":301.501},"rain":{"3h":0},"sys":{"pod":"n"},"dt_txt":"2014-05-03 03:00:00"},{"dt":1399096800,"main":{"temp":9.74,"temp_min":9.74,"temp_max":9.76,"pressure":981.83,"sea_level":1019.79,"grnd_level":981.83,"humidity":81,"temp_kf":-0.01},"weather":[{"id":804,"main":"Clouds","description":"overcast clouds","icon":"04n"}],"clouds":{"all":88},"wind":{"speed":6.56,"deg":326},"rain":{"3h":0},"sys":{"pod":"n"},"dt_txt":"2014-05-03 06:00:00"},{"dt":1399107600,"main":{"temp":7.96,"temp_min":7.96,"temp_max":7.97,"pressure":982.61,"sea_level":1020.81,"grnd_level":982.61,"humidity":82,"temp_kf":-0.01},"weather":[{"id":801,"main":"Clouds","description":"few clouds","icon":"02n"}],"clouds":{"all":20},"wind":{"speed":4.76,"deg":321.502},"rain":{"3h":0},"sys":{"pod":"n"},"dt_txt":"2014-05-03 09:00:00"},{"dt":1399118400,"main":{"temp":5.98,"temp_min":5.98,"temp_max":5.99,"pressure":983.15,"sea_level":1021.6,"grnd_level":983.15,"humidity":84,"temp_kf":-0.01},"weather":[{"id":803,"main":"Clouds","description":"broken clouds","icon":"04d"}],"clouds":{"all":56},"wind":{"speed":3.51,"deg":264.5},"rain":{"3h":0},"sys":{"pod":"d"},"dt_txt":"2014-05-03 12:00:00"},{"dt":1399129200,"main":{"temp":9.34,"temp_min":9.34,"temp_max":9.35,"pressure":984.45,"sea_level":1022.36,"grnd_level":984.45,"humidity":87,"temp_kf":-0.01},"weather":[{"id":500,"main":"Rain","description":"light rain","icon":"10d"}],"clouds":{"all":44},"wind":{"speed":7.58,"deg":301.5},"rain":{"3h":0.5},"sys":{"pod":"d"},"dt_txt":"2014-05-03 15:00:00"},{"dt":1399140000,"main":{"temp":10.41,"temp_min":10.41,"temp_max":10.42,"pressure":985.65,"sea_level":1023.17,"grnd_level":985.65,"humidity":81,"temp_kf":0},"weather":[{"id":801,"main":"Clouds","description":"few clouds","icon":"02d"}],"clouds":{"all":24},"wind":{"speed":9.61,"deg":301.001},"rain":{"3h":0},"sys":{"pod":"d"},"dt_txt":"2014-05-03 18:00:00"},{"dt":1399150800,"main":{"temp":10.91,"temp_min":10.91,"temp_max":10.91,"pressure":986.42,"sea_level":1023.78,"grnd_level":986.42,"humidity":73,"temp_kf":0},"weather":[{"id":802,"main":"Clouds","description":"scattered clouds","icon":"03d"}],"clouds":{"all":36},"wind":{"speed":9.61,"deg":308},"rain":{"3h":0},"sys":{"pod":"d"},"dt_txt":"2014-05-03 21:00:00"},{"dt":1399161600,"main":{"temp":9.62,"temp_min":9.62,"temp_max":9.62,"pressure":988.04,"sea_level":1025.66,"grnd_level":988.04,"humidity":67},"weather":[{"id":802,"main":"Clouds","description":"scattered clouds","icon":"03n"}],"clouds":{"all":32},"wind":{"speed":7.71,"deg":314.501},"rain":{"3h":0},"sys":{"pod":"n"},"dt_txt":"2014-05-04 00:00:00"},{"dt":1399172400,"main":{"temp":6.51,"temp_min":6.51,"temp_max":6.51,"pressure":990.4,"sea_level":1028.45,"grnd_level":990.4,"humidity":67},"weather":[{"id":800,"main":"Clear","description":"sky is clear","icon":"01n"}],"clouds":{"all":0},"wind":{"speed":4.68,"deg":313.002},"rain":{"3h":0},"sys":{"pod":"n"},"dt_txt":"2014-05-04 03:00:00"},{"dt":1399183200,"main":{"temp":3.6,"temp_min":3.6,"temp_max":3.6,"pressure":991.22,"sea_level":1029.81,"grnd_level":991.22,"humidity":74},"weather":[{"id":800,"main":"Clear","description":"sky is clear","icon":"01n"}],"clouds":{"all":0},"wind":{"speed":2.51,"deg":305},"rain":{"3h":0},"sys":{"pod":"n"},"dt_txt":"2014-05-04 06:00:00"},{"dt":1399194000,"main":{"temp":2.12,"temp_min":2.12,"temp_max":2.12,"pressure":990.94,"sea_level":1029.68,"grnd_level":990.94,"humidity":78},"weather":[{"id":804,"main":"Clouds","description":"overcast clouds","icon":"04n"}],"clouds":{"all":88},"wind":{"speed":1.31,"deg":348.5},"rain":{"3h":0},"sys":{"pod":"n"},"dt_txt":"2014-05-04 09:00:00"},{"dt":1399204800,"main":{"temp":3.52,"temp_min":3.52,"temp_max":3.52,"pressure":992.66,"sea_level":1031.43,"grnd_level":992.66,"humidity":85},"weather":[{"id":804,"main":"Clouds","description":"overcast clouds","icon":"04d"}],"clouds":{"all":92},"wind":{"speed":0.98,"deg":65.0036},"rain":{"3h":0},"sys":{"pod":"d"},"dt_txt":"2014-05-04 12:00:00"},{"dt":1399215600,"main":{"temp":5.04,"temp_min":5.04,"temp_max":5.04,"pressure":993.89,"sea_level":1032.19,"grnd_level":993.89,"humidity":100},"weather":[{"id":500,"main":"Rain","description":"light rain","icon":"10d"}],"clouds":{"all":92},"wind":{"speed":2.03,"deg":234.502},"rain":{"3h":1},"sys":{"pod":"d"},"dt_txt":"2014-05-04 15:00:00"},{"dt":1399226400,"main":{"temp":6.78,"temp_min":6.78,"temp_max":6.78,"pressure":993.72,"sea_level":1031.51,"grnd_level":993.72,"humidity":99},"weather":[{"id":500,"main":"Rain","description":"light rain","icon":"10d"}],"clouds":{"all":88},"wind":{"speed":1.97,"deg":99.5016},"rain":{"3h":0.5},"sys":{"pod":"d"},"dt_txt":"2014-05-04 18:00:00"},{"dt":1399237200,"main":{"temp":8.35,"temp_min":8.35,"temp_max":8.35,"pressure":992.92,"sea_level":1030.63,"grnd_level":992.92,"humidity":91},"weather":[{"id":804,"main":"Clouds","description":"overcast clouds","icon":"04d"}],"clouds":{"all":88},"wind":{"speed":2.02,"deg":68.5002},"rain":{"3h":0},"sys":{"pod":"d"},"dt_txt":"2014-05-04 21:00:00"},{"dt":1399248000,"main":{"temp":9.08,"temp_min":9.08,"temp_max":9.08,"pressure":992.54,"sea_level":1030.35,"grnd_level":992.54,"humidity":78},"weather":[{"id":801,"main":"Clouds","description":"few clouds","icon":"02n"}],"clouds":{"all":24},"wind":{"speed":2.01,"deg":87.5},"rain":{"3h":0},"sys":{"pod":"n"},"dt_txt":"2014-05-05 00:00:00"},{"dt":1399258800,"main":{"temp":4.91,"temp_min":4.91,"temp_max":4.91,"pressure":993.26,"sea_level":1031.52,"grnd_level":993.26,"humidity":77},"weather":[{"id":801,"main":"Clouds","description":"few clouds","icon":"02n"}],"clouds":{"all":24},"wind":{"speed":1.76,"deg":101.002},"rain":{"3h":0},"sys":{"pod":"n"},"dt_txt":"2014-05-05 03:00:00"},{"dt":1399269600,"main":{"temp":3.47,"temp_min":3.47,"temp_max":3.47,"pressure":992.66,"sea_level":1031.25,"grnd_level":992.66,"humidity":71},"weather":[{"id":802,"main":"Clouds","description":"scattered clouds","icon":"03n"}],"clouds":{"all":36},"wind":{"speed":2.42,"deg":71.0017},"rain":{"3h":0},"sys":{"pod":"n"},"dt_txt":"2014-05-05 06:00:00"},{"dt":1399280400,"main":{"temp":3.39,"temp_min":3.39,"temp_max":3.39,"pressure":991.72,"sea_level":1030.62,"grnd_level":991.72,"humidity":75},"weather":[{"id":804,"main":"Clouds","description":"overcast clouds","icon":"04n"}],"clouds":{"all":92},"wind":{"speed":3.62,"deg":74.5012},"rain":{"3h":0},"sys":{"pod":"n"},"dt_txt":"2014-05-05 09:00:00"},{"dt":1399291200,"main":{"temp":4.02,"temp_min":4.02,"temp_max":4.02,"pressure":993.48,"sea_level":1032.05,"grnd_level":993.48,"humidity":85},"weather":[{"id":804,"main":"Clouds","description":"overcast clouds","icon":"04d"}],"clouds":{"all":92},"wind":{"speed":3.91,"deg":64.5015},"rain":{"3h":0},"sys":{"pod":"d"},"dt_txt":"2014-05-05 12:00:00"},{"dt":1399302000,"main":{"temp":7.94,"temp_min":7.94,"temp_max":7.94,"pressure":993.4,"sea_level":1031.37,"grnd_level":993.4,"humidity":89},"weather":[{"id":803,"main":"Clouds","description":"broken clouds","icon":"04d"}],"clouds":{"all":56},"wind":{"speed":5.51,"deg":104.001},"rain":{"3h":0},"sys":{"pod":"d"},"dt_txt":"2014-05-05 15:00:00"},{"dt":1399312800,"main":{"temp":10.82,"temp_min":10.82,"temp_max":10.82,"pressure":993.25,"sea_level":1031.06,"grnd_level":993.25,"humidity":79},"weather":[{"id":802,"main":"Clouds","description":"scattered clouds","icon":"03d"}],"clouds":{"all":48},"wind":{"speed":5.67,"deg":110.501},"rain":{"3h":0},"sys":{"pod":"d"},"dt_txt":"2014-05-05 18:00:00"},{"dt":1399323600,"main":{"temp":12.09,"temp_min":12.09,"temp_max":12.09,"pressure":992.2,"sea_level":1029.86,"grnd_level":992.2,"humidity":76},"weather":[{"id":803,"main":"Clouds","description":"broken clouds","icon":"04d"}],"clouds":{"all":64},"wind":{"speed":5.11,"deg":110.007},"rain":{"3h":0},"sys":{"pod":"d"},"dt_txt":"2014-05-05 21:00:00"},{"dt":1399334400,"main":{"temp":11.32,"temp_min":11.32,"temp_max":11.32,"pressure":991.94,"sea_level":1029.57,"grnd_level":991.94,"humidity":71},"weather":[{"id":802,"main":"Clouds","description":"scattered clouds","icon":"03n"}],"clouds":{"all":44},"wind":{"speed":4.57,"deg":106.501},"rain":{"3h":0},"sys":{"pod":"n"},"dt_txt":"2014-05-06 00:00:00"},{"dt":1399345200,"main":{"temp":7.74,"temp_min":7.74,"temp_max":7.74,"pressure":992.69,"sea_level":1030.89,"grnd_level":992.69,"humidity":68},"weather":[{"id":802,"main":"Clouds","description":"scattered clouds","icon":"03n"}],"clouds":{"all":48},"wind":{"speed":4.41,"deg":108.001},"rain":{"3h":0},"sys":{"pod":"n"},"dt_txt":"2014-05-06 03:00:00"},{"dt":1399356000,"main":{"temp":6.08,"temp_min":6.08,"temp_max":6.08,"pressure":992.52,"sea_level":1030.92,"grnd_level":992.52,"humidity":67},"weather":[{"id":802,"main":"Clouds","description":"scattered clouds","icon":"03n"}],"clouds":{"all":32},"wind":{"speed":4.31,"deg":118.001},"rain":{"3h":0},"sys":{"pod":"n"},"dt_txt":"2014-05-06 06:00:00"},{"dt":1399366800,"main":{"temp":4.81,"temp_min":4.81,"temp_max":4.81,"pressure":991.4,"sea_level":1029.97,"grnd_level":991.4,"humidity":72},"weather":[{"id":801,"main":"Clouds","description":"few clouds","icon":"02n"}],"clouds":{"all":20},"wind":{"speed":4.37,"deg":122.502},"rain":{"3h":0},"sys":{"pod":"n"},"dt_txt":"2014-05-06 09:00:00"},{"dt":1399377600,"main":{"temp":4.2,"temp_min":4.2,"temp_max":4.2,"pressure":991.38,"sea_level":1029.96,"grnd_level":991.38,"humidity":75},"weather":[{"id":800,"main":"Clear","description":"sky is clear","icon":"01d"}],"clouds":{"all":0},"wind":{"speed":4.71,"deg":107.505},"rain":{"3h":0},"sys":{"pod":"d"},"dt_txt":"2014-05-06 12:00:00"},{"dt":1399388400,"main":{"temp":8.8,"temp_min":8.8,"temp_max":8.8,"pressure":991.06,"sea_level":1029.08,"grnd_level":991.06,"humidity":75},"weather":[{"id":802,"main":"Clouds","description":"scattered clouds","icon":"03d"}],"clouds":{"all":44},"wind":{"speed":6.33,"deg":107.005},"rain":{"3h":0},"sys":{"pod":"d"},"dt_txt":"2014-05-06 15:00:00"},{"dt":1399399200,"main":{"temp":13.28,"temp_min":13.28,"temp_max":13.28,"pressure":990.14,"sea_level":1027.55,"grnd_level":990.14,"humidity":76},"weather":[{"id":801,"main":"Clouds","description":"few clouds","icon":"02d"}],"clouds":{"all":12},"wind":{"speed":7.06,"deg":111.502},"rain":{"3h":0},"sys":{"pod":"d"},"dt_txt":"2014-05-06 18:00:00"},{"dt":1399410000,"main":{"temp":16.44,"temp_min":16.44,"temp_max":16.44,"pressure":987.59,"sea_level":1024.83,"grnd_level":987.59,"humidity":71},"weather":[{"id":801,"main":"Clouds","description":"few clouds","icon":"02d"}],"clouds":{"all":12},"wind":{"speed":8.07,"deg":114.002},"rain":{"3h":0},"sys":{"pod":"d"},"dt_txt":"2014-05-06 21:00:00"},{"dt":1399420800,"main":{"temp":16.04,"temp_min":16.04,"temp_max":16.04,"pressure":986.46,"sea_level":1023.68,"grnd_level":986.46,"humidity":66},"weather":[{"id":802,"main":"Clouds","description":"scattered clouds","icon":"03n"}],"clouds":{"all":36},"wind":{"speed":7.96,"deg":122.5},"rain":{"3h":0},"sys":{"pod":"n"},"dt_txt":"2014-05-07 00:00:00"}];
  243. var daily = [{"dt":1398967200,"temp":{"day":6.01,"min":3.56,"max":9.35,"night":6.4,"eve":9.24,"morn":3.56},"pressure":988.26,"humidity":98,"weather":[{"id":500,"main":"Rain","description":"light rain","icon":"10d"}],"speed":6.03,"deg":333,"clouds":92,"rain":1.25,"wind_text":"Moderate breeze"},{"dt":1399053600,"temp":{"day":8.05,"min":4.55,"max":11.49,"night":7.05,"eve":11.49,"morn":4.55},"pressure":984.86,"humidity":100,"weather":[{"id":500,"main":"Rain","description":"light rain","icon":"10d"}],"speed":3.16,"deg":244,"clouds":92,"rain":3,"wind_text":"Light breeze"},{"dt":1399140000,"temp":{"day":9.86,"min":3.9,"max":10.53,"night":3.9,"eve":9.72,"morn":4.58},"pressure":987.92,"humidity":80,"weather":[{"id":500,"main":"Rain","description":"light rain","icon":"10d"}],"speed":8.86,"deg":297,"clouds":32,"rain":0.5,"wind_text":"Fresh Breeze"},{"dt":1399226400,"temp":{"day":8.53,"min":2.32,"max":10.1,"night":2.32,"eve":9.98,"morn":2.32},"pressure":997.53,"humidity":74,"weather":[{"id":803,"main":"Clouds","description":"broken clouds","icon":"04d"}],"speed":1.92,"deg":5,"clouds":80,"wind_text":"Light breeze"},{"dt":1399312800,"temp":{"day":10.52,"min":3.67,"max":12.04,"night":4.63,"eve":11.37,"morn":3.67},"pressure":998.36,"humidity":70,"weather":[{"id":803,"main":"Clouds","description":"broken clouds","icon":"04d"}],"speed":4.07,"deg":134,"clouds":68,"wind_text":"Gentle Breeze"},{"dt":1399399200,"temp":{"day":11.08,"min":-0.53,"max":11.48,"night":2.97,"eve":11.48,"morn":-0.53},"pressure":995.43,"humidity":0,"weather":[{"id":800,"main":"Clear","description":"sky is clear","icon":"01d"}],"speed":2.57,"deg":39,"clouds":0,"wind_text":"Light breeze"},{"dt":1399485600,"temp":{"day":13.9,"min":1.12,"max":14.39,"night":5.34,"eve":14.39,"morn":1.12},"pressure":999.09,"humidity":0,"weather":[{"id":800,"main":"Clear","description":"sky is clear","icon":"01d"}],"speed":2.13,"deg":330,"clouds":3,"wind_text":"Light breeze"},{"dt":1399572000,"temp":{"day":16.3,"min":3.55,"max":16.33,"night":11.09,"eve":16.33,"morn":3.55},"pressure":1003.25,"humidity":0,"weather":[{"id":800,"main":"Clear","description":"sky is clear","icon":"01d"}],"speed":7.08,"deg":142,"clouds":4,"wind_text":"Moderate breeze"},{"dt":1399658400,"temp":{"day":16.35,"min":8.88,"max":17.03,"night":16.84,"eve":17.03,"morn":8.88},"pressure":998.13,"humidity":0,"weather":[{"id":500,"main":"Rain","description":"light rain","icon":"10d"}],"speed":11.23,"deg":128,"clouds":7,"rain":0.31,"wind_text":"Strong breeze"},{"dt":1399744800,"temp":{"day":24.33,"min":18.2,"max":24.33,"night":18.62,"eve":23.74,"morn":18.2},"pressure":989.72,"humidity":0,"weather":[{"id":501,"main":"Rain","description":"moderate rain","icon":"10d"}],"speed":8.04,"deg":170,"clouds":2,"rain":3.83,"wind_text":"Fresh Breeze"},{"dt":1399831200,"temp":{"day":22.31,"min":13.67,"max":22.31,"night":13.67,"eve":21.66,"morn":16.34},"pressure":987.42,"humidity":0,"weather":[{"id":500,"main":"Rain","description":"light rain","icon":"10d"}],"speed":4.92,"deg":256,"clouds":0,"rain":0.63,"wind_text":"Gentle Breeze"},{"dt":1399917600,"temp":{"day":21.85,"min":12.87,"max":23.99,"night":21.03,"eve":23.99,"morn":12.87},"pressure":991.8,"humidity":0,"weather":[{"id":501,"main":"Rain","description":"moderate rain","icon":"10d"}],"speed":3.34,"deg":133,"clouds":79,"rain":11.14,"wind_text":""},{"dt":1400004000,"temp":{"day":25.51,"min":18.94,"max":25.54,"night":18.94,"eve":25.54,"morn":19.46},"pressure":984.33,"humidity":0,"weather":[{"id":501,"main":"Rain","description":"moderate rain","icon":"10d"}],"speed":6.22,"deg":187,"clouds":6,"rain":4.18,"wind_text":"Moderate breeze"},{"dt":1400090400,"temp":{"day":23.79,"min":16.71,"max":23.79,"night":16.71,"eve":21.01,"morn":17.61},"pressure":981.29,"humidity":0,"weather":[{"id":502,"main":"Rain","description":"heavy intensity rain","icon":"10d"}],"speed":2.67,"deg":49,"clouds":3,"rain":14.56,"wind_text":"Light breeze"},{"dt":1400176800,"temp":{"day":17.07,"min":15.42,"max":17.07,"night":16.33,"eve":16.33,"morn":15.42},"pressure":987.46,"humidity":0,"weather":[{"id":501,"main":"Rain","description":"moderate rain","icon":"10d"}],"speed":10.64,"deg":11,"clouds":64,"rain":3.34,"wind_text":"Fresh Breeze"}];
  244.  
  245. jQuery(document).ready(function() {
  246.  
  247.     var dt = new Date(1398952065 * 1000);
  248.     var hr =dt.getHours();
  249.     if(hr < 10) hr = '0'+hr;
  250.     var mn =dt.getMinutes();
  251.     if(mn < 10) mn = '0'+mn;
  252.     var mon =dt.getMonth()+1;
  253.     if(mon < 10) mon = '0'+mon;
  254.     var day =dt.getDate();
  255.     if(day < 10) day = '0'+day;
  256.     var year =dt.getFullYear();
  257.     $("#date_m").html('get at ' + year+'.'+mon+'.'+day+' '+hr+':'+mn);
  258.  
  259.     var times = SunCalc.getTimes(new Date(), 44.94, -93.09);
  260.     $("#sunrise").html(times.sunrise.getHours() + ':' + times.sunrise.getMinutes());
  261.     $("#sunset").html(times.sunset.getHours() + ':' + times.sunset.getMinutes());
  262.  
  263.     showDailyListVertical();
  264.     showDailyChart();
  265.  
  266.     showForecastSmall();
  267.     showHourlyForecastChart();
  268.     showForcastHourlyListLong();
  269.  
  270.     var t=document.location.href.split('#');
  271.     if(t[1])    $("#"+t[1]+'_a').click();
  272.  
  273. // Tab dispacher
  274.  
  275. $('a[data-toggle="tab"]').on('shown', function (e) {
  276.  
  277.     if($(this).attr('href') == "#forecast") {  
  278.     }
  279.  
  280.     if($(this).attr('href') == "#forecast-chart") {
  281.         showForcastChartVal('temp');
  282.     }
  283.  
  284.     if($(this).attr('href') == "#map") {
  285.     //  ShowMap();
  286.     }
  287.  
  288. })
  289.  
  290.     var map = new OpenLayers.Map("map_canvas",
  291.         {  
  292.                 units: 'm',
  293.                 projection: new OpenLayers.Projection("EPSG:900913"),
  294.                 displayProjection: new OpenLayers.Projection("EPSG:4326")
  295.         }
  296.     );
  297.  
  298.     var mapnik =    new OpenLayers.Layer.OSM();
  299.  
  300.     var precipitation = new OpenLayers.Layer.XYZ(
  301.         "precipitation",
  302.         "http://${s}.tile.openweathermap.org/map/precipitation/${z}/${x}/${y}.png",
  303.         {
  304.             numZoomLevels: 19,
  305.             isBaseLayer: false,
  306.             opacity: 0.7,
  307.             sphericalMercator: true
  308.         }
  309.     );
  310.     var PRMSL_MSL_CONTOUR = new OpenLayers.Layer.XYZ(
  311.         "pressure",
  312.         "http://${s}.tile.openweathermap.org/map/pressure_cntr/${z}/${x}/${y}.png",
  313.         {
  314.             numZoomLevels: 19,
  315.             isBaseLayer: false,
  316.             opacity: 0.4,
  317.             sphericalMercator: true
  318.  
  319.         }
  320.     );
  321.     var centre = new OpenLayers.LonLat( -93.09, 44.94).transform(
  322.         new OpenLayers.Projection("EPSG:4326"),
  323.         new OpenLayers.Projection("EPSG:900913"));
  324.     map.addLayers([mapnik, precipitation, PRMSL_MSL_CONTOUR]);
  325.    map.setCenter( centre, 4);
  326.    var ls = new OpenLayers.Control.LayerSwitcher({'ascending':false});
  327.     map.addControl(ls);
  328.  
  329.  
  330.  
  331. });
  332.  
  333.  
  334. // **************************** forecast *******************************
  335. // HTML Lists
  336.  
  337. var month = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Avg", "Sen", "Oct", "Nov", "Dec"];
  338.  
  339. function showDailyListVertical()
  340. {
  341.  
  342.     var html = ''
  343.  
  344.     for(var i = 0; i <  daily.length-1; i ++){
  345.  
  346.         var dt = new Date(daily[i].dt * 1000 + time_zone);
  347.         var day =dt.getDate() +' '+ month[dt.getMonth()];
  348.  
  349.         var temp = Math.round(10*(daily[i].temp.day))/10 ;
  350.         var eve = Math.round(10*(daily[i].temp.eve))/10 ;
  351.         var morn = Math.round(10*(daily[i].temp.morn))/10 ;
  352.         var night = Math.round(10*(daily[i].temp.night))/10 ;
  353.         var icon = daily[i].weather[0].icon;
  354.         var text = daily[i].weather[0].description;
  355.  
  356.         html += '<tr><td>' + day + ' <img src="/img/w/'+icon+'.png" ></td><td>';
  357.         if(temp>0)  html += '<span class="badge badge-warning">';
  358.         else        html += '<span class="badge badge-info">';
  359.         html += temp +'°C </span>&nbsp<span class="badge badge">' + night +
  360.         '°C </span> &nbsp&nbsp<i>' +text+'</i> <p> '+daily[i].wind_text+ ' <br>overcast clouds: '+daily[i].clouds + '%, ' +
  361.             daily[i].pressure+' hpa</p></td></tr>';
  362.     }
  363.  
  364.     html='<table class="table">'+html+'</table>';
  365.  
  366.     $("#daily_list").html(html);
  367.  
  368. }
  369.  
  370. function showDailyChart()
  371. {
  372.  
  373.     var time = new Array();
  374.     var tmp = new Array();
  375.     var tmpr = new Array();
  376.     var rain = new Array();
  377.     var snow = new Array();
  378.     //var prcp = new Array();
  379.     //var wind = new Array();
  380.  
  381.  
  382.     for(var i = 0; i <  daily.length-1; i ++){
  383.  
  384.         tmp.push( Math.round(10*(daily[i].temp.day))/10  );
  385.         var dt = new Date( daily[i].dt * 1000 + time_zone);
  386.         time.push( dt );
  387.  
  388.         var tmpi =  Math.round(10*(daily[i].temp.min))/10 ;
  389.         var tmpa =  Math.round(10*(daily[i].temp.max))/10 ;
  390.         tmpr.push( [tmpi, tmpa ]  );
  391.  
  392.  
  393.         if(daily[i]['rain'])    {
  394.             rain.push( Math.round(daily[i]['rain']*100) / 100 );
  395.         }else{
  396.             rain.push( 0 );        
  397.         }
  398.         if(daily[i]['snow'])    {
  399.             snow.push( Math.round(daily[i]['snow']*100) / 100 );
  400.         }else{
  401.             snow.push( 0 );
  402.         }
  403.     }
  404.  
  405.  
  406.     $('#chart').highcharts({
  407.            chart: {
  408.            //    zoomType: 'xy'
  409.                 type: 'column'
  410.            },
  411.            title: NaN,
  412.            xAxis: {
  413.                categories: time,
  414.                 labels: {
  415.                     formatter: function() {
  416.                         return Highcharts.dateFormat('%d %b', this.value);
  417.                     }                  
  418.                 }
  419.            },
  420.  
  421.            yAxis: [
  422.            {
  423.                labels: {
  424.                    format: '{value}°C',
  425.                    style: {
  426.                        color: 'blue'
  427.                    }
  428.                 },             
  429.                title: {
  430.                    text: 'Temperature',
  431.                     style: {
  432.                        color: 'blue'
  433.                    }
  434.                }
  435.            },{
  436.                labels: {
  437.                    format: '{value} mm',
  438.                    style: {
  439.                        color: '#909090'
  440.                    }
  441.                },
  442.                 opposite: true,            
  443.                title: {
  444.                    text: 'Precipitation',
  445.                    style: {
  446.                        color: '#4572A7'
  447.                    }                    
  448.                }
  449.            }],
  450.            tooltip: {
  451.                 useHTML: true,
  452.                shared: true,                
  453.                formatter: function() {
  454.                     var s = '<small>'+ Highcharts.dateFormat('%d %b', this.x) +'</small><table>';
  455.                     $.each(this.points, function(i, point) {
  456.                         //console.log(point);
  457.                             if(point.y != 0)
  458.                                 s += '<tr><td style="color:'+point.series.color+'">'+ point.series.name +': </td>'+
  459.                                 '<td style="text-align: right"><b>'+point.y +'</b></td></tr>';
  460.                     }
  461.                     );
  462.                     return s+'</table>';
  463.                 }
  464.             },
  465.             plotOptions: {
  466.                 column: {
  467.                     stacking: 'normal'
  468.                 }
  469.             },
  470.             legend: NaN,
  471.             series: [
  472.             {
  473.                 name: 'Snow',
  474.                 type: 'column',
  475.                 color: '#909090',      
  476.                 yAxis: 1,        
  477.                 data: snow,
  478.                 stack: 'precipitation'
  479.             },
  480.             {
  481.                 name: 'Rain',
  482.                 type: 'column',
  483.                 color: '#B0B0B0',      
  484.                 yAxis: 1,        
  485.                 data: rain,
  486.                 stack: 'precipitation'
  487.             },
  488.             {
  489.                 name: 'Temperature',
  490.                 type: 'spline',
  491.                 color: 'blue',
  492.                 data: tmp
  493.             },
  494.             {
  495.                 name: 'Temperature min',
  496.                 data: tmpr,
  497.                 type: 'arearange',
  498.                 lineWidth: 0,
  499.                 linkedTo: ':previous',
  500.                 color: Highcharts.getOptions().colors[0],
  501.                 fillOpacity: 0.3,
  502.                 zIndex: 0
  503.             }
  504.             ]
  505.         });
  506. }
  507.  
  508. function showHourlyForecastChart()
  509. {
  510.  
  511.     var curdate = new Date( (new Date()).getTime()- 180 * 60 * 1000 );
  512.  
  513.     var cnt=0;
  514.  
  515.     var time = new Array();
  516.     var tmp = new Array();
  517.     var wind = new Array();
  518.     var prcp = new Array();
  519.  
  520.     for(var i = 0; i <  forecast.length; i ++){
  521.  
  522.         var dt = new Date(forecast[i].dt * 1000);
  523.    
  524.         if( curdate  > dt ) continue;
  525.         if(cnt > 10)        break;
  526.         cnt++;
  527.  
  528.         tmp.push( Math.round(10*(forecast[i].main.temp))/10  );
  529.         time.push( new Date( forecast[i].dt * 1000 + time_zone) );
  530.         wind.push(forecast[i].speed);
  531.  
  532.         var p=0;
  533.         if(forecast[i]['rain'] && forecast[i]['rain']['3h'])    p += forecast[i]['rain']['3h'];
  534.         if(forecast[i]['snow'] && forecast[i]['snow']['3h'])    p += forecast[i]['snow']['3h'];
  535.         prcp.push( Math.round( p * 10 ) / 10 );
  536.     }
  537.  
  538.     $('#chart_small').highcharts({
  539.             chart: {
  540.                 zoomType: 'xy'
  541.             },
  542.             title: NaN,
  543.  
  544.             xAxis: {
  545.                 categories: time,
  546.                 type: 'datetime',
  547.                 labels: {
  548.                     formatter: function() {
  549.                         return Highcharts.dateFormat('%H:%M', this.value);
  550.                     }                  
  551.                 }
  552.             },
  553.             yAxis: [
  554.             {
  555.                 labels: {
  556.                     format: '{value}°C',
  557.                     style: {
  558.                         color: 'blue'
  559.                     }
  560.                 },
  561.                 opposite: true,
  562.                 title:NaN
  563.             },{
  564.                 labels: {
  565.                     format: '{value}mm',
  566.                     style: {
  567.                         color: '#4572A7'
  568.                     }
  569.                 },
  570.                 opposite: true,            
  571.                 title: NaN
  572.             }],
  573.             tooltip: {
  574.                 useHTML: true,
  575.                 shared: true,                
  576.                 formatter: function() {
  577.                     var s = '<small>'+ Highcharts.dateFormat('%d %b. %H:%M', this.x) +'</small><table>';
  578.                     $.each(this.points, function(i, point) {
  579.                             s += '<tr><td style="color:'+point.series.color+'">'+ point.series.name +': </td>'+
  580.                             '<td style="text-align: right"><b>'+point.y +'</b></td></tr>';
  581.                     });
  582.                     return s+'</table>';
  583.                 }
  584.             },
  585.             legend: {
  586.                 layout: 'vertical',
  587.                 align: 'left',
  588.                 x: 410,
  589.                 verticalAlign: 'top',
  590.                 y: 0,
  591.                 floating: true,
  592.                 backgroundColor: '#FFFFFF'
  593.             },
  594.             series: [
  595.             {
  596.                 name: 'Precipitation',
  597.                 type: 'column',  
  598.                 color: '#A0A0A0',      
  599.                 yAxis: 1,
  600.                 data: prcp
  601.             },{
  602.                 name: 'Temperature',
  603.                 type: 'spline',
  604.                 color: 'blue',
  605.                 data: tmp
  606.             }]
  607.         });
  608.  
  609.  
  610. };
  611.  
  612.  
  613. function showForecastSmall()
  614. {
  615.  
  616.     var curdate = new Date( (new Date()).getTime()- 180 * 60 * 1000 );
  617.  
  618.     var html = ''
  619.  
  620.     var cnt=0;
  621.     for(var i = 0; i <  forecast.length ; i ++){
  622.  
  623.         var dt = new Date(forecast[i].dt * 1000);
  624.    
  625.         if( curdate  > dt ) continue;
  626.         if(cnt > 10)        break;
  627.         cnt++;
  628.  
  629.         var temp = Math.round(10*(forecast[i].main.temp))/10 ;
  630.         var tmin = Math.round(10*(forecast[i].main.temp_min)) / 10;
  631.         var tmax = Math.round(10*(forecast[i].main.temp_max)) / 10 ;
  632.  
  633.         var text = forecast[i].weather[0].description;
  634.         var gust = forecast[i].wind.speed;
  635.         var pressure = forecast[i].main.pressure ;
  636.         var cloud=forecast[i].clouds.all ; 
  637.         var icon = forecast[i].weather[0].icon;
  638.  
  639.         if( forecast[i].sys.pod == 'd' )
  640.             html=html+ '<div style="float: left; text-align: center;" >';
  641.         else
  642.             html=html+ '<div style="float: left; text-align: center; background-color:#eeeeee" >';
  643.  
  644.         html=html+ '<img alt="'+text+'" src="/img/w/'+icon+'.png"/>\
  645.         <div class="small_val" title="Wind">'+forecast[i].wind.speed+'m/s</div>\
  646.         <div class="small_val_grey" title="Pressure">'+forecast[i].main.pressure+'</div>\
  647.         </div>';
  648.     }
  649.  
  650.     $("#forecast_small").html(html);
  651.  
  652. };
  653.  
  654.  
  655. function showForcastHourlyListLong()
  656. {
  657.  
  658.     var curdate = new Date( (new Date()).getTime()- 180 * 60 * 1000 );
  659.  
  660.     var html = ''
  661.     var lastday=0;
  662.     var ar_tmin = new Array();
  663.     var ar_tmax = new Array();
  664.     min_cur = 500;
  665.     max_cur = 0;
  666.     lastday=0;
  667.  
  668.     for(var i = 0; i <  forecast.length-2; i ++){
  669.         if(! forecast[i].main) continue;
  670.  
  671.         var dt = new Date(forecast[i].dt * 1000);
  672.    
  673.         if( curdate  > dt ) continue;
  674.  
  675.         var day =dt.getDate();
  676.         var hr =dt.getHours();
  677.         if(hr < 10) hr = '0'+hr;
  678.  
  679.         if(day!=lastday){
  680.             html=html+"<tr class='well'><td colspan='2'><b>"+dt.toDateString()+"</b> </td></tr>" ;
  681.             lastday = day;
  682.         }
  683.         //console.log(forecast[i].main);
  684.         var temp = Math.round(10*(forecast[i].main.temp))/10 ;
  685.         var tmin = Math.round(10*(forecast[i].main.temp_min)) / 10;
  686.         var tmax = Math.round(10*(forecast[i].main.temp_max)) / 10 ;
  687.  
  688.         var text = forecast[i].weather[0].description;
  689.  
  690.         var img =  forecast[i].weather[0].icon;
  691.         var gust = forecast[i].wind.speed;
  692.         var pressure = forecast[i].main.pressure ;
  693.         var cloud=forecast[i].clouds.all ; 
  694.  
  695. html=html+'<tr><td>' + hr + ':00 <img src="http://openweathermap.org/img/w/'+img+'.png" > </td><td><span class="badge badge-info">'+temp +'°C </span> <i>' +text+'</i> ' +
  696. '<p>Temp. from '+tmin+' to '+tmax+'°C, Wind '+gust+ 'm/s. Clouds '+cloud+'%, ' +pressure+' hpa</p></td></tr>';
  697.  
  698.     }
  699.     html='<table class="table">'+html+'</table>';
  700.  
  701.     $("#hourly_long_list").html(html);
  702.  
  703. };
  704.  
  705. //**************************** Chart *************************
  706. var chart;
  707.  
  708.  
  709. function showForcastChartVal(val)
  710. {
  711.     var tmp = new Array();
  712.     var tlbl = new Array();
  713.  
  714.  
  715.     for(var i = 0; i <  forecast.length; i ++){
  716.         if(val == 'temp')
  717.             tmp.push(  Math.round( (forecast[i]['main']['temp']) * 100) / 100  );
  718.         if(val == 'wind_ms')
  719.             tmp.push(  Math.round( forecast[i]['wind']['speed'] ) );
  720.         if(val == 'pressure')
  721.             tmp.push(  Math.round( forecast[i]['main']['pressure'] ) );
  722.         if(val == 'humidity')
  723.             tmp.push(  Math.round( forecast[i]['main']['humidity'] ) );
  724.         if(val == 'precipitation') {
  725.             if(forecast[i]['rain'] && forecast[i]['rain']['3h'])
  726.                 tmp.push( Math.round( forecast[i]['rain']['3h'] ) );
  727.             if(forecast[i]['snow'] && forecast[i]['snow']['3h'])
  728.                 tmp.push( Math.round( forecast[i]['snow']['3h'] ) );
  729.             else   
  730.                 tmp.push( 0 );
  731.         }
  732.  
  733.         tlbl.push( new Date(forecast[i]['dt'] * 1000 + time_zone) );
  734.     }
  735.  
  736.     if(val == 'temp')
  737.         label = 'Temperature';
  738.     if(val == 'wind_ms')
  739.         label = 'Wind';
  740.     if(val == 'pressure')
  741.         label = 'Pressure';
  742.     if(val == 'humidity')
  743.         label = 'Humidity';
  744.     if(val == 'precipitation')
  745.         label = 'Precipitation';
  746.  
  747.     chart = new Highcharts.Chart({
  748.         chart: {
  749.             renderTo: 'chart-forecast',
  750.             type: 'spline'
  751.         },
  752.         title: {
  753.             text: NaN,
  754.         },
  755.  
  756.         tooltip: {
  757.             formatter: function() {
  758.                 return '<b>'+ this.series.name +" </b><p>"+ Highcharts.dateFormat('%Y-%m-%d %H:%M', this.x)+' '+this.y +'°C </p>';
  759.             }
  760.         },
  761.         xAxis: {
  762.             type: 'datetime',
  763.             categories: tlbl,
  764.             tickInterval: 7,
  765.  
  766.             labels: {
  767.                 formatter: function() {
  768.                 return Highcharts.dateFormat('%d', this.value);
  769.                 },
  770.                 align: 'right',
  771.                 style: {
  772.                     font: 'normal 13px Verdana, sans-serif'
  773.                 }
  774.  
  775.             }
  776.         },
  777.  
  778.         yAxis: {
  779.             title: {
  780.                 text: NaN
  781.             },
  782.  
  783.             plotLines: [{
  784.                 value: 0,
  785.                 width: 1,
  786.                 color: '#808080'
  787.             }]
  788.         },
  789.  
  790.         series: [{
  791.             name: label,
  792.             type: 'spline',
  793.             data: tmp
  794.         }
  795.         ]
  796.  
  797.     });
  798.  
  799.  
  800. }
  801.  
  802. function vote(v)
  803. {
  804.     var jsonurl = "/vote?v="+v+"&id=5045360&t=city";
  805.     $.get(jsonurl, voteOK).error(errorHandler);
  806. }
  807.  
  808. function voteOK(v)
  809. {
  810.     r=ParseJson(v);
  811.     ShowInfoMess(r.message);
  812. }
  813.  
  814. </script>
  815.  
  816. <ul class="breadcrumb">
  817. <li>Do you have the same weather conditions now as we have forecasted? Click:</li>
  818. <li> <a class="vote-plus"  href="javascript:vote(1);"></a><a href="javascript:vote(1);">yes</a> </li>
  819. <li><a class="vote-minus" href="javascript:vote(0);"></a><a href="javascript:vote(0);">no</a></li>
  820. <li>
  821.  
  822. </li>
  823. </ul>
  824.  
  825. <div class="row">
  826.  
  827. <!-- left column -->
  828. <div class="span4">
  829.  
  830. <h3>Saint Paul, US</h3>
  831.  
  832. <h2> <img src="/img/w/10d.png"> 3.7°C</h2>
  833.  
  834. light rain
  835. <p><div id="date_m"></div></p>
  836.  
  837.  
  838.  
  839. <table class="table table-striped table-bordered table-condensed">
  840. <tbody>
  841.  
  842. <tr><td>Wind</td><td>Moderate breeze 7.16 m/s <br>North-northwest (333.505°)</td></tr>
  843.  
  844. <tr><td>Cloudiness</td><td>overcast clouds</td></tr>
  845.  
  846.  
  847.         <tr><td>Pressure<br> (sea level)</td><td>1004.8 hpa</td></tr>
  848.    
  849.  
  850.  
  851. <tr><td>Humidity</td><td>96 %</td></tr>
  852.  
  853. <tr><td>Rain</td><td>0.5 mm/3 hour</td></tr>
  854.  
  855.  
  856. <tr><td>sunrise</td><td id="sunrise">1398942031</td></tr>
  857. <tr><td>sunset</td><td id="sunset">1398993495</td></tr>
  858. </tbody>
  859. </table>
  860.  
  861.  
  862. <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  863. <!-- OWM Station -->
  864. <ins class="adsbygoogle"
  865.     style="display:inline-block;width:300px;height:250px"
  866.     data-ad-client="ca-pub-9649553505534207"
  867.     data-ad-slot="4023774774"></ins>
  868. <script>
  869. (adsbygoogle = window.adsbygoogle || []).push({});
  870. </script>
  871.  
  872.  
  873.  
  874. <!--
  875. <br>
  876.  <object type="application/x-shockwave-flash" id="hpPal" name="hpPal" data="/img/yow/yowidget.swf"  width="100%" height="200" style="visibility: visible;">
  877.     <param name="quality" value="high">
  878.     <param name="bgcolor" value="#FFFFFF">
  879.     <param name="flashvars" value="fp_day_count=2&amp;location_name=&amp;forecast_provider=owm&amp;lat=44.944408&amp;lon=-93.093269&amp;background=#FFFFFF&amp;lang=en&amp;unit_system=metric&amp;time_format=24&amp;copyright_bar=false">
  880. </object>
  881.  
  882. <div style="height: 15px; font-size: 12px; font-family: Arial,Helvetica,sans-serif;">
  883. <span style="padding-left:2px; float:left; color:#888888;">
  884.     <a href="http://yowindow.com">yowindow.com</a></span>
  885. <span style="padding-right:2px; float:right; color:#888888;">Forecast by&nbsp;
  886.     <a href="http://openweathermap.org/" class="copyright">OWM</a></span>
  887. </div>
  888. -->
  889. <br>
  890.  
  891. <script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  892. <!-- Wide Skyscraper -->
  893. <ins class="adsbygoogle"
  894.     style="display:inline-block;width:300px;height:600px"
  895.     data-ad-client="ca-pub-9649553505534207"
  896.     data-ad-slot="9791106779"></ins>
  897. <script>
  898. (adsbygoogle = window.adsbygoogle || []).push({});
  899. </script>
  900.  
  901.  
  902.  
  903. </div>
  904.  
  905. <!-- right body -->
  906. <div class="span8">
  907.  
  908.     <ul class="nav nav-tabs">
  909.     <li class="active"><a href="#forecast-main" data-toggle="tab" id="forecast-main_a" >Main</a></li>
  910.     <li><a href="#daily_chart" data-toggle="tab" id="daily_chart_a">Daily</a></li>
  911.     <li><a href="#hourly_list" data-toggle="tab" id="hourly_list_a">Hourly</a></li>
  912.     <li><a href="#forecast-chart" data-toggle="tab" id="forecast-chart_a">Chart</a></li>
  913.     <li><a href="#map" data-toggle="tab" id="map_a">Map</a></li>
  914.     <li><a href="#stations" data-toggle="tab" id="stations_a">Stations</a></li>
  915.     </ul>
  916.  
  917. <div class="tab-content">
  918.  
  919. <!--Main-->
  920. <div class="tab-pane active" id="forecast-main">
  921.  
  922. <h3>Next hours</h3>
  923. <div id="chart_small" style="width: 650px; height: 200px; " ></div>
  924.  
  925. <div id="forecast_small"></div>
  926.  
  927. <div class="row">
  928. <div class="span8">
  929. <br/><br/>
  930. <h3>Next days</h3>
  931. <div id="daily_list"></div>
  932. </div>
  933. </div>
  934. </div>
  935.  
  936. <!--Daily-->
  937. <div class="tab-pane" id="daily_chart">
  938. <div id="chart" style="width: 600px; height: 400px; margin: 0 auto" ></div>
  939. </div>
  940.  
  941. <!--Hourly-->
  942. <div class="tab-pane" id="hourly_list">
  943. <div id="hourly_long_list"></div>
  944. </div>
  945.  
  946.  
  947. <!--Charts-->
  948. <div class="tab-pane" id="forecast-chart">
  949. <ul class="nav nav-pills">
  950. <li class=""><a href="javascript:showForcastChartVal('temp');" rel="tooltip" title="Temperature" >Temperature</a></li>
  951. <li class=""><a href="javascript:showForcastChartVal('wind_ms');" rel="tooltip" title="Wind" >Wind</a></li>
  952. <li class=""><a href="javascript:showForcastChartVal('pressure');" rel="tooltip" title="Pressure" >Pressure</a></li>
  953. <li class=""><a href="javascript:showForcastChartVal('precipitation');" rel="tooltip" title="Precipitation" >Precipitation</a></li>
  954. </ul>
  955. <div id="chart-forecast" style="width: 600px; height: 400px; margin: 0 auto" ></div>
  956. </div>
  957.  
  958. <!--Map-->
  959. <div class="tab-pane" id="map">
  960. <h4>Precipitation</h4>
  961. <div id="map-container" >
  962. <div id="map_canvas" style="width: 610px; height: 400px;"></div>
  963. </div>
  964. </div>
  965.  
  966. <!--Stations-->
  967. <div class="tab-pane" id="stations">
  968. <h4 id="stations_title">
  969.     <a href="/Maps?zoom=10&lat=44.944408&lon=-93.093269&layers=B0TFFFFT">
  970.     Stations. All = 7,  Bad = 0.
  971.     </a></h4>
  972. <table class="table">
  973. <thead><tr><th>R</th><th>Stations name</th><th>temp (°C)</th><th></th><th>dist (km)</th><th>time gap (hh:mm:ss)</th></tr></thead>
  974.  
  975.  
  976.  
  977. <tr>
  978.     <td>124</td>
  979.  
  980.  
  981.     <td><a href ="/station/1573"> KSTP </a></dt>
  982.     <td>4</td>
  983.  
  984.  
  985.     <td> prs=1007 hmd=86 wnd=6.2(330)</td>
  986.  
  987.     <td>2.414</td>
  988.     <td>01:21:28</td>
  989. </tr>
  990.  
  991.  
  992. <tr>
  993.     <td>112</td>
  994.  
  995.  
  996.     <td><a href ="/station/1536"> KMSP </a></dt>
  997.     <td>3</td>
  998.  
  999.  
  1000.     <td> prs=1007 hmd=100 wnd=5.1(320)</td>
  1001.  
  1002.     <td>12.22</td>
  1003.     <td>01:21:28</td>
  1004. </tr>
  1005.  
  1006.  
  1007. <tr>
  1008.     <td>188</td>
  1009.  
  1010.  
  1011.     <td><a href ="/station/95417"> ardathksheyna </a></dt>
  1012.     <td>4</td>
  1013.  
  1014.  
  1015.     <td> prs=1004.8 hmd=96(90)</td>
  1016.  
  1017.     <td>14.848</td>
  1018.     <td>00:26:43</td>
  1019. </tr>
  1020.  
  1021.  
  1022. <tr>
  1023.     <td>91</td>
  1024.  
  1025.  
  1026.     <td><a href ="/station/1537"> KANE </a></dt>
  1027.     <td>4</td>
  1028.  
  1029.  
  1030.     <td> prs=1006 hmd=100 wnd=5.1(320)</td>
  1031.  
  1032.     <td>15.882</td>
  1033.     <td>01:29:28</td>
  1034. </tr>
  1035.  
  1036.  
  1037. <tr>
  1038.     <td>96</td>
  1039.  
  1040.  
  1041.     <td><a href ="/station/1541"> KMIC </a></dt>
  1042.     <td>3</td>
  1043.  
  1044.  
  1045.     <td> prs=1007 hmd=93 wnd=5.7(340)</td>
  1046.  
  1047.     <td>24.79</td>
  1048.     <td>01:21:28</td>
  1049. </tr>
  1050.  
  1051.  
  1052. <tr>
  1053.     <td>138</td>
  1054.  
  1055.  
  1056.     <td><a href ="/station/1540"> KFCM </a></dt>
  1057.     <td>4</td>
  1058.  
  1059.  
  1060.     <td> prs=1006 hmd=86 wnd=5.1(330)</td>
  1061.  
  1062.     <td>31.62</td>
  1063.     <td>00:56:28</td>
  1064. </tr>
  1065.  
  1066.  
  1067. <tr>
  1068.     <td>164</td>
  1069.  
  1070.  
  1071.     <td><a href ="/station/1492"> KCFE </a></dt>
  1072.     <td>4</td>
  1073.  
  1074.  
  1075.     <td> prs=1008 hmd=86 wnd=5.1(320)</td>
  1076.  
  1077.     <td>37.501</td>
  1078.     <td>00:39:28</td>
  1079. </tr>
  1080.  
  1081. </table>
  1082.  
  1083.  
  1084.  
  1085. </div>
  1086.  
  1087. </div>
  1088.  
  1089. </div>
  1090.  
  1091. </div>
  1092.  
  1093.  
  1094.  
  1095.  
  1096.  
  1097.     </div> <!-- /container -->
  1098.  
  1099. <br />
  1100.  
  1101.  
  1102.  
  1103. <footer class="footer well">
  1104.  
  1105. <div class="container">
  1106.  
  1107.   <div class="row">
  1108.  
  1109.     <div class="span4">
  1110.       <h4>How to connect weather station?</h4>
  1111.       <ul>
  1112.         <li><a href="/stations">How to connect my weather station?</a></li>
  1113.         <li><a href="/hugemaps">How to connect the data layer of current weather</a></li>
  1114.         <li><a href="/API">Getting Data from JSON</a></li>
  1115.       </ul>
  1116.     </div>
  1117.  
  1118.     <div class="span4">
  1119.       <h4>Information </h4>
  1120.       <ul>
  1121.         <li><a href="/about">About</a></li>
  1122.         <li><a href="/copyright">Copyright</a></li>
  1123. <li><a href="/source">Data Sources</a></li>
  1124.       </ul>
  1125.     </div>
  1126.  
  1127.     <div class="span4">
  1128. <!--
  1129. <a href="javascript:void(0);" onclick="javascript:window.prompt ('To donate, please copy-paste my Bitcoin address to your Bitcoin software - I cannot do it automatically.\nTo copy it, right-click the selected text and select \'Copy\'.\nThen right-click the address field in your Bitcoin software and select \'Paste\'.', '1K8fwn7dd4ypymJQ49TMUHWX6UcVzgWHNA');">
  1130. <img src="/images/btc-donate.png" alt="Donate Bitcoin to 1K8fwn7dd4ypymJQ49TMUHWX6UcVzgWHNA" /></a>
  1131.  
  1132. <a href="https://twitter.com/OpenWeatherMap" class="twitter-follow-button" data-show-count="true"
  1133. data-size="large" data-show-screen-name="false">Follow @OpenWeatherMap</a>
  1134. <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
  1135. -->
  1136.  
  1137.  
  1138.     </div>
  1139.  
  1140.   </div><!-- /row -->
  1141.  
  1142. </div>
  1143.  
  1144. </footer>
  1145.  
  1146. <script type="text/javascript">
  1147. (function (d, w, c) {
  1148.     (w[c] = w[c] || []).push(function() {
  1149.         try {
  1150.             w.yaCounter23364583 = new Ya.Metrika({id:23364583,
  1151.                     trackLinks:true});
  1152.         } catch(e) { }
  1153.     });
  1154.  
  1155.     var n = d.getElementsByTagName("script")[0],
  1156.         s = d.createElement("script"),
  1157.         f = function () { n.parentNode.insertBefore(s, n); };
  1158.     s.type = "text/javascript";
  1159.     s.async = true;
  1160.     s.src = (d.location.protocol == "https:" ? "https:" : "http:") + "//mc.yandex.ru/metrika/watch.js";
  1161.  
  1162.     if (w.opera == "[object Opera]") {
  1163.         d.addEventListener("DOMContentLoaded", f, false);
  1164.     } else { f(); }
  1165. })(document, window, "yandex_metrika_callbacks");
  1166. </script>
  1167. <noscript><div><img src="//mc.yandex.ru/watch/23364583" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
  1168.  
  1169. </body>
  1170. <script type="text/javascript">
  1171.   var _gaq = _gaq || [];
  1172.   _gaq.push(['_setAccount', 'UA-31601618-1']);
  1173.   _gaq.push(['_setDomainName', 'openweathermap.org']);
  1174.   _gaq.push(['_trackPageview']);
  1175.   (function() {
  1176.     var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  1177.     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  1178.     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  1179.   })();
  1180. </script>
  1181. <script type="text/javascript">
  1182. jQuery(document).ready(function() {
  1183.  
  1184.   var units = 'metric';
  1185.   if( get_cookie('units') ) units = get_cookie('units');
  1186.   if( units == 'metric') {
  1187.       document.getElementById("units_check").checked = true;
  1188.   }else{
  1189.       document.getElementById("units_check").checked = false;
  1190.   }
  1191. });
  1192. </script>
  1193.  
  1194. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!