Adding feature to make individual groups collapsable #46

ForgottenLords · 2017-03-16T22:36:48Z

I have found that while using this library, I sometimes end up with an extremely large list of layers that can be added to a (sometimes quite small) map. The best solution I have found for dealing with this is to make each group of layers individually collapsible, allowing a user to quickly and easily locate the layers they are interested in without being overwhelmed by the full list of layers.

I have added the following options:
groupsCollapsable: defaults to False. If True, all groups are collapsible and start off collapsed.
groupsCollapsedClass, groupsExpandedClass: The css class(es) used to control the toggle icon for each group. Defaults to showing a simple + or - icon, but works with custom classes such as "glyphicon glyphicon-chevron-right" to use bootstrap glyphicons.

Example of usage with Bootstrap Glyphicons (Not dependent upon bootstrap)

I discovered the need for this independently from Issue #20 which I discovered after making this pull request.

Added a config option "groupsCollapsable" which if set to true, will make each group header individually collapsable. This is useful when dealing with either small map elements, or a larger number of layers within the groups. Also added two supporting config settings: "groupsCollapseClass" and "groupsExpandClass" which control the css styles used for the toggle indicators, allowing users to override the default +/- indicators. Setting one to "glyphicon glyphicon-chevron-right" will use the glyphicon provided with bootstrap for example.

Prevented event propagation from the label to the checkbox when group checkboxes are enabled. Cleaned up some code.

this.layers is an undefined property of the GroupedLayerControl object, replaced with this._layers. Modified method of deleting an array item to correctly remove the deleted index so that when you iterate over the _layers array in the .update() function, there are no undefined/empty slots in the array that will break the _addItem function.

ForgottenLords · 2017-03-17T18:52:43Z

src/leaflet.groupedlayercontrol.js

@@ -66,7 +69,7 @@ L.Control.GroupedLayers = L.Control.extend({
    var id = L.Util.stamp(layer);
    var _layer = this._getLayer(id);
    if (_layer) {
-      delete this.layers[this.layers.indexOf(_layer)];
+      this._layers.splice(this._layers.indexOf(_layer), 1);


This is a bug fix independent from my collapsable groups feature.

Nice catch! Someone else opened a PR for this which I just merged (#50). Can you take this commit out of your branch?

nadnerb33 · 2017-07-25T12:44:09Z

Thanks for this, works great and also fixes the error I had where some layers can't be removed from the Layer Control.

ismyrnow

Thanks for this feature. Two main things:

Would this require changes for anyone already using the library who upgrades to this version? If so, I'll want to publish this as a new major version. Not a big deal to do so, just important for me to know about when publishing to npm.
Can you update the docs (readme) and add an example (or update the examples) for how to use this? A new example with the glyphicons class thing you worked out would be really helpful for some people.

Overall, I think a lot of people would benefit from this.

ismyrnow · 2017-10-05T13:47:31Z

src/leaflet.groupedlayercontrol.js

@@ -66,7 +69,7 @@ L.Control.GroupedLayers = L.Control.extend({
    var id = L.Util.stamp(layer);
    var _layer = this._getLayer(id);
    if (_layer) {
-      delete this.layers[this.layers.indexOf(_layer)];
+      this._layers.splice(this._layers.indexOf(_layer), 1);


Nice catch! Someone else opened a PR for this which I just merged (#50). Can you take this commit out of your branch?

ismyrnow · 2017-10-05T13:52:29Z

src/leaflet.groupedlayercontrol.css

+.leaflet-control-layers-group.group-collapsable.collapsed .leaflet-control-layers-group-collapse,
+.leaflet-control-layers-group.group-collapsable:not(.collapsed) .leaflet-control-layers-group-expand,
+.leaflet-control-layers-group.group-collapsable.collapsed label:not(.leaflet-control-layers-group-label){
+    display: none;


Can you switch to two-space tabs please? I know the repo doesn't have anything fancy to check for that (and might even have some inconsistencies due to other PRs 🙈 ), so try to match the existing indentation whenever possible.

I designed the improvements to be disabled by default so that it doesn't cause problems with older configurations, so upgrading should have no problems.

I will try finding time in the next few days to revisit the code and make the requested changes.

…dlayercontrol into gh-pages

Changed from four-space indenting to two-space to conform to upstream style

Added documentation to the readme, and two examples of collapsability.

ForgottenLords · 2017-10-30T23:26:39Z

I have finished updating the pull request.

The new features added are entirely optional and no existing implementations will be impacted.
I have added a section to the readme explaining how to enable the feature if they desire
I have provided 2 examples, a basic and advanced version to show how to use bootstrap classes to override the default behavior
I have fixed the indenting to conform with your preferred two-space method
I have not removed the fix for removeLayer() as you requested because the current implementation/previous fix is still incorrect as I explain in a separate review.

If you require any further changes please let me know and I should be able to make it happen.

ForgottenLords

The fix from #50 is incorrect, as they use the delete keyword to remove an item from the _layers array, this will result in the array looking like [{object}, {object}, undefined, {object}] and when iterating through it elsewhere within your code (like in _update), it will break when it expects to find an object and instead gets undefined.

The splice method should be used instead.

ismyrnow#46 squashed + lint fixed Collapsable Groups. Added a config option "groupsCollapsable" which if set to true, will make each group header individually collapsable. This is useful when dealing with either small map elements, or a larger number of layers within the groups. Also added two supporting config settings: "groupsCollapseClass" and "groupsExpandClass" which control the css styles used for the toggle indicators, allowing users to override the default +/- indicators. Setting one to "glyphicon glyphicon-chevron-right" will use the glyphicon provided with bootstrap for example.

JohnnyMoonlight · 2022-03-31T09:46:04Z

Can we make this pull request a thing? If help is needed, please give me a heads up - i would like to use such a feature!

ForgottenLords added 4 commits March 16, 2017 16:08

Added option to enable collapsing layer groups

af52090

Fixed interaction between collapsable groups and group checkboxes

e29fa73

Prevented event propagation from the label to the checkbox when group checkboxes are enabled. Cleaned up some code.

ForgottenLords commented Mar 17, 2017

View reviewed changes

ForgottenLords mentioned this pull request May 13, 2017

removeLayer method throws an error #49

Open

ismyrnow requested changes Oct 5, 2017

View reviewed changes

ForgottenLords added 2 commits October 12, 2017 15:51

Merge branch 'gh-pages' of https://github.com/ismyrnow/leaflet-groupe…

c788ee6

…dlayercontrol into gh-pages

two-space indenting

76f8766

Changed from four-space indenting to two-space to conform to upstream style

This was referenced Oct 21, 2017

fix map controls for mission and contacts layers on events page MSFREACH/msf-reach#130

Closed

fix for removeLayer #57

Open

Add Documentation and Examples

60db308

Added documentation to the readme, and two examples of collapsability.

ForgottenLords commented Oct 30, 2017

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adding feature to make individual groups collapsable #46

Adding feature to make individual groups collapsable #46

ForgottenLords commented Mar 16, 2017 •

edited

Loading

ForgottenLords Mar 17, 2017

ismyrnow Oct 5, 2017

nadnerb33 commented Jul 25, 2017

ismyrnow left a comment

ismyrnow Oct 5, 2017

ismyrnow Oct 5, 2017

ForgottenLords Oct 12, 2017 •

edited

Loading

ForgottenLords commented Oct 30, 2017 •

edited

Loading

ForgottenLords left a comment •

edited

Loading

JohnnyMoonlight commented Mar 31, 2022

Adding feature to make individual groups collapsable #46

Are you sure you want to change the base?

Adding feature to make individual groups collapsable #46

Conversation

ForgottenLords commented Mar 16, 2017 • edited Loading

ForgottenLords Mar 17, 2017

Choose a reason for hiding this comment

ismyrnow Oct 5, 2017

Choose a reason for hiding this comment

nadnerb33 commented Jul 25, 2017

ismyrnow left a comment

Choose a reason for hiding this comment

ismyrnow Oct 5, 2017

Choose a reason for hiding this comment

ismyrnow Oct 5, 2017

Choose a reason for hiding this comment

ForgottenLords Oct 12, 2017 • edited Loading

Choose a reason for hiding this comment

ForgottenLords commented Oct 30, 2017 • edited Loading

ForgottenLords left a comment • edited Loading

Choose a reason for hiding this comment

JohnnyMoonlight commented Mar 31, 2022

ForgottenLords commented Mar 16, 2017 •

edited

Loading

ForgottenLords Oct 12, 2017 •

edited

Loading

ForgottenLords commented Oct 30, 2017 •

edited

Loading

ForgottenLords left a comment •

edited

Loading