I am currently working on a leaflet app and came across the problem that the mouseover event for a marker is not correctly fired because, when i am hovering over the marker it just fires when the cursor is slighty out of the dragging object.
So as you can see the hover effect is not triggered because i have an object dragged over the marker but when i hover with the mouse over it without an object the hover effect is of course correctly triggered.
Maybe someone has a idea how to solve it or can point me in the right direction
Thanks in advance
I didn´t not managed to solve my problem with the mouse over function but found another solution. Maybe i can help someone with a similar problem.
My solution was to use the plugin 'leaflet-geometryutil'. This plugin gave me the option to calculate the distance from the current point to the nearest layer.
So i created a layer for every line on the map. When i am dragging a marker now i use the geometryutil plugin to find the nearest line-layer layer and change its appearing.
Related
I have two similar problems with an Openlayers 3 map. They both pertain to making the map refresh/redraw when it doesn't have focus; i.e. when the mouse is not over it.
1) I show an outline of a country when the mouse is over it, but it becomes transparent when the mouse moves off. However, if the country is at the edge of the map view and I move the mouse off that edge of the map, the country stays outlined, because the map never sees the mouse over another area outside the country.
2) When I click on a country, it becomes permanently highlighted (i.e. a layer becomes visible). I have a button off the map that when clicked resets all the layers to transparent. When I click the button, nothing happens until I move the mouse back over the map, at which point the change becomes apparent and the layers disappear.
Is there a way to force the map to update when the mouse is not over it?
I have tried several options: map.redraw(), layer.redraw(), source.refresh(), map.refresh(), layer.refresh(), source.refresh(), document.getElementById("map").focus() and anything else I can find suggested to force a map to refresh, but none of them work until the mouse is moved over the map.
My mistake, simple bug. Failed to update the style directly, assuming another routine was handling it.
I'm very new to JS, CSS and HTML but feel very excited to explore it more.
My visualization and whole code is here:
https://gist.github.com/DariaAlekseeva/a71475378a5d12ea40bc
At the moment when I move mouse across object, many paths appear and it not easy to see details.
I'd like to change setting in visualization from hovering to clicking.
First I hover and active paths change. Then I pick one path, click on it and only this path stays active. And I still should be able to see appearing comments when I hover ONLY along this path. Then I need to "unclick" this path (or click outside object) and keep hovering until I find another path to click on.
Thank you for help.
You just need to modify mousemove to mousedown. Then it will be changed to display tip for click event, but not 'hover'.
I created a plunkr for that, only display tip for clicking.
http://plnkr.co/edit/rn76z5z8cxZpqKKm7peN
(I modified the mousemove to mousedown at about 218 line.)
You can use 'mouseout', 'mousedown', 'mousemove' to implement these kinds of interaction.
Recently I got an edited version of the JavaScript "Reel" by Pisi, which allows the user to use the mouse wheel to zoom in on a picture. The "reel" itself is working as a 360 view of an object, using many images which will jump to the next image in order when using mouse drag.
However, since I will use this application on a touch screen without a mouse I was thinking about rebinding the mouse wheel or adding events to a button which works like the mouse wheel. For example, below the DIV with the 360-slider I want two buttons, one that zooms in and one that zooms out. Any idea on how to make this work?
Any help is much appreciated!
Question:
How do I zoom in on the mouse position on mouse wheel scrolls?
Details:
I am trying to merge this complete solution on Stack Overflow, which allows for zooming of the stage, with this incomplete solution, which allows for zooming in around the mouse when clicked. I have forked the jsfiddle code here. The code works fine once you get it zoomed in, but upon first scrolling, the stage jumps to a different location and I can't figure out why. Can anyone tell me why it is happening, and how to solve it. Thanks.
Just a guess, but you are using the mouse position relative to the page not the canvas
When you zoom, the position under your mouse position gets changed (the reason of jumping). To move back the position to its original position, you need to pan the offset( difference between the previous position and the new position(after zoom)). To avoid stage jumping to a different location, you can use stage.setOffset function of KineticJS.
JSFiddle: http://jsfiddle.net/rpaul/ckwu7u86/3/
Ok this question may sound a bit convoluted, or at least esoteric, but I'll try my best to elucidate.
In my charting application I have a div which is used as a popup tool tip. This tooltip appears when you hover over a datapoint and gives you some information. I used z-index to make the tooltip render above the underlying chart div. However, the underlying chart has interactivity with mouse events, so is it somehow possible to have the underlying chart register mouse events even though the mouse is hovering over the tooltip?
You could capture the mouse event, taking note of the coordinates, then add these coordinates to the real position of the tooltip relative to the page. Then you can re-fire a fake MouseEvent using these coordinates, minus the coordinates of the underlying div element, at the underlying element.
While I agree with the answer regarding capturing the mouse events, I think there is a workaround. Simply position the tooltip div a few pixels off of the mouse cursor. That way it never appears underneath the mouse cursor and it would not be clickable.
I do not know if this is practical or not in your situation, but you could append the tooltip as a child element to the data point. That way it is still part of the chart.
Actually, on browsers that support css3, pointer-events is the simplest solution. :)