ignaciofagian/l.layertreecontrol

A leaflet plugin to group multiple types of layers in a tree structure

L.LayerTreeControl

A leaflet plugin to group multiple types of layers in a tree structure.

Demo

• https://ignaciofagian.github.io/L.LayerTreeControl/example

Usage Example

var esriSampleUsa = L.esri.dynamicMapLayer({
  url: 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer',
  opacity: 0.7,
  layers: [],
});

var wmsGlobalPopulation = L.tileLayer.wms('https://sedac.ciesin.columbia.edu/geoserver/wms?', {
  layers: 'gpw-v3:gpw-v3-population-density_2000',
  transparent: true,
  format: 'image/png',
});

// define tree structure
var layers = [
  {
    layer: esriSampleUsa,
    name: 'Sample USA (esri)',
    type: 'esriDynamic',
  },		
  {
    type: 'leaflet',
    name: 'Custom tree',
    children: [
      {
        name: 'Level 1',
        children: [
          {
            name: 'Global Population',
            layer: wmsGlobalPopulation,
          },
        ],
      },
    ],
  },
];

var layerTreeCtrl = new L.Control.LayerTreeControl(layers, {
  position: 'topright',
});

map.addControl(layerTreeCtrl);

l.layertreecontrol's Issues

Preview order of layers

Hi, nice work..

It would be nice to be able to change the display order of dynamically loaded and marked layers. Optionally, changing the order will be an option.

Thnx.

Enabling / Disabling over top level checkbox is inconsistent

Enabling the top level checkbox do not enable each sub-level / layer but disables it.

Layers in sub-tree do not appear.

I am trying to add layers as children (geoJSON layers), but they do not appear when the boxes are checked. (They do appear if part of the top layer). That is, this works:

{
  type: 'leaflet',
  name: 'Boundaries',
  layer: placeGeom,
},
{
  type: 'leaflet',
  name: 'Field',
  layer: L.geoJSON( ... ),
}

but this does not:

{
  type: 'leaflet',
  name: 'Boundaries',
  layer: placeGeom,
},
{
  type: 'leaflet',
  name: 'Fields',
  children: [
    {
      type: 'leaflet',
      name: 'Field',
      layer: L.geoJSON( ... ),
    },
  ],
},

Am I missing something obvious?

set checked for default

possible layers have checked by default?

Get all layers in tree from Geoserver Group Layers

This is by far the best leaflet Layer tree control I have found online. Kudos to you!
I have been playing with it and I am quiet happy with it. Not actually any issue but would be good to have following options-

1. A Method to list all layers from Geoserver's Layer Group(WMS) in the tree. I noticed that when the Layer Group mode is 'single', it gets all the children's style and draws legend.. that is cool! For 'leaflet' type it is getting all 'layerObj.legend'. It would be nice to have 'layerObj.Layer' in 'leaflet' type just like what you have for 'esriDynamic' type. OR a completely new type for geoserver.

2. Option - default 'expand all parents'/'collapse all parents'.

3. Option - default 'check/uncheck all parent nodes'

I would appreciate any suggestions to achieve above mentioned points using your extension.

Thank you!

Possible to add a legend for geojson layers?

Very nice plugin. Is it possible to add legend images for leaflet geojson layers? I load a geojson and would like to add a legend for the layer.

While clicking on a top level, map is zooming

You can prevent zooming with L.DomEvent.disableClickPropagation(elem)