PageRenderTime 450ms CodeModel.GetById 212ms app.highlight 103ms RepoModel.GetById 129ms app.codeStats 0ms

/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<head>
 3<link rel="stylesheet" type="text/css" href="http://static.openheatmap.com/css/mainstyle.css"/>
 4<style type="text/css">
 5a { text-decoration: underline; }
 6a:link { text-decoration: underline;}
 7a:visited { text-decoration: underline;}
 8</style>
 9<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
10<script type="text/javascript" src="http://static.openheatmap.com/scripts/jquery.openheatmap.js"></script>
11<script type='text/javascript'>
12
13g_isMapCreated = false;
14g_csvString = null;
15g_deviceName = null;
16
17g_mapSettings = {
18  "zoom_slider_power":5,
19  "zoomed_out_degrees_per_pixel":-180,
20  "zoomed_in_degrees_per_pixel":-0.01,
21  "is_gradient_value_range_set":"false",
22  "gradient_value_min":"1",
23  "gradient_value_max":"14",
24  "point_blob_radius":8.32,
25  "point_blob_value":1,
26  "show_map_tiles":true,
27  "map_server_root":"http:\/\/a.tile.openstreetmap.org\/",
28  "information_alpha":0.92,
29  "show_zoom":true,
30  "allow_pan":true,
31  "point_drawing_shape":"circle",
32  "circle_line_color":0,
33  "circle_line_alpha":1,
34  "circle_line_thickness":1,
35  "is_point_blob_radius_in_pixels":true,
36  "credit_text": "OpenStreetMap/OpenHeatMap",
37};
38
39$(document).ready(function() {
40
41  $('#openheatmap_container').insertOpenHeatMap({
42    width: 1000, 
43    height: 720,
44    prefer: 'canvas'
45  });
46});
47
48function onMapCreated() {
49  var openHeatMap = $.getOpenHeatMap();
50
51  for (var key in g_mapSettings) {
52    var value = g_mapSettings[key];
53    openHeatMap.setSetting(key, value);
54  }
55  
56  openHeatMap.setColorGradient(["#eaf8b800","#eae40f16","#4f2d00dd"]);
57  
58  g_isMapCreated = true;
59
60  if (g_csvString!=null) {
61    loadLocationData();
62  }
63}
64
65function storeLocationData(csvString, deviceName) {
66  g_csvString = csvString;
67  g_deviceName = deviceName;
68  if (g_isMapCreated) {
69    loadLocationData();
70  }
71}
72
73function loadLocationData() {
74  var openHeatMap = $.getOpenHeatMap();
75
76  openHeatMap.loadValuesFromCSVString(g_csvString);
77  $('#message').text(g_deviceName);
78
79  openHeatMap.setAnimationTime('All Time');
80}
81
82</script>
83</head>
84<body style="margin:0px; padding:0px; position:relative;">
85<div id="openheatmap_container" style="margin:0px; padding:0px;"></div>
86<div id="message" style="position:absolute; top:20px; left:0px; width: 1000px; text-align:center; font-size:200%;">
87Loading  <img src="http://static.openheatmap.com/images/loading.gif"/>
88</div>
89<div id="credit" style="position:absolute; top:700px; left:0px; width: 1000px; text-align:center; font-size:180%;">
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</div>
92</body>
93</html>