Working on a game. In my engine you can zoom with the wheel, nothing special there. It's however very good for UI if the point of the mouse doesn't change. That is, if you are currently hovering over some coordinate, after zooming it would be best if the mouse is still hovering over the same coordinate.
This is doable, of course, and involves some annoying math. This is how I did it, quite verbose but it may help you with understanding the algo.
window.onmousewheel = function(e){
// zoom the map such that the point of the mouse remains stationary
// involves some pesky computations
// real tile size
var tw = tileSet.tileWidth;
var th = tileSet.tileHeight;
// to scaled
var stw = tw * this.scale;
var sth = th * this.scale;
// point of mouse in viewport (assuming your canvas originates at 0:0 of the browser)
var mx = e.clientX;
var my = e.clientY;
// normalized mouse coord to tile coord
var mtx = mx / stw;
var mty = my / sth;
// offset of viewport in tiles
var ox = this.viewport.x / stw;
var oy = this.viewport.y / sth;
// now update scale
if (e.wheelDeltaY > 0) {
this.scale += .25;
} else {
this.scale -= .25;
}
// new position of mouse, scaled, in tiles
var ntx = mx / (tw * this.scale);
var nty = my / (th * this.scale);
// difference must be subtracted from viewport offsets
var dtx = ntx - mtx;
var dty = nty - mty;
// move viewport such that the new extra width/height moves into the offset
// this causes the map point under the mouse not to move
this.viewport.x = (ox - dtx) * tw * this.scale;
this.viewport.y = (oy - dty) * th * this.scale;
}.bind(this);