hide and show a polyline in leaflet?

Question

I'm using leaflet for show raw itinerary to go to some markers. I'm showing my itinerary with a leaflet polyline. But I would like to be able to

How to hide and show a polyline in leaflet ?

I can do this :

$('.leaflet-overlay-pane').hide();

and

$('.leaflet-overlay-pane').show();

But this will show and hide all my polyline. I would like to be able to hide and show them separately.

Thanks.

Answer 1

If you have a reference to the polyline

var polyline = L.polyline(...);

Then you can use

map.addLayer(polyline);//For show
map.removeLayer(polyline);// For hide

at the moment I think there is no native method to only hide/show, maybe in the 0.7 version

Other solution is to access to the object container, in a old commet from the maintainer

I don't think there's an easy solution, for tile layers at least. :( I'll try to handle this sooner.
For vectors, you can change path._container.style.display, and for markers - marker._image.style.display and marker._shadow.style.display.

Answer 2

Removing and adding objects on the map will also change the order of the layers (if you have more than one in your legend). The added objects will always be on top and not in the original order. I use setLatLng (markers) and setLatLngs (polylines and polygons) to do a quick trick without changing the order. Just change the latLngs to e.g.(1000,1000) outside your view.

var myLatLng0 = L.latLng(1000,1000);

var myObject = L.marker(myLatLng,{....}); myObject.latlng = myLatLng;

or var myObject = L.polygon(myPath,{....}); myObject.path = myPath;

Hide / Show marker:

myObject.setLatLng(myLatLng0); myObject.setLatLng(myObject.latlng);

Hide / Show polyline or polygon:

myObject.setLatLngs(myLatLng0); myObject.setLatLngs(myObject.path);

Note: hiding polylines and polygons will also work with setLatLngs(false). setLatLng(false) for markers will give an error.