Dynamically added lines create console error when svg plots are used

[reddo]

I have the following (unfinished) setup: http://jsfiddle.net/reddo/Lvxkd3fs/4/

There's a dynamic link appearing on hovering over the plots. This works well, but, for a reason I wasn't able to identify, I get the following error:

VM9135 jquery.mapael.min.js:14 Uncaught TypeError: Cannot read property 'x' of undefined

and the hover animation of the plot point doesn't get finished.

UPDATE: narrowed it down being because the Plot type is svg. Everything works fine if the default plot type or image is used: http://jsfiddle.net/reddo/Lvxkd3fs/6/ which brings me to a new problem: how do I change the image url on hover over the plotpoint?

[neveldo]

Hello @reddo ,

Good catch ! This is a bug from Mapael. I have just fixed it in the master branch (for 2.0.0dev version) : https://github.com/neveldo/jQuery-Mapael/commit/b374f196956c70e0f2868c2ab1d8b965e864016f .

I noticed that your code is based on jQuery Mapael 1.1.0. If you want to stay with this version, you will unfortunately have to fix the issue by yourself in jquery.mapael.js file (see the commit diff). Otherwise, you can switch to the 2.0.0dev version (master branch). Be careful because the "update" signature changes with this new version, you can take a look on the code samples provided in the master branch.

Feel free to ask if you need more information !

[reddo]

Hey @neveldo,

I've updated my fiddle to mapael 2.0.0dev, indeed the error disappears, but I now have several other issues:

• the animation of the custom tooltip I built is really slow and jaggy, not really usable (http://jsfiddle.net/reddo/Lvxkd3fs/14/)
• if I use transform on a plot (to align the coord to point to the tip of the svg instead of the center of it), once I hover on it, the plot goes to the top left corner of the canvas and disappears (http://jsfiddle.net/reddo/Lvxkd3fs/15/ line 189 of the javascript)

Any idea what might be causing this?

[neveldo]

Regarding the first point, it seems that there is an important performance issue in the "update" event because it updates all areas, plots and links even if its not needed. It make the animation very slow, I will try to make a PR for fixing it ASAP.

Regarding the second issue, this a very weird behaviour, I will check it asap, feel free to share if you have any idea. Maybe you could apply the transformation to your path (through inkscape for instance) ?

[neveldo]

Here we go : https://github.com/neveldo/jQuery-Mapael/pull/234/commits/e9195136dad543036884578a51fc346863e92042 , https://github.com/neveldo/jQuery-Mapael/blob/feature/optimise-update-event/js/jquery.mapael.js .

Could you check the code from my branch in order to ensure that it fixes your issue ? I need to do some more test before merging it into the master.

[reddo]

I've checked your fix, it's working much better now, the animation is fast, but maybe add some kind of stopPropagation, because right now it kind-of-jumps while hovering and sometimes the mouseout is triggered even though I am over the plot (and not the hole in the svg): http://jsfiddle.net/reddo/Lvxkd3fs/17/

I think it happens when the pointer is exactly above the (dynamic) link. Is there a way to set a z-index so the line goes under the plot and not above it?

As per your advice I applied the transformation directly in Adobe Illustrator (my tool of choice) and it looks like it's working.

You might still want to look int the issue though, because the plot gets messed up if you apply the transformation on hover too (eg: you want the plot to grow while hovering over it). see it in action here: http://jsfiddle.net/reddo/Lvxkd3fs/18/

[neveldo]

Hello,

Thank for your feedback, I have merged the fix branch into the master.

Regarding the issue while hovering the plot, you pointed out the right cause. Indeed, this is due to the link that is drawn over the related plot. In order to prevent that side effect, you could call mapElem.toFront(); at the end of your function 'onPlotMouseOver' in order to bring back to front the plot after drawing the link.

Regarding the weird issue with the use of transforms, I have added it to my todo, I will try to find a solution :)

[neveldo]

Hello,

Here we go, I have upgraded the v2.0.0-dev in order to allow transformations to be applied to "SVG" plots without bugs, here is a sample : http://cdn.rawgit.com/neveldo/jQuery-Mapael/master/examples/advanced/transformations_on_svg_plots.html . I hope it will solve your second issue !

[Indigo744]

Closing as fixed in v2.0.0 :)