/index.html

http://github.com/petewarden/iPhoneTracker · HTML · 93 lines · 79 code · 14 blank · 0 comment · 0 complexity · b28396dc8842c1690d7345b766d8614a MD5 · raw file 

    

  1. <html>
    2. 

  2. <head>
    3. 

  3. <link rel="stylesheet" type="text/css" href="http://static.openheatmap.com/css/mainstyle.css"/>
    4. 

  4. <style type="text/css">
    5. 

  5. a { text-decoration: underline; }
    6. 

  6. a:link { text-decoration: underline;}
    7. 

  7. a:visited { text-decoration: underline;}
    8. 

  8. </style>
    9. 

  9. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    10. 

  10. <script type="text/javascript" src="http://static.openheatmap.com/scripts/jquery.openheatmap.js"></script>
    11. 

  11. <script type='text/javascript'>
    12. 

  12. 

  13. g_isMapCreated = false;
    14. 

  14. g_csvString = null;
    15. 

  15. g_deviceName = null;
    16. 

  16. 

  17. g_mapSettings = {
    18. 

  18.   "zoom_slider_power":5,
    19. 

  19.   "zoomed_out_degrees_per_pixel":-180,
    20. 

  20.   "zoomed_in_degrees_per_pixel":-0.01,
    21. 

  21.   "is_gradient_value_range_set":"false",
    22. 

  22.   "gradient_value_min":"1",
    23. 

  23.   "gradient_value_max":"14",
    24. 

  24.   "point_blob_radius":8.32,
    25. 

  25.   "point_blob_value":1,
    26. 

  26.   "show_map_tiles":true,
    27. 

  27.   "map_server_root":"http:\/\/a.tile.openstreetmap.org\/",
    28. 

  28.   "information_alpha":0.92,
    29. 

  29.   "show_zoom":true,
    30. 

  30.   "allow_pan":true,
    31. 

  31.   "point_drawing_shape":"circle",
    32. 

  32.   "circle_line_color":0,
    33. 

  33.   "circle_line_alpha":1,
    34. 

  34.   "circle_line_thickness":1,
    35. 

  35.   "is_point_blob_radius_in_pixels":true,
    36. 

  36.   "credit_text": "OpenStreetMap/OpenHeatMap",
    37. 

  37. };
    38. 

  38. 

  39. $(document).ready(function() {
    40. 

  40. 

  41.   $('#openheatmap_container').insertOpenHeatMap({
    42. 

  42.     width: 1000, 
    43. 

  43.     height: 720,
    44. 

  44.     prefer: 'canvas'
    45. 

  45.   });
    46. 

  46. });
    47. 

  47. 

  48. function onMapCreated() {
    49. 

  49.   var openHeatMap = $.getOpenHeatMap();
    50. 

  50. 

  51.   for (var key in g_mapSettings) {
    52. 

  52.     var value = g_mapSettings[key];
    53. 

  53.     openHeatMap.setSetting(key, value);
    54. 

  54.   }
    55. 

  55.   
    56. 

  56.   openHeatMap.setColorGradient(["#eaf8b800","#eae40f16","#4f2d00dd"]);
    57. 

  57.   
    58. 

  58.   g_isMapCreated = true;
    59. 

  59. 

  60.   if (g_csvString!=null) {
    61. 

  61.     loadLocationData();
    62. 

  62.   }
    63. 

  63. }
    64. 

  64. 

  65. function storeLocationData(csvString, deviceName) {
    66. 

  66.   g_csvString = csvString;
    67. 

  67.   g_deviceName = deviceName;
    68. 

  68.   if (g_isMapCreated) {
    69. 

  69.     loadLocationData();
    70. 

  70.   }
    71. 

  71. }
    72. 

  72. 

  73. function loadLocationData() {
    74. 

  74.   var openHeatMap = $.getOpenHeatMap();
    75. 

  75. 

  76.   openHeatMap.loadValuesFromCSVString(g_csvString);
    77. 

  77.   $('#message').text(g_deviceName);
    78. 

  78. 

  79.   openHeatMap.setAnimationTime('All Time');
    80. 

  80. }
    81. 

  81. 

  82. </script>
    83. 

  83. </head>
    84. 

  84. <body style="margin:0px; padding:0px; position:relative;">
    85. 

  85. <div id="openheatmap_container" style="margin:0px; padding:0px;"></div>
    86. 

  86. <div id="message" style="position:absolute; top:20px; left:0px; width: 1000px; text-align:center; font-size:200%;">
    87. 

  87. Loading  <img src="http://static.openheatmap.com/images/loading.gif"/>
    88. 

  88. </div>
    89. 

  89. <div id="credit" style="position:absolute; top:700px; left:0px; width: 1000px; text-align:center; font-size:180%;">
    90. 

  90. <i>Map Background © <a href="http://www.openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a></i>
    91. 

  91. </div>
    92. 

  92. </body>
    93. 

  93. </html>
    94.