Zoom feature

[eliihen]

Adds a zoom-to-bounding-box on click feature, adressing issue #25. Also includes a zoomFactor in the options, effectively giving people the option to choose how far the camera zooms. Has a special case for circles, as they do not have a bounding box

Demo here: http://esphen.com/Open-Source/datamaps/src/examples/bubble-in-center.html

[markmarkoh]

Can you think of a way to address the updatePopup() function to account for the zoom?

[eliihen]

I've done the following: o Moved zoomConfig from geographyConfig o Fixed the bugs you found in clicked function o Made popup take zoom into account by getting coordinates from container instead of svg layer

[eliihen]

More changes: o Adds public toggleZoom funciton that can be passed bool to set zoom (needed to add/remove event listeners on map elements) o Now checks against negative values on zoomFactor. Flipped the map upside down. Cool effect though o Renames function to clickZoom. click was a bit too generic

And as per contrib. guidelines: o Removes buildfiles from repo o Adds demo (zoom-on-click.html)

I updated my demo with the latest revision at: http://esphen.com/Open-Source/datamaps/src/examples/zoom-on-click.html

[mg1075]

FWIW...

There appears to be an awfully simple method to add both zoom and pan features to a datamap, as seen in this non-datamap d3 map: http://bl.ocks.org/andrewxhill/4455569#index.html

If you hook into the datamap svg, and call this in the done event, then both zooming and panning are enabled, and moreover, the zooming and panning works with labels and bubbles.

 datamap.svg.call(d3.behavior.zoom() 
        on("zoom", redraw));

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

[CHgsd]

@mg1075 Thank you for the tip! I found the missing piece documented here: https://github.com/markmarkoh/datamaps#events Note: There is a missing period between zoom() and on, it should read: datamap.svg.call(d3.behavior.zoom().on("zoom", redraw));

[amytych]

Thanks @mg1075, your tip was so useful!

[Wilsonkho]

Thanks a bunch! @mg1075 it a was a lot easier than other things I've tried and it worked like a charm.

[markmarkoh]

Here is a working example of @mg1075's tip:

http://jsbin.com/boribamugo/1/edit?html,output

cc @Wilsonkho

[WunderBart]

Hi guise, just made use of datamaps here: https://auth.lonelyplanet.com/profiles/wunderbart/trips I've added zoom with bounds so the map always stays on screen. There are also buttons for programmatic zooming. Currently thinking about optimizing zoom animation on mobiles (it's pretty choppy now). Any suggestions? Lemme know what you think! :smile:

[markmarkoh]

@WunderBart that's fantastic! I'd love to get some of that in the core library. Any chance you could post a gist of how you got some of that to work? (PR also welcome).

[WunderBart]

Sure! Will prepare some gist after I push a PR with fix for d3 dependency loading issue (the has not yet been loaded for context one).

[adrianbj]

@WunderBart - your zoom with bounds looks like it is working brilliantly and the zoom buttons are a nice touch too. Any word on the D3 fix and when they might be available for datamaps? I could sure use it right now :)

Thanks!

[WunderBart]

Thanks, @adrianbj :D I'm sorry for the delay. Too many things at once lately. Will try to push on friday :)

[adrianbj]

No problem at all - Friday would be awesome - thanks!

[lukpueh]

@mg1075's tip conflicts with Datamap.prototype.resize() (used for responsiveness), because resize sets the CSS transform property and @mg1075 the SVG transform attribute. If both are set one of them is ignored. Below works with responsive=True. But I would rather change the resize method to use the SVG transform attribute instead.

done: function(datamap) {
    datamap.svg.call(d3.behavior.zoom().on("zoom", redraw));
    function redraw() {
        var prefix = '-webkit-transform' in document.body.style ? 
                        '-webkit-' : '-moz-transform' in document.body.style ? 
                                    '-moz-' : '-ms-transform' in document.body.style ? 
                                            '-ms-' : '';
        var x = d3.event.translate[0];
        var y = d3.event.translate[1];
        datamap.svg.selectAll("g")
            .style(prefix + 'transform', 
                'translate(' + x +'px, ' + y + 'px) scale(' + (d3.event.scale) + ')');
    }
}

Cheers!

[revoltafelipe]

Hi all, the tip by @lukpeh works great on Chrome and Firefox but It's doesn't work on Internet Explorer. Someone knows what can it happen? Thanks and regards

[magic890]

@WunderBart have you got any update? Your implementation in Lonely Planet looks awesome!

[pualien]

@WunderBart any chances to use your great example?

[moxxuk]

@WunderBart don't mean to pester you (it sounds like you're a busy chap) but any chance of that gist? To back up what everyone else has already stated, your map on LP profiles looks amazing!

[WunderBart]

Guise, I'm really sorry about this insane delay and thanks for reminding me :smile: I promise I'll prepare a small fiddle a bit later today (gotta :ship: first, you know). Great to hear you like that zoom!

[moxxuk]

Great stuff @WunderBart, really looking forward to showing this off :)

[WunderBart]

Here's more less how I did it: https://jsfiddle.net/wunderbart/Lom3b0gb/ There's not much comments explaining the code yet and the structure is taken out from larger app so it can be a bit overkill. I'll be happy to answer any questions. Enjoy!

[moxxuk]

Fantastic, thanks!

[magic890]

In @WunderBart implementation another interesting part is that the country boundaries stroke do not scale with the zoom:

var paths = this.datamap.svg.selectAll("path"); // preserve stroke thickness paths.style("vector-effect", "non-scaling-stroke");

This will be applied also to arcs, resulting in a glitch. To apply this transformation only to country boundaries here is the correct selector

var paths = this.datamap.svg.selectAll("path.datamaps-subunit");

[TomCrowley]

Will this ever be merged into master?

[thomaskbird]

@esphen Which version did you fork this repo from, I am on datamaps version 0.5.8 and the tap to zoom on mobile doesn't work. The zoom doesn't work on chrome or safari on a iphone 6, I'm assuming maybe its because my version has a bunch of new code that may be interferring.

[eliihen]

@ThomasBird1984

Wow, no idea. This was literally years ago. Looking at the commit history of my forked repo, it looks like 0.3.2. I was under the impression the author of the library ended up with not including this feature, and instead recommending the solutions provided in this thread. In which case this PR should be closed.

Ping @markmarkoh

[thomaskbird]

@esphen That sucks this is the exact functionality I needed. Alright will do thanks!

[magic890]

@thomasbird1984 just use @WunderBart implementation it is going to work with the latest release.

[souocare]

Here's more less how I did it: https://jsfiddle.net/wunderbart/Lom3b0gb/ There's not much comments explaining the code yet and the structure is taken out from larger app so it can be a bit overkill. I'll be happy to answer any questions. Enjoy!

Hi! I know this was a LOONG while ago, but there is any way to click in one country, and it will zoom on that country?