Merge pull request #11 from rastapasta/mouse

adding lat/lon under cursor, drag&drop, center on click

README.md

@@ -6,6 +6,7 @@ A node.js based [Vector Tile](http://wiki.openstreetmap.org/wiki/Vector_tiles) t
 
 ## Features
 
+* Use your mouse to drag and zoom in and out!
 * Discover Point-of-Interests around any given location
 * Highly customizable layer styling with [Mapbox Styles](https://www.mapbox.com/mapbox-gl-style-spec/) support
 * Connect to any public or private vector tile server
@@ -13,7 +14,6 @@ A node.js based [Vector Tile](http://wiki.openstreetmap.org/wiki/Vector_tiles) t
 * Work offline and discover local [VectorTile](https://github.com/mapbox/vector-tile-spec)/[MBTiles](https://github.com/mapbox/mbtiles-spec)
 * Compatible with most Linux and OSX terminals
 * Highly optimizied algorithms for a smooth experience
-* Use your mouse to drag and zoom in and out (WIP)
 * 100% pure Coffee-/JavaScript! :sunglasses:
 
 ## How to install

package.json

@@ -14,8 +14,8 @@
   "bin": {
     "mapscii": "./bin/mapscii.sh"
   },
-  "engines" : {
+  "engines": {
-    "node" : ">=4.5.0"
+    "node": ">=4.5.0"
   },
   "keywords": [
     "map",

src/Mapscii.coffee

@@ -98,40 +98,58 @@ module.exports = class Mapscii
 
     @renderer.setSize @width, @height
 
-  _onClick: (event) ->
+  _updateMousePosition: (event) ->
-    if @mouseDragging and event.button is "left"
+    projected =
-      # TODO lat/lng based drag&drop
+      x: (event.x-.5)*2
-      # @view[0] -= (@mouseDragging.x-@mousePosition.x)<<1
+      y: (event.y-.5)*4
-      # @view[1] -= (@mouseDragging.y-@mousePosition.y)<<2
-      @_draw()
 
+    size = utils.tilesizeAtZoom @zoom
+    [dx, dy] = [projected.x-@width/2, projected.y-@height/2]
+
+    z = utils.baseZoom @zoom
+    center = utils.ll2tile @center.lon, @center.lat, z
+    @mousePosition = utils.tile2ll center.x+(dx/size), center.y+(dy/size), z
+
+  _onClick: (event) ->
+    @_updateMousePosition event
+
+    if @mouseDragging and event.button is "left"
       @mouseDragging = false
+    else
+      @setCenter @mousePosition.lat, @mousePosition.lon
+
+    @_draw()
 
   _onMouseScroll: (event) ->
+    @_updateMousePosition event
     # TODO: handle .x/y for directed zoom
-    @zoomBy config.zoomStep * if event.button is "up" then -1 else 1
+    @zoomBy config.zoomStep * if event.button is "up" then 1 else -1
     @_draw()
 
   _onMouseMove: (event) ->
-    projected =
-      x: event.x * 2
-      y: event.y * 4
-
     # start dragging
     if event.button is "left"
       if @mouseDragging
-        # TODO lat/lng based drag&drop
+        dx = (@mouseDragging.x-event.x)*2
-        # @view[0] -= (@mouseDragging.x-event.x)<<1
+        dy = (@mouseDragging.y-event.y)*4
-        # @view[1] -= (@mouseDragging.y-event.y)<<2
+
+        size = utils.tilesizeAtZoom @zoom
+
+        newCenter = utils.tile2ll @mouseDragging.center.x+(dx/size),
+          @mouseDragging.center.y+(dy/size),
+          utils.baseZoom(@zoom)
+
+        @setCenter newCenter.lat, newCenter.lon
+
+        @_draw()
 
-        if not @renderer.isDrawing and @renderer.lastDrawAt < Date.now()-100
-          @_draw()
-          @mouseDragging = x: event.x, y: event.y
       else
-        @mouseDragging = x: event.x, y: event.y
+        @mouseDragging =
+          x: event.x,
+          y: event.y,
+          center: utils.ll2tile @center.lon, @center.lat, utils.baseZoom(@zoom)
 
-    # update internal mouse tracker
+    @_updateMousePosition event
-    @mousePosition = projected
     @notify @_getFooter()
 
   _onKey: (key) ->
@@ -182,7 +200,7 @@ module.exports = class Mapscii
 
     "center: #{utils.digits @center.lat, 3}, #{utils.digits @center.lon, 3}   "+
     "zoom: #{utils.digits @zoom, 2}   "+
-    "mouse: #{@mousePosition.x-@width/2} #{@mousePosition.y-@height/2}   "
+    "mouse: #{utils.digits @mousePosition.lat, 3}, #{utils.digits @mousePosition.lon, 3} "
 
   notify: (text) ->
     @_write "\r\x1B[K"+text unless config.headless

src/Renderer.coffee

@@ -66,7 +66,7 @@ module.exports = class Renderer
       frame
 
   _visibleTiles: (center, zoom) ->
-    z = Math.min config.tileRange, Math.max 0, Math.floor zoom
+    z = utils.baseZoom zoom
     center = utils.ll2tile center.lon, center.lat, z
 
     tiles = []

src/utils.coffee

@@ -13,9 +13,11 @@ utils =
   clamp: (num, min, max) ->
     if num <= min then min else if num >= max then max else num
 
+  baseZoom: (zoom) ->
+    Math.min config.tileRange, Math.max 0, Math.floor zoom
+
   tilesizeAtZoom: (zoom) ->
-    baseZoom = Math.min config.tileRange, Math.floor Math.max 0, zoom
+    config.projectSize * Math.pow(2, zoom-utils.baseZoom(zoom))
-    config.projectSize * Math.pow(2, zoom-baseZoom)
 
   deg2rad: (angle) ->
     # (angle / 180) * Math.PI