Adds zoomOnClick functionality to datamap (d3)

zoomOnClick.js

(function(Datamap, d3) {
  var centered

  function clickZoom(d) {
    var self = this,
        zoomFactor  = self.options.zoomConfig.zoomFactor,
        width   = self.options.element.clientWidth,
        height  = self.options.element.clientHeight,
        bounds;
    if (centered === d
    || isNaN(zoomFactor)
    || zoomFactor <= 0) return resetZoom.call(self);

    self.svg.selectAll("path").classed("active", false);
    centered = d;

    if ( d.radius ) { //Circle
        var cx = d3.select(d3.event.target).attr("cx");
        var cy = d3.select(d3.event.target).attr("cy");
        bounds = [
            [ Number(cx) - d.radius, Number(cy) - d.radius ],
            [ Number(cx) + d.radius, Number(cy) + d.radius ]
        ];
    } else {
      bounds  = self.path.bounds(d)
	  }

    var dx      =  bounds[1][0] - bounds[0][0],
        dy      =  bounds[1][1] - bounds[0][1],
        x       = (bounds[0][0] + bounds[1][0]) / 2,
        y       = (bounds[0][1] + bounds[1][1]) / 2,
        scale   = zoomFactor / Math.max(dx / width, dy / height),
        translate = [width / 2 - scale * x, height / 2 - scale * y];

    self.svg.selectAll("path")
      .classed("active", centered && function( d ) { return d === centered; });

    self.svg.selectAll("g").transition()
      .duration(750)
      .style("stroke-width", 1.5 / scale + "px")
      .attr("transform", "translate(" + translate + ")scale(" + scale + ")");
  }

  function resetZoom() {
    this.svg.selectAll("path")
      .classed("active", false);
    centered = d3.select(null);

    this.svg.selectAll("g").transition()
      .duration(750)
      .style("stroke-width", "1.5px")
      .attr("transform", "");
  }

	Datamap.prototype.zoomOnClick = function(scale) {
		if ( typeof this.options.zoomConfig == "undefined" )
			this.options.zoomConfig = {
				zoomOnClick: true,
	      zoomFactor: 0.6
	    }
		this.options.zoomOnClick.zoomFactor = zoomFactor || 0.6
		var self = this

		//TODO: bubbles.on('click', function (d) { clickZoom.call(self, d) })
		this.svg.selectAll('.datamaps-subunit')
    	.on('click', function(d) { clickZoom.call(self, d) })


	}

	Datamap.prototype.toggleZoom = function(bool) {
	  var self = this,
	      zoomOnClick = this.options.zoomConfig.zoomOnClick,
	      svg = this.svg //d3.select( this.options.element ).select('svg');

	  var toggleEvents = function (setTo) {
	    if (setTo === undefined) { setTo = !zoomOnClick }

	    if (setTo === false) { //Disable
	      svg.selectAll('.datamaps-bubble, .datamaps-subunit')
	        .on('click', null);
	    } else { //Enable
	      svg.selectAll('.datamaps-bubble, .datamaps-subunit')
	        .on('click', function(d) { clickZoom.call(self, d) });
	    }
	  }

	  if (bool !== undefined && typeof bool == 'boolean') {
	    toggleEvents(bool);
	    this.options.zoomConfig.zoomOnClick = bool;
	  } else if (bool == undefined) {
	    toggleEvents();
	    this.options.zoomConfig.zoomOnClick = !zoomOnClick;
	  } else {
	    throw "Datamaps Error - toggleZoom() must call with a boolean";
	  }
	}
/*
	 Datamap.prototype.updatePopup = function (element, d, options) {
     var self = this;
     element.on('mousemove', null);
     element.on('mousemove', function() {
-      var position = d3.mouse(this);
+      var position = d3.mouse(self.options.element);
       d3.select(self.svg[0][0].parentNode).select('.datamaps-hoverover')
         .style('top', ( (position[1] + 30)) + "px")
         .html(function() {
           var data = JSON.parse(element.attr('data-info'));
           //if ( !data ) return '';
           return options.popupTemplate(d, data);
         })
         .style('left', ( position[0]) + "px");
     });

     d3.select(self.svg[0][0].parentNode).select('.datamaps-hoverover').style('display', 'block');
   };
*/
})(Datamap, d3)

var map = new Datamap({
      scope: 'world',
      element: document.getElementById('worldmap'),
      projection: 'mercator',
      height: 500,
      responsive: true,
      done: function(datamap) {
        datamap.zoomOnClick()

        // disable mouseweehl zoom
        datamap.svg.call(d3.behavior.zoom().on("zoom", redraw))
      .on('wheel.zoom', null)

        function redraw() {
          datamap.svg.selectAll("g").attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
            //datamap.svg.selectAll("g").attr("transform", "translate(" + d3.event.translate + ")");
    }
      }
    })

see also open fork request: markmarkoh/datamaps#122