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()
Related
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);
});
I start my application with expand Layer-Control:
L.control.layers(baseMaps, overlays, { collapsed:false } ).addTo(mymap);
I found no Mouse-Action to minimize the Layer-Control. I want to minimize the Layer-Control. But I don't know the handler. Could anybody give me a tip?
I had the same requirement for Leaflet. I needed to have the layer control expanded at first and then return to its normal hiding after someone realizes what it does.
I am using JQuery, but you could probably manipulate the DOM as well.
I have a function that instantiates the layer control object, and then I immediately reset the mouseenter and mouseleave events for the expanded control and the smaller toggle widget.
let layerControl = L.control.layers(basemap_items, { 'specialLayer': layer}, { collapsed: false }).addTo(map);
$('.leaflet-control-layers').on('mouseleave', () => {
layerControl.collapse();
});
$('.leaflet-control-layers-toggle').on('mouseenter', () => {
layerControl.expand();
});
I am using leaflet.js for my application.
The click event is not triggering alongwith the mouseover event.
layer.on({
mouseover: function (e) {
L.popup().setLatLng(e.latlng)
.setContent("Test")
.openOn(map);
},
click: function () {
alert("Click");
map.fire("click", e);
}
});
I am using the custom marker instead of circle marker
option.pointToLayer = function (feature, latlng) {
var marker = L.marker(latlng);
var icon = L.icon({
iconUrl: 'Image/InvestmentIcons/environmentalflow.png',
iconSize: [12, 12], // size of the icon
});
marker.options.icon = icon;
return marker;
}
What happens is that when a user tries to click on your Marker (which would trigger your "click" event listener, i.e. display your alert), they have to move first their mouse over the Marker, which opens a Popup at this position (accordingly with your "mouseover" event listener), so the Popup is now receiving the click, instead of your Marker.
You can see that your "click" listener is still working properly by positioning your mouse cursor just besides the Popup "tip", where it does not cover the Marker icon, but the mouse cursor is still somehow a little bit on the Marker:
To try it live: https://plnkr.co/edit/8Zu0cYeYATp2qY6ltn7N?p=preview
To avoid this UX issue, you could try using a Tooltip instead of a Popup for example. By default it will appear on the side of the coordinates, instead of above it (which makes the Popup cover the Marker).
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}
});
});
});
}]);