Leaftlet: Adding feature overlay to control, dynamically - leaflet

I need to add a FeatureGroup to the overlays list. I do add some overlays when instantiating the Leaflet map, but I now need to append a FeatureGroup dynamically, ie. based on some run time conditions.
Can someone please help with appending the leaflet control layers? I simply cannot figure whether that's even possible at all. I can add the new layer to the map, but not to the overlays control section. I have also managed to add this new layer dynamically to a new control, but I need to append it to the existing control.
As a side note, I am trying to use Polymer on top of Leaflet map.

You can add new layers with control.addOverlay(layer, name).
And removing it from the control with control.removeLayer(layer)

Related

leaflet.js - Questions about polyline

I have some questions about leaflet's polyline and they are as follows
Is there a way when instantiating the polyline (L.polyline) to dictate that it should not show by default on the map? I know that I can use .addTo([map]) and .remove() but is there a way to specify as part of the options?
What is the best practice to hide/show polylines that are used to indicate a path between markers (L.marker)? I know that I can add the markers to a layer group (L.layerGroup). I know that when creating the polyline, I can use the same lat/lng for each of the markers indicating the path. I know that I can show/hide each one of those individually (using L.Control.Layers and passing in the layer groups in as overlay maps and using that control to show/hide the markers and then, again, using the addTo() and .remove() for the polylines) but what I'm hoping to get help with is to make it show that the polylines show/hide when the layer group is visible/not visible and also show/hide them using an external control. For the former case, I've tried using feature groups (L.featureGroup) but I could not get it to work. For that latter case am I limited to .addTo() and .remove()?
thnx,
Christoph

Stop click propagation on a custom div within a leaflet map

I have a custom div (with settings) within a map. I would like click event not to propagate to map when a user clicks on the div. How could one achieve such behavior?
Leaflet version 1.0.
See the documentation for L.DomEvent.stopPropagation().
For anyone else coming here from a search engine, if you are trying to prevent clicks from a circle or other interactive layer from being handled by the underlying object (other circle or the map itself) you could also create the layer passing the option bubblingMouseEvents: false
Documentation: http://leafletjs.com/reference-1.2.0.html#interactive-layer

Mapbox: How to collapse layer control ON CLICK instead of hover?

For the default mapbox layers toggle icon, how do you collapse the control on mouse click rather than hover? ANd then, how would you uncollapse on another click?
Thanks
Looking at the code for the layers control might be helpful.
You want to instantiate the layers control with the collapsed option set to false, then attach event handlers to its container, calling the (private) methods _collapse and _expand as needed.
Also, it should be possible to make a small Leaflet plugin to make a custom layers control with expand-on-click behaviour (and thus prevent calls to "private" methods from outside).

Leaflet enable all overlays by default

I'm using the leaflet.timedimension plugin to animate GPX trails and I would like to show multiple GPX paths at once with the possibility to deselect one or the other.
This works, but as only the first overlay in the leaflet control is enabled by default the user has to explicitly include the other GPX trails which I would like to avoid.
I've now tried to hack a bit around via:
$(".leaflet-control-layers-overlays label input").prop('checked', true)
and this works partially: all options are selected but still only the first GPX trail is shown. When doing
$(".leaflet-control-layers-overlays label input").trigger('click');
then only one trail is clicked depending on where I put it ('on('ready', function () {...}')
What is the proper way in leaflet to trigger an overlay click?
I just forgot to add both layers to the map:
geoJson1.addTo(map);
geoJson2.addTo(map);

Leaflet Control.Layers wrong checked state

I'm using LayerGroups and I want to be able to show/hide those groups with a layers control
The several LayerGroups appear on the map but the associated checkbox for each one is unchecked by default, if I click once in the checkbox it behaves properly.
Here's the project
How can I do to make the checkboxes checked by default?
Silly mistake, I just needed to add the layergroup to map.layers when instantiate the map and it works as expected.