Disable plots zooming

[nlemsieh]

Hello,

Is it possible to disable zoom on plot, so the plots zoom still the same as the initial level? the reason I would like to do this, is that when I have a lot of plots they become too close.

By doing that only areas are zoomed, then we get some space betweeen each plots to make click possible. See picture below:

[kkfernan]

Hey @nlemsieh! I am having the same issue. When the map is zoomed in all the way, there are plots that overlap which makes them almost inaccessible. Hopefully we can get some help with this.

Kenny

[neveldo]

Hello @nlemsieh and @kennethpb,

Mapael doesn't include that feature for now, but I think it should be done for the next release, as there are several user that need it. The solution consist of update the plot size on zoom event (the size should depend on the current zoomLevel)

Here is a little snippet on JSFiddle that does the trick (but not perfectly. The hardcoded 0.25 value is the default value of the "step" parameter) : http://jsfiddle.net/neveldo/ebxnu6b8/

I will add it to the todo, but feel free to contribute if you can !

[nlemoine]

Wrong mention @neveldo ;)

[neveldo]

oops sorry, it's fixed :)

[tammo0]

hi @neveldo, thanks for your good work!

I've got the same problem. Zooming in should shrink the plots so they don't overlap and the user is able to click them - but your jsfiddle workaround doesn't work for me.

Also i can't access the $(".maparea5").data("zoomLevel") - not in my example nor in the provided jsfiddle. But i found the zoomlevel is stored at $(".maparea5").data()["mapael"].zoomData.zoomLevel

I'm still looking for the right math function so the scale of the plots look more fluid.

for everyone who run into the same issue, here is a jsfiddle which works for me: https://jsfiddle.net/kmb4qd4w/

btw: the perfect solution for me would be to combine nearby plots to a big one which get devided after zooming in. any idea how to handle it?

[neveldo]

Hello,

You are right, I went a little quickly when I rewritten the example.

First, in the version 2.0.0, some events have been namespaced, in particular the "zoom" event that became "zoom.mapael" event, but it was a mistake. I have fixed it in the master branch : https://github.com/neveldo/jQuery-Mapael/commit/127973e7f44dc3ae5c2ecbb6c79084da2bae7b7b in order to trigger regular event without namespace.

You are also right regarding the access for zoomLevel.

I have updated my example : http://jsfiddle.net/neveldo/ebxnu6b8/, but the behavior is still shitty as it is very very slow. I will work on it when I will have a little time, as an feature integrated to mapael (feel free to contribute if you can !)

@tammo0 , could you explain more your formula for updating the plot site : defaultPlotSize * Math.pow(0.96, $(".world").data()["mapael"].zoomData.zoomLevel * 1);. Moreover, how did you compute the 0.96 value ?

[SeptimusVII]

Hi ! I'm currently facing the same problem on my USA map. The solution @neveldo provided in his jsfiddle is great and basically what I needed, but here is the problem: I use Raphael's setViewBox instead of Mapael's zoom ability, to fit precisely the states's bounds on the screen.

var elemBox = $map.data('mapael').areas[idArea].mapElem.getBBox(); $map.data('mapael').paper.setViewBox(elemBox.x,elemBox.y, elemBox.width,elemBox.height,true);

This causes the zoomData object not being updated, and i can't do the scaling calculation on it. Any idea what I could do to get around this?

have a nice day !

[daniel10059]

Hi,

i have tried to use your zoom-snippet in my map. The only problem is that it also zooms in the plots in the legend. Is there a way to disable the zooming for the legend?

Thank you for this amazing framework!

[neveldo]

Hi,

I'm glad you appreciate Mapael !

Strange, the plots within the legend shouldn't be affected when zooming, but it will be hard to help you without seeing your code. Could you join a working JSFiddle sample of your code ?

[daniel10059]

Hi, before i create a working JSFiddle, just take a look at your jsfiddle you provided in this issue (http://jsfiddle.net/neveldo/ebxnu6b8/)). When you zoom, you can see that the plots in the legend are also resized.

Also there is another issue, when I disable a category in the legend, the disabled plots appear again after zooming. The same behavior can be seen in your jsfiddle.

[Indigo744]

Well, this is expected since the update() trigger will modify the legend.plot.slices.size value...

Another approach would be to gather all plots as a set and apply a transform on them.

[Indigo744]

Here is a working example on using set: http://jsfiddle.net/9gzu0k4g/1/

Important note: this will only resize plots, and not the text element next to them if they are defined. Scaling the text element is a trickier, as we will need to modify the position as well.

[Indigo744]

Here is an update with some animation and debouncing for better experience: http://jsfiddle.net/9gzu0k4g/2/

[Indigo744]

@neveldo after PR #322 is merged, we should think about adding an option for automatic plot/link scaling. The hardest part will be to properly update the text size and position according to the new scale.

[neveldo]

Hi @Indigo744 ,

Thanks for your code snippet in order to get an automatic scaling for the plots. (I think it will be a little more tricky for the links as their displayed width comes from a stroke-width attribute, they are not regular filled paths like areas for instance)

Anyway, I agree with you that it should be a feature bundled with the next version of Mapael of course (at least for the points) !

[andersonreloaded]

Hi,

I am trying to use the approach presented by @Indigo744 for disabling the plots zoom. The plots are of type "SVG" defined as shown below:

type: "svg", path: "M 7.5,0 C 2.48,0 0,3.5 0,7.81 0,12.12 7.5,22 7.5,22 7.5,22 15,12.13 15,7.81 15,3.49 12.52,0 7.5,0 Z", width: 30, height: 44

It doesn't seem to be working. Does scaling works for simple shapes and is there a different way to handle "SVG".

[Indigo744]

Plots scaling for SVG paths is more tricky, since there is already a transform applied to it.

If you can wait, I am working on this feature and it is planned for Mapael 2.2.0 (see #338). The PR should come soon and you will be able to download a version.

[andersonreloaded]

@Indigo744 : Thank you!

[andersonreloaded]

Hi Folks,

Instead of SVG element, have been using square to represent plots on the map with text placed at the bottom. The plots are resized appropriately when zoomed-in or zoomed-out. The plots' colors are updated periodically, however the text element seems to drift down with each update. When I change the text position to left it drifts towards left and when placed on top keeps moving up wards. The only safe position seems to be in the "middle".

Another observation is that, when the map is zoomed-in or zoomed-out, the text element returns to its proper location until next update, and starts drifting with each update.

Cheers!

[Indigo744]

@andersonreloaded is this issue with my example above, or with the new feature in the PR?

Do you have a working example?

[andersonreloaded]

@Indigo744 : I am using version 2.1.0 Give me sometime before I figure out how to share the code. To be honest, I don't know how to share the code.

[Indigo744]

Start from the latest JSFiddle, and click on fork on top left. You'll be able to modify it at will. Then click on save and share the link :smile:

[andersonreloaded]

Hi, example code is at https://jsfiddle.net/kk327y9f/38

[andersonreloaded]

@Indigo744 : As you run the code, just zoom the map and you'll see the plots' text drifting down. The moment you pan or do zoom-in or zoom-out ,the text appears at proper place and drifts with subsequent updates.

[andersonreloaded]

@Indigo744 : Just wanted to know if there's any issue with the example code.

[Indigo744]

@andersonreloaded I just tested it and I can't seems to reproduce your issue. I'm using Firefox 56. Which browser are you using? Oh OK I just saw it...

[Indigo744]

The thing is, my example code does not handle text elements as I said in my comment. I think the text drifts may be due to a rounding issue when updating positions.

Anyway, your code looks fine, issue is with how Mapael computes the positions.

I suggest you wait for Mapael 2.2.0 (see roadmap #338) which will include proper plot scaling (PR #352 is on its way, I just need some time to finish squashing a remaining bug).

[andersonreloaded]

@Indigo744 : Thank you for responding.

As you mentioned it has something to do with the computation of new positions. Was monitoring the x,y position of the text elements using 'Inspector' from Web Developer tools. The 'y' value kept changing with updates.

Eagerly waiting for release 2.2.0 :-)