Toggling the visibility of various items on leaflet map

[Silver]

I'm working on a custom app that enables the user to toggle the visibility of layers, features (waypoints, layergrops, areas, markers etc) but I don't think the documentation has any word on how to show/hide items that are on the map. Setting the z-index on featuregroup members doesn't work and setting the opacity to 0 hides the marker visually but it's still clickable when hovering over it.

The functionality that I currently have  is built so that an item is removed/added back to the map with each toggle but this complicates things a bit. Is there really no other way to toggle items visibility or am I missing something?

[Luc]

Please take a look on event childs:
e.layer, e.feature, e.latlng...
Then,
map.on('click', function(e){ var marker = new L.marker(e.latlng).addTo(map); });

Ps: leaflet is good for quick mapping. Better way building application using Openlayers.

Le 18 décembre 2019 09:36:02 GMT+01:00, Silver <silve...@gmail.com> a écrit :

I'm working on a custom app that enables the user to toggle the visibility of layers, features (waypoints, layergrops, areas, markers etc) but I don't think the documentation has any word on how to show/hide items that are on the map. Setting the z-index on featuregroup members doesn't work and setting the opacity to 0 hides the marker visually but it's still clickable when hovering over it.

The functionality that I currently have  is built so that an item is removed/added back to the map with each toggle but this complicates things a bit. Is there really no other way to toggle items visibility or am I missing something?

--
Envoyé de mon appareil Android avec Courriel K-9 Mail. Veuillez excuser ma brièveté.

[Edwin Corrigan]

I think you can achieve this by:

- Adding a leaflet layer control, where you can tick and untick layers for visibility, tutorial here - https://leafletjs.com/examples/layers-control/

Then if you have custom layers, i.e. want to refire a query when box is ticked, need to destroy a layer on remove etc:

- Also with the layer control, you can use the 'overlayadd' and 'overlayremove' to identify when these layers have been ticked/unticked - https://leafletjs.com/reference-1.6.0.html#map-overlayadd 

--

---
You received this message because you are subscribed to the Google Groups "Leaflet" group.
To unsubscribe from this group and stop receiving emails from it, send an email to leaflet-js+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/leaflet-js/168B4188-D596-40D0-879F-2BC2E976C445%40gmail.com.

--

Edwin Corrigan Siren A Unit 3, GTC, Mervue Business Park, Galway, H91 CR20, Ireland P +353 (0)91 704 885  E edwin.c...@siren.io  W www.siren.io

[Silver]

Thanks all for responding, I am familiar with the concept of layer control and events, but my question was how items can be hidden/made visible without *removing* them from the map. Removing stuff from the map will mean that I need to keep local copies of all items in case I want to add them back.

Sv,

--

[Luc]

Every feature has an id. Is it possible to deal with jquery functions?
You can use arrays to initialize variables dynamically.

[Silver]

Luc,

Maybe, but it still doesn't answer my question. It seems that all items are under the L instance property _layers, so they can be easily removed and added but in order to add something back a local copy of what was removed needs to be kept. It would be so much easier if instead of calling remove() I could call hide() or something. Although, since each layer needs it's own settings and I'm using vue store, then I would need a local copy of everything anyway. I was just wondering whether toggling the visibility is really as difficult as it seems.

To view this discussion on the web visit https://groups.google.com/d/msgid/leaflet-js/B9D1DC5C-B19D-4932-BBAA-8E6EBC6C27AC%40gmail.com.

[Pat Keller]

I don't think there is a way to toggle the visibility. I think your best option would be to use LayerGroups which are then added/removed from the map as you need.

On Wednesday, December 18, 2019 at 8:17:37 AM UTC-6, Silver wrote:

Luc,

Maybe, but it still doesn't answer my question. It seems that all items are under the L instance property _layers, so they can be easily removed and added but in order to add something back a local copy of what was removed needs to be kept. It would be so much easier if instead of calling remove() I could call hide() or something. Although, since each layer needs it's own settings and I'm using vue store, then I would need a local copy of everything anyway. I was just wondering whether toggling the visibility is really as difficult as it seems.

On Wed, 18 Dec 2019 at 13:49, Luc <luccle...@gmail.com> wrote:

Every feature has an id. Is it possible to deal with jquery functions?
You can use arrays to initialize variables dynamically.

Le 18 décembre 2019 12:44:00 GMT+01:00, Silver <silve...@gmail.com> a écrit :

Thanks all for responding, I am familiar with the concept of layer control and events, but my question was how items can be hidden/made visible without *removing* them from the map. Removing stuff from the map will mean that I need to keep local copies of all items in case I want to add them back.

Sv,

On Wed, 18 Dec 2019 at 11:07, Luc <luccle...@gmail.com> wrote:

Please take a look on event childs:
e.layer, e.feature, e.latlng...
Then,
map.on('click', function(e){ var marker = new L.marker(e.latlng).addTo(map); });

Ps: leaflet is good for quick mapping. Better way building application using Openlayers.

Le 18 décembre 2019 09:36:02 GMT+01:00, Silver <silve...@gmail.com> a écrit :

I'm working on a custom app that enables the user to toggle the visibility of layers, features (waypoints, layergrops, areas, markers etc) but I don't think the documentation has any word on how to show/hide items that are on the map. Setting the z-index on featuregroup members doesn't work and setting the opacity to 0 hides the marker visually but it's still clickable when hovering over it.

The functionality that I currently have  is built so that an item is removed/added back to the map with each toggle but this complicates things a bit. Is there really no other way to toggle items visibility or am I missing something?

--
Envoyé de mon appareil Android avec Courriel K-9 Mail. Veuillez excuser ma brièveté.

--

---
You received this message because you are subscribed to the Google Groups "Leaflet" group.

To unsubscribe from this group and stop receiving emails from it, send an email to leafl...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/leaflet-js/168B4188-D596-40D0-879F-2BC2E976C445%40gmail.com.

--
Envoyé de mon appareil Android avec Courriel K-9 Mail. Veuillez excuser ma brièveté.

--

---
You received this message because you are subscribed to the Google Groups "Leaflet" group.

To unsubscribe from this group and stop receiving emails from it, send an email to leafl...@googlegroups.com.

[Silver]

Thanks for confirming that, thought as much.

Sv.

To unsubscribe from this group and stop receiving emails from it, send an email to leaflet-js+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/leaflet-js/cf24d02f-fa73-4776-8760-371cb290e400%40googlegroups.com.