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