Leaflet: Grouped layers and accordion menu - How to implement?

问题

I have a single geojson featurecollection. Each feature has a Subcategory property and a main Category property (ex. "Subcategory": "Brown regional airport", "Category": "Aviation")

I was able to group the subcategories into a main category by using the Leaflet.groupedlayercontrol Leaflet plugin.

Here's a live example: [demo link]

The problem is that in my real case scenario, I have a lot of categories and subcategories and this is way too many layers to show at once in the layer control. Thus, I need some sort of accordion/drop down menu to display the subcategories for only one category at a time like shown in the below graphic:

Does anyone have any advice on a way to approach my issue? Something like this would be ideal:

Would I be injecting an accordion template into the DOM using Javascript? Newbie here, so looking for tips and suggestions. Thanks!

回答1:

The problem is that the plugin does not provide a way to alter the template of the created html.

So i have resorted to altering the DOM dynamically through jQuery, and using CSS for the tricks.

So adding

$('.leaflet-control-layers-group-label').each(function(index){
    var self = $(this),
        trigger = $('<label>', {
        html: '▼',
        class:'trigger',
        for: 'dropdown-trigger-' + index
      }).insertBefore(self),
      radio = $('<input>', {
        type : 'radio',
        class: 'trigger-radio',
        name : 'dropdown-control',
        id: 'dropdown-trigger-' + index
      }).insertBefore(trigger);
});

after adding the layer will add a label/radio combo for each group which will control (through the following CSS) the display/hide of the subcategories.

.leaflet-control-layers .leaflet-control-layers-group-label{
  padding-left:20px;
  display:block
}
.leaflet-control-layers label{
  padding-left:40px;
  padding-right:10px;
  display:none;
}
.leaflet-control-layers label.trigger{
  position:absolute;
  left:0;
  padding:0;
  margin:0;
  display:block;
  cursor:pointer;
}
.leaflet-control-layers .trigger-radio{display:none;}
.leaflet-control-layers .trigger-radio:checked ~ label{display:block;}

Demo at https://jsfiddle.net/gaby/La77L8L9/2/

note. it currently uses hidden radio buttons to open/close the subcategories (so only only one can be open at a time and it cannot close until another is selected). Changing the type : 'radio', line to type : 'checkbox', will allow for each category to be opened/closed on its own.

回答2:

I suggest wrapping those labels inside a ul that is by default with display: none. Then you can write some javascript and make that ul visible based user's selection.

If you provide a codepen/jsfiddle for me I'd be more than happy to help.

Meanwhile you can use my image to see what I mean.

And the JS will be similar with (this is very rudimental):

if ($('.leaflet-control-layers-group-selector').is(":checked")) {
  // Match the closest ul and call #show
} else {
  // Match the closest ul and call #hide
}

Changing then the CSS with arrows and everything will be fairly easy.

来源：https://stackoverflow.com/questions/34119875/leaflet-grouped-layers-and-accordion-menu-how-to-implement

标签

javascript

user-interface

leaflet

mapbox