Is it possible to bind 2 different tooltips on a polygon in leaflet?
One on hover and the other set to permanent.
Right now in my code it's taking only one.
You can bind any number of tooltips. Answering your specific question, you can define one tooltip to be permanent.
L.rectangle([[48.84, 2.34], [48.86, 2.36]]).bindTooltip("test", {
permanent: true
}).addTo(map);
L.rectangle([[48.84, 2.34], [48.86, 2.36]]).bindTooltip("hello", {
permanent: false
}).addTo(map););
See an example here:
https://jsfiddle.net/9d9pcL1a/
Related
I am trying to use the leaflet-draw tool for two different things:
as a "regular" tool to create new geometries
if I draw a line, I perform some calculations with turf.js, giving me points nearby.
I've set up two individual draw controls for each purpose. For the second, I have all but the draw:polyline disabled. The problem: I save my elements with the
map.on('draw:created', function(){...});
"command". But this way I (or the eventhandler, respectively :)) cant differentiate, if the line was drawn with the first or the second button. So basically i can use the draw tool either for one thing or the other. Is there a way where I can use the same tool for different applications on the same map?
Thanks for any hints or work arounds.
An alternative would be to use Leaflet-Geoman instead of Leaflet-Draw.
There you can create copies of Draw instances and add them a new shape name:
// copy a rectangle and customize its name, block, title and actions
map.pm.Toolbar.copyDrawControl('Polygon', {
name: 'PolygonCopy',
block: 'custom',
title: 'Display text on hover button',
actions: ['cancel', 'removeLastVertex', 'finish'],
});
And then you can check the shape name in the create event:
// listen to when a new layer is created
map.on('pm:create', function(e) {
console.log(e)
if(e.shape === 'Polygon'){
alert('Original Polygon')
}else if(e.shape === 'PolygonCopy'){
alert('Copy Polygon')
}
});
https://jsfiddle.net/falkedesign/r0sm9auo/
Is there any possibility of disabling the click not to further collapse the tree or close the tree. This is the example the echarts example. See this link. I am trying this since long time. The documentation is not clear. Can anybody help me out on this? I dont want the end user to click on the circles to expand or collapse.
https://echarts.apache.org/examples/en/editor.html?c=tree-radial
Just disable mouse events with silent: true.
series: [{
//...
silent: true,
//...
}]
There is a property expandAndCollapse inside series, default value is true. Set it to false which does exactly what you asked.
I'm trying to add clustering and layer control to filter markers on my map. After reading older posts on this issue, the code that was marked as the right answer looks like this. However, no matter how I change it, it does not work on my map.
var parent= new L.MarkerClusterGroup().addTo(map);
var overlay={}
overlay["Markers A"]=L.featureGroup.subGroup(parent,aPoints).addTo(map);
overlay["Markers B"]=L.featureGroup.subGroup(parent,bPoints).addTo(map);
control = L.control.layers(null, overlay, {collapsed: false });
control.addTo(map);
What am I doing wrong?
The issue that I was having was that L.featureGroup.subGroup takes in an array of markers as it's second parameters therefore, aPoints needed to be [aPoints].
I want to set markers on a Leaflet map. To achieve this I tried jquery-mobile-events with minor success. This is how I integrated it:
$(map).off('taphold');
$(map).bind('taphold', function(e, options){
... do something ...
});
It works on the desktop but not on mobile. 'map' is a L.map object. An other problem which is associated with it is that I can not get options.startPosition and options.endPosition. I need this to create a distinction between a long tap for panning the map and one to place a marker. Does anyone know a solution to this?
There is actualle a really neat implementation in Leaflet for this:
map.on('contextmenu', function(e){
.. do something ...
});
The problem is that it is also triggerd by clicking rightclick on desktop.
Edit: You can prevent it by checking if (event.button == 2) {...}
In Leaflet, is it possible to define a marker or polyline with {clickable:false}, so that a click is passed through to whatever lies beneath - be it the map or a clickable geometry object?
At the moment I solve this problem by making the marker/polyline clickable and passing the event onwards myself. But this leads to the mouse cursor always showing as the hand symbol. Ideally, the mouse cursor should look like the normal pointer or the hand, depending on whether what is beneath the marker/polyline is clickable.
This may not be the answer you are looking for, but you can use featureGroups to have all of your clickable polylines come to the front so that the actions are surfaced.
var lg_noclick = new L.FeatureGroup().addTo(map);
var lg_click = new L.FeatureGroup().addTo(map);
// Add lines
lg_click.bringToFront();
updated fiddle
Also if you can afford to know your lines before hand, correct ordering of when you add the lines it will work as well.
I know this is not ideal but it suited my situation just fine, so it might be good for you as well.
This hides the icon and brings it back after a second using mouseenter and mouseleave events:
$('.leaflet-marker-icon').mouseenter(function() {
$(this).hide();
});
$('.leaflet-marker-icon').mouseleave(function() {
$(this).delay(1000).show(0);
});