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');
});
Related
I am using leaflet to show my markers into google map. everything works fine. My markers are being loaded by an api call in every 10 secs. if i click on any markers a popup window is open. But it disappeared as soon as the api is called again. I have tried so far as follows:
var infoWindow_content = "<h3>Hello world</h3>";
var theMarker = L.marker([devices[x].lat, devices[x].lng], {
icon: customicon,
rotationAngle: devices[x].angle
}).on('click', markerOnClick).addTo(map).bindPopup(infoWindow_content, {
autoPan: true,
autoClose:false,
closeOnClick:false,
});
is there anyway to keep the popup window open even the marker gets reloaded? In that case is the popup window follow marker movement? thanks in advance
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();
});
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?
I have a problem using links in leaflet marker popups:
My loop assigns a link to every popup so I can open the specific source by clicking the popup
var link = "Grafik erstellen";
L.marker([lat,lon], {icon: marker}).bindPopup(link).addTo(map);
It´s possible to open the link which appears in the popup, but I need to open it in a new (popup) window (simulate the windows-function of right-mouse-click: "open in new tab")
How can I realize this issue?
Thanks a lot for help
try this, add the target="_blank" attribute to the a href=""...-tag:
var link = "Grafik erstellen";
L.marker([lat,lon], {icon: marker}).bindPopup(link).addTo(map);
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);
}
});