First naive version of datalayer grouping

umap/static/umap/js/umap.controls.js

@@ -514,12 +514,45 @@ L.U.DataLayersControl = L.Control.extend({
   update: function () {
     if (this._datalayers_container && this._map) {
       this._datalayers_container.innerHTML = ''
-      this._map.eachDataLayerReverse(function (datalayer) {
-        this.addDataLayer(this._datalayers_container, datalayer)
-      }, this)
+      const hasGroups = !!Object.keys(this._map.groups_index).length
+      L.DomUtil.classIf(this._datalayers_container, 'grouped', hasGroups)
+      if (hasGroups) this.renderGroupedList()
+      else this.renderFlatList()
     }
   },
 
+  renderFlatList: function () {
+    this._map.eachDataLayerReverse(function (datalayer) {
+      this.addDataLayer(this._datalayers_container, datalayer)
+    }, this)
+  },
+
+  renderGroupedList: function () {
+    const groups = Object.keys(this._map.groups_index).sort(L.Util.naturalSort)
+    for (let group of groups) {
+      let ids = this._map.groups_index[group]
+      this.addGroupHeader(group, ids)
+      for (let id of ids) {
+        this.addDataLayer(this._datalayers_container, this._map.datalayers[id])
+      }
+    }
+  },
+
+  addGroupHeader: function (group, ids) {
+    const header = L.DomUtil.add('h4', 'layer-group', this._datalayers_container, group)
+    const toggle = L.DomUtil.create('i', 'group-toggle', header)
+    L.DomEvent.on(toggle, 'click', () => {
+      let show, datalayer
+      for (let id of ids) {
+        datalayer = this._map.datalayers[id]
+        // Show/hide all according to first datalayer
+        if (typeof(show) === 'undefined') show = !datalayer.isVisible()
+        if (show) datalayer.show()
+        else datalayer.hide()
+      }
+    })
+  },
+
   expand: function () {
     L.DomUtil.addClass(this._container, 'expanded')
   },
@@ -676,7 +709,6 @@ L.U.DataLayer.addInitHook(function () {
 })
 
 L.U.Map.include({
-
   _openFacet: function () {
     const container = L.DomUtil.create('div', 'umap-facet-search'),
       title = L.DomUtil.add('h3', 'umap-filter-title', container, L._('Facet search')),

umap/static/umap/js/umap.core.js

@@ -198,6 +198,16 @@ L.Util.greedyTemplate = (str, data, ignore) => {
   )
 }
 
+L.Util.naturalSort = (a, b) => {
+  return a
+    .toString()
+    .toLowerCase()
+    .localeCompare(b.toString().toLowerCase(), L.lang || 'en', {
+      sensitivity: 'base',
+      numeric: true,
+    })
+}
+
 L.Util.sortFeatures = (features, sortKey) => {
   const sortKeys = (sortKey || 'name').split(',')
 
@@ -216,13 +226,7 @@ L.Util.sortFeatures = (features, sortKey) => {
     } else if (!valB) {
       score = 1
     } else {
-      score = valA
-        .toString()
-        .toLowerCase()
-        .localeCompare(valB.toString().toLowerCase(), L.lang || 'en', {
-          sensitivity: 'base',
-          numeric: true,
-        })
+      score = L.Util.naturalSort(valA, valB)
     }
     if (score === 0 && sortKeys[i + 1]) return sort(a, b, i + 1)
     return score * reverse

umap/static/umap/js/umap.js

@@ -158,6 +158,7 @@ L.U.Map.include({
     // Global storage for retrieving datalayers and features
     this.datalayers = {}
     this.datalayers_index = []
+    this.groups_index = {}
     this.dirty_datalayers = []
     this.features_index = {}
     this.facets = {}
@@ -438,16 +439,29 @@ L.U.Map.include({
 
   indexDatalayers: function () {
     const panes = this.getPane('overlayPane')
-    let pane
     this.datalayers_index = []
-    for (let i = 0; i < panes.children.length; i++) {
+    for (let i = 0, pane, datalayer; i < panes.children.length; i++) {
       pane = panes.children[i]
       if (!pane.dataset || !pane.dataset.id) continue
-      this.datalayers_index.push(this.datalayers[pane.dataset.id])
+      datalayer = this.datalayers[pane.dataset.id]
+      this.datalayers_index.push(datalayer)
     }
+    this.indexGroups()
     this.updateDatalayersControl()
   },
 
+  indexGroups: function () {
+    this.groups_index = {}
+    this.eachDataLayer(this.indexGroup)
+  },
+
+  indexGroup: function (datalayer) {
+      const group = datalayer.options.group
+      if (!group) return
+      this.groups_index[group] = this.groups_index[group] || []
+      this.groups_index[group].push(L.stamp(datalayer))
+  },
+
   ensurePanesOrder: function () {
     this.eachDataLayer((datalayer) => {
       datalayer.bringToTop()
@@ -1014,14 +1028,14 @@ L.U.Map.include({
 
   eachDataLayer: function (method, context) {
     for (let i = 0; i < this.datalayers_index.length; i++) {
-      method.call(context, this.datalayers_index[i])
+      method.call(context || this, this.datalayers_index[i])
     }
   },
 
   eachDataLayerReverse: function (method, context, filter) {
     for (let i = this.datalayers_index.length - 1; i >= 0; i--) {
       if (filter && !filter.call(context, this.datalayers_index[i])) continue
-      method.call(context, this.datalayers_index[i])
+      method.call(context || this, this.datalayers_index[i])
     }
   },
 

umap/static/umap/js/umap.layer.js

@@ -487,6 +487,7 @@ L.U.DataLayer = L.Evented.extend({
       this.map.datalayers[id] = this
       if (L.Util.indexOf(this.map.datalayers_index, this) === -1)
         this.map.datalayers_index.push(this)
+      this.map.indexGroup(this)
     }
     this.map.updateDatalayersControl()
   },
@@ -853,6 +854,7 @@ L.U.DataLayer = L.Evented.extend({
       metadataFields = [
         'options.name',
         'options.description',
+        ['options.group', { handler: 'BlurInput', label: L._('Layer group'), datalist: Object.keys(this.map.groups_index)}],
         ['options.type', { handler: 'LayerTypeChooser', label: L._('Type of layer') }],
         ['options.displayOnLoad', { label: L._('Display on load'), handler: 'Switch' }],
         [
@@ -867,6 +869,7 @@ L.U.DataLayer = L.Evented.extend({
     const title = L.DomUtil.add('h3', '', container, L._('Layer properties'))
     let builder = new L.U.FormBuilder(this, metadataFields, {
       callback: function (e) {
+        this.map.indexGroups()
         this.map.updateDatalayersControl()
         if (e.helper.field === 'options.type') {
           this.resetLayer()

umap/static/umap/map.css

@@ -694,6 +694,7 @@ a.map-name:after {
     max-height: 15em;
     overflow-y: auto;
 }
+.layer-group i,
 .search-result-tools i,
 .leaflet-inplace-toolbar a,
 .umap-browse-features i,
@@ -717,6 +718,12 @@ a.map-name:after {
     margin-right: 5px;
     cursor: move;
 }
+.umap-browse-datalayers.grouped li {
+    padding-left: 10px;
+}
+.umap-browse-datalayers.grouped h4 {
+    margin-bottom: 0;
+}
 .leaflet-inplace-toolbar a {
     background-image: url('./img/16-white.svg');
     background-color: #323737!important;
@@ -730,6 +737,7 @@ a.map-name:after {
 .leaflet-control-browse .umap-browse-datalayers .off i {
     cursor: inherit;
 }
+.group-toggle,
 .layer-toggle {
     background-position: -49px -31px;
 }