I use code below to add animation
animation.startProgress=fromPosition;
animation.endProgress=toPosition ;
Is it possible to get the event when animation reaches toPosition?
Welcome any comment
Have you thought of considering this?
animateWithDuration:animations:completion:
And adding the completion handler block.
Related
I'm using react-leaflet with the Geoman plugin, and I notice that pm:create doesn't fire when I add new layers programmatically. This code runs on startup and again anytime the activeFeatureGroup is changed:
map.pm.setGlobalOptions({
...map.pm.getGlobalOptions(),
layerGroup: activeFeatureGroup,
hintlineStyle: { color },
templineStyle: { color },
})
This is my function to programmatically add new layers from GeoJSON:
const opts = { style: { color } }
geoJSON(newGeoJsonObject, opts).addTo(activeFeatureGroup)
How can I get pm:create to fire after this code runs? The main concern is that I'm adding event listeners to every layer that pm:create sees, so an alternative solution would be a way to set one listener on the map instance that fires anytime a layer is added in Geoman, but I don't see support for this in the Geoman docs.
How can I get pm:create to fire after this code runs?
You can achive this in 3 different ways:
Create a function and call it after running the geoJson part and in the pm:create listener
add a listener on the map layeradd (leaflet event) and run the same code as in pm:create
you can fire pm:create manually with map.fire('pm:create',{layer: XYZ}); (I don't recommand this!)
alternative solution would be a way to set one listener on the map instance that fires anytime a layer is added in Geoman
This is pm:create ... if you mean to fire an event for each layer that is intialized and is added to Geoman, you can achive this by listening on layeradd and then check if the Geoman property layer.pm exists.
The default behavior of Leaflet's map.flyTo() method is that if the user clicks on the map during the flyTo animation, the animation stops.
I would like to keep the map animating until the desired view is reached, regardless of user interaction.
Is there a way to disable the map mouse/touch interactions for the duration of the animation?
Use the methods described by #IvanSanchez within the function that fires theflyTo() method (let's call this function "triggersFlyTo()")and the 'moveend' event. I hope that the following code solves your problem:
//stop user interaction when flyTo() is fired
function triggersFlyTo() {
...
map.dragging.disable();
map.doubleClickZoom.disable();
map.scrollWheelZoom.disable();
map.flyTo(...)
...
}
//restart user interaction when the "flying" stops.
map.on('moveend', function() {
map.dragging.enable();
map.doubleClickZoom.enable();
map.scrollWheelZoom.enable();
}
Is there a way to disable the map mouse/touch interactions for the duration of the animation?
You probably want to temporarily disable the interaction handlers, like so:
map.dragging.disable();
map.doubleClickZoom.disable();
map.scrollWheelZoom.disable();
...
map.dragging.enable();
map.doubleClickZoom.enable();
map.scrollWheelZoom.enable();
Check the full list at http://leafletjs.com/reference-1.0.3.html#map-handlers , along with the rest of the documentation.
I'm using HammerJS to abstract drag, scale and rotate for desktop and mobile. All I'm missing is drop. How do I define an element as a drop target that throws an event when another element is dragged over or dropped onto it? Something like jQueryUI's droppable that will work with HammerJS?
Thanks.
Just solved that today.
On dropping object, set a global "look for me" flag. and then setTimeout() to shortly (say 30ms) set it back to false.
Hide (and move) the dropped object, putting it back after a short time allowing the onMouseOver and onMouseOut events to trigger on the drop target object.
Watch those events for the "look for me" flag.
I haven't really tried it much yet.
(My first post.)
The only one fast way for detect drop target element is to use
document.elementFromPoint
Like this:
function dragEnd($event){
var targetEl = document.elementFromPoint($event.gesture.center.pageX, $event.gesture.center.pageX);
your code
}
I have a test scenario which have to click on an element displayed after an animation, but element is not available for action while it is animated: Selenium::WebDriver::Error::UnknownError: Element is not clickable at point (...).
Is there a way to synchronize on the animation completion to have deterministic behavior (I will avoid sleep-based solutions).
We found a solution to that: in fact, we use Tweeter Bootstrap, and animations are realized through CSS properties.
The "better" way to get out of this was to wait until CSS property had its final value.
Watir::Wait.until {
top = browser.execute_script 'return $("#my-id").css("top");'
top == "30%"
}
Any "yet better" idea is welcome.
I have function onClickButton where i do (pseudocode):
show activityIndicatorView (or ProgressBar or change label text no matter)
execute my algorithm
hide activityIndicatorView
actvitiyIndicatorView will never show. If I delete hide at the end of the function, then it will emerge after algorithm. In spite of I show it before execute algorithm.
Why and how I can fix it ?
Most probably your execute my algorithm is a long cpu time consuming process which is called on the main thread...
you are also showing the activity indicator just before the algorithm...The UI normally takes some time to update the layout (adding your activity indicator..) ..but before it does..your a;gorith takes place on the main thread..and it block the UI update.. so when the task completes.. you tell to hide activity..and your activity hides....that is why you can't see it being added and then removed from view..
To solve this..do the algorithm task in a separate thread(no the main thread) ..this way UI will be updated and task will complete in the background..
Alternative way is to perform the long task after some delay..so that UI update itself