Allow to control facet labels

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

@@ -794,7 +794,7 @@ 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')),
-      keys = this.getFacetKeys()
+      keys = Object.keys(this.getFacetKeys())
 
     const knownValues = {}
 
@@ -830,6 +830,7 @@ L.U.Map.include({
       {
         handler: 'FacetSearch',
         choices: knownValues[current],
+        label: this.getFacetKeys()[current],
       },
     ])
     const builder = new L.U.FormBuilder(this, fields, {

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

@@ -569,7 +569,7 @@ L.U.Help = L.Class.extend({
   slugKey: L._('The name of the property to use as feature unique identifier.'),
   filterKey: L._('Comma separated list of properties to use when filtering features'),
   facetKey: L._(
-    'Comma separated list of properties to use for facet search'
+    'Comma separated list of properties to use for facet search (eg.: mykey,otherkey). To control label, add it after a | (eg.: mykey|My Key,otherkeyOther Key)'
   ),
   interactive: L._('If false, the polygon will act as a part of the underlying map.'),
   outlink: L._('Define link to open in a new window on polygon click.'),

umap/static/umap/js/umap.forms.js

@@ -686,14 +686,17 @@ L.FormBuilder.Switch = L.FormBuilder.CheckBox.extend({
 
 L.FormBuilder.FacetSearch = L.FormBuilder.Element.extend({
   build: function () {
-    this.container = L.DomUtil.create('div', 'property-container', this.parentNode)
+    this.container = L.DomUtil.create('div', 'umap-facet', this.parentNode)
-    this.headline = L.DomUtil.add('h5', '', this.container, this.name)
     this.ul = L.DomUtil.create('ul', '', this.container)
     const choices = this.options.choices
     choices.sort()
     choices.forEach((value) => this.buildLi(value))
   },
 
+  buildLabel: function () {
+      this.label = L.DomUtil.add('h5', '', this.parentNode, this.options.label);
+  },
+
   buildLi: function (value) {
     const property_li = L.DomUtil.create('li', '', this.ul),
       input = L.DomUtil.create('input', '', property_li),

umap/static/umap/js/umap.js

@@ -2104,7 +2104,11 @@ L.U.Map.include({
   },
 
   getFacetKeys: function () {
-    return (this.options.facetKey || '').split(',')
+    return (this.options.facetKey || '').split(',').reduce((acc, curr) => {
+      const els = curr.split("|")
+      acc[els[0]] = els[1] || els[0]
+      return acc
+    }, {})
   },
 
   getLayersBounds: function () {

umap/static/umap/map.css

@@ -853,9 +853,6 @@ a.add-datalayer:hover,
 .umap-browse-features .polygon .feature-color {
     background-position: -32px -16px;
 }
-.umap-facet-search .property-container:not(:first-child) {
-    margin-top: 14px;
-}
 .show-on-edit {
     display: none!important;
 }

umap/static/umap/test/DataLayer.js

@@ -403,7 +403,7 @@ describe('L.U.DataLayer', function () {
       assert.ok(qs('path[fill="DarkGoldenRod"]'))
     })
   })
-  describe('#advanced-filters()', function () {
+  describe('#facet-search()', function () {
     before(function () {
       this.server.respondWith(
         /\/datalayer\/63\/\?.*/,
@@ -413,7 +413,7 @@ describe('L.U.DataLayer', function () {
       this.map.createDataLayer(RESPONSES.datalayer63_GET._umap_options)
       this.server.respond()
     })
-    it('should show non browsable layer', function () {
+    it('should not impact non browsable layer', function () {
       assert.ok(qs('path[fill="SteelBlue"]'))
     })
     it('should allow advanced filter', function () {
@@ -430,8 +430,13 @@ describe('L.U.DataLayer', function () {
       assert.ok(qs('path[fill="SteelBlue"]'))
       happen.click(qs('input[data-value="name poly"]')) // Undo
     })
+    it('should allow to control facet label', function () {
+      this.map.options.facetKey = 'name|Nom'
+      this.map.openFacet()
+      assert.ok(qs('div.umap-facet-search h5'))
+      assert.equal(qs('div.umap-facet-search h5').textContent, 'Nom')
+    })
   })
-
   describe('#zoomEnd', function () {
     it('should honour the fromZoom option', function () {
       this.map.setZoom(6, {animate: false})
@@ -453,5 +458,4 @@ describe('L.U.DataLayer', function () {
       assert.ok(qs('path[fill="none"]'))
     })
   })
-
 })