Is it possible to catch only fitBounds event, but not moveend event?
There is no Leaflet built-in event dedicated to the fitBounds method. But since this method is called imperatively, you can easily execute whatever code you want alongside it.
map.fitBounds(myBounds);
// some code related to fitBounds
// e.g. you can trigger your own event:
map.fire("fitbounds-custom-event");
What may be implied by your question, is to detect the end of the potential fitBounds animation, as opposed to the end of user-initiated navigation (user pan, zoom...). Unfortunately there is currently nothing built in Leaflet either for this feature, although it has been discussed for a while (see Leaflet/Leaflet #2934).
One difficulty is that you can start a programmatic fitBounds with animation, and even though that animation is quite fast, user can navigate in the middle, ending the movement prematurely and in a different position. In that case, is it still considered the end of the fitBounds animation, or end of the user navigation?
If we ignore this difficulty, then a possible solution could be to attach a one time event listener when calling fitBounds:
map.once("moveend zoomend", myCallback);
map.fitBounds(myBounds);
Related
I've got a leaflet draw instance where I need buttons outside the map to start / cancel draw actions. I have successfully triggered draw start with
map.Draw.Polyline(map, myDrawControlInstance.options.polyline).enable();
but the only action I could find anywhere in the API that is mentioned to cancel a draw action: map.Draw.Polyline(map, myDrawControlInstance.options.polyline).disable(); does not trigger the cancel action.
How can I mimic all buttons that appear in the Leaflet Draw interface when drawing, editing, deleting, etc.
Any help is greatly appreciated
Found a post somewhere from almost 10 years ago with the answer.
You have to keep the drawHandler that's returned by the new L.Draw. method and call the cancel() on it.
start a draw from outside:
const drawHandler = new L.Draw.Polyline(map, drawControl.options.polyline).enable();
cancel the draw from outside the map:
drawHandler.disable();
I'm working on mapbox js-gl, version 1.7.0. I have tied the showing and hiding of a crosshairs div on my page to the zoomstart and zoomend events.
map.on('zoomstart', function (e)
{
$("#crosshairs-container").show();
console.log("Zooming started...");
});
map.on('zoomend', function (e)
{
$("#crosshairs-container").hide();
console.log("Zooming finished...");
var zoomLevel = map.getZoom();
renderMap();
});
The problem is: the referenced div doesn't appear and disappear reliably and consistently.
On desktop (Linux/Chrome): the mouse wheel's individual "incremental jumps" (most mice have them, if not all of the nowadays) are sometimes registered as the zoomend event, and sometimes not.
This means, that sometimes zooming finishes after one "wobble" of the mouse wheel - even though I'm still zooming by continuing to turn the mouse wheel. Other times, the zooming continues as I continue to turn the mouse wheel - the behaviour I'd expect.
On mobile (Android/Chrome): Similar behaviour, though, here, the crosshairs overlay pretty much disappears completely while zooming (in or out).
I have observed that, when zooming in and out (trying to reproduce and observe this behaviour) several times over the same part of the map (which has already loaded and added layers), the desktop seems to "find its groove", so to speak.
My question is: since it's rather unlikely that I have used the wrong events - I don't think this is a coding issue - has anyone else seen this behaviour ? Is this a hardware issue, in the sense that the pinch zoom on mobile does things "intermittently", as does a "incremental wobbles" mouse wheel ? So what - to the user - looks and feels continuous, is actually, behind the scenes, many inidividually triggered events "stitched together" ?
Incidentally, the drag events work flawlessly on desktop & mobile.
I solved this issue by switching from the dragstart end dragend events to the movestart and moveend events. This seems to avoid all problems, including having to debounce or throttle the event handlers.
Thanks to #Steve Bennett for the tip.
How do I disable just the grab aspect of panning for bing maps AJAX control 7.0?
I have tried this -
var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), { credentials: "bing maps credentials", mapTypeId: Microsoft.Maps.MapTypeId.road, disablePanning: true});
But setting the disablePanning property in the map options not only disables grab panning but also zoom panning. Zoom becomes not completely disabled but instead will only zoom in and out on the center of the map. No doubt you will have come accross zoom panning where you can use the mouse scroll wheel to zoom in on the map under the cursor and therefore can pan around by zooming in and out and moving the cursor. I would like to have zoom panning enabled but grab panning (where the user depresses the mouse and drags it around) to be disabled.
I am aiming for functionality very similar to when using the my places editor on the main bing maps site. When using the polyline tool to draw on the map grab panning is disabled and zoom panning is enabled just as I would like. I am actually intending on creating a custom drawing tool similar to the polyline tool in the my places editor.
I have been studying the api but have not discovered how to do it yet. I have also tried to discover how it is done on the main bing maps site but as the javascript code is all minified I am finding it very difficult. I have managed to gleen that the polyline tool hijacks the mouse, but that is about all.
Surely there must be a simple way of doing this. How is it done?
I don't think there is a map option you can set to achieve the behavior you want(enable zoom panning/disable grab panning). However, there is an easy way to hack it. The panning is initiated by the user clicking down on the map and moving the mouse. So if you can supply your own mousedown event handler for the map, and in its implementation prevent the default behavior of the mousedown, you should be good to go. Turns out the handled property on MouseEventArgs does just this:
Microsoft.Maps.Events.addHandler(yourMapObj, 'mousedown', function (mouseEvent) {
mouseEvent.handled = true; //A boolean indicating whether the event is handled. If this property is set to true, the default map control behavior for the event is cancelled.
});
With this, mousedown events on the map are processed by you and ignored by the map. So when the user tries to pan the map using the mouse, nothing happens. They can still click and zoom around as usual. Keep in mind if you have other elements on the map such as pushpins and shapes, this will prevent the mousedown event from reaching them. So any mousedown event handlers you registered on them will not get called. You can handle this either by unregistering the above handler when you want the other mousedown events to be called(preferable), or interogate the target property on your MouseEventArgs to see what fired the mousedown(messy).
I'm trying to draw a map, with some text annotations on top.
I've got this all working, but the text annotations (which are Label widgets floating over the top of the GWTCanvas which the map is drawn on) are soaking up any events which I'd like to get passed through to the canvas underneath. This is particularly obvious when the user drags the map; moving the mouse pointer over one of the widgets cases an Out event to be sent to the canvas, thus ending the drag.
Is there any way I can tell the Label not to respond to any events, and instead pass them on to the widget underneath?
Belated edit: turns out that pointer-events: none does what I want; but it's pretty new and may not work on some browsers...
No. The only thing you can do is catch the events and pass them through the event handler.
I found a useful tutorial to get started in understanding how to Cocoa handles touch events. I've used this as a base to create a custom script, I'm trying to make a UIView draggable, very similar to the native Maps application.
I've written a custom script, using
the touchesBegan method it will
capture where the input began and
compare it to the centre point of the
UIView using some conditional
statements.
The touchesMoved method will do some
further conditional statements to
determine whether the touch start
point and the center of the view will
move positively or negative.
I've also captured the views
boundaries so it doesn't go too far
out.
it's lacking the polished finished found in other applications such as Maps, or scrolling a UITable, such as the ease effect after the user has released their fingers, and the snapping effect when it reaches the boundaries is horrible.
Is there a method that takes a view and makes it draggable like this? If not I'll continue to refine my script.
Many thanks!
Maybe you are looking for UIScrollView