Google earth api: how to execute handler when info window is opened - google-earth

I have a Google earth plugin istance with data loaded from a kml file.
The kml contains polygons, when clicking on the polygon the baloon with the contenent of the tag is opened.
How can I attach an handler to the opening of the baloon, this handler will then create a custom baloon and stop the default event.
I think it should be something like this, I just don't know what event to listen for!
google.earth.addEventListener("SOMETHING", 'click', function(event) {
//Code to create custom baloon
});

You are listening for 'click', what you need to know is what to listen for click from.
In this case I guess you want to listen for clicks on any polygons.
To do this set up a generic listener for all clicks, then test if the click is on a polygon, if so then cancel the default behaviour and display a custom balloon.
e.g.
google.earth.addEventListener(ge.getWindow(), 'click', function(e) {
if (e.getTarget().getType() == 'KmlPlacemark' &&
e.getTarget().getGeometry().getType() == 'KmlPolygon') {
// Prevent the default balloon from appearing.
e.preventDefault();
// create a custom balloon attached to the target
var balloon = ge.createHtmlStringBalloon('');
balloon.setFeature(e.getTarget());
balloon.setContentString("custom baloon!");
ge.setBalloon(balloon);
}
});

Related

Add url redirect to mapbox icon

I am trying to allow a mapbox marker to be clicked on and when clicked it automatically takes you to a new link.
Is this possible?
I currently have a map of 10 locations and when loaded the zoom level shows all. When you click on a location, it zooms you into that location.
I now want it to take you through to a url on the click rather than zoom in, however I cant seem to find any documentation on how to do it.
I am aware that it can be done using a popup box which contains a url in it, but is there a way to remove the extra step.
Thank you
You can use click event on your layer to get the feature clicked and use a property of your feature to build your link :
map.on('click', 'layername', function(e) {
// Here you can access e.features[0] which is the feature cliked
// With that you can do whatever you want with your feature
});
Sébastien Bousquet's answer work when using a Symbol, but if using a Marker, you'll need to add your your own click eventlistener like https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event.
marker.getElement().addEventListener('click', event => {
window.location.href = 'https://www.mapbox.com/';
});

Leaflet layer control open only on click

Is there any way to open leaflet layer control only when clicked?
By default, it expands/collapse when on mouseover/mouseout. I want to open only on click.
You can use a bit of jQuery to get this done.
Set the 'collapsed' option to false and instead, create a button to show/hide the layer control.
btn.onclick = function() {
$('.leaflet-control-layers').toggle();
}
jsFiddle:https://jsfiddle.net/jht7u28L/1/ (a basic example)
Stop propagation on mouse over solved it. I am using d3 here but It can be easily handled by plain javascript or by jQuery.
d3.select(".leaflet-control-layers-toggle").on("mouseover", function () {
//this will make sure that layer popup menu
//not opens when mouseover
d3.event.stopPropagation();
});

Go to the URL when clicked on Leaflet geometry

I have a very simple issue:
I have a rectangle. I would like to link a website to that rectangle which will be opened on click on a new web browser window.
I do not want to apply pop-up option.
Attach a click handler to your rectangle and open a new window/tab in the handler function:
// Create rectangle and add to map
var rectangle = new L.Rectangle([
[54.559322, -5.767822],
[56.1210604, -3.021240]
]).addTo(map);
// Attach clickhandler
rectangle.on('click', function(){
// Open new window/tab
window.open('www.example.org','_blank');
});

detect cancel of drop event using Dropzone js

I am using Dropzone js for file uploads. This works fine for all events but i do not know how to detect an event when user starts dragging a file but does not drop it over to the dropzone (or let's say he decides to cancel the drop operation)
JSP
<div class="FilesDropzone dz-clickable" id="mydropzone" style="width:97%;height:50px;"><span>Drop files here!</span>//area for further processing</div>
Javascript
var myFilesDropzone = new Dropzone("div#mydropzone", { url:addedFilesResourceURL});
myFilesDropzone .on("dragover", function(event){
var dropzoneFilesHolder = document.getElementById('mydropzone');
dropzoneFilesHolder.setAttribute('style', 'height:150px;border:3px dashed #2AAAE6;');
});
myFilesDropzone .on("drop", function(event){
//display the dropped file });
Currently a blue border area is displayed that shows users where to drop the file. So if user decides to cancel drop i want to hide that area. But i do not know which event exactly is it.
I tried with dragleave but figure out that it was not the correct event. Any ideas?

jquery live click event stopPropagation

I have a dropdown menu which contains a input and several buttons. The dropdown should hide when I click one of the buttons or somewhere else, but don't hide when keypress on the input. I use the following code, it doesn't work. Though it works when I use
$('.dropdown input').click(function(e){
})
instead of live.
But I do need live, so is there any solution for this?
/* dropdown menu */
$('.dropdown input').live('click', function(e) {
e.stopPropagation();
});
$(document).click(function(e){
if(e.isPropagationStopped()) return; //important, check for it!
});
e.stopPropagation() will do no good for you in .live(), because the handler is bound to the document, so by the time the handler is invoked, the event has already bubbled.
You should stopPropagation from a more local ancestor of the element being clicked.
Since you were using .live(), I assume there are some dynamic elements being created. If so, the proper element to bind to will depend on the rest of your code.
Side note, but you never "need" .live(). There are other ways to handle dynamically created elements.
did you try:
$('.dropdown').on('click', 'input', function(e) {
e.stopPropagation();
});
OR
$('.dropdown').delegate('input', 'click', function(e) {
e.stopPropagation();
});
NOTE: e.stopPropagation(); is not effective for live event
According to you question I have a dropdown menu which contains a input and several buttons. The dropdown should hide... means that dropdown is already exists within you DOM. If it already exists then you don't need live event.
what version of jQuery are you using? > 1.7 then:
$(document).on({"click":function(e){
//do your work, only input clicks will fire this
}},".dropdown input",null);
notes:
properly paying attention to event.target should help out with overlapping 'click' definitions using .on();