I want to start marker dragging after 2 seconds on the mousedown.
I know how to enable/disable the dragging, but not find how to start dragging by code.
I tried :
marker.on('mousedown', function(e){
setTimeout(() => {
marker.dragging.enable();
marker.dragging._draggable._onDown(e);
}, 2000);
});
The draggable option is enable, but the marker does not move.
Of course, I can move it on the 2nd mousedown.
this is solve my problem :
marker.on('mousedown', function(e){
setTimeout(() => {
map.dragging._draggable.finishDrag();
marker.dragging.enable();
marker.dragging._draggable._onDown(e.originalEvent);
}, 2000);
});
Related
I'm using the Leaflet.markercluster plugin (https://github.com/Leaflet/Leaflet.markercluster) and
I'm struggling to update the markerClusterGroup Icon when the event spiderfied is fired.
Code:
// Initiate markers w/ a markerClusterGroup and the default icon
var markers = L.markerClusterGroup({
showCoverageOnHover: false,
});
// Set marker, bind it to Popup and add the markers as an layer to the map
markers.addLayer(L.marker(...))
.bindPopup(
L.popup({offset: L.point(0,0)}).setContent(
`...`
).openPopup()));
map.addLayer(markers);
// Try to update the default markerClusterGroup icon when a markerClusterGroup is spiderfied
markers.on('spiderfied', function (a) {
console.log('spiderfied');
markers.options = {
showCoverageOnHover: false,
iconCreateFunction: function() {
return L.divIcon({ html: '<b>' + 'Test' + '</b>' });
}
};
markers.refreshClusters();
});
What am I doing wrong here? Any advices?
Thanks in advance!
I've tried to get: https://github.com/Leaflet/Leaflet.markercluster#refreshing-the-clusters-icon implemented
I've done research on internet
I have an interface where, while the map is dragged, a rectangle is drawn on the map.
I've created a stripped down version of this functionality via this plunkr. The JS used for the plunkr is this:
var map = new L.Map('leaflet', {
layers: [
new L.TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
'attribution': 'Map data © OpenStreetMap contributors'
})
],
center: [36, -98],
zoom: 6,
renderer: L.svg({ padding: 100 })
});
var rectangle = L.rectangle(map.getBounds().pad(-0.1));
map.on("dragstart", function (e) {
var b = map.getBounds().pad(-0.1);
rectangle.setBounds(b);
rectangle.addTo(map);
map.on("drag", dragEvent);
});
map.on("dragend", function (e) {
rectangle.removeFrom(map);
map.off("drag", dragEvent);
});
map.on("mouseup", function(e){
console.log("mouseup!");
});
var dragEvent = function(e) {
rectangle.setBounds(map.getBounds().pad(-0.1));
}
This appears to work okay in Chrome and Internet Explorer. The problem I'm encountering is with Firefox (v59.0.2 64bit on Windows). In FF, if you click and drag the map, and release the mouse button while hovering over the rectangle, there seems to be a missing mouseup event. This means that if you hover over the toolbar on the right of the plunkr, you won't see the expected hover behavior until you click somewhere on the toolbar.
My questions, then:
Is there a better way to implement this functionality?
If not, anyone have an idea why this is occurring with FF?
In FF, if you click and drag the map, and release the mouse button while hovering over the rectangle, there seems to be a missing mouseup event.
Although it doesn't look good, but wrapping the removal of the rectangle in setTimeout would fix the issue:
map.on("dragend", function (e) {
setTimeout(function() {
rectangle.removeFrom(map);
}, 1);
map.off("drag");
});
Another solution would be creating an own mouseup handler for the rectangle:
map.on("dragend", function (e) {
map.off("drag");
});
map.on("mouseup", function(e) {
rectangle.removeFrom(map);
});
rectangle.on("mouseup", function (e) {
rectangle.removeFrom(map);
L.DomEvent.stopPropagation(e);
});
Also, there might be a reason to open an issue on https://github.com/Leaflet/Leaflet/issues
I have a mobile page showing a map using angular-leaflet-directive 0.7.11, and have declared my required events like so:
$scope.map = {
events: [
'mousedown',
'contextmenu'
],
...
}
$scope.$on('leafletDirectiveMap.mousedown', function (event) {
debugger;
});
Where the debugger statement is, the event variable contains no information about where the map was clicked. The same event format was provided by the directive when the contextmenu event is triggered.
In fact, if I inspect the entire event variable, it is just an Object, not an Event:
Are the docs wrong? Is the example missing something? How can I obtain the X/Y or Lat/Lng for the particular position that I have right-clicked (tap-hold)?
You need to use the 'leafletEvent'. Try this:
myApp.controller('YourController', ['$scope', 'leafletEvent', function($scope) {
$scope.$on('leafletDirectiveMap.mousedown', function (event, leafletEvent) {
leafletData.getMap().then(function(map) {
map.on('click', function(e) {
console.log('e');
console.log(e);
console.log('e.latlng:');
console.log(e.latlng); // L.LatLng {lat: 19.642587534013046, lng: -4.5703125}
});
});
});
}]);
I am not a javscript coder so I need some help on this.
I would like the popup to load after 100 seconds.
I would like that if the user clicks on the close X that the popup closes for 30 days for that user...much like the click in dismissal does now.
If you can help me out with this I would be very happy :).
Here is the code I am using for my Magnific Popup:
var et_popup_closed = $.cookie('etheme_popup_closed');
$('.etheme-popup').magnificPopup({
type: 'inline',
preloader: false,
focus: '#username',
modal: true
});
if(et_popup_closed != 'do-not-show') {
$('.etheme-popup').click();
}
$(document).on('click', '.popup-modal-dismiss', function (e) {
e.preventDefault();
$.magnificPopup.close();
if($('#showagain:checked').val() == 'do-not-show')
$.cookie('etheme_popup_closed', 'do-not-show', { expires: 30, path: '/' } );
});
to initialize the popup with delay, use setTimeout
$(window).load(function () {
setTimeout(function(){
$.magnificPopup.open({
items: {
src: '#ID' //ID OF INLINE ELEMENT
},
type:'inline',
mainClass: 'my-mfp-zoom-in'
});
}, 100000); // equals 100 seconds
});
you can change the type:'inline' part by anything (like type:'image') and change the src
you can view a demo here (opens after 18 seconds after window load)
for the cookie part, i have been been trying to figure it out too..
http://docs.kendoui.com/api/dataviz/stock-chart#events-zoom seems to help in disabling mousewheel event on chart area. However, there doesn't seem to be anything that can help aborting zoom event on stockChart navigator.
Try these:
zoom: function (e) {
e.preventDefault(); //prevents mouse event
}
or
zoom: function (e) {
e.originalEvent.preventDefault(); //prevents window from scrolling
}
or atleast you can return false in combination with e.preventDefault()