Heatmap

by maxim75

HTML

<!DOCTYPE html>
<html> <!-- manifest="s.manifest" -->
    <head>
        <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <style>
                body {
                        font-family: 'Open Sans', sans-serif;
                }
        </style>
        
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700&subset=latin,cyrillic-ext,cyrillic,vietnamese,greek-ext,greek,latin-ext' rel='stylesheet' type='text/css'>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.1/underscore-min.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.1/backbone-min.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.0.1/raphael-min.js"></script>
        
    </head>
    <body>
        <label>GridID:<span id="gridId"></span></label>
    </body>
    <script>
        var LBrowse = Backbone.Model.extend({
            
            initialize: function() {
                console.log("initialize");
                
                this.canvasWidth = 320;
                this.canvasHeight = 320;
                
                var dbSize = 50 * 1024 * 1024; // 5MB
                this.set({ db: openDatabase("Test2", "1.0", "Test2", dbSize) });
                
                this.get("db").transaction(function(tx) {
                    tx.executeSql("CREATE TABLE IF NOT EXISTS location(id INTEGER PRIMARY KEY, lat INTEGER, lng INTEGER, title VARCHAR(200))", []);
                });
                
                this.setLocationUpdates();
                
               ...