Closed dnsBlah closed 8 years ago
Hello!
defaultArea.attrs
and defaultArea.attrsHover
.defaultArea.eventHandlers
and using the mouse coordinate.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/
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)
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.
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.
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 :)
You example seem to be working fine.
I've updated it with several things: http://jsfiddle.net/bx4wqtu4/13/
attrsHover
for areas, plots and links to empty attributes => You no longer have any animation on it.onZoom
handler to use parameters passed by the event instead of retrieving the element attributestrigger("zoom")
in order to trigger at least once at init your plot scaling functiononClick
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.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 :)
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/
Yes, I'm working on something. I should be able to give you something soon.
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.
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.
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.
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 ?
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.
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 ?
Ow! I forgot about mousewheel! I could have save some time...
However, what does the fixedCenter
option actually do? It is not documented.
Regarding the new option, could we just update the level
value to accept:
"+n"
: relative zoom of -n"-n"
, or negative integer value: relative zoom of -nThis 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.
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!
Sorry for not having answered sooner on that point !
@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.
Yes, it could be a good idea to encapsulate this algorithm into a function that could be re-used by users !
Indigo, your the man!!!
@dnsBlah I think this issue can now be closed! Is it ok with you?
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.