show mbtiles in browser with leaflet

data/maps/brothers/mbtiles/.gitignore

@@ -0,0 +1 @@
+*.mbtiles

frontend/index.html

@@ -7,9 +7,11 @@
   <script src="/static/lib/jquery-1.10.2.min.js"></script>
   <script src="/static/lib/jquery.gridster.min.js"></script>
   <script src="/static/lib/sprintf.min.js"></script>
+  <script src="/static/lib/leaflet.js"></script>
   <script src="/static/psas/telemetry.js"></script>
   <link href="/static/css/bootstrap.min.css" rel="stylesheet">
   <link href="/static/css/jquery.gridster.min.css" rel="stylesheet">
+  <link rel="stylesheet" href="/static/css/leaflet.css" />
   <link href="/static/psas/style.css" rel="stylesheet">
 
   <title>PSAS - Real Time Telemetry Server</title>

frontend/widgets/map.coffee

@@ -0,0 +1,6 @@
+class Map extends Widget
+    constructor: (id, @node) ->
+        super(id)
+
+    update: (d) ->
+        return 

frontend/widgets/map.css

@@ -0,0 +1,3 @@
+.map { padding: 20px; }
+.map h2 { margin-top: -5px; margin-bottom: 8px; font-weight: bold; color: #333; }
+

frontend/widgets/map.html

@@ -0,0 +1,14 @@
+{% autoescape None %}
+<div class="map">
+    <h2>{{ name }}</h2>
+    <div id="maptile" style="width:600px;height:500px;"></div>
+
+<script>
+    var map = L.map('maptile').setView([43.798806, -120.650155], 13);
+
+    L.tileLayer('/maps/brothers/{z}/{x}/{y}/', {
+        maxZoom: 20,
+    }).addTo(map);
+
+</script>
+</div>

profiles/map.json

@@ -0,0 +1,6 @@
+[
+    {
+        "type": "map", "name": "Tactical Map",
+        "x": 1, "y": 1, "sx":5, "sy": 4
+    }
+]

server.py

@@ -2,6 +2,7 @@
 import tornado.web
 import tornado.websocket
 from tornado import template
+import sqlite3
 import time
 import config
 import stats
@@ -11,6 +12,36 @@
 # Stores list of attached clients for the websocket
 clients = []
 
+class Tileset(object):
+
+    def __init__(self, filename):
+        self.filename = filename
+
+    def get_tile(self, z, x, y):
+        ymax = 1 << z
+        y = ymax - y - 1
+        row = self.query('''SELECT tile_data FROM tiles
+                            WHERE zoom_level = %s
+                            AND tile_column = %s
+                            AND tile_row = %s''' % (z,x,y))
+        if not row:
+            return None
+        return bytes(row[0])
+
+    def query(self, sql):
+        db = getattr(self, '_database', None)
+        if db is None:
+            self._database = self.connect()
+            db = self._database
+
+        cur = db.cursor()
+        cur.execute(sql)
+        row = cur.fetchone()
+        return row
+
+    def connect(self):
+        return sqlite3.connect(self.filename)
+
 
 class MainHandler(tornado.web.RequestHandler):
     """Basic web server. This is a single page javascript webapp"""
@@ -20,6 +51,7 @@ class MainHandler(tornado.web.RequestHandler):
         {'name': "ADIS", 'uri': "/profiles/adis", 'file': 'adis.json'},
         {'name': "ROLL", 'uri': "/profiles/roll", 'file': 'roll.json'},
         {'name': "GPS", 'uri': "/profiles/gps", 'file': 'gps.json'},
+        {'name': "Map", 'uri': "/profiles/map", 'file': 'map.json'},
     ]
     WidgetDir = os.path.join(os.path.dirname(os.path.realpath(__file__)), "frontend/widgets/")
     Template = template.Loader(WidgetDir)
@@ -48,6 +80,16 @@ class NewLayoutHandler(tornado.web.RequestHandler):
     def get(self):
         self.render('new.html')
 
+class TileServer(tornado.web.RequestHandler):
+
+    tilesets = {'brothers': Tileset('data/maps/brothers/mbtiles/brothers.mbtiles')}
+    def get(self, **r):
+        t = self.tilesets[r['mapname']].get_tile(int(r['z']), int(r['x']), int(r['y']))
+        if t is None:
+            t = ""
+        self.write(t)
+        self.set_header("Content-Type", "image/png")
+
 
 class FrontEndWebSocket(tornado.websocket.WebSocketHandler):
     """Basic WebSocket class"""
@@ -81,6 +123,7 @@ def __init__(self, queue):
         self.application = tornado.web.Application([
                 (r'/', MainHandler),
                 (r'/profiles/([^/]+)', MainHandler),
+                (r'/maps/(?P<mapname>[^\/]+)/?(?P<z>[^\/]+)/?(?P<x>[^\/]+)?/?(?P<y>[^\/]+)?/', TileServer),
                 (r'/create', NewLayoutHandler),
                 (r'/ws', FrontEndWebSocket),
                 (r'/(.*)', tornado.web.StaticFileHandler, dict(path=static_path)),