Is it possible to set something like context menu or spoiler over map, using HERE?
If you know, how to do it, please, let me know,i'll appreciate it
You can listen for a 'contextmenu' event on the map instance. Here is an example:
map.addEventListener('contextmenu', function (evt) {
evt.items.push(new H.util.ContextItem({
label: 'Zoom in',
callback: function () {
map.setZoom(map.getZoom() + 1);
}
}));
});
Related
I need register event in constructor of map.
How can I do that?
Is there something like similar?
var view = new ol.View({
eventListeners: {
"change:resolution": function () { console.log("test"); },
}
});
I won't use view.on('change:resolution').
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!');
});
I am trying to attach the jQuery plugin contextMenu to the points in a flot graph. I have the right click context menu working using the following code:
$(".chart").bind("plotclick").contextMenu('myMenu1', {
bindings: {
'delete': function(t) {
// Do stuff when delete is clicked
}
}
});
With the above, if I right click on any of the points on the graph a little menu pops up with "DELETE" in it.
However I need access to the data provided by flot about the point that was clicked. Normally the plotclick function would look like this:
$(".chart").bind("plotclick", function (event, pos, item) {
// In here I can see details about the point that was clicked by looking at event, pos and item
})
So my question is, how do I pass the event, pos, item variables through to the delete function of the contextMenu in my first code above? Is what I'm doing even the right way to attach the contextMenu?
Thanks
How about your bind the context menu generically to the plot container div and then use the plothover event to keep track of whether or not you are "over" a point? If you aren't over a point, you suppress the pop-up, if you are over one you get the point information from a global-scoped variable.
$("#placeholder").contextMenu('myMenu1', {
onContextMenu: function(e) {
if (somePoint) return true;
else return false;
},
bindings: {
'delete': function(t) {
alert(lastPoint.series.label);
}
}
});
var somePoint = null, lastPoint = null;
$("#placeholder").bind("plothover", function (event, pos, item) {
if (item){
somePoint = item;
}else{
lastPoint = somePoint;
somePoint = null;
}
});
Fiddle here.
BTW, the reason my original fiddle didn't work, was I had the wrong jquery context menu. I thought you were using this one not this one.
I'm trying to add a mouseover event listener to a Google Maps overlay view. I've been following this question, but can't get the listener to work. This is my code:
InfoWindow.prototype = new google.maps.OverlayView;
InfoWindow.prototype.onAdd = function() {
this.getPanes().overlayMouseTarget.appendChild(this.$content.get(0));
this.getPanes().overlayMouseTarget.parentNode.style.zIndex = 100000;
google.maps.event.addListener(this, 'mouseover', function() {
console.log('MOUSEOVER');
});
};
This doesn't give any errors, but also doesn't do anything on mouseover. I've also tried using this.listeners:
this.listeners = [
google.maps.event.addDomListener(this, "mouseover", function (e) {
console.log('MOUSEOVER');
})
];
but it doesn't help either. What am I doing wrong?
For the domListener to work, you need to attach it to a dom node:
google.maps.event.addDomListener(this.$content.get(0), "mouseover", function (e) {
console.log('MOUSEOVER');
});
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();
});