I've been reading the Google Maps API docs to see if it's possible to tell the difference between a system event vs. a user one?
For example, the zoom_changed event gets triggered when you use methods like setZoom, fitBounds, etc, which in my implementation is unsavoury, as I just want to know when the user actually changes the zoom level.
Unfortunately, the click event is only fired on the map itself, not the controls, so you can't rely on that method to help detect the users input.
Ideas?
Although I haven't been able to solve this using the Google Maps API, I have created a workaround which involves me calling this method before I change the map zoom or positioning without user interaction:
MapGraph.prototype.systemMove = function() {
var _this = this;
this.isMoving = true;
return setTimeout(function() {
return _this.isMoving = false;
}, 500);
};
And my event bindings look like this:
google.maps.event.addListener(this.map, 'dragend', function(event) {
if (!_this.isMoving) return _this.mapChanged();
});
Not perfect, but it does work.
Would love to see any other implementations though.
You may also consider an alternate solution I proposed in this Stack Overflow answer, which does not rely on mouse events to recognize user-initiated changes.
Instead of trying to recognize user events, add a flag to the map whenever a programmatic change is initiated with setZoom or fitBounds.
map.systemChange = true
map.setZoom()
Then check for (and reset) the flag in the event listener.
map.addListener('zoom_changed', function () {
if (map.systemChange) {
map.systemChange = false // Reset the flag for a system-initiated event
} else {
// Handle the user-initiated event
}
});
Related
I searched quite a bit to find out the correct way to remove event listeners in Cesium. I believe the confusion I have is around whether to treat Cesium events as regular dom events (due to a lack of knowledge about events in general in javascript). I am creating a screen space event like below:
var handler = new Cesium.ScreenSpaceEventHandler(canvas);
handler.setInputAction(function (movement) {
var picked = scene.pick(movement.endPosition);
if (Cesium.defined(picked) && picked.id === someEntity) {
labelEntity.position = someEntity.position;
labelEntity.label.show = true;
} else {
labelEntity.label.show = false;
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
My question is, how can I remove this event? Is handler.destroy() removes all the event listeners associated with handler, or do I specifically have to remove event listeners by pointing to the cesium map dom element and calling removeEventListener on it? If that's the case, what parameters should be passed to removeEventListener?
The parameters for removeInputAction are just the type and optionally the modifer, and it looks like you're not using the modifier (SHIFT key, ALT key etc.)
So for the code you posted above, the removal would be:
handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
Whenever I hover a markup and right click it, it locks the mouse movement to the drawing and makes it impossible to move the mouse without moving the drawing.
Is it possible to disable this behaviour?
Depending on your specific scenario, there's a few things you can try:
If you're trying to enable camera pan while in the markup mode on a 2D drawing, you can simply "enable navigation" for the markup tool:
viewer.toolController.getTool('markups.core').allowNavigation(true);
If that's not sufficient for your case, you could also try and modify the handleButtonDown method that the markup tool uses to decide whether and how it should handle the mouse button down event. Currently the method looks like this:
this.handleButtonDown = function(event, button) {
if (this.allowNav || (this.is2d && (avp.isRightClick(event, this.viewer.navigation) || avp.isMiddleClick(event)))) {
// If pan tool won't handle button down, then pass over the event
if (this.panTool && this.panTool.handleButtonDown) {
return this.panTool.handleButtonDown(event, button);
} else return false;
}
return true; // Consume event
};
Where avp is just a shortcut to the Autodesk.Viewing.Private namespace.
viewer.toolController.getTool('markups.core').handleButtonDown = function (event, button) {
// Return true when you want the measure tool to "capture" the event and process it somehow,
// or false when you want to ignore the event and allow other tools on the stack to handle it
};
I want add eventListener highlight buttonLockup with stackTemplate.
Can you guide to use this?
Thanks,
The event system in TVJS is extremely similar to that in a web browser. After all, it's just JS and a DOM. MDN's documentation on Event Handlers should be mostly relevant
To add an event listener to a specific button, just find that button (using ID or name or whatever), and use addEventListener.
var myButton = doc.getElementByName('buttonLockup')
var onSelect = function(ev) {
console.log('Button selected!')
}
myButton.addEventListener('select', onSelect)
However, depending on your use case, I've found Apple's approach in their sample apps to be quite useful. They rely on the fact that events bubble up to the root of the template, and just listen to them there. So for example:
// Given a TVML document has been presented with this somewhere in it
<buttonLockup action="doSomething">Do something</buttonLockup>
// When it's selected, doSomething
var globalOnSelect = function(ev) {
var target = ev.target;
var action = target.getAttribute('action')
if (action === 'doSomething') {
console.log('Do Something button selected');
doSomething();
}
}
doc.addEventListener('select', globalOnSelect);
I have created a plotting system using the GoogleMaps Javascript API V3, which allows users to draw out and save polygons.
I have received a number of complaints concerning the autocompletion of plots as a result of accidentally doubleclicking while manually drawing out the points using the polygon drawing tool. I am therefore looking to disable this dblclick auto-complete function, so that plots will only complete once the user clicks on the first point again.
I have tried unbinding the dblclick event from the map, and attempted to stop propagation of the dblclick event by throwing an error on double click, as below (just to test the event call).
google.maps.event.addListener(map, 'dblclick', function(){
throw("stop");
});
this succeeds in stopping the zoom function on doubleclick, but autocomplete still occurs when dblclicking while plotting points (this listener is not triggered). I have even tried stopping the propagation of any doubleclick event on the whole page, all to no avail. Can anyone suggest either a way of unbinding this dblclick event, or an alternative solution to prevent the dblclick autocomplete?
I have searched through the API reference document and forums and have not been able to find a solution to this.
Add an edit button after finish!
Save your polygons into an array on "overlaycomplete" (and add your edit button at the same time)
var polyArray = [];
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
this.setDrawingMode(null);
var shape = e.overlay;
shape.type = e.type;
polyArray.push(shape);
shape.addListener('click', function(evt){
if (evt.vertex != null && this.getPath().getLength() > 3) {
this.getPath().removeAt(evt.vertex);
}
});
});
The Edit function:
function editFeature(id, action){
var shape = polyArray[id];
if(action) shape.setEditable(true);
else shape.setEditable(false);
}
I have to make a map of Europe with its countries
and then I need a few pics of products from those countries
After that I have to match the pic with the country with drag and drop
if the product is dropped on the correct country it should send me to another page (with more info about the product)
if it's wrong it should display a message
anyone have an idea? I checked for some basic drag and drop stuff but since I'm new to html5 etc and webdesign in general it's really hard to make this from scratch
thanks!
EDIT: also only use HTML, CSS, JS
This can be achieved with the MapQuest JavaScript API. What I would start with is by adding polygon overlays to the map for each country, the colour can be sett to completely transparent by setting the opacity for the overlay to 0.0. From each overlay add a mouseup event listener to each overlay, this event listener can then be used to determine what it was you were dragging in the first place.
For the drag start functionality you can either do this yourself or you could use something like the jQuery UI draggable support, you could then use the dragstop event from the draggable API in conjunction with mouseup on the overlay to perform your logic.
Check out the basic map to get a map going.
Some code to start with
var countryCode;
// Adds an overlay and wires an event for mouseup.
function addMapOverlay(points, cc) {
var poly = new MQA.PolygonOverlay();
poly.setShapePoints(points);
poly.color = "#ffffff";
poly.colorAlpha=0.0;
poly.fillColor = "#ffffff";
poly.fillColorAlpha=0.0;
poly.addListener(rectangle, 'mouseup', function(evt) {
if (evt.eventName === "mouseup") {
// Here you have the event firing for the mouse-up on the overlay.
countryCode = cc;
}
});
}
For the drag-start.
$("#some-country-item").draggable({
start: function(event, ui) {
countryCode = null;
},
stop: function(event, ui) {
if (countryCode === "what you expected") {
// Released on correct country.
} else {
// Did not release on correct country.
}
}
});
You may need to test the event handling to ensure that the correct events are fired in the right order, or use the mouseover event on the overlay object.
The code samples are theoretical and should help you find the right direction to go.