leaflet.js - Questions about polyline - leaflet

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

Related

Leaftlet: Adding feature overlay to control, dynamically

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)

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

Opening a popup on layer option click in leafletjs

I will be trying to show a set of options using the layerGroup functionality to filter out the markers. I need to show a popup when an option is selected from a layer which will prompt the user to enter a number based on which i will be showing the markers. Is there a possible way?
In the above sketch, there' s a sample filter at the top right which i intend to show using the layers but the thing is on selecting the 'Location' option i have to show a popup that will prompt the user to enter a location number and on that basis the markers should be placed on the map.
I guess there would be multiple ways of achieving this, depending on what behaviour exactly you want to get.
E.g. you could use a "dummy" layer (with name "Location" probably?), that you can add in the Layers Control (I guess that is the "sample filter at the top"?). Then listen for this dummy layer for being added to the map, and launch your modal ("popup") at this time. Then when the user enters the necessary information, you can programmatically add the corresponding markers to the map.
If you need further help, please add more details on what behaviour you try to get, or start your implementation and post new questions, so that you already have a start of what you are trying to achieve and people can elaborate on it.

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);

How to label pushpins in bing maps?

Can any one tell me how to label pushpins in Bing maps for points of int interest? AM able to place multiple pushpins but unable to add labels to them dynamically.
Are you using the v7 maps control and APIs?
Check out the Infobox class and adding Infobox entities - these allow you to add a custom HTML block that can contain your label info. See http://msdn.microsoft.com/en-us/library/gg675208.aspx.
Alternatively with a pushpin you can specify the text field in the PushpinOptions object (http://msdn.microsoft.com/en-us/library/gg427629.aspx) when creating a pushpin.
pin.setOptions({text: "label"});
If you're using 7, try this little hack:
pinLayer.push(pinX);
pin1.cm1001_er_etr.dom.setAttribute('title', 'Push Pin Title');
This is an unpublished DOM. And keep in mind if MS decides to change it, you'll have to find a different solution.