Google Map event bounds_changed triggered multiple times when dragging - javascript

I have a google map with markers. I want my markers to be refreshed when the map is moved/zoomed...
Google recommend to use the event bounds_changed for that, but when I move the map, the event is triggered for each pixel that I move the map. I want the map to be refreshed only when the user stopped moving the map, i.e. when he released the mouse button after dragging.
How can I do that ?

It turns out it was a reported bug: http://code.google.com/p/gmaps-api-issues/issues/detail?id=1371.
The Google team recommend to use the event "idle". For example :
google.maps.event.addListener(map, 'idle', function() {
});

While the selected answer is best for most circumstances. If you want to control the delay yourself, you can simply use something like;
var mapupdater;
{....}
google.maps.event.addListener(map, "bounds_changed", mapSettleTime);
function mapSettleTime() {
clearTimeout(mapupdater);
mapupdater=setTimeout(getMapMarkers,500);
}

Add a timeout, that runs your code 500ms after the event fires, each time the event fires clear the timeout and create a new one.
google.maps.event.addListener(map, 'bounds_changed', (function () {
var timer;
return function() {
clearTimeout(timer);
timer = setTimeout(function() {
// here goes an ajax call
}, 500);
}
}()));

You should check how a debounce function works. A nice article by Taylor Case define it as follows:
This function is built in order to limit the amount of times a
function is called — scroll events, mousemove events, and keypress
events are all great examples of events that we might want to capture,
but can be quite taxing if we capture them every single time they
fire.
So you define the function somewhere in your code:
function debounce(fn, time) {
let timeout;
return function() {
const args = arguments;
const functionCall = () => fn.apply(this, args);
clearTimeout(timeout);
timeout = setTimeout(functionCall, time);
}
}
Then you just use that function when adding your listener:
google.maps.event.addListener(myMap, 'bounds_changed', debounce(() => { /* Do something here */ }, 250));
It seems that 250 ms is a good frequency to use here.

try using both zoom_changed and dragend

Here is a little snippet that will remove all redundant 'bound_changed' call's:
var timeout;
google.maps.event.addListener(map, 'bounds_changed', function () {
window.clearTimeout(timeout);
timeout = window.setTimeout(function () {
//do stuff on event
}, 500);
}); //time in ms, that will reset if next 'bounds_changed' call is send, otherwise code will be executed after that time is up

Related

Prototype event not triggered inside another function ($.proxy)

I've been trying to fix a plugin that I found for a Time Picker, it's the following one:
https://github.com/grimmlink/TimingField
It works almost as expected with exception of one crucial line:
this.tpl.find('.timingfield_hours .timingfield_next')
.on('mouseup', function() {
clearInterval(timeoutId);
return false;
})
.on('mousedown', function(e) {
timeoutId = setInterval($.proxy(this.upHour, this), 100);
return false;
});
This section of the code in my understanding is for triggering the method of upHour every 100 ms after the user press the button (the same code could be replicated for minutes or seconds). However, it's not triggered at all, but if you remove the section of the interval and just called like this:
this.tpl.find('.timingfield_hours .timingfield_next')
.on('mousedown', $.proxy(this.upHour, this));
It works as expected, but you must do click by click each time in order to make it work.
Something that I'm sure is that the setInterval is being triggered because I modified it as this:
this.tpl.find('.timingfield_hours .timingfield_next')
.on('mouseup', function() {
clearInterval(timeoutId);
return false;
})
.on('mousedown', function(e) {
timeoutId = setInterval(function(){
console.log('x');
$.proxy(this.upHour, this)
}, 100);
return false;
});
I'm aware that the timeoutId is moving, but the field is not changing at all. This is a fiddle with the code:
https://fiddle.jshell.net/xeapwbxc
The location of the issue is in the line 32 of the JS. Does anybody know what should I change in order to make it work? Or why the function is not being called from the internal function? Thanks for your help.
You need to bind this.upHour in the init function itself. Inside mousedown handler this will be a button not a plugin instance. Working example
var upHour = $.proxy(this.upHour, this); // `this` is plugin instace
this.tpl.find('.timingfield_hours .timingfield_next')
.on('mouseup touchstart', function() { clearInterval(timeoutId); return false; })
.on('mousedown touchend', function(e) {
console.log(this); // `this` is button element
timeoutId = setInterval(upHour, 100); return false;
});
As of your approach
timeoutId = setInterval(function(){
console.log('x');
// this only creates new function and never call it
// also `this` will be global or undefined (in strict mode)
$.proxy(this.upHour, this)
}, 100);

Long click on button creates many instant clicks

Basically I'm trying to make a button to be performed again many times as long as the mouse is down on that button.
I need this for buttons with sliders. Right now, I click on a button for example "Increase Slider" and the slider is increased by 1 step, but now I want to be able to increase the slider many steps if I long press on that button.
How do I do that?
Your do loop runs as many times as it can in 1000 ms, and the mouseleave and mouseup handlers never get a chance to run because their events are sitting in the message queue waiting for the mousedown handler to finish running through that loop.
The loop sets up a couple thousand timeouts, to be run at least 200 ms later. Those timeouts don't actually do anything given the code you posted, because window's click handler is being called, not your button's.
The mouseleave and mouseup handlers essentially do nothing, because start will be reset to a valid time before ever being checked.
So how do we fix it?
There are two delays we want: the 1000 ms delay between the initial click and the first time the slider increases, and the 200 ms delay between slider increases. If the user cancels during the first 1000 ms, we'll count that as a single click. If the user cancels after the repetition starts, we shouldn't count that as a click. (We'll define "canceling" as releasing the mouse button or moving the cursor off the button. This means pressing the mouse button over the UI button and moving the cursor off will count as a click, but the code will be simpler.)
We can set up the delays by setting up a timeout that, after 1000 ms, sets up an interval that, every 200 ms, increases the slider. We won't be using the click event for the slider increase because of the last line of the spec:
If the user cancels after the repetition starts, we shouldn't count that as a click.
So we'll give the slider-increase code its own function, increaseSlider() (which is good practice anyway):
function startLongClick (e) {
window.setTimeout(() => {
increaseSlider();
window.setInterval(() => {
increaseSlider();
}, 200);
}, 1000);
}
$('#button').on('mousedown', startLongClick);
We put the first call to increaseSlider() in the timeout so the slider first increases 1000 ms after the initial click, not 1200. We use arrow functions in the timeout and interval because arrow functions don't redefine this, so we'd be able to refer to the triggering <button> if necessary.
I can't stop it!
As the code is now, a single click on the button will start the whole long-click process, with no way of stopping it. Stopping the process means stopping the timeout and interval, which we can do with window.clearTimeout() or window.clearInterval() (they're the same function; don't tell anybody). We'll need to hang on to the IDs setTimeout() and setInterval() give us, and clear them in the mouseup and mouseleave handlers:
let intervalId;
let timeoutId;
function startLongClick (e) {
timeoutId = window.setTimeout(() => {
increaseSlider();
intervalId = window.setInterval(() => {
increaseSlider();
}, 200);
}, 1000);
}
function cancelLongClick () {
window.clearInterval(intervalId);
window.clearTimeout(timeoutId);
}
$('#button').on('mousedown', startLongClick);
$('#button').on('mouseup', cancelLongClick);
$('#button').on('mouseleave', cancelLongClick);
What about the short click?
Now the button's doing what we want it to do, with one exception: a short click doesn't do anything, because we're not using the click handler and the timeout is being cleared before increaseSlider() is ever called. A short click should be registered if a canceling event is fired after the mousedown event but before the timeout fires. Since timeoutId is undefined before the mousedown event and we don't need it once the timeout fires, we can assign undefined to it in the timeout and use it to determine whether we should register a short click:
let intervalId;
let timeoutId;
function startLongClick (e) {
timeoutId = window.setTimeout(() => {
timeoutId = undefined;
increaseSlider();
intervalId = window.setInterval(() => {
increaseSlider();
}, 200);
}, 1000);
}
function cancelLongClick () {
window.clearInterval(intervalId);
if (timeoutId) {
increaseSlider();
window.clearTimeout(timeoutId);
timeoutId = undefined;
}
}
$('#button').on('mousedown', startLongClick);
$('#button').on('mouseup', cancelLongClick);
$('#button').on('mouseleave', cancelLongClick);
We set timeoutId to undefined in the short-click code as well. Otherwise, after short-clicking, an increase would trigger every time you mouse out of the button.
More buttons!
The code works now, but requires two global variables and is hard-coded for a specific button. Let's turn it into a general-purpose jQuery plugin*:
(($) => {
$.fn.repeatingClick = function (callback, delay = 500, interval = 200) {
return this.each(function () {
let intervalId;
let timeoutId;
function startLongClick (e) {
timeoutId = window.setTimeout(() => {
timeoutId = undefined;
callback.call($(this), e);
intervalId = window.setInterval(() => {
callback.call(this, e);
}, interval);
}, delay);
}
function cancelLongClick (e) {
window.clearInterval(intervalId);
if (timeoutId) {
callback.call(this, e);
window.clearTimeout(timeoutId);
timeoutId = undefined;
}
}
$(this).on('mousedown', startLongClick);
$(this).on('mouseup', cancelLongClick);
$(this).on('mouseleave', cancelLongClick);
});
}
})(jQuery);
function modifySlider (e) {
let modifier = Number($(this).data('change'));
$('progress').attr('value', Number($('progress').attr('value')) + modifier);
}
$('button').repeatingClick(modifySlider);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="dec" data-change="-1">−</button>
<progress value="25" max="50"></progress>
<button id="inc" data-change="1">+</button>
What's changed?
Replaced calls to increaseSlider() with a callback parameter and callback.call($(this), e). This way, any function can be used as the callback, and since we used arrow functions in the timeout, we're able to use Function.call with this to access the triggering element in the callback.
Parameterized the delays in the timeout and interval into delay and interval, for more general use.
Stuck the whole thing in a new jQuery function, $.repeatingClick(). Since jQuery objects can represent collections as well as individual elements, we wrap the original code in a call to $.each() to access each element individually. We also return the jQuery object in the usual style.
The rest is specific to this application: two buttons to modify the value of a (<progress>) 'slider', using custom data- attributes for the actual amounts so we can give both the same code.
*I've never written a jQuery plugin before; most of the code surrounding the core logic came straight from jquery-longpress, a jQuery plugin that does almost what OP wants.
Try using intervals instead of manually calculating time. Check this out:
var value = 0
var addval;
var press = false;
$('#button').on('mousedown', function (e) {
press = true;
increaseValue();
return false;
});
$('#button').on('mouseleave', function (e) {
clearInterval(addval);
return false;
});
$('#button').on('mouseenter', function(e) {
if (press)
increaseValue();
});
$('#button').on('mouseup', function (e) {
press = false;
clearInterval(addval);
return false;
});
function increaseValue() {
addval = setInterval(function(){
value++;
$("#counter").text(value);
}, 100);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">Press me</button>
<div id="counter">0</div>
You can adjust the speed by changing interval time.

Javascript Google maps drawing events

I'm having a problem with the event listeners provided by Google maps API. The thing is, that some events run, some not. I have a setListeners function which sets the listeners after the polygon overlay is complete. The events I would like to hook are: set_at, insert_at, remove_at and click. Now the click events run correctly, but the others not. What could I do wrong? Here is the code:
self.setListeners = function () {
//this click event runs correctly
google.maps.event.addListener(self.map, 'click', function (e) {
self.clearSelection();
})
console.log(self.drost);
if (typeof self.drost != 'undefined') {
self.drost.addListener('set_at', function (e) {
console.log(e.overlay);
});
self.drost.addListener('insert_at', function (e) {
console.log(e.overlay);
});
self.drost.addListener('remove_at', function (e) {
console.log(e.overlay);
});
//this click also runs correctly
self.drost.addListener('click', function(e){
self.setSelection(self.drost);
})
}
}
The events set_at, insert_at, remove_at need to be added to the path of the polygon, not the polygon itself.
related questions:
Apply event listener to an editable polygon
calculate area of a drawn polygon on google map javascript
Try adding the listener with google.maps.event:
google.maps.event.addListener(self.drost, 'set_at', function() {
console.log('it works!');
});

Event listener DOMNodeInserted being run multiple times, why?

I'm trying to listen for a node with a certain class being added to the DOM dynamically. Once this Node has been added i want to then add an instance of of a plugin to this Node. The problem I'm having is DOMNodeInserted is running multiple times which is then running my plugin multiple on this one Node which is causing problems.
There is only ever one occurrence of this class on page.
Why is this and how can I stop this from happening?
$(document).ready(function(){
$('#editArea').live('DOMNodeInserted', '.class', function(e){
$('.class').plugin({
source: 'libs/ajax/somescript.php',
});
})
});
I ran into the same problem awhile back. What you need to do is debounce the function so it fires after the last DOMNodeInserted call.
Try this (adapted from John Hann's smartresize--comment/link left in):
(function ($, sr) {
// debouncing function from John Hann
// http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
var debounce = function (func, threshold, execAsap) {
var timeout;
return function debounced() {
var obj = this, args = arguments;
function delayed() {
if (!execAsap)
func.apply(obj, args);
timeout = null;
};
if (timeout) {clearTimeout(timeout);
} else if (execAsap) {func.apply(obj, args);}
timeout = setTimeout(delayed, threshold || 100);
};
}
jQuery.fn[sr] = function (fn) { return fn ? this.on('DOMNodeInserted', debounce(fn)) : this.trigger(sr); };
})(jQuery, 'debouncedDNI');
$(document).ready(function () {
$('#editArea').debouncedDNI(function () {
$('.class').plugin({
source: 'libs/ajax/somescript.php',
});
});
});
Probably because in your DOM whatever the element you're watching for has children elements. The event is fired once for the matching element (.class) and once for each descendant.
If your element you need to watch is something like a select with a bunch of option elements under it, a quick and dirty solution might be to watch for another "buddy" element you can put along with it in the DOM. For instance:
$(document).ready(function(){
$('#editArea').on('DOMNodeInserted', '#classbuddy', function(e){
$('.class').plugin({
source: 'libs/ajax/somescript.php',
});
})
});
Then in your markup you would just need to add something like an empty span element with id="classbuddy". Because that span would not have children elements, your code would fire only once and so .plugin() would be applied one time only.

Disable map zoom on CircleMarker double click in leaflet

I'm trying to disable the zoom on the map when I click in a CircleMarker object, but until now, no success.
This is my code:
var myCircle = new L.CircleMarker(new L.LatLng(50.924480, 10.758276), 10).addTo(map);
myCircle.on("click", function () {
//my click stuff
});
myCircle.on("dblclick", function () {
//my dblclick stuff
});
Everytime the dblclick event is fired, the map is zoomed, how to disable it?
try
var myCircle = new L.CircleMarker(new L.LatLng(50.924480, 10.758276), 10).addTo(map);
map.doubleClickZoom.disable();
refer this document
All answers here are after the Leaflet map object has been initialized.
I'd like to give my take by stating that you can also disable doubleClickZoom during map object initialization.
Note: This will disable doubleClickZoom to the whole map and not just circleMarkers.
map = L.map('map', {
center: [39.8282, -98.5795],
zoom: 5,
doubleClickZoom: false
});
P.S. I'm running leaflet version 1.7.1
Following solution seems to work for me:
myCircle.ondblclick = function (event) {
event.stopPropagation();
return false;
};
I have also tried another one, which also works quite well in practice, but I find it a bit hacky:
myCircle.on("click", function () {
map.doubleClickZoom.disable();
setTimeout(function(){map.doubleClickZoom.enable();}, 1000);
});
None of the answers above worked for me:
calling native ev.originalEvent.preventDefault() did nothing
returning false neither
I don't like the doubleClickZoomworkaround that much (although… it works!)
Using Leaflet DomEvent did the job for me:
import { DomEvent } from 'leaflet';
myFeature.on("dblclick", function (ev) {
DomEvent.stopPropagation(ev)
});
If anyone is here looking for a solution to the use case "I want to zoom in on the map on double-click but not if the double-click happens on an entity", this is how I solved it:
const circle = new L.circlemarker(...).addTo(map);
circle.on("dblclick", () => {
map.doubleClickZoom.disable();
doSomething();
setTimeout(() => {
map.doubleClickZoom.enable();
}, 1); // Without the timeout the map will still zoom in on entity double-click
});
FYI event.preventDefault(); event.stopPropagation(); and return false; inside the "dblclick" handler did not work for me.
You can return false from your dblclick handler which will stop the event from propagating e.g.
myCircle.on("dblclick", function () {
//my dblclick stuff
return false;
});
Now other elements (such as the map) won't handle that event
Try this... Disable map.doubleClickZoom when you mouse over the circle and enable when you leave
var myCircle = new L.CircleMarker(new L.LatLng(50.924480, 10.758276), 10).addTo(map);
myCircle
.on("click", function () {
//my click stuff
})
.on("dblclick", function () {
//my dblclick stuff
})
.on('mouseover', function () {
map.doubleClickZoom.disable();
})
.on('mouseout', function () {
map.doubleClickZoom.enable();
});
First you need to disable the map double click zoom and then enable it again on the map click event. So when you double click the map after double clicking on the marker it zoom again ;) I tried it and it works for me perfectly! Enjoy!
map.doubleClickZoom.disable();
map.on('click', function (e) {
map.doubleClickZoom.enable();
});

Categories

Resources