From 9c6afe2ffe8dcf5dcbee571a760bb2bf577bdaa6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Michael=20Stra=C3=9Fburger?= Date: Sat, 29 Apr 2017 00:39:20 +0200 Subject: [PATCH] :mouse2: welcome back, drop + drag! --- README.md | 2 +- src/Mapscii.coffee | 35 +++++++++++++++++++---------------- src/Renderer.coffee | 2 +- src/utils.coffee | 6 ++++-- 4 files changed, 25 insertions(+), 20 deletions(-) diff --git a/README.md b/README.md index c42abf5..f0259d6 100644 --- a/README.md +++ b/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 diff --git a/src/Mapscii.coffee b/src/Mapscii.coffee index 146e596..ef1ef24 100644 --- a/src/Mapscii.coffee +++ b/src/Mapscii.coffee @@ -106,19 +106,14 @@ module.exports = class Mapscii size = utils.tilesizeAtZoom @zoom [dx, dy] = [projected.x-@width/2, projected.y-@height/2] - z = Math.min config.tileRange, Math.max 0, Math.floor @zoom + 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" - # TODO lat/lng based drag&drop - # @view[0] -= (@mouseDragging.x-@mousePosition.x)<<1 - # @view[1] -= (@mouseDragging.y-@mousePosition.y)<<2 - @mouseDragging = false else @setCenter @mousePosition.lat, @mousePosition.lon @@ -128,25 +123,33 @@ module.exports = class Mapscii _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) -> - @_updateMousePosition event - # start dragging if event.button is "left" if @mouseDragging - # TODO lat/lng based drag&drop - # @view[0] -= (@mouseDragging.x-event.x)<<1 - # @view[1] -= (@mouseDragging.y-event.y)<<2 + dx = (@mouseDragging.x-event.x)*2 + dy = (@mouseDragging.y-event.y)*4 + + 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) + @_updateMousePosition event @notify @_getFooter() _onKey: (key) -> diff --git a/src/Renderer.coffee b/src/Renderer.coffee index 1039156..51da171 100644 --- a/src/Renderer.coffee +++ b/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 = [] diff --git a/src/utils.coffee b/src/utils.coffee index 88d1a5a..bf6fdfc 100644 --- a/src/utils.coffee +++ b/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-baseZoom) + config.projectSize * Math.pow(2, zoom-utils.baseZoom(zoom)) deg2rad: (angle) -> # (angle / 180) * Math.PI