/index.html
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>