").addClass(options.zoomInCssClass).html("+")
+ , $zoomOut = $("
").addClass(options.zoomOutCssClass).html("−")
+ , currentLevel = 0
+ , vbCenterX = mapWidth / 2
+ , vbCenterY = mapHeight / 2
+ , mousedown = false
+ , previousX = 0
+ , previousY = 0
+ , setZoom = function(e) {
+ // Update zoom level
+ currentLevel = Math.min(Math.max(currentLevel + e.data.offset, 0), options.maxLevel);
+ if (currentLevel == 0) {
+ vbCenterX = mapWidth / 2
+ vbCenterY = mapHeight / 2
+ paper.setViewBox(0, 0, mapWidth, mapHeight);
+ } else {
+ paper.setViewBox(
+ Math.min(Math.max(0, vbCenterX - (mapWidth / (1 + currentLevel * options.step))/2), (mapWidth - (mapWidth / (1 + currentLevel * options.step)))),
+ Math.min(Math.max(0, vbCenterY - (mapHeight / (1 + currentLevel * options.step))/2), (mapHeight - (mapHeight / (1 + currentLevel * options.step)))),
+ mapWidth / (1 +currentLevel * options.step),
+ mapHeight / (1 +currentLevel * options.step)
+ );
+ }
+ };
+
+ $container.append($zoomIn).append($zoomOut);
+
+ $zoomIn.on("click", null, {offset : 1} , setZoom);
+ $zoomOut.on("click", null, {offset : -1}, setZoom);
+
+ // Panning
+ $('body').on("mouseup", function(e) {
+ mousedown = false;
+ setTimeout(function () {$.fn.mapael.panning = false;}, 50);
+ });
+
+ $container.on("mousedown", function(e) {
+ mousedown = true;
+ previousX = e.pageX;
+ previousY = e.pageY;
+ return false;
+ }).on("mousemove", function(e) {
+ if (mousedown && currentLevel != 0) {
+ var offsetX = (previousX - e.pageX) / (1 + (currentLevel * options.step)) * (mapWidth / paper.width)
+ , offsetY = (previousY - e.pageY) / (1 + (currentLevel * options.step)) * (mapHeight / paper.height);
+
+ if (Math.abs(offsetX) > 5 || Math.abs(offsetY) > 5) {
+ var viewBoxX = Math.min(Math.max(0, paper._viewBox[0] + offsetX), (mapWidth - paper._viewBox[2]))
+ , viewBoxY = Math.min(Math.max(0, paper._viewBox[1] + offsetY), (mapHeight - paper._viewBox[3]));
+
+ vbCenterX = viewBoxX + paper._viewBox[2] / 2;
+ vbCenterY = viewBoxY + paper._viewBox[3] / 2;
+
+ paper.setViewBox(viewBoxX, viewBoxY, paper._viewBox[2], paper._viewBox[3]);
+
+ previousX = e.pageX;
+ previousY = e.pageY;
+ $.fn.mapael.panning = true;
+ }
+ }
+ return false;
+ });
+ }
+
/**
* Draw a legend for areas and / or plots
* @param $container the legend container
@@ -464,6 +554,7 @@
if (typeof options.value != "undefined") {
$.extend(true, options, $.fn.mapael.getLegendSlice(options.value, legendOptions));
}
+
return options;
}
@@ -574,6 +665,13 @@
, animDuration : 300
}
}
+ , zoom : {
+ enabled : false
+ , maxLevel : 5
+ , step : 0.25
+ , zoomInCssClass : "zoomIn"
+ , zoomOutCssClass : "zoomOut"
+ }
}
, legend : {
area : {