[newb] disable plot aimations & zooming

[dnsBlah]

Hi,

first I'd like to thank you for this great fork!
I really love it!

I have 3 simple questions which I can't seem to fix.

• I'd like to kill all the animations on the map. (mainly just the plot hover)
  fixed it using: "animDuration": 0, stroke: "transparent"
• I do got zoom on scroll, pinch and 2 buttons, But I'd also like to some when pressed on a plot (relative to the position of the plot of course), or zoom on location of the cursor or touch.
  Solved: http://jsfiddle.net/bx4wqtu4/20
• Also on initial zoom my plots are not being updated and end up huge :(
  fixed: $.fn.mapael.defaultOptions.map.defaultArea.attrsHover = {};
  $.fn.mapael.defaultOptions.map.defaultPlot.attrsHover = {};
  $.fn.mapael.defaultOptions.map.defaultLink.attrsHover = {};

[Indigo744]

Hello!

• Regarding your first point, this can easily be done by defining the same background color in defaultArea.attrs and defaultArea.attrsHover.
• For the second point, I think this could be done by adding a "click" event handler in defaultArea.eventHandlers and using the mouse coordinate.
• For the third point, I fail to understand your problem. Can you provide a JSFiddle example of your problem? Here is an example with an initial zoom set: http://jsfiddle.net/neveldo/6ms3vusb/

[neveldo]

Hello,

For the second point, here is a little example in which a zoom is performed when the user click on an area (it's a bit slow because of the large number of cities to display in each area : http://www.vincentbroute.fr/carte-elections-regionales-2010/

[dnsBlah]

Hi Indigo and Neveldo!!!

thanks for your reply.
pt1 - this does not disable anything, it just 'masks' it.
and your speaking about the area, does this affect the plot as well?

pt2 - Indigo, do you maybe have a sample about this? I guess I need to use position of the mouse on the map, and somehow convert it to world-wide longitude and latitudes?
Neveldo, thank you very much for the sample, but this is set manually per region. I'm creating a worldmap.

pt3 - Maybe I should have mentioned before, if you set a plot size (I mean the circles) which I update on zooming. It's working fine as long I start from zoom 0.
I'm using the world-map, and actually abusing the zoom function with a max-zoom of 450 :P
When I put this initial zoom on:
[code]
map: {
name: "world_countries",
zoom: {
enabled: true,
touch: true,
maxLevel : 450,
"animDuration": 0,
init: {
level : 40,
latitude : 52.3,
longitude : 5.1
}
}
[/code]

My plot sizes are being zoomed as well. And the update function is not being triggered.
(Still doubting to use this option in my project anyways, but I think it would be usefull)

[Indigo744]

Can you provide a JSFiddle example on your current working state so we can discuss on it and maybe update it progressively to achieve what you want? This would be the best way.

Regarding point 1, what do you mean be "disable it" ? Do you want to remove all events handler ?
In that case, you can use onAfterUpdate callback, loop through all maps element and call the jQuery off() method on it. It will effectively remove any onMouseOver and onMouseOut behavior.

Regarding point 2, no I don't have any sample right now. This needs to be developed. If you provide a starting JSFiddle and explain in details what you want to achieve, we should be able to provide you some pointers in how to implement it.

Regarding point 3, I don't understand what you mean.
The update event is only triggered by you. Mapael will not trigger this event by itself.

[dnsBlah]

Hi Indigo thanks for your reply,

I justs made a jsfiddle:
http://jsfiddle.net/dennisBlah/bx4wqtu4/11

Its the world-map, with an initial zoom to the netherlands. Where I putted 2 plots with a link.

pt1, that seems a lot of coding and work for only disabling a hover for .. mainly the plots.

• p.s. I just fixed it using:
  "animDuration": 0,
  stroke: "transparent"

pt2, I have embedded it inside the jsfiddle with a .on("click" function on the maparea)
pt3, On the load, the plots are really big, until i start zooming for myself. (using the .on("zoom" function)

Thanks in advance for your support :)

[Indigo744]

You example seem to be working fine.

I've updated it with several things: http://jsfiddle.net/bx4wqtu4/13/

• Overrided mapael default attrsHover for areas, plots and links to empty attributes => You no longer have any animation on it.
• Modified your onZoom handler to use parameters passed by the event instead of retrieving the element attributes
• Added a trigger("zoom") in order to trigger at least once at init your plot scaling function
• Change your onClick handler to be assigned to the SVG map instead of the whole map. That way, the event is not fired when you click on +/- zoom button. Important note: if you need to support IE8 and below, you should also check for VML.
• Modified your onClick handler to use console.log instead of alert function.

I need some time to think of a solution to convert (x, y) mouse position to (lat, lon). Maybe @neveldo can be of help :)

[dnsBlah]

Hi Indigo,

thanks a lot for pointing me to the default override functions :) this makes it a lot easier.
also the trigger zoom :) Been playing around a while but I couldnt get it to work, was trying to trigger update ... stupid thanks again

I found that $('.maparea').data('panX') and ('panY') contains the topleft X and Y coords on the map. (but not in coordinates)

So I can use these, and add the x & y from the mouse, then I have the X&Y where I like to zoom in to :)

But it's not quire right :D but I think need to recalculate difference between center ( zoomX & zoomY )
work in progress
http://jsfiddle.net/bx4wqtu4/17/

[Indigo744]

Yes, I'm working on something. I should be able to give you something soon.

[Indigo744]

Ok, got something working: http://jsfiddle.net/bx4wqtu4/18/
I've explained quite a bit inside the function using comments. Ask if you don't understand what is going on.

However, as you can see, you will have some problem with the panning as it will also trigger a click.

[dnsBlah]

I had almost same like with just panX + mouseX, panY + mouseY

Thanks for your efforts :D

We can eliminate the panning by setting a BOOL on mousemove when clicking. that no issue.

[Indigo744]

You cannot directly add panX + mouseX because they don't use the same coordinate. This explained the offset you saw.

However, my code does zoom where you click. The exact coordinate of your click is then use as the new center.
But if your mouse is not in the center of the screen, then of course if you don't change your mouse position it will always move!

Pick a point on the map. Say Madagascar. Click on it. Then move your pointer to click on it again. You will see that the map behave like you would expect: it will always zoom to Madagascar.

[dnsBlah]

Sorry Indigo,

I already had my comment adjusted, but I missed that one line :)

I adjusted your fiddle again, with simply mouse handlers:
http://jsfiddle.net/bx4wqtu4/19

It's working like a charm now! :D
Again thank you very very much for your support! :)

Only one thing, whats VML and SVG ?

[Indigo744]

Glad I was able to help :-)

@neveldo: I think we should add an example like this where we convert mouse coordinate to map coordinate. That would be useful I think.

[neveldo]

Hello,

I agree with you, an example will be usefull, the zoom part is a bit tricky.

However, as this algorithm of zooming relatively to the position of the cursor already exists for the "zoom on mousewheel", I think we could simply re-use it for the click event. I know that this is ugly, but this is only to show you that it works :

Zoom-in of one level to the x=10,y=10 coordinates :
var event = jQuery.Event("mousewheel");
event.deltaY = 1;
event.clientX = 10;
event.clientY = 10;

Maybe, we could refactor the code in order to move the algorithm triggered on 'mousewheel' into the onZoomEvent() function. This would allow users to trigger "relative zooms" (relative to the current zoom level) through the "zoom" event. Then, the onZoomEvent() function should accept a new option 'relativeLevel' (that can be positive or negative). The user would have the choice to use the 'level' option or the 'relativeLevel' option depending on the need.

Then, we would only have to trigger the zoom event in this way :

self.$container.trigger("zoom." + pluginName, {
    "fixedCenter": true,
    "relativeLevel": 1, // Zoom out of 1 level
    "x": x,
    "y": y
});

or

self.$container.trigger("zoom." + pluginName, {
    "fixedCenter": true,
    "relativeLevel": -2, // Zoom out of 2 levels
    "x": x,
    "y": y
});

What do you think about it ?

[Indigo744]

Ow! I forgot about mousewheel! I could have save some time...

However, what does the fixedCenter option actually do? It is not documented.

[Indigo744]

Regarding the new option, could we just update the level value to accept:

• positive integer value (0, 1, 2 ... n): zoom to absolute level n (actual behavior)
• string "+n": relative zoom of -n
• string "-n", or negative integer value: relative zoom of -n

[neveldo]

This fixedCenter option (maybe the name of this option is not very eloquent) allows to keep the point to where we want to zoom-in|out at the same position. For instance, if you zoom to Paris city through the mousewheel, so Paris will stay under your cursor, instead of appear centered into the container, which is the default behavior. The fixedCenter have to take care of the current zoomLevel in order to compute the proper values for panX and panY to keep the point at the same position.

Regarding the relative zoom feature, I agree, this could be a good alternative from adding a new option by extending the values accepted by the 'level' option.

[Indigo744]

Thanks @neveldo, I understand now
@dnsBlah : this is what you wanted earlier! I updated your fiddle with the fixedCenter option: http://jsfiddle.net/bx4wqtu4/20 it works great!

[neveldo]

Sorry for not having answered sooner on that point !

[Indigo744]

@neveldo: maybe we should provide a mapPositionToXY() function which accept a (x, y) in div coordinate and translate to (xMap, yMap) map coordinate. It would be a simple factorization for our internal code (already used in Mousewheel), and provide user directly with the correct function.

[neveldo]

Yes, it could be a good idea to encapsulate this algorithm into a function that could be re-used by users !

[dnsBlah]

Indigo, your the man!!!

[Indigo744]

@dnsBlah I think this issue can now be closed! Is it ok with you?