🎊 multi tile support! endless left/right scroll, promise refactor

src/Renderer.coffee

@@ -8,6 +8,7 @@ x256 = require 'x256'
 mercator = new (require('sphericalmercator'))()
 tilebelt = require 'tilebelt'
 MBTiles = require 'mbtiles'
+Promise = require 'bluebird'
 
 Canvas = require './Canvas'
 LabelBuffer = require './LabelBuffer'
@@ -99,40 +100,52 @@ module.exports = class Renderer
 
     # TODO: tiles = @_tilesInBBox @_getBBox()
 
-    z = Math.max 0, Math.floor zoom
+    Promise
-    xyz = tilebelt.pointToTileFraction center.lon, center.lat, z
+    .resolve @_visibleTiles center, zoom
-    tile =
+    .map (tile) => @_getTile tile.xyz, tile
-      size: tileSize
+    .then (tiles) =>
-      x: Math.floor xyz[0]
+      for tile in tiles
-      y: Math.floor xyz[1]
+        @_renderTile tile.data, zoom, tile.meta.position
-      z: z
 
-    tileSize = @config.tileSize / @_scaleAtZoom(zoom)
-    position = [
-      @width/2-(xyz[0]-tile.x)*tileSize
-      @height/2-(xyz[1]-tile.y)*tileSize
-    ]
-
-    @_getTile tile
-    .then (data) =>
-      @_renderTile data, zoom, position
       @_writeFrame()
 
       @isDrawing = false
       @lastDrawAt = Date.now()
 
-  _getTile: (tile) ->
+  _visibleTiles: (center, zoom) ->
-    cacheKey = [tile.z, tile.x, tile.y].join "-"
+    z = Math.max 0, Math.floor zoom
+    xyz = tilebelt.pointToTileFraction center.lon, center.lat, z
 
-    # if data = @cache[cacheKey]
+    tiles = []
-    #   console.log cacheKey
+    tileSize = @config.tileSize / @_scaleAtZoom(zoom)
-    #   console.log data
+    for y in [Math.floor(xyz[1])-1..Math.floor(xyz[1])+1]
-    #   return Promise.resolve data
+      for x in [Math.floor(xyz[0])-1..Math.floor(xyz[0])+1]
+        tile = x: x, y: y, z: z
 
+        position = [
+          @width/2-(xyz[0]-tile.x)*tileSize
+          @height/2-(xyz[1]-tile.y)*tileSize
+        ]
+
+        tile.x %= Math.pow 2, z
+        tile.y %= Math.pow 2, z
+
+        if position[0]+tileSize < 0 or
+        position[1]+tileSize < 0 or
+        position[0]>@width or
+        position[1]>@height
+          continue
+
+        tiles.push xyz: tile, position: position
+
+    tiles
+
+  _getTile: (tile, meta = {}) ->
     @tileSource
     .getTile tile.z, tile.x, tile.y
     .then (data) =>
-      @cache[cacheKey] = data
+      data: data
+      meta: meta
 
   _renderTile: (tile, zoom, position) ->
     @canvas.reset()
@@ -160,6 +173,7 @@ module.exports = class Renderer
       if @config.layers[layer]?.minZoom and zoom > @config.layers[layer].minZoom
         continue
 
+      # TODO: reimplement tree based lookup
       #features = tile.layers[layer].tree.search box
 
       #@notify "rendering #{features.length} #{layer} features.."

src/Termap.coffee

@@ -174,6 +174,8 @@ module.exports = class Termap
     .draw @center, @zoom, @rotation
     .then =>
       @renderer.notify @_getFooter()
+    .catch =>
+      @renderer.notify "renderer is busy"
 
   _getFooter: ->
     # features = @renderer.featuresAt @mousePosition.x-1-(@view[0]>>1), @mousePosition.y-1-(@view[1]>>2)