libs/js/jquery-geo-1.0a4/docs/examples/hurricane.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <meta charset="utf-8">
   5
   6     <title>hurricane</title>
   7     <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
   8
   9     <meta name="description" content="Displaying storm activity in the Atlantic">
  10     <meta name="author" content="Ryan Westphal">
  11     <link rel="stylesheet" type="text/css" href="css/style.css" />
  12     <style type="text/css">
  13       #map
  14       {
  15         position: fixed;
  16         bottom: 0;
  17         left: 0;
  18         right: 0;
  19         top: 0;
  20       }
  21       #popup
  22       {
  23         background: #fff;
  24         border: solid 1px #444;
  25         border-radius: 8px;
  26         display: none;
  27         padding: 4px;
  28         position: absolute;
  29         opacity: .6;
  30         overflow: hidden;
  31         width: auto;
  32       }
  33     </style>
  34   </head>
  35   <body>
  36     <div id="hurricane">
  37       <div id="map">
  38         <div id="popup">
  39         </div>
  40       </div>
  41       <div class="info">
  42         <a href="../" class="docLink">&lt; docs</a>
  43           <h1>Hurricane tracking</h1>
  44           <p>Displaying a snapshot of storm data extracted from <a href="http://stormpulse.com">stormpulse.com</a></p>
  45       </div>
  46     </div>
  47     <script id="tmplHurricane" type="text/x-jquery-tmpl">
  48       <h2>{{=category}}</h2>
  49       <table>
  50         <tr><th>date</th><td>{{=date}}</td></tr>
  51         <tr><th>accuracy</th><td>{{=accuracy}}/40</td></tr>
  52         <tr><th>eye diameter</th><td>{{=eyeDiameter}}</td></tr>
  53         <tr><th>direction</th><td>{{#if direction}}{{=direction}}&deg{{/if}}</td></tr>
  54         <tr><th>pressure</th><td>{{=pressure}}</td></tr>
  55         <tr><th>wind radii</th><td>{{=windRadii}}</td></tr>
  56         <tr><th>wind speed</th><td>{{=windSpeed}}</td></tr>
  57         <tr><th>gusts</th><td>{{=gusts}}</td></tr>
  58       </table>
  59     </script>
  60     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  61     <script src="js/iecors.js"></script>
  62     <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
  63     <script>
  64       $(function () {
  65         $.template( "hurricane", $( "#tmplHurricane" ) );
  66
  67         var map = $("#map").geomap({
  68             center: [-76.6, 30.4],
  69             zoom: 5,
  70             mode: "find",
  71             cursors: { find: "default" },
  72             move: function (e, geo) {
  73               $("#popup").hide().html("");
  74               var tracks = map.geomap("find", geo, 4);
  75
  76               $.each(tracks, function() {
  77                 if (this.type == "Feature") {
  78                   $( "#popup" ).append( $.render( this.properties, "hurricane" ) );
  79                   var popupLocation = map.geomap( "toPixel", geo.coordinates );
  80                   $("#popup").css({
  81                     left: popupLocation[ 0 ],
  82                     top: popupLocation[ 1 ]
  83                   }).css("display", "inline-block");
  84                 }
  85               });
  86             }
  87           });
  88
  89         $.ajax({
  90           url: "http://data.jquerygeo.com/hurricane.json",
  91           dataType: "json",
  92           success: function (result) {
  93             var shapeStyle = {
  94               color: "gray",
  95               strokeWidth: "4px"
  96             };
  97
  98             $.each(result.stormData.storms.tracks[0].track, function(i) {
  99               var trackPoint = {
 100                 type: "Feature",
 101                 geometry: {
 102                   type: "Point",
 103                   coordinates: [
 104                     parseFloat(this[16]),
 105                     parseFloat(this[7])
 106                   ]
 107                 },
 108                 properties: {
 109                   eyeDiameter: this[0],
 110                   windRadii: this[1],
 111                   category: this[4],
 112                   accuracy: this[10] || 0,
 113                   direction: this[11],
 114                   pressure: this[14],
 115                   date: this[15],
 116                   gusts: this[17],
 117                   windSpeed: this[18]
 118                 }
 119               };
 120
 121               if (trackPoint.properties.date != null) {
 122                 var dateStr = trackPoint.properties.date.toString(),
 123                     year = dateStr.substr(0, 4),
 124                     month = dateStr.substr(4, 2),
 125                     day = dateStr.substr(6);
 126                 trackPoint.properties.date = year + "-" + month + "-" + day;
 127               }
 128
 129               switch (trackPoint.properties.category) {
 130                 case "Tropical Storm":
 131                   shapeStyle.color = "#eee";
 132                   break;
 133
 134                 case "Hurricane - Category 1":
 135                   shapeStyle.color = "#ff8";
 136                   break;
 137
 138                 case "Hurricane - Category 2":
 139                   shapeStyle.color = "orange";
 140                   break;
 141
 142                 case "Major Hurricane - Category 3":
 143                   shapeStyle.color = "#f88";
 144                   break;
 145
 146                 default:
 147                   shapeStyle.color = "gray";
 148                   break;
 149               }
 150
 151               if (trackPoint.properties.accuracy != null) {
 152                 var pos = trackPoint.geometry.coordinates,
 153                     a = .2 + (40 - trackPoint.properties.accuracy)/40;
 154
 155                 shapeStyle.strokeOpacity = trackPoint.properties.accuracy/40;
 156
 157                 map.geomap("append", {
 158                   type: "Polygon",
 159                   coordinates: [[
 160                     [pos[0] - a, pos[1] - a],
 161                     [pos[0] - a, pos[1] + a],
 162                     [pos[0] + a, pos[1] + a],
 163                     [pos[0] + a, pos[1] - a],
 164                     [pos[0] - a, pos[1] - a]
 165                   ]]
 166                 }, $.extend({}, shapeStyle));
 167               }
 168
 169               map.geomap("append", trackPoint, { color: "#444" });
 170             });
 171           },
 172           error: function (xhr) {
 173             alert("Sorry, we were unable to read the storm data.");
 174           }
 175         });
 176       });
 177     </script>
 178   </body>
 179 </html>
 180