Skip to content

Zoom with button click functionality (+, - and reset) #27

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Zoom with button click functionality (+, - and reset) #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
bb8972d
Expose API methods through scope
pfarnach Jun 6, 2016
2d2b55e
Added in zoom button click functionality, +, - and reset
pfarnach Jun 14, 2016
5383c7d
Made it so button zoom is available if scroll zoom is disabled
pfarnach Jun 14, 2016
3efbdc2
Fix missing commas in object and generate dist bundles
danielzurawski Jun 15, 2016
32e3bec
Merge pull request #1 from danielzurawski/fix-browserify
pfarnach Jun 16, 2016
b78bbd7
update to datamaps v0.5
Oct 27, 2016
aa4efbb
Merge pull request #2 from gauravarora/version-upgrade
pfarnach Oct 28, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion bower.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"main": "dist/angular-datamaps.min.js",
"dependencies": {
"angular": ">=1.0.8",
"datamaps": "~0.4.0"
"datamaps": "~0.5.0"
},
"devDependencies": {
"es5-shim": "~2.1.0",
Expand Down
60 changes: 58 additions & 2 deletions dist/angular-datamaps.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,19 +11,26 @@ angular.module('datamaps').directive('datamap', [
plugins: '=?',
zoomable: '@?',
onClick: '&?',
pluginData: '='
pluginData: '=',
api: '=?'
},
link: function (scope, element, attrs) {
var zoom;
// Generate base map options
function mapOptions() {
return {
element: element[0],
scope: 'usa',
height: scope.height,
width: scope.width,
aspectRatio: scope.aspectRatio,
fills: { defaultFill: '#b9b9b9' },
data: {},
done: function (datamap) {
zoom = d3.behavior.zoom().scaleExtent([
1,
10
]).on('zoom', redraw);
function redraw() {
datamap.svg.selectAll('g').attr('transform', 'translate(' + d3.event.translate + ')scale(' + d3.event.scale + ')');
}
Expand All @@ -33,7 +40,7 @@ angular.module('datamaps').directive('datamap', [
});
}
if (angular.isDefined(attrs.zoomable)) {
datamap.svg.call(d3.behavior.zoom().on('zoom', redraw));
datamap.svg.call(zoom);
}
}
};
Expand All @@ -48,6 +55,7 @@ angular.module('datamaps').directive('datamap', [
// Update bounding box
scope.width = (map.options || {}).width || null;
scope.height = (map.options || {}).height || (scope.width ? scope.width * 0.5 : null);
scope.aspectRatio = (map.options || {}).aspectRatio || null;
scope.legendHeight = (map.options || {}).legendHeight || 50;
// Set a few defaults for the directive
scope.mapOptions = mapOptions();
Expand Down Expand Up @@ -106,6 +114,54 @@ angular.module('datamaps').directive('datamap', [
'display': 'block',
'padding-bottom': scope.legendHeight + 'px'
});
},
zoomClick: function (zoomType, factor) {
var zoomType = zoomType || 'reset';
var factor = factor || 1.2;
var center = [
element[0].offsetWidth / 2,
element[0].offsetHeight / 2
];
var scale = zoom.scale();
var translate = zoom.translate();
var extent = zoom.scaleExtent();
if (zoomType === 'reset') {
zoom.scale(1).translate([
0,
0
]);
scope.datamap.svg.selectAll('g').attr('transform', 'translate(' + [
0,
0
] + ')scale(' + 1 + ')');
return false;
} else if (zoomType === 'out') {
factor = 1 / factor;
}
var target_scale = scale * factor;
// If we're already at an extent, done
if (target_scale < extent[0] || target_scale === extent[1]) {
return false;
}
// If the factor is too much, scale it down to reach the extent exactly
var clamped_target_scale = Math.max(extent[0], Math.min(extent[1], target_scale));
if (clamped_target_scale != target_scale) {
target_scale = clamped_target_scale;
factor = target_scale / scale;
}
// Center each vector, stretch, then put back
var x = (translate[0] - center[0]) * factor + center[0];
var y = (translate[1] - center[1]) * factor + center[1];
// Update zoom value itself
zoom.scale(target_scale).translate([
x,
y
]);
// Update map
scope.datamap.svg.selectAll('g').attr('transform', 'translate(' + [
x,
y
] + ')scale(' + target_scale + ')');
}
};
// Watch data changing
Expand Down
2 changes: 1 addition & 1 deletion dist/angular-datamaps.min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

54 changes: 51 additions & 3 deletions src/directives/datamaps-directive.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,13 @@ angular
plugins: '=?', //datamaps plugins [optional]
zoomable: '@?', //zoomable toggle [optional]
onClick: '&?', //geography onClick event [optional],
pluginData: '=' //datamaps plugin data object where keys are plugin names [optional]
pluginData: '=', //datamaps plugin data object where keys are plugin names [optional]
api: '=?' //hook into datamaps API methods [optional]
},
link: function(scope, element, attrs) {

var zoom;

// Generate base map options
function mapOptions() {
return {
Expand All @@ -29,6 +32,10 @@ angular
},
data: {},
done: function(datamap) {
zoom = d3.behavior.zoom()
.scaleExtent([1, 10])
.on('zoom', redraw);

function redraw() {
datamap.svg.selectAll('g')
.attr('transform', 'translate(' + d3.event.translate + ')scale(' + d3.event.scale + ')');
Expand All @@ -39,8 +46,7 @@ angular
});
}
if (angular.isDefined(attrs.zoomable)) {
datamap.svg.call(d3.behavior.zoom()
.on('zoom', redraw));
datamap.svg.call(zoom);
}
}
};
Expand Down Expand Up @@ -143,6 +149,48 @@ angular
'display': 'block',
'padding-bottom': scope.legendHeight + 'px'
});
},

zoomClick: function(zoomType, factor) {
var zoomType = zoomType || 'reset';
var factor = factor || 1.2;
var center = [element[0].offsetWidth / 2, element[0].offsetHeight / 2];
var scale = zoom.scale();
var translate = zoom.translate();
var extent = zoom.scaleExtent();

if (zoomType === 'reset') {
zoom.scale(1).translate([0,0]);
scope.datamap.svg.selectAll('g').attr('transform', 'translate(' + [0, 0] + ')scale(' + 1 + ')');
return false;
} else if (zoomType === 'out') {
factor = 1 / factor;
}

var target_scale = scale * factor;

// If we're already at an extent, done
if (target_scale < extent[0] || target_scale === extent[1]) {
return false;
}

// If the factor is too much, scale it down to reach the extent exactly
var clamped_target_scale = Math.max(extent[0], Math.min(extent[1], target_scale));

if (clamped_target_scale != target_scale){
target_scale = clamped_target_scale;
factor = target_scale / scale;
}

// Center each vector, stretch, then put back
var x = (translate[0] - center[0]) * factor + center[0];
var y = (translate[1] - center[1]) * factor + center[1];

// Update zoom value itself
zoom.scale(target_scale).translate([x,y]);

// Update map
scope.datamap.svg.selectAll('g').attr('transform', 'translate(' + [x, y] + ')scale(' + target_scale + ')');
}
};

Expand Down