Skip to content
Permalink
Browse files

Zoom toward the mouse pointer instead of the map center (#75)

  • Loading branch information...
quincylvania authored and jaller94 committed Oct 13, 2019
1 parent dcda97e commit a872c0ee6dce0f9887b7e710e5c6383c23800523
Showing with 34 additions and 6 deletions.
  1. +0 −1 README.md
  2. +34 −5 src/Mapscii.js
@@ -109,7 +109,6 @@ If your terminal supports mouse events you can drag the map and use your scroll
* [ ] mouse control
* [ ] hover POIs/labels
* [ ] hover maybe even polygons/-lines?
* [ ] zoom into mouse pos
* Styler
* [ ] respect zoom based style ranges
@@ -110,10 +110,10 @@ class Mapscii {
this.renderer.setSize(this.width, this.height);
}

_updateMousePosition(event) {
_colrow2ll(x, y) {
const projected = {
x: (event.x-0.5)*2,
y: (event.y-0.5)*4,
x: (x-0.5)*2,
y: (y-0.5)*4,
};

const size = utils.tilesizeAtZoom(this.zoom);
@@ -122,7 +122,11 @@ class Mapscii {
const z = utils.baseZoom(this.zoom);
const center = utils.ll2tile(this.center.lon, this.center.lat, z);

this.mousePosition = utils.normalize(utils.tile2ll(center.x+(dx/size), center.y+(dy/size), z));
return utils.normalize(utils.tile2ll(center.x+(dx/size), center.y+(dy/size), z));
}

_updateMousePosition(event) {
this.mousePosition = this._colrow2ll(event.x, event.y);
}

_onClick(event) {
@@ -142,8 +146,33 @@ class Mapscii {

_onMouseScroll(event) {
this._updateMousePosition(event);
// TODO: handle .x/y for directed zoom

// the location of the pointer, where we want to zoom toward
const targetMouseLonLat = this._colrow2ll(event.x, event.y);

// zoom toward the center
this.zoomBy(config.zoomStep * (event.button === 'up' ? 1 : -1));

// the location the pointer ended up after zooming
const offsetMouseLonLat = this._colrow2ll(event.x, event.y);

const z = utils.baseZoom(this.zoom);
// the projected locations
const targetMouseTile = utils.ll2tile(targetMouseLonLat.lon, targetMouseLonLat.lat, z);
const offsetMouseTile = utils.ll2tile(offsetMouseLonLat.lon, offsetMouseLonLat.lat, z);

// the projected center
const centerTile = utils.ll2tile(this.center.lon, this.center.lat, z);

// calculate a new center that puts the pointer back in the target location
const offsetCenterLonLat = utils.tile2ll(
centerTile.x - (offsetMouseTile.x - targetMouseTile.x),
centerTile.y - (offsetMouseTile.y - targetMouseTile.y),
z
);
// move to the new center
this.setCenter(offsetCenterLonLat.lat, offsetCenterLonLat.lon);

this._draw();
}

0 comments on commit a872c0e

Please sign in to comment.
You can’t perform that action at this time.