From 56ce9ae22c59e71dd7fd17835d51fbbe686bd3bd Mon Sep 17 00:00:00 2001
From: David Larlet <david@larlet.fr>
Date: Mon, 22 May 2023 10:13:45 -0400
Subject: [PATCH 1/2] Apply Lebab for let/const conversions

As far as I understand, it default to `let` in these cases because the tool cannot figure out if a `const` is possible. It has to be checked manually:

```
./node_modules/lebab/bin/index.js --replace "umap/static/umap/js/*.js" --transform let
umap/static/umap/js/umap.xhr.js:
228:  warning  Unable to transform var  (let)
umap/static/umap/js/umap.ui.js:
83:  warning  Unable to transform var  (let)
umap/static/umap/js/umap.slideshow.js:
15:  warning  Unable to transform var  (let)
83:  warning  Unable to transform var  (let)
umap/static/umap/js/umap.popup.js:
100:  warning  Unable to transform var  (let)
umap/static/umap/js/umap.permissions.js:
14:  warning  Unable to transform var  (let)
umap/static/umap/js/umap.layer.js:
195:  warning  Unable to transform var  (let)
436:  warning  Unable to transform var  (let)
568:  warning  Unable to transform var  (let)
584:  warning  Unable to transform var  (let)
989:  warning  Unable to transform var  (let)
1088:  warning  Unable to transform var  (let)
1098:  warning  Unable to transform var  (let)
umap/static/umap/js/umap.js:
124:  warning  Unable to transform var  (let)
223:  warning  Unable to transform var  (let)
343:  warning  Unable to transform var  (let)
376:  warning  Unable to transform var  (let)
406:  warning  Unable to transform var  (let)
849:  warning  Unable to transform var  (let)
732:  warning  Unable to transform var  (let)
948:  warning  Unable to transform var  (let)
959:  warning  Unable to transform var  (let)
878:  warning  Unable to transform var  (let)
1085:  warning  Unable to transform var  (let)
umap/static/umap/js/umap.icon.js:
145:  warning  Unable to transform var  (let)
184:  warning  Unable to transform var  (let)
umap/static/umap/js/umap.forms.js:
453:  warning  Unable to transform var  (let)
umap/static/umap/js/umap.features.js:
15:  warning  Unable to transform var  (let)
101:  warning  Unable to transform var  (let)
143:  warning  Unable to transform var  (let)
373:  warning  Unable to transform var  (let)
429:  warning  Unable to transform var  (let)
890:  warning  Unable to transform var  (let)
949:  warning  Unable to transform var  (let)
umap/static/umap/js/umap.core.js:
149:  warning  Unable to transform var  (let)
175:  warning  Unable to transform var  (let)
umap/static/umap/js/umap.controls.js:
665:  warning  Unable to transform var  (let)
876:  warning  Unable to transform var  (let)
1249:  warning  Unable to transform var  (let)
```
---
 Makefile                                 |   1 +
 umap/static/umap/js/umap.autocomplete.js |  32 +-
 umap/static/umap/js/umap.controls.js     | 197 ++++++------
 umap/static/umap/js/umap.core.js         | 102 +++----
 umap/static/umap/js/umap.features.js     | 171 +++++------
 umap/static/umap/js/umap.forms.js        |  88 +++---
 umap/static/umap/js/umap.icon.js         |  24 +-
 umap/static/umap/js/umap.js              | 365 ++++++++++++-----------
 umap/static/umap/js/umap.layer.js        | 171 +++++------
 umap/static/umap/js/umap.permissions.js  |  29 +-
 umap/static/umap/js/umap.popup.js        |  40 +--
 umap/static/umap/js/umap.slideshow.js    |  28 +-
 umap/static/umap/js/umap.tableeditor.js  |  29 +-
 umap/static/umap/js/umap.ui.js           |  36 +--
 umap/static/umap/js/umap.xhr.js          |  52 ++--
 15 files changed, 703 insertions(+), 662 deletions(-)

diff --git a/Makefile b/Makefile
index c047a67e..a0a2679c 100644
--- a/Makefile
+++ b/Makefile
@@ -60,6 +60,7 @@ pretty: ## Apply PrettierJS to all JS files (or specified `filepath`)
 
 lebab: ## Convert JS `filepath` to modern syntax with Lebab, then prettify
 	./node_modules/lebab/bin/index.js --replace ${filepath} --transform arrow,arrow-return
+	./node_modules/lebab/bin/index.js --replace ${filepath} --transform let
 	$(MAKE) pretty filepath=${filepath}
 
 lebab-all: $(jsdir)* ## Convert all JS files to modern syntax with Lebab + prettify
diff --git a/umap/static/umap/js/umap.autocomplete.js b/umap/static/umap/js/umap.autocomplete.js
index 04d66558..a2340430 100644
--- a/umap/static/umap/js/umap.autocomplete.js
+++ b/umap/static/umap/js/umap.autocomplete.js
@@ -12,10 +12,10 @@ L.U.AutoComplete = L.Class.extend({
 
   initialize: function (el, options) {
     this.el = el
-    var ui = new L.U.UI(document.querySelector('header'))
+    const ui = new L.U.UI(document.querySelector('header'))
     this.xhr = new L.U.Xhr(ui)
     L.setOptions(this, options)
-    var CURRENT = null
+    let CURRENT = null
     try {
       Object.defineProperty(this, 'CURRENT', {
         get: function () {
@@ -59,11 +59,11 @@ L.U.AutoComplete = L.Class.extend({
   },
 
   resizeContainer: function () {
-    var l = this.getLeft(this.input)
-    var t = this.getTop(this.input) + this.input.offsetHeight
+    const l = this.getLeft(this.input)
+    const t = this.getTop(this.input) + this.input.offsetHeight
     this.container.style.left = l + 'px'
     this.container.style.top = t + 'px'
-    var width = this.options.width ? this.options.width : this.input.offsetWidth - 2
+    const width = this.options.width ? this.options.width : this.input.offsetWidth - 2
     this.container.style.width = width + 'px'
   },
 
@@ -111,7 +111,7 @@ L.U.AutoComplete = L.Class.extend({
   },
 
   onKeyUp: function (e) {
-    var special = [
+    const special = [
       L.U.Keys.TAB,
       L.U.Keys.ENTER,
       L.U.Keys.LEFT,
@@ -159,7 +159,7 @@ L.U.AutoComplete = L.Class.extend({
   },
 
   search: function () {
-    var val = this.input.value
+    const val = this.input.value
     if (val.length < this.options.minChar) {
       this.clear()
       return
@@ -176,9 +176,9 @@ L.U.AutoComplete = L.Class.extend({
   },
 
   createResult: function (item) {
-    var el = L.DomUtil.element('li', {}, this.container)
+    const el = L.DomUtil.element('li', {}, this.container)
     el.textContent = item.label
-    var result = {
+    const result = {
       item: item,
       el: el,
     }
@@ -203,7 +203,7 @@ L.U.AutoComplete = L.Class.extend({
   },
 
   resultToIndex: function (result) {
-    var out = null
+    let out = null
     this.forEach(this.RESULTS, (item, index) => {
       if (item.item.value == result.item.value) {
         out = index
@@ -233,7 +233,7 @@ L.U.AutoComplete = L.Class.extend({
   },
 
   getLeft: function (el) {
-    var tmp = el.offsetLeft
+    let tmp = el.offsetLeft
     el = el.offsetParent
     while (el) {
       tmp += el.offsetLeft
@@ -243,7 +243,7 @@ L.U.AutoComplete = L.Class.extend({
   },
 
   getTop: function (el) {
-    var tmp = el.offsetTop
+    let tmp = el.offsetTop
     el = el.offsetParent
     while (el) {
       tmp += el.offsetTop
@@ -291,9 +291,9 @@ L.U.AutoComplete.Ajax.SelectMultiple = L.U.AutoComplete.Ajax.extend({
   },
 
   displaySelected: function (result) {
-    var result_el = L.DomUtil.element('li', {}, this.selected_container)
+    const result_el = L.DomUtil.element('li', {}, this.selected_container)
     result_el.textContent = result.item.label
-    var close = L.DomUtil.element('span', { className: 'close' }, result_el)
+    const close = L.DomUtil.element('span', { className: 'close' }, result_el)
     close.textContent = '×'
     L.DomEvent.on(
       close,
@@ -317,9 +317,9 @@ L.U.AutoComplete.Ajax.Select = L.U.AutoComplete.Ajax.extend({
   },
 
   displaySelected: function (result) {
-    var result_el = L.DomUtil.element('div', {}, this.selected_container)
+    const result_el = L.DomUtil.element('div', {}, this.selected_container)
     result_el.textContent = result.item.label
-    var close = L.DomUtil.element('span', { className: 'close' }, result_el)
+    const close = L.DomUtil.element('span', { className: 'close' }, result_el)
     close.textContent = '×'
     this.input.style.display = 'none'
     L.DomEvent.on(
diff --git a/umap/static/umap/js/umap.controls.js b/umap/static/umap/js/umap.controls.js
index 7fda3a37..34a380ea 100644
--- a/umap/static/umap/js/umap.controls.js
+++ b/umap/static/umap/js/umap.controls.js
@@ -302,7 +302,7 @@ L.U.DrawToolbar = L.Toolbar.Control.extend({
   },
 
   redraw: function () {
-    var container = this._control.getContainer()
+    const container = this._control.getContainer()
     container.innerHTML = ''
     this.appendToContainer(container)
   },
@@ -314,7 +314,10 @@ L.U.EditControl = L.Control.extend({
   },
 
   onAdd: function (map) {
-    var container = L.DomUtil.create('div', 'leaflet-control-edit-enable umap-control'),
+    const container = L.DomUtil.create(
+        'div',
+        'leaflet-control-edit-enable umap-control'
+      ),
       edit = L.DomUtil.create('a', '', container)
     edit.href = '#'
     edit.title = L._('Enable editing') + ' (Ctrl+E)'
@@ -336,9 +339,9 @@ L.Control.Embed = L.Control.extend({
   },
 
   onAdd: function (map) {
-    var container = L.DomUtil.create('div', 'leaflet-control-embed umap-control')
+    const container = L.DomUtil.create('div', 'leaflet-control-embed umap-control')
 
-    var link = L.DomUtil.create('a', '', container)
+    const link = L.DomUtil.create('a', '', container)
     link.href = '#'
     link.title = L._('Embed and share this map')
 
@@ -356,7 +359,7 @@ L.U.MoreControls = L.Control.extend({
   },
 
   onAdd: function () {
-    var container = L.DomUtil.create('div', ''),
+    const container = L.DomUtil.create('div', ''),
       more = L.DomUtil.create('a', 'umap-control-more umap-control-text', container),
       less = L.DomUtil.create('a', 'umap-control-less umap-control-text', container)
     more.href = '#'
@@ -373,7 +376,7 @@ L.U.MoreControls = L.Control.extend({
   },
 
   toggle: function () {
-    var pos = this.getPosition(),
+    const pos = this.getPosition(),
       corner = this._map._controlCorners[pos],
       className = 'umap-more-controls'
     if (L.DomUtil.hasClass(corner, className)) L.DomUtil.removeClass(corner, className)
@@ -392,7 +395,7 @@ L.U.PermanentCreditsControl = L.Control.extend({
   },
 
   onAdd: function () {
-    var paragraphContainer = L.DomUtil.create(
+    const paragraphContainer = L.DomUtil.create(
         'div',
         'umap-permanent-credits-container'
       ),
@@ -435,7 +438,7 @@ L.U.DataLayersControl = L.Control.extend({
   },
 
   _initLayout: function (map) {
-    var container = (this._container = L.DomUtil.create(
+    const container = (this._container = L.DomUtil.create(
         'div',
         'leaflet-control-browse umap-control'
       )),
@@ -446,11 +449,11 @@ L.U.DataLayersControl = L.Control.extend({
       actions
     )
 
-    var link = L.DomUtil.create('a', 'umap-browse-link', actions)
+    const link = L.DomUtil.create('a', 'umap-browse-link', actions)
     link.href = '#'
     link.title = link.textContent = L._('Browse data')
 
-    var toggle = L.DomUtil.create('a', 'umap-browse-toggle', container)
+    const toggle = L.DomUtil.create('a', 'umap-browse-toggle', container)
     toggle.href = '#'
     toggle.title = L._('See data layers')
 
@@ -524,7 +527,7 @@ L.U.DataLayersControl = L.Control.extend({
   },
 
   addDataLayer: function (container, datalayer, draggable) {
-    var datalayerLi = L.DomUtil.create('li', '', container)
+    const datalayerLi = L.DomUtil.create('li', '', container)
     if (draggable)
       L.DomUtil.element(
         'i',
@@ -532,7 +535,7 @@ L.U.DataLayersControl = L.Control.extend({
         datalayerLi
       )
     datalayer.renderToolbox(datalayerLi)
-    var title = L.DomUtil.add(
+    const title = L.DomUtil.add(
       'span',
       'layer-title',
       datalayerLi,
@@ -546,21 +549,21 @@ L.U.DataLayersControl = L.Control.extend({
   },
 
   newDataLayer: function () {
-    var datalayer = this.map.createDataLayer({})
+    const datalayer = this.map.createDataLayer({})
     datalayer.edit()
   },
 
   openPanel: function () {
     if (!this.map.editEnabled) return
-    var container = L.DomUtil.create('ul', 'umap-browse-datalayers')
+    const container = L.DomUtil.create('ul', 'umap-browse-datalayers')
     this.map.eachDataLayerReverse(function (datalayer) {
       this.addDataLayer(container, datalayer, true)
     }, this)
-    var orderable = new L.U.Orderable(container)
+    const orderable = new L.U.Orderable(container)
     orderable.on(
       'drop',
       function (e) {
-        var layer = this.map.datalayers[e.src.dataset.id],
+        const layer = this.map.datalayers[e.src.dataset.id],
           other = this.map.datalayers[e.dst.dataset.id],
           minIndex = Math.min(e.initialIndex, e.finalIndex)
         if (e.finalIndex === 0) layer.bringToTop()
@@ -574,7 +577,7 @@ L.U.DataLayersControl = L.Control.extend({
       this
     )
 
-    var bar = L.DomUtil.create('div', 'button-bar', container),
+    const bar = L.DomUtil.create('div', 'button-bar', container),
       add = L.DomUtil.create('a', 'show-on-edit block add-datalayer button', bar)
     add.href = '#'
     add.textContent = add.title = L._('Add a layer')
@@ -592,7 +595,7 @@ L.U.DataLayersControl = L.Control.extend({
 
 L.U.DataLayer.include({
   renderToolbox: function (container) {
-    var toggle = L.DomUtil.create('i', 'layer-toggle', container),
+    const toggle = L.DomUtil.create('i', 'layer-toggle', container),
       zoomTo = L.DomUtil.create('i', 'layer-zoom_to', container),
       edit = L.DomUtil.create('i', 'layer-edit show-on-edit', container),
       table = L.DomUtil.create('i', 'layer-table-edit show-on-edit', container),
@@ -631,23 +634,23 @@ L.U.DataLayer.include({
   },
 
   propagateRemote: function () {
-    var els = this.getHidableElements()
-    for (var i = 0; i < els.length; i++) {
+    const els = this.getHidableElements()
+    for (let i = 0; i < els.length; i++) {
       L.DomUtil.classIf(els[i], 'remotelayer', this.isRemoteLayer())
     }
   },
 
   propagateHide: function () {
-    var els = this.getHidableElements()
-    for (var i = 0; i < els.length; i++) {
+    const els = this.getHidableElements()
+    for (let i = 0; i < els.length; i++) {
       L.DomUtil.addClass(els[i], 'off')
     }
   },
 
   propagateShow: function () {
     this.onceLoaded(function () {
-      var els = this.getHidableElements()
-      for (var i = 0; i < els.length; i++) {
+      const els = this.getHidableElements()
+      for (let i = 0; i < els.length; i++) {
         L.DomUtil.removeClass(els[i], 'off')
       }
     }, this)
@@ -662,27 +665,31 @@ L.U.DataLayer.addInitHook(function () {
 
 L.U.Map.include({
   _openBrowser: function () {
-    var browserContainer = L.DomUtil.create('div', 'umap-browse-data'),
-      title = L.DomUtil.add(
-        'h3',
-        'umap-browse-title',
-        browserContainer,
-        this.options.name
-      ),
-      filter = L.DomUtil.create('input', '', browserContainer),
-      filterValue = '',
-      featuresContainer = L.DomUtil.create(
-        'div',
-        'umap-browse-features',
-        browserContainer
-      ),
-      filterKeys = this.getFilterKeys()
+    const browserContainer = L.DomUtil.create('div', 'umap-browse-data')
+
+    const title = L.DomUtil.add(
+      'h3',
+      'umap-browse-title',
+      browserContainer,
+      this.options.name
+    )
+
+    const filter = L.DomUtil.create('input', '', browserContainer)
+    let filterValue = ''
+
+    const featuresContainer = L.DomUtil.create(
+      'div',
+      'umap-browse-features',
+      browserContainer
+    )
+
+    const filterKeys = this.getFilterKeys()
     filter.type = 'text'
     filter.placeholder = L._('Filter…')
     filter.value = this.options.filter || ''
 
-    var addFeature = (feature) => {
-      var feature_li = L.DomUtil.create('li', feature.getClassName() + ' feature'),
+    const addFeature = (feature) => {
+      const feature_li = L.DomUtil.create('li', feature.getClassName() + ' feature'),
         zoom_to = L.DomUtil.create('i', 'feature-zoom_to', feature_li),
         edit = L.DomUtil.create('i', 'show-on-edit feature-edit', feature_li),
         color = L.DomUtil.create('i', 'feature-color', feature_li),
@@ -726,8 +733,8 @@ L.U.Map.include({
       return feature_li
     }
 
-    var append = (datalayer) => {
-      var container = L.DomUtil.create(
+    const append = (datalayer) => {
+      const container = L.DomUtil.create(
           'div',
           datalayer.getHidableClass(),
           featuresContainer
@@ -736,10 +743,10 @@ L.U.Map.include({
       container.id = 'browse_data_datalayer_' + datalayer.umap_id
       datalayer.renderToolbox(headline)
       L.DomUtil.add('span', '', headline, datalayer.options.name)
-      var ul = L.DomUtil.create('ul', '', container)
+      const ul = L.DomUtil.create('ul', '', container)
       L.DomUtil.classIf(container, 'off', !datalayer.isVisible())
 
-      var build = () => {
+      const build = () => {
         ul.innerHTML = ''
         datalayer.eachFeature((feature) => {
           if (
@@ -762,14 +769,14 @@ L.U.Map.include({
       })
     }
 
-    var appendAll = function () {
+    const appendAll = function () {
       this.options.filter = filterValue = filter.value
       featuresContainer.innerHTML = ''
       this.eachBrowsableDataLayer((datalayer) => {
         append(datalayer)
       })
     }
-    var resetLayers = function () {
+    const resetLayers = function () {
       this.eachBrowsableDataLayer((datalayer) => {
         datalayer.resetLayer(true)
       })
@@ -777,16 +784,16 @@ L.U.Map.include({
     L.bind(appendAll, this)()
     L.DomEvent.on(filter, 'input', appendAll, this)
     L.DomEvent.on(filter, 'input', resetLayers, this)
-    var link = L.DomUtil.create('li', '')
+    const link = L.DomUtil.create('li', '')
     L.DomUtil.create('i', 'umap-icon-16 umap-caption', link)
-    var label = L.DomUtil.create('span', '', link)
+    const label = L.DomUtil.create('span', '', link)
     label.textContent = label.title = L._('About')
     L.DomEvent.on(link, 'click', this.displayCaption, this)
     this.ui.openPanel({ data: { html: browserContainer }, actions: [link] })
   },
 
   _openFilter: function () {
-    var filterContainer = L.DomUtil.create('div', 'umap-filter-data'),
+    const filterContainer = L.DomUtil.create('div', 'umap-filter-data'),
       title = L.DomUtil.add(
         'h3',
         'umap-filter-title',
@@ -800,8 +807,8 @@ L.U.Map.include({
       ),
       advancedFilterKeys = this.getAdvancedFilterKeys()
 
-    var advancedFiltersFull = {}
-    var filtersAlreadyLoaded = true
+    const advancedFiltersFull = {}
+    let filtersAlreadyLoaded = true
     if (!this.getMap().options.advancedFilters) {
       this.getMap().options.advancedFilters = {}
       filtersAlreadyLoaded = false
@@ -824,8 +831,8 @@ L.U.Map.include({
       })
     })
 
-    var addPropertyValue = function (property, value) {
-      var property_li = L.DomUtil.create('li', ''),
+    const addPropertyValue = function (property, value) {
+      const property_li = L.DomUtil.create('li', ''),
         filter_check = L.DomUtil.create('input', '', property_li),
         filter_label = L.DomUtil.create('label', '', property_li)
       filter_check.type = 'checkbox'
@@ -841,8 +848,8 @@ L.U.Map.include({
         filter_check,
         'change',
         function (e) {
-          var property = e.srcElement.dataset.property
-          var value = e.srcElement.dataset.value
+          const property = e.srcElement.dataset.property
+          const value = e.srcElement.dataset.value
           if (e.srcElement.checked) {
             this.getMap().options.advancedFilters[property].push(value)
           } else {
@@ -858,15 +865,15 @@ L.U.Map.include({
       return property_li
     }
 
-    var addProperty = function (property) {
-      var container = L.DomUtil.create(
+    const addProperty = function (property) {
+      const container = L.DomUtil.create(
           'div',
           'property-container',
           propertiesContainer
         ),
         headline = L.DomUtil.add('h5', '', container, property)
-      var ul = L.DomUtil.create('ul', '', container)
-      var orderedValues = advancedFiltersFull[property]
+      const ul = L.DomUtil.create('ul', '', container)
+      const orderedValues = advancedFiltersFull[property]
       orderedValues.sort()
       orderedValues.forEach((value) => {
         ul.appendChild(L.bind(addPropertyValue, this)(property, value))
@@ -874,7 +881,7 @@ L.U.Map.include({
     }
 
     var filterFeatures = function () {
-      var noResults = true
+      let noResults = true
       this.eachDataLayer((datalayer) => {
         datalayer.eachFeature(function (feature) {
           feature.properties.isVisible = true
@@ -913,9 +920,9 @@ L.U.Map.include({
       L.bind(addProperty, this)(property)
     })
 
-    var link = L.DomUtil.create('li', '')
+    const link = L.DomUtil.create('li', '')
     L.DomUtil.create('i', 'umap-icon-16 umap-caption', link)
-    var label = L.DomUtil.create('span', '', link)
+    const label = L.DomUtil.create('span', '', link)
     label.textContent = label.title = L._('About')
     L.DomEvent.on(link, 'click', this.displayCaption, this)
     this.ui.openPanel({ data: { html: filterContainer }, actions: [link] })
@@ -933,9 +940,9 @@ L.U.TileLayerControl = L.Control.extend({
   },
 
   onAdd: function () {
-    var container = L.DomUtil.create('div', 'leaflet-control-tilelayers umap-control')
+    const container = L.DomUtil.create('div', 'leaflet-control-tilelayers umap-control')
 
-    var link = L.DomUtil.create('a', '', container)
+    const link = L.DomUtil.create('a', '', container)
     link.href = '#'
     link.title = L._('Change map background')
 
@@ -970,7 +977,7 @@ L.U.TileLayerControl = L.Control.extend({
   },
 
   addTileLayerElement: function (tilelayer, options) {
-    var selectedClass = this.map.hasLayer(tilelayer) ? 'selected' : '',
+    const selectedClass = this.map.hasLayer(tilelayer) ? 'selected' : '',
       el = L.DomUtil.create('li', selectedClass, this._tilelayers_container),
       img = L.DomUtil.create('img', '', el),
       name = L.DomUtil.create('div', '', el)
@@ -1006,14 +1013,14 @@ L.U.AttributionControl = L.Control.Attribution.extend({
       )
     }
     if (this._map.options.captionMenus) {
-      var link = L.DomUtil.add('a', '', this._container, ' — ' + L._('About'))
+      const link = L.DomUtil.add('a', '', this._container, ' — ' + L._('About'))
       L.DomEvent.on(link, 'click', L.DomEvent.stop)
         .on(link, 'click', this._map.displayCaption, this._map)
         .on(link, 'dblclick', L.DomEvent.stop)
     }
     if (window.top === window.self && this._map.options.captionMenus) {
       // We are not in iframe mode
-      var home = L.DomUtil.add('a', '', this._container, ' — ' + L._('Home'))
+      const home = L.DomUtil.add('a', '', this._container, ' — ' + L._('Home'))
       home.href = '/'
     }
   },
@@ -1025,8 +1032,8 @@ L.U.StarControl = L.Control.extend({
   },
 
   onAdd: function (map) {
-    var status = map.options.starred ? ' starred' : ''
-    var container = L.DomUtil.create(
+    const status = map.options.starred ? ' starred' : ''
+    const container = L.DomUtil.create(
         'div',
         'leaflet-control-star umap-control' + status
       ),
@@ -1053,8 +1060,8 @@ L.U.Search = L.PhotonSearch.extend({
   },
 
   formatResult: function (feature, el) {
-    var self = this
-    var tools = L.DomUtil.create('span', 'search-result-tools', el),
+    const self = this
+    const tools = L.DomUtil.create('span', 'search-result-tools', el),
       zoom = L.DomUtil.create('i', 'feature-zoom_to', tools),
       edit = L.DomUtil.create('i', 'feature-edit show-on-edit', tools)
     zoom.title = L._('Zoom to this place')
@@ -1067,8 +1074,8 @@ L.U.Search = L.PhotonSearch.extend({
     })
     L.DomEvent.on(edit, 'mousedown', (e) => {
       L.DomEvent.stop(e)
-      var datalayer = self.map.defaultDataLayer()
-      var layer = datalayer.geojsonToFeatures(feature)
+      const datalayer = self.map.defaultDataLayer()
+      const layer = datalayer.geojsonToFeatures(feature)
       layer.isDirty = true
       layer.edit()
     })
@@ -1076,7 +1083,7 @@ L.U.Search = L.PhotonSearch.extend({
   },
 
   zoomToFeature: function (feature) {
-    var zoom = Math.max(this.map.getZoom(), 16) // Never unzoom.
+    const zoom = Math.max(this.map.getZoom(), 16) // Never unzoom.
     this.map.setView(
       [feature.geometry.coordinates[1], feature.geometry.coordinates[0]],
       zoom
@@ -1095,11 +1102,11 @@ L.U.SearchControl = L.Control.extend({
   },
 
   onAdd: function (map) {
-    var container = L.DomUtil.create('div', 'leaflet-control-search umap-control'),
+    const container = L.DomUtil.create('div', 'leaflet-control-search umap-control'),
       self = this
 
     L.DomEvent.disableClickPropagation(container)
-    var link = L.DomUtil.create('a', '', container)
+    const link = L.DomUtil.create('a', '', container)
     link.href = '#'
     link.title = L._('Search a place name')
     L.DomEvent.on(link, 'click', (e) => {
@@ -1110,19 +1117,19 @@ L.U.SearchControl = L.Control.extend({
   },
 
   openPanel: function (map) {
-    var options = {
+    const options = {
       limit: 10,
       noResultLabel: L._('No results'),
     }
     if (map.options.photonUrl) options.url = map.options.photonUrl
-    var container = L.DomUtil.create('div', '')
+    const container = L.DomUtil.create('div', '')
 
-    var title = L.DomUtil.create('h3', '', container)
+    const title = L.DomUtil.create('h3', '', container)
     title.textContent = L._('Search location')
-    var input = L.DomUtil.create('input', 'photon-input', container)
-    var resultsContainer = L.DomUtil.create('div', 'photon-autocomplete', container)
+    const input = L.DomUtil.create('input', 'photon-input', container)
+    const resultsContainer = L.DomUtil.create('div', 'photon-autocomplete', container)
     this.search = new L.U.Search(map, input, options)
-    var id = Math.random()
+    const id = Math.random()
     this.search.on('ajax:send', () => {
       map.fire('dataloading', { id: id })
     })
@@ -1144,7 +1151,7 @@ L.Control.MiniMap.include({
   },
 
   onMainMapBaseLayerChange: function (e) {
-    var layer = this._cloneLayer(e.layer)
+    const layer = this._cloneLayer(e.layer)
     if (this._miniMap.hasLayer(this._layer)) {
       this._miniMap.removeLayer(this._layer)
     }
@@ -1232,7 +1239,7 @@ L.U.IframeExporter = L.Evented.extend({
   },
 
   buildUrl: function () {
-    var datalayers = []
+    const datalayers = []
     if (this.options.viewCurrentFeature && this.map.currentFeature) {
       this.queryString.feature = this.map.currentFeature.getSlug()
     }
@@ -1246,13 +1253,13 @@ L.U.IframeExporter = L.Evented.extend({
     } else {
       delete this.queryString.datalayers
     }
-    var currentView = this.options.currentView ? window.location.hash : ''
+    const currentView = this.options.currentView ? window.location.hash : ''
     return this.baseUrl + '?' + L.Util.buildQueryString(this.queryString) + currentView
   },
 
   build: function () {
-    var iframeUrl = this.buildUrl()
-    var code =
+    const iframeUrl = this.buildUrl()
+    const code =
       '<iframe width="' +
       this.dimensions.width +
       '" height="' +
@@ -1286,7 +1293,7 @@ L.U.Editable = L.Editable.extend({
       if (this.map.editedFeature !== e.layer) e.layer.edit(e)
     })
     this.on('editable:editing', (e) => {
-      var layer = e.layer
+      const layer = e.layer
       layer.isDirty = true
       if (layer._tooltip && layer.isTooltipOpen()) {
         layer._tooltip.setLatLng(layer.getCenter())
@@ -1294,7 +1301,7 @@ L.U.Editable = L.Editable.extend({
       }
     })
     this.on('editable:vertex:ctrlclick', (e) => {
-      var index = e.vertex.getIndex()
+      const index = e.vertex.getIndex()
       if (index === 0 || (index === e.vertex.getLastIndex() && e.vertex.continue))
         e.vertex.continue()
     })
@@ -1309,7 +1316,7 @@ L.U.Editable = L.Editable.extend({
   },
 
   createPolygon: function (latlngs) {
-    var polygon = new L.U.Polygon(this.map, latlngs)
+    const polygon = new L.U.Polygon(this.map, latlngs)
     return polygon
   },
 
@@ -1319,7 +1326,7 @@ L.U.Editable = L.Editable.extend({
 
   connectCreatedToMap: function (layer) {
     // Overrided from Leaflet.Editable
-    var datalayer = this.map.defaultDataLayer()
+    const datalayer = this.map.defaultDataLayer()
     datalayer.addLayer(layer)
     layer.isDirty = true
     return layer
@@ -1334,8 +1341,8 @@ L.U.Editable = L.Editable.extend({
       return
     }
 
-    var content
-    var measure
+    let content
+    let measure
     if (e.layer.editor._drawnLatLngs) {
       // when drawing (a Polyline or Polygon)
       if (!e.layer.editor._drawnLatLngs.length) {
@@ -1346,7 +1353,7 @@ L.U.Editable = L.Editable.extend({
           content = L._('Click to start drawing a line')
         }
       } else {
-        var tmpLatLngs = e.layer.editor._drawnLatLngs.slice()
+        const tmpLatLngs = e.layer.editor._drawnLatLngs.slice()
         tmpLatLngs.push(e.latlng)
         measure = e.layer.getMeasure(tmpLatLngs)
 
diff --git a/umap/static/umap/js/umap.core.js b/umap/static/umap/js/umap.core.js
index 30b4d081..483db35e 100644
--- a/umap/static/umap/js/umap.core.js
+++ b/umap/static/umap/js/umap.core.js
@@ -8,11 +8,11 @@ L.U.Map = L.Map.extend({})
  * Utils
  */
 L.Util.queryString = (name, fallback) => {
-  var decode = (s) => decodeURIComponent(s.replace(/\+/g, ' '))
-  var qs = window.location.search.slice(1).split('&'),
+  const decode = (s) => decodeURIComponent(s.replace(/\+/g, ' '))
+  const qs = window.location.search.slice(1).split('&'),
     qa = {}
-  for (var i in qs) {
-    var key = qs[i].split('=')
+  for (const i in qs) {
+    const key = qs[i].split('=')
     if (!key) continue
     qa[decode(key[0])] = key[1] ? decode(key[1]) : 1
   }
@@ -20,21 +20,21 @@ L.Util.queryString = (name, fallback) => {
 }
 
 L.Util.booleanFromQueryString = (name) => {
-  var value = L.Util.queryString(name)
+  const value = L.Util.queryString(name)
   return value === '1' || value === 'true'
 }
 
 L.Util.setFromQueryString = (options, name) => {
-  var value = L.Util.queryString(name)
+  const value = L.Util.queryString(name)
   if (typeof value !== 'undefined') options[name] = value
 }
 
 L.Util.setBooleanFromQueryString = (options, name) => {
-  var value = L.Util.queryString(name)
+  const value = L.Util.queryString(name)
   if (typeof value !== 'undefined') options[name] = value == '1' || value == 'true'
 }
 L.Util.setNullableBooleanFromQueryString = (options, name) => {
-  var value = L.Util.queryString(name)
+  let value = L.Util.queryString(name)
   if (typeof value !== 'undefined') {
     if (value === 'null') value = null
     else if (value === '0' || value === 'false') value = false
@@ -48,10 +48,10 @@ L.Util.escapeHTML = (s) => {
 }
 L.Util.toHTML = (r) => {
   if (!r) return ''
-  var ii
+  let ii
 
   // detect newline format
-  var newline = r.indexOf('\r\n') != -1 ? '\r\n' : r.indexOf('\n') != -1 ? '\n' : ''
+  const newline = r.indexOf('\r\n') != -1 ? '\r\n' : r.indexOf('\n') != -1 ? '\n' : ''
 
   // Escape tags
   r = r.replace(/</gm, '&lt;')
@@ -114,7 +114,7 @@ L.Util.toHTML = (r) => {
 L.Util.isObject = (what) => typeof what === 'object' && what !== null
 L.Util.CopyJSON = (geojson) => JSON.parse(JSON.stringify(geojson))
 L.Util.detectFileType = (f) => {
-  var filename = f.name ? escape(f.name.toLowerCase()) : ''
+  const filename = f.name ? escape(f.name.toLowerCase()) : ''
   function ext(_) {
     return filename.indexOf(_) !== -1
   }
@@ -135,8 +135,8 @@ L.Util.usableOption = (options, option) =>
 
 L.Util.greedyTemplate = (str, data, ignore) => {
   function getValue(data, path) {
-    var value = data
-    for (var i = 0; i < path.length; i++) {
+    let value = data
+    for (let i = 0; i < path.length; i++) {
       value = value[path[i]]
       if (value === undefined) break
     }
@@ -146,13 +146,13 @@ L.Util.greedyTemplate = (str, data, ignore) => {
   return str.replace(
     /\{ *([\w_\:\.\|]+)(?:\|("[^"]*"))? *\}/g,
     (str, key, staticFallback) => {
-      var vars = key.split('|'),
-        value,
-        path
+      const vars = key.split('|')
+      let value
+      let path
       if (staticFallback !== undefined) {
         vars.push(staticFallback)
       }
-      for (var i = 0; i < vars.length; i++) {
+      for (let i = 0; i < vars.length; i++) {
         path = vars[i]
         if (path.startsWith('"') && path.endsWith('"'))
           value = path.substring(1, path.length - 1) // static default value.
@@ -169,13 +169,13 @@ L.Util.greedyTemplate = (str, data, ignore) => {
 }
 
 L.Util.sortFeatures = (features, sortKey) => {
-  var sortKeys = (sortKey || 'name').split(',')
+  const sortKeys = (sortKey || 'name').split(',')
 
-  var sort = (a, b, i) => {
-    var sortKey = sortKeys[i],
-      score,
-      valA = a.properties[sortKey] || '',
-      valB = b.properties[sortKey] || ''
+  const sort = (a, b, i) => {
+    const sortKey = sortKeys[i]
+    let score
+    const valA = a.properties[sortKey] || ''
+    const valB = b.properties[sortKey] || ''
     if (!valA) {
       score = -1
     } else if (!valB) {
@@ -203,8 +203,8 @@ L.Util.flattenCoordinates = (coords) => {
 }
 
 L.Util.buildQueryString = (params) => {
-  var query_string = []
-  for (var key in params) {
+  const query_string = []
+  for (const key in params) {
     query_string.push(encodeURIComponent(key) + '=' + encodeURIComponent(params[key]))
   }
   return query_string.join('&')
@@ -213,7 +213,7 @@ L.Util.buildQueryString = (params) => {
 L.Util.getBaseUrl = () => '//' + window.location.host + window.location.pathname
 
 L.DomUtil.add = (tagName, className, container, content) => {
-  var el = L.DomUtil.create(tagName, className, container)
+  const el = L.DomUtil.create(tagName, className, container)
   if (content) {
     if (content.nodeType && content.nodeType === 1) {
       el.appendChild(content)
@@ -226,9 +226,9 @@ L.DomUtil.add = (tagName, className, container, content) => {
 
 L.DomUtil.createFieldset = (container, legend, options) => {
   options = options || {}
-  var fieldset = L.DomUtil.create('div', 'fieldset toggle', container)
-  var legendEl = L.DomUtil.add('h5', 'legend style_options_toggle', fieldset, legend)
-  var fieldsEl = L.DomUtil.add('div', 'fields with-transition', fieldset)
+  const fieldset = L.DomUtil.create('div', 'fieldset toggle', container)
+  const legendEl = L.DomUtil.add('h5', 'legend style_options_toggle', fieldset, legend)
+  const fieldsEl = L.DomUtil.add('div', 'fields with-transition', fieldset)
   L.DomEvent.on(legendEl, 'click', function () {
     if (L.DomUtil.hasClass(fieldset, 'on')) {
       L.DomUtil.removeClass(fieldset, 'on')
@@ -246,8 +246,8 @@ L.DomUtil.classIf = (el, className, bool) => {
 }
 
 L.DomUtil.element = (what, attrs, parent) => {
-  var el = document.createElement(what)
-  for (var attr in attrs) {
+  const el = document.createElement(what)
+  for (const attr in attrs) {
     el[attr] = attrs[attr]
   }
   if (typeof parent !== 'undefined') {
@@ -269,11 +269,11 @@ L.DomUtil.after = (target, el) => {
 L.DomUtil.RGBRegex = /rgb *\( *([0-9]{1,3}) *, *([0-9]{1,3}) *, *([0-9]{1,3}) *\)/
 
 L.DomUtil.TextColorFromBackgroundColor = (el) => {
-  var out = '#000000'
+  let out = '#000000'
   if (!window.getComputedStyle) {
     return out
   }
-  var rgb = window.getComputedStyle(el).getPropertyValue('background-color')
+  let rgb = window.getComputedStyle(el).getPropertyValue('background-color')
   rgb = L.DomUtil.RGBRegex.exec(rgb)
   if (!rgb || rgb.length !== 4) {
     return out
@@ -288,13 +288,13 @@ L.DomEvent.once = (el, types, fn, context) => {
   // cf https://github.com/Leaflet/Leaflet/pull/3528#issuecomment-134551575
 
   if (typeof types === 'object') {
-    for (var type in types) {
+    for (const type in types) {
       L.DomEvent.once(el, type, types[type], fn)
     }
     return L.DomEvent
   }
 
-  var handler = L.bind(() => {
+  const handler = L.bind(() => {
     L.DomEvent.off(el, types, fn, context).off(el, types, handler, context)
   }, L.DomEvent)
 
@@ -336,17 +336,17 @@ L.U.Help = L.Class.extend({
       'umap-help-box with-transition dark',
       document.body
     )
-    var closeLink = L.DomUtil.create('a', 'umap-close-link', this.box)
+    const closeLink = L.DomUtil.create('a', 'umap-close-link', this.box)
     closeLink.href = '#'
     L.DomUtil.add('i', 'umap-close-icon', closeLink)
-    var label = L.DomUtil.create('span', '', closeLink)
+    const label = L.DomUtil.create('span', '', closeLink)
     label.title = label.textContent = L._('Close')
     this.content = L.DomUtil.create('div', 'umap-help-content', this.box)
     L.DomEvent.on(closeLink, 'click', this.hide, this)
   },
 
   onKeyDown: function (e) {
-    var key = e.keyCode,
+    const key = e.keyCode,
       ESC = 27
     if (key === ESC) {
       this.hide()
@@ -355,7 +355,7 @@ L.U.Help = L.Class.extend({
 
   show: function () {
     this.content.innerHTML = ''
-    for (var i = 0, name; i < arguments.length; i++) {
+    for (let i = 0, name; i < arguments.length; i++) {
       name = arguments[i]
       L.DomUtil.add('div', 'umap-help-entry', this.content, this.resolve(name))
     }
@@ -375,14 +375,14 @@ L.U.Help = L.Class.extend({
   },
 
   button: function (container, entries) {
-    var helpButton = L.DomUtil.create('a', 'umap-help-button', container)
+    const helpButton = L.DomUtil.create('a', 'umap-help-button', container)
     helpButton.href = '#'
     if (entries) {
       L.DomEvent.on(helpButton, 'click', L.DomEvent.stop).on(
         helpButton,
         'click',
         function (e) {
-          var args = typeof entries === 'string' ? [entries] : entries
+          const args = typeof entries === 'string' ? [entries] : entries
           this.show.apply(this, args)
         },
         this
@@ -392,26 +392,26 @@ L.U.Help = L.Class.extend({
   },
 
   edit: function () {
-    var container = L.DomUtil.create('div', ''),
+    const container = L.DomUtil.create('div', ''),
       self = this,
       title = L.DomUtil.create('h3', '', container),
       actionsContainer = L.DomUtil.create('ul', 'umap-edit-actions', container)
-    var addAction = (action) => {
-      var actionContainer = L.DomUtil.add('li', '', actionsContainer)
+    const addAction = (action) => {
+      const actionContainer = L.DomUtil.add('li', '', actionsContainer)
       L.DomUtil.add('i', action.options.className, actionContainer),
         L.DomUtil.add('span', '', actionContainer, action.options.tooltip)
       L.DomEvent.on(actionContainer, 'click', action.addHooks, action)
       L.DomEvent.on(actionContainer, 'click', self.hide, self)
     }
     title.textContent = L._('Where do we go from here?')
-    for (var id in this.map.helpMenuActions) {
+    for (const id in this.map.helpMenuActions) {
       addAction(this.map.helpMenuActions[id])
     }
     return container
   },
 
   importFormats: function () {
-    var container = L.DomUtil.create('div')
+    const container = L.DomUtil.create('div')
     L.DomUtil.add('h3', '', container, 'GeojSON')
     L.DomUtil.add('p', '', container, L._('All properties are imported.'))
     L.DomUtil.add('h3', '', container, 'GPX')
@@ -438,7 +438,7 @@ L.U.Help = L.Class.extend({
   },
 
   textFormatting: function () {
-    var container = L.DomUtil.create('div'),
+    const container = L.DomUtil.create('div'),
       title = L.DomUtil.add('h3', '', container, L._('Text formatting')),
       elements = L.DomUtil.create('ul', '', container)
     L.DomUtil.add('li', '', elements, L._('*simple star for italic*'))
@@ -480,7 +480,7 @@ L.U.Help = L.Class.extend({
   },
 
   dynamicProperties: function () {
-    var container = L.DomUtil.create('div')
+    const container = L.DomUtil.create('div')
     L.DomUtil.add('h3', '', container, L._('Dynamic properties'))
     L.DomUtil.add(
       'p',
@@ -544,7 +544,7 @@ L.U.Orderable = L.Evented.extend({
     this.src = null
     this.dst = null
     this.els = this.parent.querySelectorAll(this.options.selector)
-    for (var i = 0; i < this.els.length; i++) this.makeDraggable(this.els[i])
+    for (let i = 0; i < this.els.length; i++) this.makeDraggable(this.els[i])
   },
 
   makeDraggable: function (node) {
@@ -586,10 +586,10 @@ L.U.Orderable = L.Evented.extend({
 
   onDragEnter: function (e) {
     // e.target is the current hover target.
-    var dst = this.findTarget(e.target)
+    const dst = this.findTarget(e.target)
     if (!dst || dst === this.src) return
     this.dst = dst
-    var targetIndex = this.nodeIndex(this.dst),
+    const targetIndex = this.nodeIndex(this.dst),
       srcIndex = this.nodeIndex(this.src)
     if (targetIndex > srcIndex) this.parent.insertBefore(this.dst, this.src)
     else this.parent.insertBefore(this.src, this.dst)
diff --git a/umap/static/umap/js/umap.features.js b/umap/static/umap/js/umap.features.js
index 7cf5903c..2fac5fca 100644
--- a/umap/static/umap/js/umap.features.js
+++ b/umap/static/umap/js/umap.features.js
@@ -12,8 +12,8 @@ L.U.FeatureMixin = {
     if (options.geojson) {
       this.populate(options.geojson)
     }
-    var isDirty = false,
-      self = this
+    let isDirty = false
+    const self = this
     try {
       Object.defineProperty(this, 'isDirty', {
         get: function () {
@@ -60,7 +60,7 @@ L.U.FeatureMixin = {
 
   view: function (e) {
     if (this.map.editEnabled) return
-    var outlink = this.properties._umap_options.outlink,
+    const outlink = this.properties._umap_options.outlink,
       target = this.properties._umap_options.outlinkTarget
     if (outlink) {
       switch (target) {
@@ -71,7 +71,7 @@ L.U.FeatureMixin = {
           window.top.location = outlink
           break
         default:
-          var win = window.open(this.properties._umap_options.outlink)
+          const win = window.open(this.properties._umap_options.outlink)
       }
       return
     }
@@ -89,18 +89,18 @@ L.U.FeatureMixin = {
 
   edit: function (e) {
     if (!this.map.editEnabled || this.isReadOnly()) return
-    var container = L.DomUtil.create('div', 'umap-datalayer-container')
+    const container = L.DomUtil.create('div', 'umap-datalayer-container')
 
-    var builder = new L.U.FormBuilder(this, ['datalayer'], {
+    let builder = new L.U.FormBuilder(this, ['datalayer'], {
       callback: function () {
         this.edit(e)
       }, // removeLayer step will close the edit panel, let's reopen it
     })
     container.appendChild(builder.build())
 
-    var properties = [],
-      property
-    for (var i = 0; i < this.datalayer._propertiesIndex.length; i++) {
+    const properties = []
+    let property
+    for (let i = 0; i < this.datalayer._propertiesIndex.length; i++) {
       property = this.datalayer._propertiesIndex[i]
       if (L.Util.indexOf(['name', 'description'], property) !== -1) {
         continue
@@ -116,7 +116,7 @@ L.U.FeatureMixin = {
     })
     container.appendChild(builder.build())
     this.appendEditFieldsets(container)
-    var advancedActions = L.DomUtil.createFieldset(container, L._('Advanced actions'))
+    const advancedActions = L.DomUtil.createFieldset(container, L._('Advanced actions'))
     this.getAdvancedEditActions(advancedActions)
     this.map.ui.openPanel({ data: { html: container }, className: 'dark' })
     this.map.editedFeature = this
@@ -124,7 +124,7 @@ L.U.FeatureMixin = {
   },
 
   getAdvancedEditActions: function (container) {
-    var deleteLink = L.DomUtil.create('a', 'button umap-delete', container)
+    const deleteLink = L.DomUtil.create('a', 'button umap-delete', container)
     deleteLink.href = '#'
     deleteLink.textContent = L._('Delete')
     L.DomEvent.on(
@@ -139,30 +139,33 @@ L.U.FeatureMixin = {
   },
 
   appendEditFieldsets: function (container) {
-    var optionsFields = this.getShapeOptions()
+    const optionsFields = this.getShapeOptions()
     var builder = new L.U.FormBuilder(this, optionsFields, {
       id: 'umap-feature-shape-properties',
       callback: this._redraw,
     })
-    var shapeProperties = L.DomUtil.createFieldset(container, L._('Shape properties'))
+    const shapeProperties = L.DomUtil.createFieldset(container, L._('Shape properties'))
     shapeProperties.appendChild(builder.build())
 
-    var advancedOptions = this.getAdvancedOptions()
+    const advancedOptions = this.getAdvancedOptions()
     var builder = new L.U.FormBuilder(this, advancedOptions, {
       id: 'umap-feature-advanced-properties',
       callback: this._redraw,
     })
-    var advancedProperties = L.DomUtil.createFieldset(
+    const advancedProperties = L.DomUtil.createFieldset(
       container,
       L._('Advanced properties')
     )
     advancedProperties.appendChild(builder.build())
 
-    var interactionOptions = this.getInteractionOptions()
+    const interactionOptions = this.getInteractionOptions()
     builder = new L.U.FormBuilder(this, interactionOptions, {
       callback: this._redraw,
     })
-    var popupFieldset = L.DomUtil.createFieldset(container, L._('Interaction options'))
+    const popupFieldset = L.DomUtil.createFieldset(
+      container,
+      L._('Interaction options')
+    )
     popupFieldset.appendChild(builder.build())
   },
 
@@ -180,7 +183,7 @@ L.U.FeatureMixin = {
 
   getDisplayName: function (fallback) {
     if (fallback === undefined) fallback = this.datalayer.options.name
-    var key = this.getOption('labelKey') || 'name'
+    const key = this.getOption('labelKey') || 'name'
     // Variables mode.
     if (key.indexOf('{') != -1)
       return L.Util.greedyTemplate(key, this.extendedProperties())
@@ -196,12 +199,12 @@ L.U.FeatureMixin = {
   },
 
   getPopupClass: function () {
-    var old = this.getOption('popupTemplate') // Retrocompat.
+    const old = this.getOption('popupTemplate') // Retrocompat.
     return L.U.Popup[this.getOption('popupShape') || old] || L.U.Popup
   },
 
   attachPopup: function () {
-    var Class = this.getPopupClass()
+    const Class = this.getPopupClass()
     this.bindPopup(new Class(this))
   },
 
@@ -258,7 +261,7 @@ L.U.FeatureMixin = {
   },
 
   getOption: function (option, fallback) {
-    var value = fallback
+    let value = fallback
     if (typeof this.staticOptions[option] !== 'undefined') {
       value = this.staticOptions[option]
     } else if (L.Util.usableOption(this.properties._umap_options, option)) {
@@ -273,11 +276,11 @@ L.U.FeatureMixin = {
 
   zoomTo: function (e) {
     e = e || {}
-    var easing = e.easing !== undefined ? e.easing : this.map.options.easing
+    const easing = e.easing !== undefined ? e.easing : this.map.options.easing
     if (easing) {
       this.map.flyTo(this.getCenter(), this.getBestZoom())
     } else {
-      var latlng = e.latlng || this.getCenter()
+      const latlng = e.latlng || this.getCenter()
       this.map.setView(latlng, this.getBestZoom() || this.map.getZoom())
     }
     if (e.callback) e.callback.call(this)
@@ -296,7 +299,7 @@ L.U.FeatureMixin = {
   },
 
   cloneProperties: function () {
-    var properties = L.extend({}, this.properties)
+    const properties = L.extend({}, this.properties)
     properties._umap_options = L.extend({}, properties._umap_options)
     if (Object.keys && Object.keys(properties._umap_options).length === 0) {
       delete properties._umap_options // It can make a difference on big data sets
@@ -315,7 +318,7 @@ L.U.FeatureMixin = {
   },
 
   toGeoJSON: function () {
-    var geojson = this.parentClass.prototype.toGeoJSON.call(this)
+    const geojson = this.parentClass.prototype.toGeoJSON.call(this)
     geojson.properties = this.cloneProperties()
     delete geojson.properties._storage_options
     return geojson
@@ -356,7 +359,7 @@ L.U.FeatureMixin = {
 
   _showContextMenu: function (e) {
     L.DomEvent.stop(e)
-    var pt = this.map.mouseEventToContainerPoint(e.originalEvent)
+    const pt = this.map.mouseEventToContainerPoint(e.originalEvent)
     e.relatedTarget = this
     this.map.contextmenu.showAt(pt, e)
   },
@@ -370,8 +373,8 @@ L.U.FeatureMixin = {
   },
 
   getContextMenuItems: function (e) {
-    var permalink = this.getPermalink(),
-      items = []
+    const permalink = this.getPermalink()
+    let items = []
     if (permalink)
       items.push({
         text: L._('Permalink'),
@@ -386,7 +389,7 @@ L.U.FeatureMixin = {
   },
 
   getContextMenuEditItems: function () {
-    var items = ['-']
+    let items = ['-']
     if (this.map.editedFeature !== this) {
       items.push({
         text: L._('Edit this feature'),
@@ -426,13 +429,15 @@ L.U.FeatureMixin = {
   },
 
   resetTooltip: function () {
-    var displayName = this.getDisplayName(null),
-      showLabel = this.getOption('showLabel'),
-      oldLabelHover = this.getOption('labelHover'),
-      options = {
-        direction: this.getOption('labelDirection'),
-        interactive: this.getOption('labelInteractive'),
-      }
+    const displayName = this.getDisplayName(null)
+    let showLabel = this.getOption('showLabel')
+    const oldLabelHover = this.getOption('labelHover')
+
+    const options = {
+      direction: this.getOption('labelDirection'),
+      interactive: this.getOption('labelInteractive'),
+    }
+
     if (oldLabelHover && showLabel) showLabel = null // Retrocompat.
     options.permanent = showLabel === true
     this.unbindTooltip()
@@ -442,7 +447,7 @@ L.U.FeatureMixin = {
 
   matchFilter: function (filter, keys) {
     filter = filter.toLowerCase()
-    for (var i = 0; i < keys.length; i++) {
+    for (let i = 0; i < keys.length; i++) {
       if ((this.properties[keys[i]] || '').toLowerCase().indexOf(filter) !== -1)
         return true
     }
@@ -465,7 +470,7 @@ L.U.FeatureMixin = {
   },
 
   clone: function () {
-    var layer = this.datalayer.geojsonToFeatures(this.toGeoJSON())
+    const layer = this.datalayer.geojsonToFeatures(this.toGeoJSON())
     layer.isDirty = true
     layer.edit()
     return layer
@@ -573,7 +578,7 @@ L.U.Marker = L.Marker.extend({
   },
 
   getIcon: function () {
-    var Class = L.U.Icon[this.getIconClass()] || L.U.Icon.Default
+    const Class = L.U.Icon[this.getIconClass()] || L.U.Icon.Default
     return new Class(this.map, { feature: this })
   },
 
@@ -599,11 +604,11 @@ L.U.Marker = L.Marker.extend({
 
   appendEditFieldsets: function (container) {
     L.U.FeatureMixin.appendEditFieldsets.call(this, container)
-    var coordinatesOptions = [
+    const coordinatesOptions = [
       ['_latlng.lat', { handler: 'FloatInput', label: L._('Latitude') }],
       ['_latlng.lng', { handler: 'FloatInput', label: L._('Longitude') }],
     ]
-    var builder = new L.U.FormBuilder(this, coordinatesOptions, {
+    const builder = new L.U.FormBuilder(this, coordinatesOptions, {
       callback: function () {
         if (!this._latlng.isValid())
           return this.map.ui.alert({
@@ -615,7 +620,7 @@ L.U.Marker = L.Marker.extend({
       },
       callbackContext: this,
     })
-    var fieldset = L.DomUtil.createFieldset(container, L._('Coordinates'))
+    const fieldset = L.DomUtil.createFieldset(container, L._('Coordinates'))
     fieldset.appendChild(builder.build())
   },
 
@@ -629,7 +634,7 @@ L.U.Marker = L.Marker.extend({
   },
 
   isOnScreen: function () {
-    var bounds = this.map.getBounds()
+    const bounds = this.map.getBounds()
     return bounds.contains(this._latlng)
   },
 
@@ -696,8 +701,8 @@ L.U.PathMixin = {
 
   setStyle: function (options) {
     options = options || {}
-    var option
-    for (var idx in this.styleOptions) {
+    let option
+    for (const idx in this.styleOptions) {
       option = this.styleOptions[idx]
       options[option] = this.getOption(option)
     }
@@ -759,7 +764,7 @@ L.U.PathMixin = {
   },
 
   transferShape: function (at, to) {
-    var shape = this.enableEdit().deleteShapeAt(at)
+    const shape = this.enableEdit().deleteShapeAt(at)
     this.disableEdit()
     if (!shape) return
     to.enableEdit().appendShape(shape)
@@ -768,11 +773,11 @@ L.U.PathMixin = {
 
   isolateShape: function (at) {
     if (!this.isMulti()) return
-    var shape = this.enableEdit().deleteShapeAt(at)
+    const shape = this.enableEdit().deleteShapeAt(at)
     this.disableEdit()
     if (!shape) return
-    var properties = this.cloneProperties()
-    var other = new (this instanceof L.U.Polyline ? L.U.Polyline : L.U.Polygon)(
+    const properties = this.cloneProperties()
+    const other = new (this instanceof L.U.Polyline ? L.U.Polyline : L.U.Polygon)(
       this.map,
       shape,
       { geojson: { properties: properties } }
@@ -783,7 +788,7 @@ L.U.PathMixin = {
   },
 
   getContextMenuItems: function (e) {
-    var items = L.U.FeatureMixin.getContextMenuItems.call(this, e)
+    let items = L.U.FeatureMixin.getContextMenuItems.call(this, e)
     items.push({
       text: L._('Display measure'),
       callback: function () {
@@ -798,7 +803,7 @@ L.U.PathMixin = {
   },
 
   getContextMenuMultiItems: function (e) {
-    var items = [
+    const items = [
       '-',
       {
         text: L._('Remove shape from the multi'),
@@ -808,7 +813,7 @@ L.U.PathMixin = {
         context: this,
       },
     ]
-    var shape = this.shapeAt(e.latlng)
+    const shape = this.shapeAt(e.latlng)
     if (this._latlngs.indexOf(shape) > 0) {
       items.push({
         text: L._('Make main shape'),
@@ -823,7 +828,7 @@ L.U.PathMixin = {
   },
 
   getContextMenuEditItems: function (e) {
-    var items = L.U.FeatureMixin.getContextMenuEditItems.call(this, e)
+    const items = L.U.FeatureMixin.getContextMenuEditItems.call(this, e)
     if (
       this.map.editedFeature &&
       this.isSameClass(this.map.editedFeature) &&
@@ -850,7 +855,7 @@ L.U.PathMixin = {
   },
 
   getInplaceToolbarActions: function (e) {
-    var items = L.U.FeatureMixin.getInplaceToolbarActions.call(this, e)
+    const items = L.U.FeatureMixin.getInplaceToolbarActions.call(this, e)
     if (this.isMulti()) {
       items.push(L.U.DeleteShapeAction)
       items.push(L.U.ExtractShapeFromMultiAction)
@@ -859,7 +864,7 @@ L.U.PathMixin = {
   },
 
   isOnScreen: function () {
-    var bounds = this.map.getBounds()
+    const bounds = this.map.getBounds()
     return bounds.overlaps(this.getBounds())
   },
 }
@@ -882,14 +887,14 @@ L.U.Polyline = L.Polyline.extend({
   },
 
   getMeasure: function (shape) {
-    var length = L.GeoUtil.lineLength(this.map, shape || this._defaultShape())
+    const length = L.GeoUtil.lineLength(this.map, shape || this._defaultShape())
     return L.GeoUtil.readableDistance(length, this.map.measureTools.getMeasureUnit())
   },
 
   getContextMenuEditItems: function (e) {
-    var items = L.U.PathMixin.getContextMenuEditItems.call(this, e),
-      vertexClicked = e.vertex,
-      index
+    const items = L.U.PathMixin.getContextMenuEditItems.call(this, e)
+    const vertexClicked = e.vertex
+    let index
     if (!this.isMulti()) {
       items.push({
         text: L._('Transform to polygon'),
@@ -917,7 +922,7 @@ L.U.Polyline = L.Polyline.extend({
   },
 
   getContextMenuMultiItems: function (e) {
-    var items = L.U.PathMixin.getContextMenuMultiItems.call(this, e)
+    const items = L.U.PathMixin.getContextMenuMultiItems.call(this, e)
     items.push({
       text: L._('Merge lines'),
       callback: this.mergeShapes,
@@ -927,34 +932,34 @@ L.U.Polyline = L.Polyline.extend({
   },
 
   toPolygon: function () {
-    var geojson = this.toGeoJSON()
+    const geojson = this.toGeoJSON()
     geojson.geometry.type = 'Polygon'
     geojson.geometry.coordinates = [
       L.Util.flattenCoordinates(geojson.geometry.coordinates),
     ]
-    var polygon = this.datalayer.geojsonToFeatures(geojson)
+    const polygon = this.datalayer.geojsonToFeatures(geojson)
     polygon.edit()
     this.del()
   },
 
   getAdvancedEditActions: function (container) {
     L.U.FeatureMixin.getAdvancedEditActions.call(this, container)
-    var toPolygon = L.DomUtil.create('a', 'button umap-to-polygon', container)
+    const toPolygon = L.DomUtil.create('a', 'button umap-to-polygon', container)
     toPolygon.href = '#'
     toPolygon.textContent = L._('Transform to polygon')
     L.DomEvent.on(toPolygon, 'click', this.toPolygon, this)
   },
 
   _mergeShapes: function (from, to) {
-    var toLeft = to[0],
-      toRight = to[to.length - 1],
-      fromLeft = from[0],
-      fromRight = from[from.length - 1],
-      l2ldistance = toLeft.distanceTo(fromLeft),
-      l2rdistance = toLeft.distanceTo(fromRight),
-      r2ldistance = toRight.distanceTo(fromLeft),
-      r2rdistance = toRight.distanceTo(fromRight),
-      toMerge
+    const toLeft = to[0]
+    const toRight = to[to.length - 1]
+    const fromLeft = from[0]
+    const fromRight = from[from.length - 1]
+    const l2ldistance = toLeft.distanceTo(fromLeft)
+    const l2rdistance = toLeft.distanceTo(fromRight)
+    const r2ldistance = toRight.distanceTo(fromLeft)
+    const r2rdistance = toRight.distanceTo(fromRight)
+    let toMerge
     if (l2rdistance < Math.min(l2ldistance, r2ldistance, r2rdistance)) {
       toMerge = [from, to]
     } else if (r2ldistance < Math.min(l2ldistance, l2rdistance, r2rdistance)) {
@@ -966,7 +971,7 @@ L.U.Polyline = L.Polyline.extend({
       from.reverse()
       toMerge = [from, to]
     }
-    var a = toMerge[0],
+    const a = toMerge[0],
       b = toMerge[1],
       p1 = this.map.latLngToContainerPoint(a[a.length - 1]),
       p2 = this.map.latLngToContainerPoint(b[0]),
@@ -979,7 +984,7 @@ L.U.Polyline = L.Polyline.extend({
 
   mergeShapes: function () {
     if (!this.isMulti()) return
-    var latlngs = this.getLatLngs()
+    const latlngs = this.getLatLngs()
     if (!latlngs.length) return
     while (latlngs.length > 1) {
       latlngs.splice(0, 2, this._mergeShapes(latlngs[1], latlngs[0]))
@@ -995,7 +1000,7 @@ L.U.Polyline = L.Polyline.extend({
   },
 
   getVertexActions: function (e) {
-    var actions = L.U.FeatureMixin.getVertexActions.call(this, e),
+    const actions = L.U.FeatureMixin.getVertexActions.call(this, e),
       index = e.vertex.getIndex()
     if (index === 0 || index === e.vertex.getLastIndex())
       actions.push(L.U.ContinueLineAction)
@@ -1017,7 +1022,7 @@ L.U.Polygon = L.Polygon.extend({
   },
 
   getShapeOptions: function () {
-    var options = L.U.PathMixin.getShapeOptions()
+    const options = L.U.PathMixin.getShapeOptions()
     options.push(
       'properties._umap_options.stroke',
       'properties._umap_options.fill',
@@ -1028,7 +1033,7 @@ L.U.Polygon = L.Polygon.extend({
   },
 
   getInteractionOptions: function () {
-    var options = [
+    const options = [
       [
         'properties._umap_options.interactive',
         {
@@ -1056,12 +1061,12 @@ L.U.Polygon = L.Polygon.extend({
   },
 
   getMeasure: function (shape) {
-    var area = L.GeoUtil.geodesicArea(shape || this._defaultShape())
+    const area = L.GeoUtil.geodesicArea(shape || this._defaultShape())
     return L.GeoUtil.readableArea(area, this.map.measureTools.getMeasureUnit())
   },
 
   getContextMenuEditItems: function (e) {
-    var items = L.U.PathMixin.getContextMenuEditItems.call(this, e),
+    const items = L.U.PathMixin.getContextMenuEditItems.call(this, e),
       shape = this.shapeAt(e.latlng)
     // No multi and no holes.
     if (shape && !this.isMulti() && (L.LineUtil.isFlat(shape) || shape.length === 1)) {
@@ -1084,19 +1089,19 @@ L.U.Polygon = L.Polygon.extend({
   },
 
   toPolyline: function () {
-    var geojson = this.toGeoJSON()
+    const geojson = this.toGeoJSON()
     geojson.geometry.type = 'LineString'
     geojson.geometry.coordinates = L.Util.flattenCoordinates(
       geojson.geometry.coordinates
     )
-    var polyline = this.datalayer.geojsonToFeatures(geojson)
+    const polyline = this.datalayer.geojsonToFeatures(geojson)
     polyline.edit()
     this.del()
   },
 
   getAdvancedEditActions: function (container) {
     L.U.FeatureMixin.getAdvancedEditActions.call(this, container)
-    var toPolyline = L.DomUtil.create('a', 'button umap-to-polyline', container)
+    const toPolyline = L.DomUtil.create('a', 'button umap-to-polyline', container)
     toPolyline.href = '#'
     toPolyline.textContent = L._('Transform to lines')
     L.DomEvent.on(toPolyline, 'click', this.toPolyline, this)
@@ -1112,7 +1117,7 @@ L.U.Polygon = L.Polygon.extend({
   },
 
   getInplaceToolbarActions: function (e) {
-    var items = L.U.PathMixin.getInplaceToolbarActions.call(this, e)
+    const items = L.U.PathMixin.getInplaceToolbarActions.call(this, e)
     items.push(L.U.CreateHoleAction)
     return items
   },
diff --git a/umap/static/umap/js/umap.forms.js b/umap/static/umap/js/umap.forms.js
index 072e5cf2..d2bfb5f3 100644
--- a/umap/static/umap/js/umap.forms.js
+++ b/umap/static/umap/js/umap.forms.js
@@ -7,7 +7,7 @@ L.FormBuilder.Element.include({
         this.form
       )
     }
-    var className = 'formbox'
+    let className = 'formbox'
     if (this.options.inheritable) {
       className +=
         this.get(true) === undefined ? ' inheritable undefined' : ' inheritable '
@@ -16,8 +16,8 @@ L.FormBuilder.Element.include({
     this.wrapper = L.DomUtil.create('div', className, this.form)
     this.header = L.DomUtil.create('div', 'header', this.wrapper)
     if (this.options.inheritable) {
-      var undefine = L.DomUtil.add('a', 'button undefine', this.header, L._('clear'))
-      var define = L.DomUtil.add('a', 'button define', this.header, L._('define'))
+      const undefine = L.DomUtil.add('a', 'button undefine', this.header, L._('clear'))
+      const define = L.DomUtil.add('a', 'button define', this.header, L._('define'))
       L.DomEvent.on(
         define,
         'click',
@@ -60,7 +60,7 @@ L.FormBuilder.Element.include({
 
   get: function (own) {
     if (!this.options.inheritable || own) return this.builder.getter(this.field)
-    var path = this.field.split('.'),
+    const path = this.field.split('.'),
       key = path[path.length - 1]
     return this.obj.getOption(key)
   },
@@ -72,7 +72,7 @@ L.FormBuilder.Element.include({
       if (this.options.helpEntries)
         this.builder.map.help.button(this.label, this.options.helpEntries)
       else if (this.options.helpTooltip) {
-        var info = L.DomUtil.create('i', 'info', this.label)
+        const info = L.DomUtil.create('i', 'info', this.label)
         L.DomEvent.on(
           info,
           'mouseover',
@@ -278,7 +278,7 @@ L.FormBuilder.ColorPicker = L.FormBuilder.Input.extend({
       this.extendedContainer
     )
     this.container.style.display = 'none'
-    for (var idx in this.colors) {
+    for (const idx in this.colors) {
       this.addColor(this.colors[idx])
     }
     this.spreadColor()
@@ -295,7 +295,7 @@ L.FormBuilder.ColorPicker = L.FormBuilder.Input.extend({
   },
 
   onBlur: function () {
-    var self = this,
+    const self = this,
       closePicker = () => {
         self.container.style.display = 'none'
       }
@@ -314,9 +314,9 @@ L.FormBuilder.ColorPicker = L.FormBuilder.Input.extend({
   },
 
   addColor: function (colorName) {
-    var span = L.DomUtil.create('span', '', this.container)
+    const span = L.DomUtil.create('span', '', this.container)
     span.style.backgroundColor = span.title = colorName
-    var updateColorInput = function () {
+    const updateColorInput = function () {
       this.input.value = colorName
       this.sync()
       this.container.style.display = 'none'
@@ -384,8 +384,8 @@ L.FormBuilder.LayerTypeChooser = L.FormBuilder.Select.extend({
 
 L.FormBuilder.SlideshowDelay = L.FormBuilder.IntSelect.extend({
   getOptions: function () {
-    var options = []
-    for (var i = 1; i < 30; i++) {
+    const options = []
+    for (let i = 1; i < 30; i++) {
       options.push([i * 1000, L._('{delay} seconds', { delay: i })])
     }
     return options
@@ -394,7 +394,7 @@ L.FormBuilder.SlideshowDelay = L.FormBuilder.IntSelect.extend({
 
 L.FormBuilder.DataLayerSwitcher = L.FormBuilder.Select.extend({
   getOptions: function () {
-    var options = []
+    const options = []
     this.builder.map.eachDataLayerReverse((datalayer) => {
       if (datalayer.isLoaded() && !datalayer.isRemoteLayer() && datalayer.canBrowse()) {
         options.push([L.stamp(datalayer), datalayer.getName()])
@@ -450,10 +450,10 @@ L.FormBuilder.LabelDirection = L.FormBuilder.Select.extend({
 
 L.FormBuilder.LicenceChooser = L.FormBuilder.Select.extend({
   getOptions: function () {
-    var licences = [],
-      licencesList = this.builder.obj.options.licences,
-      licence
-    for (var i in licencesList) {
+    const licences = []
+    const licencesList = this.builder.obj.options.licences
+    let licence
+    for (const i in licencesList) {
       licence = licencesList[i]
       licences.push([i, licence.name])
     }
@@ -477,7 +477,7 @@ L.FormBuilder.NullableBoolean = L.FormBuilder.Select.extend({
   ],
 
   toJS: function () {
-    var value = this.value()
+    let value = this.value()
     switch (value) {
       case 'true':
       case true:
@@ -498,7 +498,7 @@ L.FormBuilder.BlurInput.include({
   build: function () {
     this.options.className = 'blur'
     L.FormBuilder.Input.prototype.build.call(this)
-    var button = L.DomUtil.create('span', 'button blur-button')
+    const button = L.DomUtil.create('span', 'button blur-button')
     L.DomUtil.after(this.input, button)
   },
 })
@@ -536,7 +536,7 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
     if (this.value() && this.value().indexOf('{') === -1) {
       // Do not try to render URL with variables
       if (this.isUrl()) {
-        var img = L.DomUtil.create(
+        const img = L.DomUtil.create(
           'img',
           '',
           L.DomUtil.create('div', 'umap-icon-choice', this.buttonsContainer)
@@ -544,7 +544,7 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
         img.src = this.value()
         L.DomEvent.on(img, 'click', this.fetchIconList, this)
       } else {
-        var el = L.DomUtil.create(
+        const el = L.DomUtil.create(
           'span',
           '',
           L.DomUtil.create('div', 'umap-icon-choice', this.buttonsContainer)
@@ -565,7 +565,7 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
   },
 
   addIconPreview: function (pictogram) {
-    var baseClass = 'umap-icon-choice',
+    const baseClass = 'umap-icon-choice',
       value = pictogram.src,
       className = value === this.value() ? baseClass + ' selected' : baseClass,
       container = L.DomUtil.create('div', className, this.pictogramsContainer),
@@ -600,10 +600,10 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
   buildIconList: function (data) {
     this.pictogramsContainer.innerHTML = ''
     this.buttonsContainer.innerHTML = ''
-    for (var idx in data.pictogram_list) {
+    for (const idx in data.pictogram_list) {
       this.addIconPreview(data.pictogram_list[idx])
     }
-    var cancelButton = L.DomUtil.create('a', '', this.pictogramsContainer)
+    const cancelButton = L.DomUtil.create('a', '', this.pictogramsContainer)
     cancelButton.textContent = L._('Cancel')
     cancelButton.href = '#'
     cancelButton.style.display = 'block'
@@ -617,7 +617,7 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
       },
       this
     )
-    var customButton = L.DomUtil.create('a', '', this.pictogramsContainer)
+    const customButton = L.DomUtil.create('a', '', this.pictogramsContainer)
     customButton.textContent = L._('Set symbol')
     customButton.href = '#'
     customButton.style.display = 'block'
@@ -642,8 +642,8 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
   },
 
   unselectAll: function (container) {
-    var els = container.querySelectorAll('div.selected')
-    for (var el in els) {
+    const els = container.querySelectorAll('div.selected')
+    for (const el in els) {
       if (els.hasOwnProperty(el)) L.DomUtil.removeClass(els[el], 'selected')
     }
   },
@@ -668,7 +668,7 @@ L.FormBuilder.Switch = L.FormBuilder.CheckBox.extend({
       this.label = L.DomUtil.create('label', '', this.input.parentNode)
     else this.input.parentNode.appendChild(this.label)
     L.DomUtil.addClass(this.input.parentNode, 'with-switch')
-    var id = (this.builder.options.id || Date.now()) + '.' + this.name
+    const id = (this.builder.options.id || Date.now()) + '.' + this.name
     this.label.setAttribute('for', id)
     L.DomUtil.addClass(this.input, 'switch')
     this.input.id = id
@@ -680,12 +680,12 @@ L.FormBuilder.MultiChoice = L.FormBuilder.Element.extend({
   className: 'umap-multiplechoice',
 
   clear: function () {
-    var checked = this.container.querySelector('input[type="radio"]:checked')
+    const checked = this.container.querySelector('input[type="radio"]:checked')
     if (checked) checked.checked = false
   },
 
   fetch: function () {
-    var value = (this.backup = this.toHTML())
+    let value = (this.backup = this.toHTML())
     if (!this.container.querySelector('input[type="radio"][value="' + value + '"]'))
       value = this.default
     this.container.querySelector(
@@ -694,7 +694,7 @@ L.FormBuilder.MultiChoice = L.FormBuilder.Element.extend({
   },
 
   value: function () {
-    var checked = this.container.querySelector('input[type="radio"]:checked')
+    const checked = this.container.querySelector('input[type="radio"]:checked')
     if (checked) return checked.value
   },
 
@@ -703,25 +703,25 @@ L.FormBuilder.MultiChoice = L.FormBuilder.Element.extend({
   },
 
   build: function () {
-    var choices = this.getChoices()
+    const choices = this.getChoices()
     this.container = L.DomUtil.create(
       'div',
       this.className + ' by' + choices.length,
       this.parentNode
     )
-    for (var i = 0; i < choices.length; i++) {
+    for (let i = 0; i < choices.length; i++) {
       this.addChoice(choices[i][0], choices[i][1], i)
     }
     this.fetch()
   },
 
   addChoice: function (value, label, counter) {
-    var input = L.DomUtil.create('input', '', this.container)
+    const input = L.DomUtil.create('input', '', this.container)
     label = L.DomUtil.add('label', '', this.container, label)
     input.type = 'radio'
     input.name = this.name
     input.value = value
-    var id = Date.now() + '.' + this.name + '.' + counter
+    const id = Date.now() + '.' + this.name + '.' + counter
     label.setAttribute('for', id)
     input.id = id
     L.DomEvent.on(input, 'change', this.sync, this)
@@ -732,7 +732,7 @@ L.FormBuilder.TernaryChoices = L.FormBuilder.MultiChoice.extend({
   default: 'null',
 
   toJS: function () {
-    var value = this.value()
+    let value = this.value()
     switch (value) {
       case 'true':
       case true:
@@ -776,7 +776,7 @@ L.FormBuilder.DataLayersControl = L.FormBuilder.ControlChoice.extend({
   ],
 
   toJS: function () {
-    var value = this.value()
+    let value = this.value()
     if (value !== 'expanded')
       value = L.FormBuilder.ControlChoice.prototype.toJS.call(this)
     return value
@@ -803,15 +803,15 @@ L.FormBuilder.Range = L.FormBuilder.Input.extend({
   },
 
   buildHelpText: function () {
-    var datalist = L.DomUtil.create(
+    const datalist = L.DomUtil.create(
       'datalist',
       'umap-field-datalist',
       this.getHelpTextParent()
     )
     datalist.id = `range-${this.options.label || this.name}`
     this.input.setAttribute('list', datalist.id)
-    var options = ''
-    for (var i = this.options.min; i <= this.options.max; i += this.options.step) {
+    let options = ''
+    for (let i = this.options.min; i <= this.options.max; i += this.options.step) {
       options += `<option value="${i.toPrecision(2)}" label="${i.toPrecision(
         2
       )}"></option>`
@@ -822,12 +822,12 @@ L.FormBuilder.Range = L.FormBuilder.Input.extend({
 
 L.FormBuilder.ManageOwner = L.FormBuilder.Element.extend({
   build: function () {
-    var options = {
+    const options = {
       className: 'edit-owner',
       on_select: L.bind(this.onSelect, this),
     }
     this.autocomplete = new L.U.AutoComplete.Ajax.Select(this.parentNode, options)
-    var owner = this.toHTML()
+    const owner = this.toHTML()
     if (owner)
       this.autocomplete.displaySelected({
         item: { value: owner.id, label: owner.name },
@@ -850,7 +850,7 @@ L.FormBuilder.ManageOwner = L.FormBuilder.Element.extend({
 
 L.FormBuilder.ManageEditors = L.FormBuilder.Element.extend({
   build: function () {
-    var options = {
+    const options = {
       className: 'edit-editors',
       on_select: L.bind(this.onSelect, this),
       on_unselect: L.bind(this.onUnselect, this),
@@ -861,7 +861,7 @@ L.FormBuilder.ManageEditors = L.FormBuilder.Element.extend({
     )
     this._values = this.toHTML()
     if (this._values)
-      for (var i = 0; i < this._values.length; i++)
+      for (let i = 0; i < this._values.length; i++)
         this.autocomplete.displaySelected({
           item: { value: this._values[i].id, label: this._values[i].name },
         })
@@ -881,7 +881,7 @@ L.FormBuilder.ManageEditors = L.FormBuilder.Element.extend({
   },
 
   onUnselect: function (choice) {
-    var index = this._values.findIndex((item) => item.id === choice.item.value)
+    const index = this._values.findIndex((item) => item.id === choice.item.value)
     if (index !== -1) {
       this._values.splice(index, 1)
       this.set()
diff --git a/umap/static/umap/js/umap.icon.js b/umap/static/umap/js/umap.icon.js
index 475501d0..1df22e2f 100644
--- a/umap/static/umap/js/umap.icon.js
+++ b/umap/static/umap/js/umap.icon.js
@@ -1,7 +1,7 @@
 L.U.Icon = L.DivIcon.extend({
   initialize: function (map, options) {
     this.map = map
-    var default_options = {
+    const default_options = {
       iconSize: null, // Made in css
       iconUrl: this.map.getDefaultOption('iconUrl'),
       feature: null,
@@ -15,7 +15,7 @@ L.U.Icon = L.DivIcon.extend({
   },
 
   _getIconUrl: function (name) {
-    var url
+    let url
     if (this.feature && this.feature._getIconUrl(name))
       url = this.feature._getIconUrl(name)
     else url = this.options[name + 'Url']
@@ -23,7 +23,7 @@ L.U.Icon = L.DivIcon.extend({
   },
 
   _getColor: function () {
-    var color
+    let color
     if (this.feature) color = this.feature.getOption('color')
     else if (this.options.color) color = this.options.color
     else color = this.map.getDefaultOption('color')
@@ -49,7 +49,7 @@ L.U.Icon.Default = L.U.Icon.extend({
   },
 
   _setColor: function () {
-    var color = this._getColor()
+    const color = this._getColor()
     this.elements.container.style.backgroundColor = color
     this.elements.arrow.style.borderTopColor = color
   },
@@ -63,7 +63,7 @@ L.U.Icon.Default = L.U.Icon.extend({
       this.elements.main
     )
     this.elements.arrow = L.DomUtil.create('div', 'icon_arrow', this.elements.main)
-    var src = this._getIconUrl('icon')
+    const src = this._getIconUrl('icon')
     if (src) {
       // An url.
       if (
@@ -86,7 +86,7 @@ L.U.Icon.Default = L.U.Icon.extend({
 
 L.U.Icon.Circle = L.U.Icon.extend({
   initialize: function (map, options) {
-    var default_options = {
+    const default_options = {
       iconAnchor: new L.Point(6, 6),
       popupAnchor: new L.Point(0, -6),
       tooltipAnchor: new L.Point(6, 0),
@@ -142,8 +142,8 @@ L.U.Icon.Ball = L.U.Icon.Default.extend({
   },
 
   _setColor: function () {
-    var color = this._getColor('color'),
-      background
+    const color = this._getColor('color')
+    let background
     if (L.Browser.ielt9) {
       background = color
     } else if (L.Browser.webkit) {
@@ -159,7 +159,7 @@ L.U.Icon.Ball = L.U.Icon.Default.extend({
   },
 })
 
-var _CACHE_COLOR = {}
+const _CACHE_COLOR = {}
 L.U.Icon.Cluster = L.DivIcon.extend({
   options: {
     iconSize: [40, 40],
@@ -171,7 +171,7 @@ L.U.Icon.Cluster = L.DivIcon.extend({
   },
 
   createIcon: function () {
-    var container = L.DomUtil.create('div', 'leaflet-marker-icon marker-cluster'),
+    const container = L.DomUtil.create('div', 'leaflet-marker-icon marker-cluster'),
       div = L.DomUtil.create('div', '', container),
       span = L.DomUtil.create('span', '', div),
       backgroundColor = this.datalayer.getColor()
@@ -181,8 +181,8 @@ L.U.Icon.Cluster = L.DivIcon.extend({
   },
 
   computeTextColor: function (el) {
-    var color,
-      backgroundColor = this.datalayer.getColor()
+    let color
+    const backgroundColor = this.datalayer.getColor()
     if (this.datalayer.options.cluster && this.datalayer.options.cluster.textColor) {
       color = this.datalayer.options.cluster.textColor
     }
diff --git a/umap/static/umap/js/umap.js b/umap/static/umap/js/umap.js
index 90f20170..7af18388 100644
--- a/umap/static/umap/js/umap.js
+++ b/umap/static/umap/js/umap.js
@@ -68,12 +68,12 @@ L.U.Map.include({
       L.setLocale(geojson.properties.locale)
 
     // Don't let default autocreation of controls
-    var zoomControl =
+    const zoomControl =
       typeof geojson.properties.zoomControl !== 'undefined'
         ? geojson.properties.zoomControl
         : true
     geojson.properties.zoomControl = false
-    var fullscreenControl =
+    const fullscreenControl =
       typeof geojson.properties.fullscreenControl !== 'undefined'
         ? geojson.properties.fullscreenControl
         : true
@@ -105,7 +105,7 @@ L.U.Map.include({
     L.Util.setBooleanFromQueryString(this.options, 'displayCaptionOnLoad')
     L.Util.setBooleanFromQueryString(this.options, 'captionBar')
     L.Util.setBooleanFromQueryString(this.options, 'captionMenus')
-    for (var i = 0; i < this.HIDDABLE_CONTROLS.length; i++) {
+    for (let i = 0; i < this.HIDDABLE_CONTROLS.length; i++) {
       L.Util.setNullableBooleanFromQueryString(
         this.options,
         this.HIDDABLE_CONTROLS[i] + 'Control'
@@ -121,8 +121,8 @@ L.U.Map.include({
 
     if (L.Browser.ielt9) this.options.allowEdit = false // TODO include ie9
 
-    var editedFeature = null,
-      self = this
+    let editedFeature = null
+    const self = this
     try {
       Object.defineProperty(this, 'editedFeature', {
         get: function () {
@@ -188,7 +188,7 @@ L.U.Map.include({
       this
     )
 
-    var isDirty = false // global status
+    let isDirty = false // global status
     try {
       Object.defineProperty(this, 'isDirty', {
         get: function () {
@@ -217,11 +217,11 @@ L.U.Map.include({
       this._default_extent = true
       this.options.name = L._('Untitled map')
       this.options.allowEdit = true
-      var datalayer = this.createDataLayer()
+      const datalayer = this.createDataLayer()
       datalayer.connectToMap()
       this.enableEdit()
-      var dataUrl = L.Util.queryString('dataUrl', null),
-        dataFormat = L.Util.queryString('dataFormat', 'geojson')
+      let dataUrl = L.Util.queryString('dataUrl', null)
+      const dataFormat = L.Util.queryString('dataFormat', 'geojson')
       if (dataUrl) {
         dataUrl = decodeURIComponent(dataUrl)
         dataUrl = this.localizeUrl(dataUrl)
@@ -257,7 +257,7 @@ L.U.Map.include({
     })
 
     window.onbeforeunload = (e) => {
-      var msg = L._('You have unsaved changes.')
+      const msg = L._('You have unsaved changes.')
       if (self.isDirty) {
         e.returnValue = msg
         return msg
@@ -277,7 +277,7 @@ L.U.Map.include({
 
       new L.U.DrawToolbar({ map: this }).addTo(this)
 
-      var editActions = [
+      const editActions = [
         L.U.ImportAction,
         L.U.EditPropertiesAction,
         L.U.ChangeTileLayerAction,
@@ -356,7 +356,7 @@ L.U.Map.include({
         }
       })
     }
-    var name, status, control
+    let name, status, control
     for (var i = 0; i < this.HIDDABLE_CONTROLS.length; i++) {
       name = this.HIDDABLE_CONTROLS[i]
       status = this.options[name + 'Control']
@@ -373,26 +373,26 @@ L.U.Map.include({
   },
 
   initDatalayers: function () {
-    var toload = (dataToload = seen = this.options.datalayers.length),
-      self = this,
-      datalayer
-    var loaded = () => {
+    let toload = (dataToload = seen = this.options.datalayers.length)
+    const self = this
+    let datalayer
+    const loaded = () => {
       self.datalayersLoaded = true
       self.fire('datalayersloaded')
     }
-    var decrementToLoad = () => {
+    const decrementToLoad = () => {
       toload--
       if (toload === 0) loaded()
     }
-    var dataLoaded = () => {
+    const dataLoaded = () => {
       self.dataLoaded = true
       self.fire('dataloaded')
     }
-    var decrementDataToLoad = () => {
+    const decrementDataToLoad = () => {
       dataToload--
       if (dataToload === 0) dataLoaded()
     }
-    for (var j = 0; j < this.options.datalayers.length; j++) {
+    for (let j = 0; j < this.options.datalayers.length; j++) {
       datalayer = this.createDataLayer(this.options.datalayers[j])
       if (datalayer.displayedOnLoad()) datalayer.onceLoaded(decrementToLoad)
       else decrementToLoad()
@@ -403,10 +403,10 @@ L.U.Map.include({
   },
 
   indexDatalayers: function () {
-    var panes = this.getPane('overlayPane'),
-      pane
+    const panes = this.getPane('overlayPane')
+    let pane
     this.datalayers_index = []
-    for (var i = 0; i < panes.children.length; i++) {
+    for (let i = 0; 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])
@@ -458,8 +458,8 @@ L.U.Map.include({
   },
 
   initShortcuts: function () {
-    var globalShortcuts = function (e) {
-      var key = e.keyCode,
+    const globalShortcuts = function (e) {
+      const key = e.keyCode,
         modifierKey = e.ctrlKey || e.metaKey
 
       /* Generic shortcuts */
@@ -527,7 +527,7 @@ L.U.Map.include({
 
   initTileLayers: function () {
     this.tilelayers = []
-    for (var i in this.options.tilelayers) {
+    for (const i in this.options.tilelayers) {
       if (this.options.tilelayers.hasOwnProperty(i)) {
         this.tilelayers.push(this.createTileLayer(this.options.tilelayers[i]))
         if (
@@ -592,8 +592,8 @@ L.U.Map.include({
   },
 
   eachTileLayer: function (method, context) {
-    var urls = []
-    for (var i in this.tilelayers) {
+    const urls = []
+    for (const i in this.tilelayers) {
       if (this.tilelayers.hasOwnProperty(i)) {
         method.call(context, this.tilelayers[i])
         urls.push(this.tilelayers[i]._url)
@@ -610,7 +610,7 @@ L.U.Map.include({
 
   setOverlay: function () {
     if (!this.options.overlay || !this.options.overlay.url_template) return
-    var overlay = this.createTileLayer(this.options.overlay)
+    const overlay = this.createTileLayer(this.options.overlay)
     try {
       this.addLayer(overlay)
       if (this.overlay) this.removeLayer(this.overlay)
@@ -649,12 +649,12 @@ L.U.Map.include({
   },
 
   handleLimitBounds: function () {
-    var south = parseFloat(this.options.limitBounds.south),
+    const south = parseFloat(this.options.limitBounds.south),
       west = parseFloat(this.options.limitBounds.west),
       north = parseFloat(this.options.limitBounds.north),
       east = parseFloat(this.options.limitBounds.east)
     if (!isNaN(south) && !isNaN(west) && !isNaN(north) && !isNaN(east)) {
-      var bounds = L.latLngBounds([
+      const bounds = L.latLngBounds([
         [south, west],
         [north, east],
       ])
@@ -715,7 +715,7 @@ L.U.Map.include({
   },
 
   updateTileLayers: function () {
-    var self = this,
+    const self = this,
       callback = (tilelayer) => {
         self.options.tilelayer = tilelayer.toJSON()
         self.isDirty = true
@@ -729,14 +729,14 @@ L.U.Map.include({
   },
 
   renderShareBox: function () {
-    var container = L.DomUtil.create('div', 'umap-share'),
-      embedTitle = L.DomUtil.add('h4', '', container, L._('Embed the map')),
-      iframe = L.DomUtil.create('textarea', 'umap-share-iframe', container),
-      urlTitle = L.DomUtil.add('h4', '', container, L._('Direct link')),
-      exportUrl = L.DomUtil.create('input', 'umap-share-url', container),
-      option
+    const container = L.DomUtil.create('div', 'umap-share')
+    const embedTitle = L.DomUtil.add('h4', '', container, L._('Embed the map'))
+    const iframe = L.DomUtil.create('textarea', 'umap-share-iframe', container)
+    const urlTitle = L.DomUtil.add('h4', '', container, L._('Direct link'))
+    const exportUrl = L.DomUtil.create('input', 'umap-share-url', container)
+    let option
     exportUrl.type = 'text'
-    var UIFields = [
+    const UIFields = [
       ['dimensions.width', { handler: 'Input', label: L._('width') }],
       ['dimensions.height', { handler: 'Input', label: L._('height') }],
       [
@@ -763,47 +763,44 @@ L.U.Map.include({
       'queryString.captionBar',
       'queryString.captionMenus',
     ]
-    for (var i = 0; i < this.HIDDABLE_CONTROLS.length; i++) {
+    for (let i = 0; i < this.HIDDABLE_CONTROLS.length; i++) {
       UIFields.push('queryString.' + this.HIDDABLE_CONTROLS[i] + 'Control')
     }
-    var iframeExporter = new L.U.IframeExporter(this)
-    var buildIframeCode = () => {
+    const iframeExporter = new L.U.IframeExporter(this)
+    const buildIframeCode = () => {
       iframe.innerHTML = iframeExporter.build()
       exportUrl.value = window.location.protocol + iframeExporter.buildUrl()
     }
     buildIframeCode()
-    var builder = new L.U.FormBuilder(iframeExporter, UIFields, {
+    const builder = new L.U.FormBuilder(iframeExporter, UIFields, {
       callback: buildIframeCode,
     })
-    var iframeOptions = L.DomUtil.createFieldset(
-      container,
-      L._('Export options')
-    )
+    const iframeOptions = L.DomUtil.createFieldset(container, L._('Export options'))
     iframeOptions.appendChild(builder.build())
     if (this.options.shortUrl) {
       L.DomUtil.create('hr', '', container)
       L.DomUtil.add('h4', '', container, L._('Short URL'))
-      var shortUrl = L.DomUtil.create('input', 'umap-short-url', container)
+      const shortUrl = L.DomUtil.create('input', 'umap-short-url', container)
       shortUrl.type = 'text'
       shortUrl.value = this.options.shortUrl
     }
     L.DomUtil.create('hr', '', container)
     L.DomUtil.add('h4', '', container, L._('Download data'))
-    var typeInput = L.DomUtil.create('select', '', container)
+    const typeInput = L.DomUtil.create('select', '', container)
     typeInput.name = 'format'
-    var exportCaveat = L.DomUtil.add(
+    const exportCaveat = L.DomUtil.add(
       'small',
       'help-text',
       container,
       L._('Only visible features will be downloaded.')
     )
     exportCaveat.id = 'export_caveat_text'
-    var toggleCaveat = () => {
+    const toggleCaveat = () => {
       if (typeInput.value === 'umap') exportCaveat.style.display = 'none'
       else exportCaveat.style.display = 'inherit'
     }
     L.DomEvent.on(typeInput, 'change', toggleCaveat)
-    var types = {
+    const types = {
       geojson: {
         formatter: function (map) {
           return JSON.stringify(map.toGeoJSON(), null, 2)
@@ -835,7 +832,7 @@ L.U.Map.include({
         selected: true,
       },
     }
-    for (var key in types) {
+    for (const key in types) {
       if (types.hasOwnProperty(key)) {
         option = L.DomUtil.create('option', '', typeInput)
         option.value = key
@@ -844,19 +841,19 @@ L.U.Map.include({
       }
     }
     toggleCaveat()
-    var download = L.DomUtil.create('a', 'button', container)
+    const download = L.DomUtil.create('a', 'button', container)
     download.textContent = L._('Download data')
     L.DomEvent.on(
       download,
       'click',
       function () {
-        var type = types[typeInput.value],
-          content = type.formatter(this),
-          name = this.options.name || 'data'
+        const type = types[typeInput.value]
+        const content = type.formatter(this)
+        let name = this.options.name || 'data'
         name = name.replace(/[^a-z0-9]/gi, '_').toLowerCase()
         download.download = name + type.ext
         window.URL = window.URL || window.webkitURL
-        var blob = new Blob([content], { type: type.filetype })
+        const blob = new Blob([content], { type: type.filetype })
         download.href = window.URL.createObjectURL(blob)
       },
       this
@@ -865,13 +862,13 @@ L.U.Map.include({
   },
 
   toGeoJSON: function () {
-    var features = []
+    let features = []
     this.eachDataLayer((datalayer) => {
       if (datalayer.isVisible()) {
         features = features.concat(datalayer.featuresToGeoJSON())
       }
     })
-    var geojson = {
+    const geojson = {
       type: 'FeatureCollection',
       features: features,
     }
@@ -879,21 +876,21 @@ L.U.Map.include({
   },
 
   importPanel: function () {
-    var container = L.DomUtil.create('div', 'umap-upload'),
-      title = L.DomUtil.create('h4', '', container),
-      presetBox = L.DomUtil.create('div', 'formbox', container),
-      presetSelect = L.DomUtil.create('select', '', presetBox),
-      fileBox = L.DomUtil.create('div', 'formbox', container),
-      fileInput = L.DomUtil.create('input', '', fileBox),
-      urlInput = L.DomUtil.create('input', '', container),
-      rawInput = L.DomUtil.create('textarea', '', container),
-      typeLabel = L.DomUtil.create('label', '', container),
-      layerLabel = L.DomUtil.create('label', '', container),
-      clearLabel = L.DomUtil.create('label', '', container),
-      submitInput = L.DomUtil.create('input', '', container),
-      map = this,
-      option,
-      types = ['geojson', 'csv', 'gpx', 'kml', 'osm', 'georss', 'umap']
+    const container = L.DomUtil.create('div', 'umap-upload')
+    const title = L.DomUtil.create('h4', '', container)
+    const presetBox = L.DomUtil.create('div', 'formbox', container)
+    const presetSelect = L.DomUtil.create('select', '', presetBox)
+    const fileBox = L.DomUtil.create('div', 'formbox', container)
+    const fileInput = L.DomUtil.create('input', '', fileBox)
+    const urlInput = L.DomUtil.create('input', '', container)
+    const rawInput = L.DomUtil.create('textarea', '', container)
+    const typeLabel = L.DomUtil.create('label', '', container)
+    const layerLabel = L.DomUtil.create('label', '', container)
+    const clearLabel = L.DomUtil.create('label', '', container)
+    const submitInput = L.DomUtil.create('input', '', container)
+    const map = this
+    let option
+    const types = ['geojson', 'csv', 'gpx', 'kml', 'osm', 'georss', 'umap']
     title.textContent = L._('Import data')
     fileInput.type = 'file'
     fileInput.multiple = 'multiple'
@@ -902,21 +899,21 @@ L.U.Map.include({
     submitInput.className = 'button'
     typeLabel.textContent = L._('Choose the format of the data to import')
     this.help.button(typeLabel, 'importFormats')
-    var typeInput = L.DomUtil.create('select', '', typeLabel)
+    const typeInput = L.DomUtil.create('select', '', typeLabel)
     typeInput.name = 'format'
     layerLabel.textContent = L._('Choose the layer to import in')
-    var layerInput = L.DomUtil.create('select', '', layerLabel)
+    const layerInput = L.DomUtil.create('select', '', layerLabel)
     layerInput.name = 'datalayer'
     urlInput.type = 'text'
     urlInput.placeholder = L._('Provide an URL here')
     rawInput.placeholder = L._('Paste your data here')
     clearLabel.textContent = L._('Replace layer content')
-    var clearFlag = L.DomUtil.create('input', '', clearLabel)
+    const clearFlag = L.DomUtil.create('input', '', clearLabel)
     clearFlag.type = 'checkbox'
     clearFlag.name = 'clear'
     this.eachDataLayerReverse((datalayer) => {
       if (datalayer.isLoaded() && !datalayer.isRemoteLayer()) {
-        var id = L.stamp(datalayer)
+        const id = L.stamp(datalayer)
         option = L.DomUtil.create('option', '', layerInput)
         option.value = id
         option.textContent = datalayer.options.name
@@ -932,14 +929,14 @@ L.U.Map.include({
       { value: '', textContent: L._('Choose the data format') },
       typeInput
     )
-    for (var i = 0; i < types.length; i++) {
+    for (let i = 0; i < types.length; i++) {
       option = L.DomUtil.create('option', '', typeInput)
       option.value = option.textContent = types[i]
     }
     if (this.options.importPresets.length) {
-      var noPreset = L.DomUtil.create('option', '', presetSelect)
+      const noPreset = L.DomUtil.create('option', '', presetSelect)
       noPreset.value = noPreset.textContent = L._('Choose a preset')
-      for (var j = 0; j < this.options.importPresets.length; j++) {
+      for (let j = 0; j < this.options.importPresets.length; j++) {
         option = L.DomUtil.create('option', '', presetSelect)
         option.value = this.options.importPresets[j].url
         option.textContent = this.options.importPresets[j].label
@@ -948,10 +945,10 @@ L.U.Map.include({
       presetBox.style.display = 'none'
     }
 
-    var submit = function () {
-      var type = typeInput.value,
-        layerId = layerInput[layerInput.selectedIndex].value,
-        layer
+    const submit = function () {
+      let type = typeInput.value
+      const layerId = layerInput[layerInput.selectedIndex].value
+      let layer
       if (type === 'umap') {
         this.once('postsync', function () {
           this.setView(this.latLng(this.options.center), this.options.zoom)
@@ -961,7 +958,7 @@ L.U.Map.include({
       if (layer && clearFlag.checked) layer.empty()
       if (fileInput.files.length) {
         var file
-        for (var i = 0, file; (file = fileInput.files[i]); i++) {
+        for (let i = 0, file; (file = fileInput.files[i]); i++) {
           type = type || L.Util.detectFileType(file)
           if (!type) {
             this.ui.alert({
@@ -975,7 +972,7 @@ L.U.Map.include({
           if (type === 'umap') {
             this.importFromFile(file, 'umap')
           } else {
-            var importLayer = layer
+            let importLayer = layer
             if (!layer) importLayer = this.createDataLayer({ name: file.name })
             importLayer.importFromFile(file, type)
           }
@@ -1007,9 +1004,9 @@ L.U.Map.include({
       fileInput,
       'change',
       (e) => {
-        var type = '',
+        let type = '',
           newType
-        for (var i = 0; i < e.target.files.length; i++) {
+        for (let i = 0; i < e.target.files.length; i++) {
           newType = L.Util.detectFileType(e.target.files[i])
           if (!type && newType) type = newType
           if (type && newType !== type) {
@@ -1025,12 +1022,12 @@ L.U.Map.include({
   },
 
   importRaw: function (rawData) {
-    var importedData = JSON.parse(rawData)
+    const importedData = JSON.parse(rawData)
 
-    var mustReindex = false
+    let mustReindex = false
 
-    for (var i = 0; i < this.editableOptions.length; i++) {
-      var option = this.editableOptions[i]
+    for (let i = 0; i < this.editableOptions.length; i++) {
+      const option = this.editableOptions[i]
       if (typeof importedData.properties[option] !== 'undefined') {
         this.options[option] = importedData.properties[option]
         if (option === 'sortKey') mustReindex = true
@@ -1038,9 +1035,9 @@ L.U.Map.include({
     }
 
     if (importedData.geometry) this.options.center = this.latLng(importedData.geometry)
-    var self = this
+    const self = this
     importedData.layers.forEach((geojson) => {
-      var dataLayer = self.createDataLayer()
+      const dataLayer = self.createDataLayer()
       dataLayer.fromUmapGeoJSON(geojson)
     })
 
@@ -1056,11 +1053,11 @@ L.U.Map.include({
   },
 
   importFromFile: function (file) {
-    var reader = new FileReader()
+    const reader = new FileReader()
     reader.readAsText(file)
-    var self = this
+    const self = this
     reader.onload = (e) => {
-      var rawData = e.target.result
+      const rawData = e.target.result
       try {
         self.importRaw(rawData)
       } catch (e) {
@@ -1086,17 +1083,17 @@ L.U.Map.include({
   },
 
   displayCaption: function () {
-    var container = L.DomUtil.create('div', 'umap-caption'),
-      title = L.DomUtil.create('h3', '', container)
+    const container = L.DomUtil.create('div', 'umap-caption')
+    let title = L.DomUtil.create('h3', '', container)
     title.textContent = this.options.name
     this.permissions.addOwnerLink('h5', container)
     if (this.options.description) {
-      var description = L.DomUtil.create('div', 'umap-map-description', container)
+      const description = L.DomUtil.create('div', 'umap-map-description', container)
       description.innerHTML = L.Util.toHTML(this.options.description)
     }
-    var datalayerContainer = L.DomUtil.create('div', 'datalayer-container', container)
+    const datalayerContainer = L.DomUtil.create('div', 'datalayer-container', container)
     this.eachVisibleDataLayer((datalayer) => {
-      var p = L.DomUtil.create('p', '', datalayerContainer),
+      const p = L.DomUtil.create('p', '', datalayerContainer),
         color = L.DomUtil.create('span', 'datalayer-color', p),
         headline = L.DomUtil.create('strong', '', p),
         description = L.DomUtil.create('span', '', p)
@@ -1109,7 +1106,7 @@ L.U.Map.include({
       datalayer.renderToolbox(headline)
       L.DomUtil.add('span', '', headline, datalayer.options.name + ' ')
     })
-    var creditsContainer = L.DomUtil.create('div', 'credits-container', container),
+    const creditsContainer = L.DomUtil.create('div', 'credits-container', container),
       credits = L.DomUtil.createFieldset(creditsContainer, L._('Credits'))
     title = L.DomUtil.add('h5', '', credits, L._('User content credits'))
     if (this.options.shortCredit || this.options.longCredit) {
@@ -1121,7 +1118,7 @@ L.U.Map.include({
       )
     }
     if (this.options.licence) {
-      var licence = L.DomUtil.add(
+      const licence = L.DomUtil.add(
           'p',
           '',
           credits,
@@ -1135,13 +1132,13 @@ L.U.Map.include({
     L.DomUtil.create('hr', '', credits)
     title = L.DomUtil.create('h5', '', credits)
     title.textContent = L._('Map background credits')
-    var tilelayerCredit = L.DomUtil.create('p', '', credits),
+    const tilelayerCredit = L.DomUtil.create('p', '', credits),
       name = L.DomUtil.create('strong', '', tilelayerCredit),
       attribution = L.DomUtil.create('span', '', tilelayerCredit)
     name.textContent = this.selected_tilelayer.options.name + ' '
     attribution.innerHTML = this.selected_tilelayer.getAttribution()
     L.DomUtil.create('hr', '', credits)
-    var umapCredit = L.DomUtil.create('p', '', credits),
+    const umapCredit = L.DomUtil.create('p', '', credits),
       urls = {
         leaflet: 'http://leafletjs.com',
         django: 'https://www.djangoproject.com',
@@ -1151,16 +1148,16 @@ L.U.Map.include({
       'Powered by <a href="{leaflet}">Leaflet</a> and <a href="{django}">Django</a>, glued by <a href="{umap}">uMap project</a>.',
       urls
     )
-    var browser = L.DomUtil.create('li', '')
+    const browser = L.DomUtil.create('li', '')
     L.DomUtil.create('i', 'umap-icon-16 umap-list', browser)
-    var labelBrowser = L.DomUtil.create('span', '', browser)
+    const labelBrowser = L.DomUtil.create('span', '', browser)
     labelBrowser.textContent = labelBrowser.title = L._('Browse data')
     L.DomEvent.on(browser, 'click', this.openBrowser, this)
-    var actions = [browser]
+    const actions = [browser]
     if (this.options.advancedFilterKey) {
-      var filter = L.DomUtil.create('li', '')
+      const filter = L.DomUtil.create('li', '')
       L.DomUtil.create('i', 'umap-icon-16 umap-add', filter)
-      var labelFilter = L.DomUtil.create('span', '', filter)
+      const labelFilter = L.DomUtil.create('span', '', filter)
       labelFilter.textContent = labelFilter.title = L._('Select data')
       L.DomEvent.on(filter, 'click', this.openFilter, this)
       actions.push(filter)
@@ -1169,13 +1166,13 @@ L.U.Map.include({
   },
 
   eachDataLayer: function (method, context) {
-    for (var i = 0; i < this.datalayers_index.length; i++) {
+    for (let i = 0; i < this.datalayers_index.length; i++) {
       method.call(context, this.datalayers_index[i])
     }
   },
 
   eachDataLayerReverse: function (method, context, filter) {
-    for (var i = this.datalayers_index.length - 1; i >= 0; i--) {
+    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])
     }
@@ -1190,7 +1187,7 @@ L.U.Map.include({
   },
 
   findDataLayer: function (method, context) {
-    for (var i = this.datalayers_index.length - 1; i >= 0; i--) {
+    for (let i = this.datalayers_index.length - 1; i >= 0; i--) {
       if (method.call(context, this.datalayers_index[i]))
         return this.datalayers_index[i]
     }
@@ -1297,8 +1294,8 @@ L.U.Map.include({
   ],
 
   exportOptions: function () {
-    var properties = {}
-    for (var i = this.editableOptions.length - 1; i >= 0; i--) {
+    const properties = {}
+    for (let i = this.editableOptions.length - 1; i >= 0; i--) {
       if (typeof this.options[this.editableOptions[i]] !== 'undefined') {
         properties[this.editableOptions[i]] = this.options[this.editableOptions[i]]
       }
@@ -1307,7 +1304,7 @@ L.U.Map.include({
   },
 
   serialize: function () {
-    var umapfile = {
+    const umapfile = {
       type: 'umap',
       uri: window.location.href,
       properties: this.exportOptions(),
@@ -1325,13 +1322,13 @@ L.U.Map.include({
   save: function () {
     if (!this.isDirty) return
     if (this._default_extent) this.updateExtent()
-    var geojson = {
+    const geojson = {
       type: 'Feature',
       geometry: this.geometry(),
       properties: this.exportOptions(),
     }
     this.backup()
-    var formData = new FormData()
+    const formData = new FormData()
     formData.append('name', this.options.name)
     formData.append('center', JSON.stringify(this.geometry()))
     formData.append('settings', JSON.stringify(geojson))
@@ -1339,7 +1336,7 @@ L.U.Map.include({
       data: formData,
       context: this,
       callback: function (data) {
-        var duration = 3000
+        let duration = 3000
         if (!this.options.umap_id) {
           duration = 100000 // we want a longer message at map creation (TODO UGLY)
           this.options.umap_id = data.id
@@ -1403,7 +1400,7 @@ L.U.Map.include({
 
   geometry: function () {
     /* Return a GeoJSON geometry Object */
-    var latlng = this.latLng(this.options.center || this.getCenter())
+    const latlng = this.latLng(this.options.center || this.getCenter())
     return {
       type: 'Point',
       coordinates: [latlng.lng, latlng.lat],
@@ -1411,7 +1408,7 @@ L.U.Map.include({
   },
 
   defaultDataLayer: function () {
-    var datalayer, fallback
+    let datalayer, fallback
     datalayer = this.lastUsedDataLayer
     if (
       datalayer &&
@@ -1441,8 +1438,8 @@ L.U.Map.include({
   },
 
   _editControls: function (container) {
-    var UIFields = []
-    for (var i = 0; i < this.HIDDABLE_CONTROLS.length; i++) {
+    let UIFields = []
+    for (let i = 0; i < this.HIDDABLE_CONTROLS.length; i++) {
       UIFields.push('options.' + this.HIDDABLE_CONTROLS[i] + 'Control')
     }
     UIFields = UIFields.concat([
@@ -1462,7 +1459,7 @@ L.U.Map.include({
       },
       callbackContext: this,
     })
-    var controlsOptions = L.DomUtil.createFieldset(
+    const controlsOptions = L.DomUtil.createFieldset(
       container,
       L._('User interface options')
     )
@@ -1470,7 +1467,7 @@ L.U.Map.include({
   },
 
   _editShapeProperties: function (container) {
-    var shapeOptions = [
+    const shapeOptions = [
       'options.color',
       'options.iconClass',
       'options.iconUrl',
@@ -1488,7 +1485,7 @@ L.U.Map.include({
         })
       },
     })
-    var defaultShapeProperties = L.DomUtil.createFieldset(
+    const defaultShapeProperties = L.DomUtil.createFieldset(
       container,
       L._('Default shape properties')
     )
@@ -1496,7 +1493,7 @@ L.U.Map.include({
   },
 
   _editDefaultProperties: function (container) {
-    var optionsFields = [
+    const optionsFields = [
       'options.smoothFactor',
       'options.dashArray',
       'options.zoomTo',
@@ -1552,7 +1549,7 @@ L.U.Map.include({
         })
       },
     })
-    var defaultProperties = L.DomUtil.createFieldset(
+    const defaultProperties = L.DomUtil.createFieldset(
       container,
       L._('Default properties')
     )
@@ -1560,7 +1557,7 @@ L.U.Map.include({
   },
 
   _editInteractionsProperties: function (container) {
-    var popupFields = [
+    const popupFields = [
       'options.popupShape',
       'options.popupTemplate',
       'options.popupContentTemplate',
@@ -1581,7 +1578,7 @@ L.U.Map.include({
         })
       },
     })
-    var popupFieldset = L.DomUtil.createFieldset(
+    const popupFieldset = L.DomUtil.createFieldset(
       container,
       L._('Default interaction options')
     )
@@ -1592,7 +1589,7 @@ L.U.Map.include({
     if (!L.Util.isObject(this.options.tilelayer)) {
       this.options.tilelayer = {}
     }
-    var tilelayerFields = [
+    const tilelayerFields = [
       [
         'options.tilelayer.name',
         { handler: 'BlurInput', placeholder: L._('display name') },
@@ -1619,7 +1616,10 @@ L.U.Map.include({
       ],
       ['options.tilelayer.tms', { handler: 'Switch', label: L._('TMS format') }],
     ]
-    var customTilelayer = L.DomUtil.createFieldset(container, L._('Custom background'))
+    const customTilelayer = L.DomUtil.createFieldset(
+      container,
+      L._('Custom background')
+    )
     builder = new L.U.FormBuilder(this, tilelayerFields, {
       callback: this.initTileLayers,
       callbackContext: this,
@@ -1631,7 +1631,7 @@ L.U.Map.include({
     if (!L.Util.isObject(this.options.overlay)) {
       this.options.overlay = {}
     }
-    var overlayFields = [
+    const overlayFields = [
       [
         'options.overlay.url_template',
         {
@@ -1659,7 +1659,7 @@ L.U.Map.include({
       ],
       ['options.overlay.tms', { handler: 'Switch', label: L._('TMS format') }],
     ]
-    var overlay = L.DomUtil.createFieldset(container, L._('Custom overlay'))
+    const overlay = L.DomUtil.createFieldset(container, L._('Custom overlay'))
     builder = new L.U.FormBuilder(this, overlayFields, {
       callback: this.initTileLayers,
       callbackContext: this,
@@ -1671,8 +1671,8 @@ L.U.Map.include({
     if (!L.Util.isObject(this.options.limitBounds)) {
       this.options.limitBounds = {}
     }
-    var limitBounds = L.DomUtil.createFieldset(container, L._('Limit bounds'))
-    var boundsFields = [
+    const limitBounds = L.DomUtil.createFieldset(container, L._('Limit bounds'))
+    const boundsFields = [
       [
         'options.limitBounds.south',
         { handler: 'BlurFloatInput', placeholder: L._('max South') },
@@ -1690,13 +1690,13 @@ L.U.Map.include({
         { handler: 'BlurFloatInput', placeholder: L._('max East') },
       ],
     ]
-    var boundsBuilder = new L.U.FormBuilder(this, boundsFields, {
+    const boundsBuilder = new L.U.FormBuilder(this, boundsFields, {
       callback: this.handleLimitBounds,
       callbackContext: this,
     })
     limitBounds.appendChild(boundsBuilder.build())
-    var boundsButtons = L.DomUtil.create('div', 'button-bar half', limitBounds)
-    var setCurrentButton = L.DomUtil.add(
+    const boundsButtons = L.DomUtil.create('div', 'button-bar half', limitBounds)
+    const setCurrentButton = L.DomUtil.add(
       'a',
       'button',
       boundsButtons,
@@ -1707,7 +1707,7 @@ L.U.Map.include({
       setCurrentButton,
       'click',
       function () {
-        var bounds = this.getBounds()
+        const bounds = this.getBounds()
         this.options.limitBounds.south = L.Util.formatNum(bounds.getSouth())
         this.options.limitBounds.west = L.Util.formatNum(bounds.getWest())
         this.options.limitBounds.north = L.Util.formatNum(bounds.getNorth())
@@ -1718,7 +1718,7 @@ L.U.Map.include({
       },
       this
     )
-    var emptyBounds = L.DomUtil.add('a', 'button', boundsButtons, L._('Empty'))
+    const emptyBounds = L.DomUtil.add('a', 'button', boundsButtons, L._('Empty'))
     emptyBounds.href = '#'
     L.DomEvent.on(
       emptyBounds,
@@ -1737,8 +1737,8 @@ L.U.Map.include({
   },
 
   _editSlideshow: function (container) {
-    var slideshow = L.DomUtil.createFieldset(container, L._('Slideshow'))
-    var slideshowFields = [
+    const slideshow = L.DomUtil.createFieldset(container, L._('Slideshow'))
+    const slideshowFields = [
       [
         'options.slideshow.active',
         { handler: 'Switch', label: L._('Activate slideshow mode') },
@@ -1759,11 +1759,11 @@ L.U.Map.include({
         { handler: 'Switch', label: L._('Autostart when map is loaded') },
       ],
     ]
-    var slideshowHandler = function () {
+    const slideshowHandler = function () {
       this.slideshow.setOptions(this.options.slideshow)
       this.renderControls()
     }
-    var slideshowBuilder = new L.U.FormBuilder(this, slideshowFields, {
+    const slideshowBuilder = new L.U.FormBuilder(this, slideshowFields, {
       callback: slideshowHandler,
       callbackContext: this,
     })
@@ -1771,8 +1771,8 @@ L.U.Map.include({
   },
 
   _editCredits: function (container) {
-    var credits = L.DomUtil.createFieldset(container, L._('Credits'))
-    var creditsFields = [
+    const credits = L.DomUtil.createFieldset(container, L._('Credits'))
+    const creditsFields = [
       ['options.licence', { handler: 'LicenceChooser', label: L._('licence') }],
       [
         'options.shortCredit',
@@ -1803,7 +1803,7 @@ L.U.Map.include({
         { handler: 'Switch', label: L._('Permanent credits background') },
       ],
     ]
-    var creditsBuilder = new L.U.FormBuilder(this, creditsFields, {
+    const creditsBuilder = new L.U.FormBuilder(this, creditsFields, {
       callback: this.renderControls,
       callbackContext: this,
     })
@@ -1811,23 +1811,23 @@ L.U.Map.include({
   },
 
   _advancedActions: function (container) {
-    var advancedActions = L.DomUtil.createFieldset(container, L._('Advanced actions'))
-    var advancedButtons = L.DomUtil.create('div', 'button-bar half', advancedActions)
-    var del = L.DomUtil.create('a', 'button umap-delete', advancedButtons)
+    const advancedActions = L.DomUtil.createFieldset(container, L._('Advanced actions'))
+    const advancedButtons = L.DomUtil.create('div', 'button-bar half', advancedActions)
+    const del = L.DomUtil.create('a', 'button umap-delete', advancedButtons)
     del.href = '#'
     del.textContent = L._('Delete')
     L.DomEvent.on(del, 'click', L.DomEvent.stop).on(del, 'click', this.del, this)
-    var clone = L.DomUtil.create('a', 'button umap-clone', advancedButtons)
+    const clone = L.DomUtil.create('a', 'button umap-clone', advancedButtons)
     clone.href = '#'
     clone.textContent = L._('Clone')
     clone.title = L._('Clone this map')
     L.DomEvent.on(clone, 'click', L.DomEvent.stop).on(clone, 'click', this.clone, this)
-    var empty = L.DomUtil.create('a', 'button umap-empty', advancedButtons)
+    const empty = L.DomUtil.create('a', 'button umap-empty', advancedButtons)
     empty.href = '#'
     empty.textContent = L._('Empty')
     empty.title = L._('Delete all layers')
     L.DomEvent.on(empty, 'click', L.DomEvent.stop).on(empty, 'click', this.empty, this)
-    var download = L.DomUtil.create('a', 'button umap-download', advancedButtons)
+    const download = L.DomUtil.create('a', 'button umap-download', advancedButtons)
     download.href = '#'
     download.textContent = L._('Download')
     download.title = L._('Open download panel')
@@ -1841,12 +1841,12 @@ L.U.Map.include({
 
   edit: function () {
     if (!this.editEnabled) return
-    var container = L.DomUtil.create('div', 'umap-edit-container'),
+    const container = L.DomUtil.create('div', 'umap-edit-container'),
       metadataFields = ['options.name', 'options.description'],
       title = L.DomUtil.create('h4', '', container)
     title.textContent = L._('Edit map properties')
-    var builder = new L.U.FormBuilder(this, metadataFields)
-    var form = builder.build()
+    const builder = new L.U.FormBuilder(this, metadataFields)
+    const form = builder.build()
     container.appendChild(form)
     this._editControls(container)
     this._editShapeProperties(container)
@@ -1881,15 +1881,24 @@ L.U.Map.include({
   },
 
   initCaptionBar: function () {
-    var container = L.DomUtil.create('div', 'umap-caption-bar', this._controlContainer),
+    const container = L.DomUtil.create(
+        'div',
+        'umap-caption-bar',
+        this._controlContainer
+      ),
       name = L.DomUtil.create('h3', '', container)
     L.DomEvent.disableClickPropagation(container)
     this.permissions.addOwnerLink('span', container)
     if (this.options.captionMenus) {
-      var about = L.DomUtil.add('a', 'umap-about-link', container, ' — ' + L._('About'))
+      const about = L.DomUtil.add(
+        'a',
+        'umap-about-link',
+        container,
+        ' — ' + L._('About')
+      )
       about.href = '#'
       L.DomEvent.on(about, 'click', this.displayCaption, this)
-      var browser = L.DomUtil.add(
+      const browser = L.DomUtil.add(
         'a',
         'umap-open-browser-link',
         container,
@@ -1903,7 +1912,7 @@ L.U.Map.include({
         this
       )
       if (this.options.advancedFilterKey) {
-        var filter = L.DomUtil.add(
+        const filter = L.DomUtil.add(
           'a',
           'umap-open-filter-link',
           container,
@@ -1918,7 +1927,7 @@ L.U.Map.include({
         )
       }
     }
-    var setName = function () {
+    const setName = function () {
       name.textContent = this.getDisplayName()
     }
     L.bind(setName, this)()
@@ -1929,7 +1938,7 @@ L.U.Map.include({
   },
 
   initEditBar: function () {
-    var container = L.DomUtil.create(
+    const container = L.DomUtil.create(
         'div',
         'umap-main-edit-toolbox with-transition dark',
         this._controlContainer
@@ -1943,15 +1952,19 @@ L.U.Map.include({
     L.DomEvent.on(name, 'click', this.edit, this)
     this.on('postsync', L.bind(setName, this))
     this.help.button(title, 'edit')
-    var save = L.DomUtil.create('a', 'leaflet-control-edit-save button', container)
+    const save = L.DomUtil.create('a', 'leaflet-control-edit-save button', container)
     save.href = '#'
     save.title = L._('Save current edits') + ' (Ctrl+S)'
     save.textContent = L._('Save')
-    var cancel = L.DomUtil.create('a', 'leaflet-control-edit-cancel button', container)
+    const cancel = L.DomUtil.create(
+      'a',
+      'leaflet-control-edit-cancel button',
+      container
+    )
     cancel.href = '#'
     cancel.title = L._('Cancel edits')
     cancel.textContent = L._('Cancel')
-    var disable = L.DomUtil.create('a', 'leaflet-control-edit-disable', container)
+    const disable = L.DomUtil.create('a', 'leaflet-control-edit-disable', container)
     disable.href = '#'
     disable.title = disable.textContent = L._('Disable editing')
 
@@ -2001,7 +2014,7 @@ L.U.Map.include({
 
   del: function () {
     if (confirm(L._('Are you sure you want to delete this map?'))) {
-      var url = L.Util.template(this.options.urls.map_delete, {
+      const url = L.Util.template(this.options.urls.map_delete, {
         map_id: this.options.umap_id,
       })
       this.post(url)
@@ -2012,7 +2025,7 @@ L.U.Map.include({
     if (
       confirm(L._('Are you sure you want to clone this map and all its datalayers?'))
     ) {
-      var url = L.Util.template(this.options.urls.map_clone, {
+      const url = L.Util.template(this.options.urls.map_clone, {
         map_id: this.options.umap_id,
       })
       this.post(url)
@@ -2053,7 +2066,7 @@ L.U.Map.include({
   },
 
   setContextMenuItems: function (e) {
-    var items = []
+    let items = []
     if (this._zoom !== this.getMaxZoom()) {
       items.push({
         text: L._('Zoom in'),
@@ -2149,9 +2162,9 @@ L.U.Map.include({
   },
 
   openExternalRouting: function (e) {
-    var url = this.options.urls.routing
+    const url = this.options.urls.routing
     if (url) {
-      var params = {
+      const params = {
         lat: e.latlng.lat,
         lng: e.latlng.lng,
         locale: L.locale,
@@ -2167,7 +2180,7 @@ L.U.Map.include({
   },
 
   getGeoContext: function () {
-    var context = {
+    const context = {
       bbox: this.getBounds().toBBoxString(),
       north: this.getBounds().getNorthEast().lat,
       east: this.getBounds().getNorthEast().lng,
@@ -2199,7 +2212,7 @@ L.U.Map.include({
   },
 
   closeInplaceToolbar: function () {
-    var toolbar = this._toolbars[L.Toolbar.Popup._toolbar_class_id]
+    const toolbar = this._toolbars[L.Toolbar.Popup._toolbar_class_id]
     if (toolbar) toolbar.remove()
   },
 
diff --git a/umap/static/umap/js/umap.layer.js b/umap/static/umap/js/umap.layer.js
index 6b9c5750..1da7fdde 100644
--- a/umap/static/umap/js/umap.layer.js
+++ b/umap/static/umap/js/umap.layer.js
@@ -28,7 +28,7 @@ L.U.MarkerCluster = L.MarkerCluster.extend({
 
   _initIcon: function () {
     L.MarkerCluster.prototype._initIcon.call(this)
-    var div = this._icon.querySelector('div')
+    const div = this._icon.querySelector('div')
     // Compute text color only when icon is added to the DOM.
     div.style.color = this._iconObj.computeTextColor(div)
   },
@@ -40,7 +40,7 @@ L.U.Layer.Cluster = L.MarkerClusterGroup.extend({
 
   initialize: function (datalayer) {
     this.datalayer = datalayer
-    var options = {
+    const options = {
       polygonOptions: {
         color: this.datalayer.getColor(),
       },
@@ -103,7 +103,7 @@ L.U.Layer.Heat = L.HeatLayer.extend({
 
   addLayer: function (layer) {
     if (layer instanceof L.Marker) {
-      var latlng = layer.getLatLng(),
+      let latlng = layer.getLatLng(),
         alt
       if (
         this.datalayer.options.heat &&
@@ -192,9 +192,9 @@ L.U.DataLayer = L.Evented.extend({
     this.pane.dataset.id = L.stamp(this)
     this.renderer = L.svg({ pane: this.pane })
 
-    var isDirty = false,
-      isDeleted = false,
-      self = this
+    let isDirty = false
+    let isDeleted = false
+    const self = this
     try {
       Object.defineProperty(this, 'isDirty', {
         get: function () {
@@ -267,13 +267,13 @@ L.U.DataLayer = L.Evented.extend({
 
   resetLayer: function (force) {
     if (this.layer && this.options.type === this.layer._type && !force) return
-    var visible = this.isVisible()
+    const visible = this.isVisible()
     if (this.layer) this.layer.clearLayers()
     // delete this.layer?
     if (visible) this.map.removeLayer(this.layer)
-    var Class = L.U.Layer[this.options.type] || L.U.Layer.Default
+    const Class = L.U.Layer[this.options.type] || L.U.Layer.Default
     this.layer = new Class(this)
-    var filterKeys = this.map.getFilterKeys(),
+    const filterKeys = this.map.getFilterKeys(),
       filter = this.map.options.filter
     this.eachLayer(function (layer) {
       if (filter && !layer.matchFilter(filter, filterKeys)) return
@@ -284,7 +284,7 @@ L.U.DataLayer = L.Evented.extend({
   },
 
   eachLayer: function (method, context) {
-    for (var i in this._layers) {
+    for (const i in this._layers) {
       method.call(context || this, this._layers[i])
     }
     return this
@@ -292,7 +292,7 @@ L.U.DataLayer = L.Evented.extend({
 
   eachFeature: function (method, context) {
     if (this.layer && this.layer.canBrowse) {
-      for (var i = 0; i < this._index.length; i++) {
+      for (let i = 0; i < this._index.length; i++) {
         method.call(context || this, this._layers[this._index[i]])
       }
     }
@@ -342,18 +342,18 @@ L.U.DataLayer = L.Evented.extend({
   },
 
   reindex: function () {
-    var features = []
+    const features = []
     this.eachFeature((feature) => features.push(feature))
     L.Util.sortFeatures(features, this.map.getOption('sortKey'))
     this._index = []
-    for (var i = 0; i < features.length; i++) {
+    for (let i = 0; i < features.length; i++) {
       this._index.push(L.Util.stamp(features[i]))
     }
   },
 
   fetchRemoteData: function () {
     if (!this.isRemoteLayer()) return
-    var from = parseInt(this.options.remoteData.from, 10),
+    const from = parseInt(this.options.remoteData.from, 10),
       to = parseInt(this.options.remoteData.to, 10)
     if (
       (!isNaN(from) && this.map.getZoom() < from) ||
@@ -364,7 +364,7 @@ L.U.DataLayer = L.Evented.extend({
     }
     if (!this.options.remoteData.dynamic && this.hasDataLoaded()) return
     if (!this.isVisible()) return
-    var url = this.map.localizeUrl(this.options.remoteData.url)
+    let url = this.map.localizeUrl(this.options.remoteData.url)
     if (this.options.remoteData.proxy)
       url = this.map.proxyUrl(url, this.options.remoteData.ttl)
     this.map.ajax({
@@ -423,7 +423,7 @@ L.U.DataLayer = L.Evented.extend({
   },
 
   connectToMap: function () {
-    var id = L.stamp(this)
+    const id = L.stamp(this)
     if (!this.map.datalayers[id]) {
       this.map.datalayers[id] = this
       if (L.Util.indexOf(this.map.datalayers_index, this) === -1)
@@ -433,11 +433,13 @@ L.U.DataLayer = L.Evented.extend({
   },
 
   _dataUrl: function () {
-    var template = this.map.options.urls.datalayer_view,
-      url = L.Util.template(template, {
-        pk: this.umap_id,
-        map_id: this.map.options.umap_id,
-      })
+    const template = this.map.options.urls.datalayer_view
+
+    let url = L.Util.template(template, {
+      pk: this.umap_id,
+      map_id: this.map.options.umap_id,
+    })
+
     // No browser cache for owners/editors.
     if (this.map.options.allowEdit) url = url + '?' + Date.now()
     return url
@@ -456,7 +458,7 @@ L.U.DataLayer = L.Evented.extend({
   },
 
   addLayer: function (feature) {
-    var id = L.stamp(feature)
+    const id = L.stamp(feature)
     feature.connectToDataLayer(this)
     this._index.push(id)
     this._layers[id] = feature
@@ -467,7 +469,7 @@ L.U.DataLayer = L.Evented.extend({
   },
 
   removeLayer: function (feature) {
-    var id = L.stamp(feature)
+    const id = L.stamp(feature)
     feature.disconnectFromDataLayer(this)
     this._index.splice(this._index.indexOf(id), 1)
     delete this._layers[id]
@@ -477,7 +479,7 @@ L.U.DataLayer = L.Evented.extend({
   },
 
   indexProperties: function (feature) {
-    for (var i in feature.properties)
+    for (const i in feature.properties)
       if (typeof feature.properties[i] !== 'object') this.indexProperty(i)
   },
 
@@ -489,7 +491,7 @@ L.U.DataLayer = L.Evented.extend({
   },
 
   deindexProperty: function (name) {
-    var idx = this._propertiesIndex.indexOf(name)
+    const idx = this._propertiesIndex.indexOf(name)
     if (idx !== -1) this._propertiesIndex.splice(idx, 1)
   },
 
@@ -509,7 +511,7 @@ L.U.DataLayer = L.Evented.extend({
   },
 
   rawToGeoJSON: function (c, type, callback) {
-    var toDom = (x) => new DOMParser().parseFromString(x, 'text/xml')
+    const toDom = (x) => new DOMParser().parseFromString(x, 'text/xml')
 
     // TODO add a duck typing guessType
     if (type === 'csv') {
@@ -521,7 +523,7 @@ L.U.DataLayer = L.Evented.extend({
         },
         (err, result) => {
           if (err) {
-            var message
+            let message
             if (err.type === 'Error') {
               message = err.message
             } else {
@@ -545,7 +547,7 @@ L.U.DataLayer = L.Evented.extend({
     } else if (type === 'kml') {
       callback(toGeoJSON.kml(toDom(c)))
     } else if (type === 'osm') {
-      var d
+      let d
       try {
         d = JSON.parse(c)
       } catch (e) {
@@ -554,7 +556,7 @@ L.U.DataLayer = L.Evented.extend({
       callback(osmtogeojson(d, { flatProperties: true }))
     } else if (type === 'geojson') {
       try {
-        var gj = JSON.parse(c)
+        const gj = JSON.parse(c)
         callback(gj)
       } catch (err) {
         this.map.ui.alert({ content: 'Invalid JSON file: ' + err })
@@ -565,11 +567,11 @@ L.U.DataLayer = L.Evented.extend({
 
   geojsonToFeatures: function (geojson) {
     if (!geojson) return
-    var features = geojson instanceof Array ? geojson : geojson.features,
-      i,
-      len,
-      latlng,
-      latlngs
+    const features = geojson instanceof Array ? geojson : geojson.features
+    let i
+    let len
+    let latlng
+    let latlngs
 
     if (features) {
       L.Util.sortFeatures(features, this.map.getOption('sortKey'))
@@ -579,11 +581,11 @@ L.U.DataLayer = L.Evented.extend({
       return this
     }
 
-    var geometry = geojson.type === 'Feature' ? geojson.geometry : geojson
+    const geometry = geojson.type === 'Feature' ? geojson.geometry : geojson
     if (!geometry) return // null geometry is valid geojson.
-    var coords = geometry.coordinates,
-      layer,
-      tmp
+    const coords = geometry.coordinates
+    let layer
+    let tmp
 
     switch (geometry.type) {
       case 'Point':
@@ -655,13 +657,13 @@ L.U.DataLayer = L.Evented.extend({
   },
 
   importFromFiles: function (files, type) {
-    for (var i = 0, f; (f = files[i]); i++) {
+    for (let i = 0, f; (f = files[i]); i++) {
       this.importFromFile(f, type)
     }
   },
 
   importFromFile: function (f, type) {
-    var reader = new FileReader()
+    const reader = new FileReader()
     type = type || L.Util.detectFileType(f)
     reader.readAsText(f)
     reader.onload = (e) => this.importRaw(e.target.result, type)
@@ -731,10 +733,10 @@ L.U.DataLayer = L.Evented.extend({
   },
 
   clone: function () {
-    var options = L.Util.CopyJSON(this.options)
+    const options = L.Util.CopyJSON(this.options)
     options.name = L._('Clone of {name}', { name: this.options.name })
     delete options.id
-    var geojson = L.Util.CopyJSON(this._geojson),
+    const geojson = L.Util.CopyJSON(this._geojson),
       datalayer = this.map.createDataLayer(options)
     datalayer.fromGeoJSON(geojson)
     return datalayer
@@ -779,7 +781,7 @@ L.U.DataLayer = L.Evented.extend({
     if (!this.map.editEnabled || !this.isLoaded()) {
       return
     }
-    var container = L.DomUtil.create('div', 'umap-layer-properties-container'),
+    const container = L.DomUtil.create('div', 'umap-layer-properties-container'),
       metadataFields = [
         'options.name',
         'options.description',
@@ -794,8 +796,8 @@ L.U.DataLayer = L.Evented.extend({
           },
         ],
       ]
-    var title = L.DomUtil.add('h3', '', container, L._('Layer properties'))
-    var builder = new L.U.FormBuilder(this, metadataFields, {
+    const title = L.DomUtil.add('h3', '', container, L._('Layer properties'))
+    let builder = new L.U.FormBuilder(this, metadataFields, {
       callback: function (e) {
         this.map.updateDatalayersControl()
         if (e.helper.field === 'options.type') {
@@ -806,7 +808,7 @@ L.U.DataLayer = L.Evented.extend({
     })
     container.appendChild(builder.build())
 
-    var shapeOptions = [
+    let shapeOptions = [
       'options.color',
       'options.iconClass',
       'options.iconUrl',
@@ -820,7 +822,7 @@ L.U.DataLayer = L.Evented.extend({
 
     shapeOptions = shapeOptions.concat(this.layer.getEditableOptions())
 
-    var redrawCallback = function (field) {
+    const redrawCallback = function (field) {
       this.hide()
       this.layer.postUpdate(field)
       this.show()
@@ -830,10 +832,10 @@ L.U.DataLayer = L.Evented.extend({
       id: 'datalayer-advanced-properties',
       callback: redrawCallback,
     })
-    var shapeProperties = L.DomUtil.createFieldset(container, L._('Shape properties'))
+    const shapeProperties = L.DomUtil.createFieldset(container, L._('Shape properties'))
     shapeProperties.appendChild(builder.build())
 
-    var optionsFields = [
+    let optionsFields = [
       'options.smoothFactor',
       'options.dashArray',
       'options.zoomTo',
@@ -846,13 +848,13 @@ L.U.DataLayer = L.Evented.extend({
       id: 'datalayer-advanced-properties',
       callback: redrawCallback,
     })
-    var advancedProperties = L.DomUtil.createFieldset(
+    const advancedProperties = L.DomUtil.createFieldset(
       container,
       L._('Advanced properties')
     )
     advancedProperties.appendChild(builder.build())
 
-    var popupFields = [
+    const popupFields = [
       'options.popupShape',
       'options.popupTemplate',
       'options.popupContentTemplate',
@@ -861,13 +863,16 @@ L.U.DataLayer = L.Evented.extend({
       'options.labelInteractive',
     ]
     builder = new L.U.FormBuilder(this, popupFields, { callback: redrawCallback })
-    var popupFieldset = L.DomUtil.createFieldset(container, L._('Interaction options'))
+    const popupFieldset = L.DomUtil.createFieldset(
+      container,
+      L._('Interaction options')
+    )
     popupFieldset.appendChild(builder.build())
 
     if (!L.Util.isObject(this.options.remoteData)) {
       this.options.remoteData = {}
     }
-    var remoteDataFields = [
+    const remoteDataFields = [
       [
         'options.remoteData.url',
         { handler: 'Url', label: L._('Url'), helpEntries: 'formatURL' },
@@ -905,15 +910,15 @@ L.U.DataLayer = L.Evented.extend({
       ])
     }
 
-    var remoteDataContainer = L.DomUtil.createFieldset(container, L._('Remote data'))
+    const remoteDataContainer = L.DomUtil.createFieldset(container, L._('Remote data'))
     builder = new L.U.FormBuilder(this, remoteDataFields)
     remoteDataContainer.appendChild(builder.build())
 
     if (this.map.options.urls.datalayer_versions) this.buildVersionsFieldset(container)
 
-    var advancedActions = L.DomUtil.createFieldset(container, L._('Advanced actions'))
-    var advancedButtons = L.DomUtil.create('div', 'button-bar half', advancedActions)
-    var deleteLink = L.DomUtil.create(
+    const advancedActions = L.DomUtil.createFieldset(container, L._('Advanced actions'))
+    const advancedButtons = L.DomUtil.create('div', 'button-bar half', advancedActions)
+    const deleteLink = L.DomUtil.create(
       'a',
       'button delete_datalayer_button umap-delete',
       advancedButtons
@@ -930,7 +935,7 @@ L.U.DataLayer = L.Evented.extend({
       this
     )
     if (!this.isRemoteLayer()) {
-      var emptyLink = L.DomUtil.create('a', 'button umap-empty', advancedButtons)
+      const emptyLink = L.DomUtil.create('a', 'button umap-empty', advancedButtons)
       emptyLink.textContent = L._('Empty')
       emptyLink.href = '#'
       L.DomEvent.on(emptyLink, 'click', L.DomEvent.stop).on(
@@ -940,20 +945,20 @@ L.U.DataLayer = L.Evented.extend({
         this
       )
     }
-    var cloneLink = L.DomUtil.create('a', 'button umap-clone', advancedButtons)
+    const cloneLink = L.DomUtil.create('a', 'button umap-clone', advancedButtons)
     cloneLink.textContent = L._('Clone')
     cloneLink.href = '#'
     L.DomEvent.on(cloneLink, 'click', L.DomEvent.stop).on(
       cloneLink,
       'click',
       function () {
-        var datalayer = this.clone()
+        const datalayer = this.clone()
         datalayer.edit()
       },
       this
     )
     if (this.umap_id) {
-      var download = L.DomUtil.create('a', 'button umap-download', advancedButtons)
+      const download = L.DomUtil.create('a', 'button umap-download', advancedButtons)
       download.textContent = L._('Download')
       download.href = this._dataUrl()
       download.target = '_blank'
@@ -967,12 +972,12 @@ L.U.DataLayer = L.Evented.extend({
   },
 
   buildVersionsFieldset: function (container) {
-    var appendVersion = function (data) {
-      var date = new Date(parseInt(data.at, 10))
-      var content =
+    const appendVersion = function (data) {
+      const date = new Date(parseInt(data.at, 10))
+      const content =
         date.toLocaleDateString(L.locale) + ' (' + parseInt(data.size) / 1000 + 'Kb)'
-      var el = L.DomUtil.create('div', 'umap-datalayer-version', versionsContainer)
-      var a = L.DomUtil.create('a', '', el)
+      const el = L.DomUtil.create('div', 'umap-datalayer-version', versionsContainer)
+      const a = L.DomUtil.create('a', '', el)
       L.DomUtil.add('span', '', el, content)
       a.href = '#'
       a.title = L._('Restore this version')
@@ -990,7 +995,7 @@ L.U.DataLayer = L.Evented.extend({
       callback: function () {
         this.map.xhr.get(this.getVersionsUrl(), {
           callback: function (data) {
-            for (var i = 0; i < data.versions.length; i++) {
+            for (let i = 0; i < data.versions.length; i++) {
               appendVersion.call(this, data.versions[i])
             }
           },
@@ -1018,7 +1023,7 @@ L.U.DataLayer = L.Evented.extend({
   },
 
   featuresToGeoJSON: function () {
-    var features = []
+    const features = []
     this.eachLayer((layer) => features.push(layer.toGeoJSON()))
     return features
   },
@@ -1041,7 +1046,7 @@ L.U.DataLayer = L.Evented.extend({
 
   zoomTo: function () {
     if (!this.isVisible()) return
-    var bounds = this.layer.getBounds()
+    const bounds = this.layer.getBounds()
     if (bounds.isValid()) this.map.fitBounds(bounds)
   },
 
@@ -1063,12 +1068,12 @@ L.U.DataLayer = L.Evented.extend({
 
   getFeatureByIndex: function (index) {
     if (index === -1) index = this._index.length - 1
-    var id = this._index[index]
+    const id = this._index[index]
     return this._layers[id]
   },
 
   getNextFeature: function (feature) {
-    var id = this._index.indexOf(L.stamp(feature)),
+    const id = this._index.indexOf(L.stamp(feature)),
       nextId = this._index[id + 1]
     return nextId ? this._layers[nextId] : this.getNextBrowsable().getFeatureByIndex(0)
   },
@@ -1077,7 +1082,7 @@ L.U.DataLayer = L.Evented.extend({
     if (this._index <= 1) {
       return null
     }
-    var id = this._index.indexOf(L.stamp(feature)),
+    const id = this._index.indexOf(L.stamp(feature)),
       previousId = this._index[id - 1]
     return previousId
       ? this._layers[previousId]
@@ -1085,9 +1090,9 @@ L.U.DataLayer = L.Evented.extend({
   },
 
   getPreviousBrowsable: function () {
-    var id = this.getRank(),
-      next,
-      index = this.map.datalayers_index
+    let id = this.getRank()
+    let next
+    const index = this.map.datalayers_index
     while (((id = index[++id] ? id : 0), (next = index[id]))) {
       if (next === this || (next.allowBrowse() && next.hasData())) break
     }
@@ -1095,9 +1100,9 @@ L.U.DataLayer = L.Evented.extend({
   },
 
   getNextBrowsable: function () {
-    var id = this.getRank(),
-      prev,
-      index = this.map.datalayers_index
+    let id = this.getRank()
+    let prev
+    const index = this.map.datalayers_index
     while (((id = index[--id] ? id : index.length - 1), (prev = index[id]))) {
       if (prev === this || (prev.allowBrowse() && prev.hasData())) break
     }
@@ -1129,13 +1134,13 @@ L.U.DataLayer = L.Evented.extend({
     if (!this.isLoaded()) {
       return
     }
-    var geojson = this.umapGeoJSON()
-    var formData = new FormData()
+    const geojson = this.umapGeoJSON()
+    const formData = new FormData()
     formData.append('name', this.options.name)
     formData.append('display_on_load', !!this.options.displayOnLoad)
     formData.append('rank', this.getRank())
     // Filename support is shaky, don't do it for now.
-    var blob = new Blob([JSON.stringify(geojson)], { type: 'application/json' })
+    const blob = new Blob([JSON.stringify(geojson)], { type: 'application/json' })
     formData.append('geojson', blob)
     this.map.post(this.getSaveUrl(), {
       data: formData,
@@ -1159,7 +1164,7 @@ L.U.DataLayer = L.Evented.extend({
   },
 
   saveDelete: function () {
-    var callback = function () {
+    const callback = function () {
       this.isDirty = false
       this.map.continueSaving()
     }
@@ -1180,7 +1185,7 @@ L.U.DataLayer = L.Evented.extend({
 
   tableEdit: function () {
     if (this.isRemoteLayer() || !this.isVisible()) return
-    var editor = new L.U.TableEditor(this)
+    const editor = new L.U.TableEditor(this)
     editor.edit()
   },
 })
diff --git a/umap/static/umap/js/umap.permissions.js b/umap/static/umap/js/umap.permissions.js
index 90eab5f1..0c0fbc6e 100644
--- a/umap/static/umap/js/umap.permissions.js
+++ b/umap/static/umap/js/umap.permissions.js
@@ -11,8 +11,8 @@ L.U.MapPermissions = L.Class.extend({
   initialize: function (map) {
     this.setOptions(map.options.permissions)
     this.map = map
-    var isDirty = false,
-      self = this
+    let isDirty = false
+    const self = this
     try {
       Object.defineProperty(this, 'isDirty', {
         get: function () {
@@ -54,12 +54,12 @@ L.U.MapPermissions = L.Class.extend({
         content: L._('Please save the map first'),
         level: 'info',
       })
-    var container = L.DomUtil.create('div', 'permissions-panel'),
+    const container = L.DomUtil.create('div', 'permissions-panel'),
       fields = [],
       title = L.DomUtil.create('h4', '', container)
     if (this.isAnonymousMap()) {
       if (this.options.anonymous_edit_url) {
-        var helpText = L._('Secret edit link is:<br>{link}', {
+        const helpText = L._('Secret edit link is:<br>{link}', {
           link: this.options.anonymous_edit_url,
         })
         fields.push([
@@ -101,15 +101,18 @@ L.U.MapPermissions = L.Class.extend({
       ])
     }
     title.textContent = L._('Update permissions')
-    var builder = new L.U.FormBuilder(this, fields)
-    var form = builder.build()
+    const builder = new L.U.FormBuilder(this, fields)
+    const form = builder.build()
     container.appendChild(form)
     if (this.isAnonymousMap() && this.map.options.user) {
       // We have a user, and this user has come through here, so they can edit the map, so let's allow to own the map.
       // Note: real check is made on the back office anyway.
-      var advancedActions = L.DomUtil.createFieldset(container, L._('Advanced actions'))
-      var advancedButtons = L.DomUtil.create('div', 'button-bar', advancedActions)
-      var download = L.DomUtil.create('a', 'button', advancedButtons)
+      const advancedActions = L.DomUtil.createFieldset(
+        container,
+        L._('Advanced actions')
+      )
+      const advancedButtons = L.DomUtil.create('div', 'button-bar', advancedActions)
+      const download = L.DomUtil.create('a', 'button', advancedButtons)
       download.href = '#'
       download.textContent = L._('Attach the map to my account')
       L.DomEvent.on(download, 'click', L.DomEvent.stop).on(
@@ -138,10 +141,10 @@ L.U.MapPermissions = L.Class.extend({
 
   save: function () {
     if (!this.isDirty) return this.map.continueSaving()
-    var formData = new FormData()
+    const formData = new FormData()
     if (!this.isAnonymousMap() && this.options.editors) {
-      var editors = this.options.editors.map((u) => u.id)
-      for (var i = 0; i < this.options.editors.length; i++)
+      const editors = this.options.editors.map((u) => u.id)
+      for (let i = 0; i < this.options.editors.length; i++)
         formData.append('editors', this.options.editors[i].id)
     }
     if (this.isOwner() || this.isAnonymousMap())
@@ -175,7 +178,7 @@ L.U.MapPermissions = L.Class.extend({
 
   addOwnerLink: function (element, container) {
     if (this.options.owner && this.options.owner.name && this.options.owner.url) {
-      var ownerContainer = L.DomUtil.add(
+      const ownerContainer = L.DomUtil.add(
           element,
           'umap-map-owner',
           container,
diff --git a/umap/static/umap/js/umap.popup.js b/umap/static/umap/js/umap.popup.js
index 6a729a69..474996b2 100644
--- a/umap/static/umap/js/umap.popup.js
+++ b/umap/static/umap/js/umap.popup.js
@@ -14,12 +14,12 @@ L.U.Popup = L.Popup.extend({
   },
 
   format: function () {
-    var mode = this.feature.getOption('popupTemplate') || 'Default',
+    const mode = this.feature.getOption('popupTemplate') || 'Default',
       klass = L.U.PopupTemplate[mode] || L.U.PopupTemplate.Default
     this.content = new klass(this.feature, this.container)
     this.content.render()
-    var els = this.container.querySelectorAll('img,iframe')
-    for (var i = 0; i < els.length; i++) {
+    const els = this.container.querySelectorAll('img,iframe')
+    for (let i = 0; i < els.length; i++) {
       this.onElementLoaded(els[i])
     }
     if (!els.length && this.container.textContent.replace('\n', '') === '') {
@@ -55,9 +55,9 @@ L.U.Popup.Panel = L.U.Popup.extend({
   },
 
   allButton: function () {
-    var button = L.DomUtil.create('li', '')
+    const button = L.DomUtil.create('li', '')
     L.DomUtil.create('i', 'umap-icon-16 umap-list', button)
-    var label = L.DomUtil.create('span', '', button)
+    const label = L.DomUtil.create('span', '', button)
     label.textContent = label.title = L._('See all')
     L.DomEvent.on(button, 'click', this.feature.map.openBrowser, this.feature.map)
     return button
@@ -97,11 +97,11 @@ L.U.PopupTemplate.Default = L.Class.extend({
   renderTitle: function () {},
 
   renderBody: function () {
-    var template = this.feature.getOption('popupContentTemplate'),
-      container = L.DomUtil.create('div', 'umap-popup-container'),
-      content = '',
-      properties,
-      center
+    const template = this.feature.getOption('popupContentTemplate')
+    const container = L.DomUtil.create('div', 'umap-popup-container')
+    let content = ''
+    let properties
+    let center
     properties = this.feature.extendedProperties()
     // Resolve properties inside description
     properties.description = L.Util.greedyTemplate(
@@ -116,7 +116,7 @@ L.U.PopupTemplate.Default = L.Class.extend({
 
   renderFooter: function () {
     if (this.feature.hasPopupFooter()) {
-      var footerContainer = L.DomUtil.create(
+      const footerContainer = L.DomUtil.create(
           'div',
           'umap-footer-container',
           this.container
@@ -154,9 +154,9 @@ L.U.PopupTemplate.Default = L.Class.extend({
   },
 
   render: function () {
-    var title = this.renderTitle()
+    const title = this.renderTitle()
     if (title) this.container.appendChild(title)
-    var body = this.renderBody()
+    const body = this.renderBody()
     if (body) L.DomUtil.add('div', 'umap-popup-content', this.container, body)
     this.renderFooter()
   },
@@ -164,7 +164,7 @@ L.U.PopupTemplate.Default = L.Class.extend({
 
 L.U.PopupTemplate.BaseWithTitle = L.U.PopupTemplate.Default.extend({
   renderTitle: function () {
-    var title
+    let title
     if (this.feature.getDisplayName()) {
       title = L.DomUtil.create('h3', 'popup-title')
       title.textContent = this.feature.getDisplayName()
@@ -182,15 +182,15 @@ L.U.PopupTemplate.Table = L.U.PopupTemplate.BaseWithTitle.extend({
   },
 
   addRow: function (container, key, value) {
-    var tr = L.DomUtil.create('tr', '', container)
+    const tr = L.DomUtil.create('tr', '', container)
     L.DomUtil.add('th', '', tr, key)
     L.DomUtil.add('td', '', tr, this.formatRow(key, value))
   },
 
   renderBody: function () {
-    var table = L.DomUtil.create('table')
+    const table = L.DomUtil.create('table')
 
-    for (var key in this.feature.properties) {
+    for (const key in this.feature.properties) {
       if (typeof this.feature.properties[key] === 'object' || key === 'name') continue
       // TODO, manage links (url, mailto, wikipedia...)
       this.addRow(table, key, L.Util.escapeHTML(this.feature.properties[key]).trim())
@@ -207,11 +207,11 @@ L.U.PopupTemplate.GeoRSSImage = L.U.PopupTemplate.BaseWithTitle.extend({
   },
 
   renderBody: function () {
-    var container = L.DomUtil.create('a')
+    const container = L.DomUtil.create('a')
     container.href = this.feature.properties.link
     container.target = '_blank'
     if (this.feature.properties.img) {
-      var img = L.DomUtil.create('img', '', container)
+      const img = L.DomUtil.create('img', '', container)
       img.src = this.feature.properties.img
       // Sadly, we are unable to override this from JS the clean way
       // See https://github.com/Leaflet/Leaflet/commit/61d746818b99d362108545c151a27f09d60960ee#commitcomment-6061847
@@ -229,7 +229,7 @@ L.U.PopupTemplate.GeoRSSLink = L.U.PopupTemplate.Default.extend({
   },
 
   renderBody: function () {
-    var title = this.renderTitle(this),
+    const title = this.renderTitle(this),
       a = L.DomUtil.add('a')
     a.href = this.feature.properties.link
     a.target = '_blank'
diff --git a/umap/static/umap/js/umap.slideshow.js b/umap/static/umap/js/umap.slideshow.js
index aae7772d..b03ac6fe 100644
--- a/umap/static/umap/js/umap.slideshow.js
+++ b/umap/static/umap/js/umap.slideshow.js
@@ -12,13 +12,16 @@ L.U.Slideshow = L.Class.extend({
     this.setOptions(options)
     this.map = map
     this._id = null
-    var current = null, // current feature
-      self = this
+
+    let // current feature
+      current = null
+
+    const self = this
     try {
       Object.defineProperty(this, 'current', {
         get: function () {
           if (!current) {
-            var datalayer = this.defaultDatalayer()
+            const datalayer = this.defaultDatalayer()
             if (datalayer) current = datalayer.getFeatureByIndex(0)
           }
           return current
@@ -66,11 +69,11 @@ L.U.Slideshow = L.Class.extend({
   },
 
   timeSpinner: function () {
-    var time = parseInt(this.options.delay, 10)
+    const time = parseInt(this.options.delay, 10)
     if (!time) return
-    var css = 'rotation ' + time / 1000 + 's infinite linear',
+    const css = 'rotation ' + time / 1000 + 's infinite linear',
       spinners = document.querySelectorAll('.umap-slideshow-toolbox .play .spinner')
-    for (var i = 0; i < spinners.length; i++) {
+    for (let i = 0; i < spinners.length; i++) {
       spinners[i].style.animation = css
       spinners[i].style['-webkit-animation'] = css
       spinners[i].style['-moz-animation'] = css
@@ -80,10 +83,11 @@ L.U.Slideshow = L.Class.extend({
 
   resetSpinners: function () {
     // Make that animnation is coordinated with user actions
-    var spinners = document.querySelectorAll('.umap-slideshow-toolbox .play .spinner'),
-      el,
-      newOne
-    for (var i = 0; i < spinners.length; i++) {
+    const spinners = document.querySelectorAll('.umap-slideshow-toolbox .play .spinner')
+
+    let el
+    let newOne
+    for (let i = 0; i < spinners.length; i++) {
       el = spinners[i]
       newOne = el.cloneNode(true)
       el.parentNode.replaceChild(newOne, el)
@@ -136,7 +140,7 @@ L.U.Slideshow = L.Class.extend({
   },
 
   renderToolbox: function (container) {
-    var box = L.DomUtil.create('ul', 'umap-slideshow-toolbox'),
+    const box = L.DomUtil.create('ul', 'umap-slideshow-toolbox'),
       play = L.DomUtil.create('li', 'play', box),
       stop = L.DomUtil.create('li', 'stop', box),
       prev = L.DomUtil.create('li', 'prev', box),
@@ -146,7 +150,7 @@ L.U.Slideshow = L.Class.extend({
     stop.title = L._('Stop slideshow')
     next.title = L._('Zoom to the next')
     prev.title = L._('Zoom to the previous')
-    var toggle = function () {
+    const toggle = function () {
       if (this._id) this.pause()
       else this.play()
     }
diff --git a/umap/static/umap/js/umap.tableeditor.js b/umap/static/umap/js/umap.tableeditor.js
index 92506952..a24eba44 100644
--- a/umap/static/umap/js/umap.tableeditor.js
+++ b/umap/static/umap/js/umap.tableeditor.js
@@ -9,19 +9,19 @@ L.U.TableEditor = L.Class.extend({
 
   renderHeaders: function () {
     this.header.innerHTML = ''
-    for (var i = 0; i < this.properties.length; i++) {
+    for (let i = 0; i < this.properties.length; i++) {
       this.renderHeader(this.properties[i])
     }
   },
 
   renderHeader: function (property) {
-    var container = L.DomUtil.create('div', 'tcell', this.header),
+    const container = L.DomUtil.create('div', 'tcell', this.header),
       title = L.DomUtil.add('span', '', container, property),
       del = L.DomUtil.create('i', 'umap-delete', container),
       rename = L.DomUtil.create('i', 'umap-edit', container)
     del.title = L._('Delete this property on all the features')
     rename.title = L._('Rename this property on all the features')
-    var doDelete = function () {
+    const doDelete = function () {
       if (
         confirm(
           L._('Are you sure you want to delete this property on all the features?')
@@ -35,8 +35,11 @@ L.U.TableEditor = L.Class.extend({
         this.edit()
       }
     }
-    var doRename = function () {
-      var newName = prompt(L._('Please enter the new name of this property'), property)
+    const doRename = function () {
+      const newName = prompt(
+        L._('Please enter the new name of this property'),
+        property
+      )
       if (!newName || !this.validateName(newName)) return
       this.datalayer.eachLayer((feature) => {
         feature.renameProperty(property, newName)
@@ -51,7 +54,7 @@ L.U.TableEditor = L.Class.extend({
   },
 
   renderRow: function (feature) {
-    var builder = new L.U.FormBuilder(feature, this.field_properties, {
+    const builder = new L.U.FormBuilder(feature, this.field_properties, {
       id: 'umap-feature-properties_' + L.stamp(feature),
       className: 'trow',
       callback: feature.resetTooltip,
@@ -66,7 +69,7 @@ L.U.TableEditor = L.Class.extend({
       this.properties.splice(this.properties.indexOf('description'), 1)
     this.properties.sort()
     this.field_properties = []
-    for (var i = 0; i < this.properties.length; i++) {
+    for (let i = 0; i < this.properties.length; i++) {
       this.field_properties.push([
         'properties.' + this.properties[i],
         { wrapper: 'div', wrapperClass: 'tcell' },
@@ -90,24 +93,24 @@ L.U.TableEditor = L.Class.extend({
   },
 
   edit: function () {
-    var id = 'tableeditor:edit'
+    const id = 'tableeditor:edit'
     this.datalayer.map.fire('dataloading', { id: id })
     this.compileProperties()
     this.renderHeaders()
     this.body.innerHTML = ''
     this.datalayer.eachLayer(this.renderRow, this)
-    var addButton = L.DomUtil.create('li', 'add-property')
+    const addButton = L.DomUtil.create('li', 'add-property')
     L.DomUtil.create('i', 'umap-icon-16 umap-add', addButton)
-    var label = L.DomUtil.create('span', '', addButton)
+    const label = L.DomUtil.create('span', '', addButton)
     label.textContent = label.title = L._('Add a new property')
-    var addProperty = function () {
-      var newName = prompt(L._('Please enter the name of the property'))
+    const addProperty = function () {
+      const newName = prompt(L._('Please enter the name of the property'))
       if (!newName || !this.validateName(newName)) return
       this.datalayer.indexProperty(newName)
       this.edit()
     }
     L.DomEvent.on(addButton, 'click', addProperty, this)
-    var className =
+    const className =
       this.properties.length > 2
         ? 'umap-table-editor fullwidth dark'
         : 'umap-table-editor dark'
diff --git a/umap/static/umap/js/umap.ui.js b/umap/static/umap/js/umap.ui.js
index 05425b7e..39416f2e 100644
--- a/umap/static/umap/js/umap.ui.js
+++ b/umap/static/umap/js/umap.ui.js
@@ -31,17 +31,17 @@ L.U.UI = L.Evented.extend({
     // by previous ui processes...
     this.resetPanelClassName()
     this._panel.innerHTML = ''
-    var actionsContainer = L.DomUtil.create('ul', 'toolbox', this._panel)
-    var body = L.DomUtil.create('div', 'body', this._panel)
+    const actionsContainer = L.DomUtil.create('ul', 'toolbox', this._panel)
+    const body = L.DomUtil.create('div', 'body', this._panel)
     if (e.data.html.nodeType && e.data.html.nodeType === 1)
       body.appendChild(e.data.html)
     else body.innerHTML = e.data.html
-    var closeLink = L.DomUtil.create('li', 'umap-close-link', actionsContainer)
+    const closeLink = L.DomUtil.create('li', 'umap-close-link', actionsContainer)
     L.DomUtil.add('i', 'umap-close-icon', closeLink)
-    var label = L.DomUtil.create('span', '', closeLink)
+    const label = L.DomUtil.create('span', '', closeLink)
     label.title = label.textContent = L._('Close')
     if (e.actions) {
-      for (var i = 0; i < e.actions.length; i++) {
+      for (let i = 0; i < e.actions.length; i++) {
         actionsContainer.appendChild(e.actions[i])
       }
     }
@@ -75,17 +75,17 @@ L.U.UI = L.Evented.extend({
   },
 
   popAlert: function (e) {
-    var self = this
+    const self = this
     if (!e) {
       if (this.ALERTS.length) e = this.ALERTS.pop()
       else return
     }
-    var timeoutID,
-      level_class = e.level && e.level == 'info' ? 'info' : 'error'
+    let timeoutID
+    const level_class = e.level && e.level == 'info' ? 'info' : 'error'
     this._alert.innerHTML = ''
     L.DomUtil.addClass(this.parent, 'umap-alert')
     L.DomUtil.addClass(this._alert, level_class)
-    var close = function () {
+    const close = function () {
       if (timeoutID !== this.ALERT_ID) {
         return
       } // Another alert has been forced
@@ -95,10 +95,10 @@ L.U.UI = L.Evented.extend({
       if (timeoutID) window.clearTimeout(timeoutID)
       this.popAlert()
     }
-    var closeLink = L.DomUtil.create('a', 'umap-close-link', this._alert)
+    const closeLink = L.DomUtil.create('a', 'umap-close-link', this._alert)
     closeLink.href = '#'
     L.DomUtil.add('i', 'umap-close-icon', closeLink)
-    var label = L.DomUtil.create('span', '', closeLink)
+    const label = L.DomUtil.create('span', '', closeLink)
     label.title = label.textContent = L._('Close')
     L.DomEvent.on(closeLink, 'click', L.DomEvent.stop).on(
       closeLink,
@@ -108,8 +108,8 @@ L.U.UI = L.Evented.extend({
     )
     L.DomUtil.add('div', '', this._alert, e.content)
     if (e.actions) {
-      var action, el
-      for (var i = 0; i < e.actions.length; i++) {
+      let action, el
+      for (let i = 0; i < e.actions.length; i++) {
         action = e.actions[i]
         el = L.DomUtil.element('a', { className: 'umap-action' }, this._alert)
         el.href = '#'
@@ -132,7 +132,7 @@ L.U.UI = L.Evented.extend({
 
   tooltip: function (e) {
     this.TOOLTIP_ID = Math.random()
-    var id = this.TOOLTIP_ID
+    const id = this.TOOLTIP_ID
     L.DomUtil.addClass(this.parent, 'umap-tooltip')
     if (e.anchor && e.position === 'top') this.anchorTooltipTop(e.anchor)
     else if (e.anchor && e.position === 'left') this.anchorTooltipLeft(e.anchor)
@@ -148,7 +148,7 @@ L.U.UI = L.Evented.extend({
 
   anchorTooltipAbsolute: function () {
     this._tooltip.className = ''
-    var left =
+    const left =
         this.parent.offsetLeft +
         this.parent.clientWidth / 2 -
         this._tooltip.clientWidth / 2,
@@ -158,7 +158,7 @@ L.U.UI = L.Evented.extend({
 
   anchorTooltipTop: function (el) {
     this._tooltip.className = 'tooltip-top'
-    var coords = this.getPosition(el)
+    const coords = this.getPosition(el)
     this.setTooltipPosition({
       left: coords.left - 10,
       bottom: this.getDocHeight() - coords.top + 11,
@@ -167,7 +167,7 @@ L.U.UI = L.Evented.extend({
 
   anchorTooltipLeft: function (el) {
     this._tooltip.className = 'tooltip-left'
-    var coords = this.getPosition(el)
+    const coords = this.getPosition(el)
     this.setTooltipPosition({
       top: coords.top,
       right: document.documentElement.offsetWidth - coords.left + 11,
@@ -196,7 +196,7 @@ L.U.UI = L.Evented.extend({
   },
 
   getDocHeight: function () {
-    var D = document
+    const D = document
     return Math.max(
       D.body.scrollHeight,
       D.documentElement.scrollHeight,
diff --git a/umap/static/umap/js/umap.xhr.js b/umap/static/umap/js/umap.xhr.js
index 4ffec117..8b9dd29f 100644
--- a/umap/static/umap/js/umap.xhr.js
+++ b/umap/static/umap/js/umap.xhr.js
@@ -4,7 +4,7 @@ L.U.Xhr = L.Evented.extend({
   },
 
   _wrapper: function () {
-    var wrapper
+    let wrapper
     if (window.XMLHttpRequest === undefined) {
       wrapper = () => {
         try {
@@ -24,11 +24,11 @@ L.U.Xhr = L.Evented.extend({
   },
 
   _ajax: function (settings) {
-    var xhr = this._wrapper(),
+    const xhr = this._wrapper(),
       id = Math.random(),
       self = this
     this.fire('dataloading', { id: id })
-    var loaded = () => {
+    const loaded = () => {
       self.fire('dataload', { id: id })
     }
 
@@ -53,7 +53,7 @@ L.U.Xhr = L.Evented.extend({
       xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest')
     }
     if (settings.headers) {
-      for (var name in settings.headers) {
+      for (const name in settings.headers) {
         xhr.setRequestHeader(name, settings.headers[name])
       }
     }
@@ -68,10 +68,10 @@ L.U.Xhr = L.Evented.extend({
             level: 'error',
           })
         } else if (xhr.status === 412) {
-          var msg = L._(
+          const msg = L._(
             'Woops! Someone else seems to have edited the data. You can save anyway, but this will erase the changes made by others.'
           )
-          var actions = [
+          const actions = [
             {
               label: L._('Save anyway'),
               callback: function () {
@@ -111,20 +111,20 @@ L.U.Xhr = L.Evented.extend({
 
   // supports only JSON as response data type
   _json: function (verb, uri, options) {
-    var args = arguments,
+    const args = arguments,
       self = this
-    var default_options = {
+    const default_options = {
       async: true,
       callback: null,
       responseType: 'text',
       data: null,
       listen_form: null, // optional form to listen in default callback
     }
-    var settings = L.Util.extend({}, default_options, options)
+    const settings = L.Util.extend({}, default_options, options)
 
     if (verb === 'POST') {
       // find a way not to make this django specific
-      var token = document.cookie.replace(
+      const token = document.cookie.replace(
         /(?:(?:^|.*;\s*)csrftoken\s*\=\s*([^;]*).*$)|^.*$/,
         '$1'
       )
@@ -134,8 +134,8 @@ L.U.Xhr = L.Evented.extend({
       }
     }
 
-    var callback = function (responseText, response) {
-      var data
+    const callback = function (responseText, response) {
+      let data
       try {
         data = JSON.parse(responseText)
       } catch (err) {
@@ -180,8 +180,8 @@ L.U.Xhr = L.Evented.extend({
 
   submit_form: function (form_id, options) {
     if (typeof options === 'undefined') options = {}
-    var form = L.DomUtil.get(form_id)
-    var formData = new FormData(form)
+    const form = L.DomUtil.get(form_id)
+    const formData = new FormData(form)
     if (options.extraFormData) formData.append(options.extraFormData)
     options.data = formData
     this.post(form.action, options)
@@ -189,7 +189,7 @@ L.U.Xhr = L.Evented.extend({
   },
 
   listen_form: function (form_id, options) {
-    var form = L.DomUtil.get(form_id),
+    const form = L.DomUtil.get(form_id),
       self = this
     if (!form) return
     L.DomEvent.on(form, 'submit', L.DomEvent.stopPropagation)
@@ -200,7 +200,7 @@ L.U.Xhr = L.Evented.extend({
   },
 
   listen_link: function (link_id, options) {
-    var link = L.DomUtil.get(link_id),
+    const link = L.DomUtil.get(link_id),
       self = this
     if (link) {
       L.DomEvent.on(link, 'click', L.DomEvent.stop).on(link, 'click', () => {
@@ -215,7 +215,7 @@ L.U.Xhr = L.Evented.extend({
   default_callback: function (data, options) {
     // default callback, to avoid boilerplate
     if (data.redirect) {
-      var newPath = data.redirect
+      const newPath = data.redirect
       if (window.location.pathname == newPath)
         window.location.reload() // Keep the hash, so the current view
       else window.location = newPath
@@ -225,8 +225,8 @@ L.U.Xhr = L.Evented.extend({
     } else if (data.error) {
       this.ui.alert({ content: data.error, level: 'error' })
     } else if (data.html) {
-      var ui_options = { data: data },
-        listen_options
+      const ui_options = { data: data }
+      let listen_options
       if (options.className) ui_options.className = options.className
       this.ui.openPanel(ui_options)
       // To low boilerplate, if there is a form, listen it
@@ -236,7 +236,7 @@ L.U.Xhr = L.Evented.extend({
         this.listen_form(options.listen_form.id, listen_options)
       }
       if (options.listen_link) {
-        for (var i = 0, l = options.listen_link.length; i < l; i++) {
+        for (let i = 0, l = options.listen_link.length; i < l; i++) {
           // Listen link again
           listen_options = L.Util.extend({}, options, options.listen_link[i].options)
           this.listen_link(options.listen_link[i].id, listen_options)
@@ -251,13 +251,13 @@ L.U.Xhr = L.Evented.extend({
   login: function (data, args) {
     // data.html: login form
     // args: args of the first _json call, to call again at process end
-    var self = this
-    var proceed = () => {
+    const self = this
+    const proceed = () => {
       self.ui.closePanel()
       if (typeof args !== 'undefined') self._json.apply(self, args)
       else self.default_callback(data, {})
     }
-    var ask_for_login = (data) => {
+    const ask_for_login = (data) => {
       self.ui.openPanel({ data: data, className: 'login-panel' })
       self.listen_form('login_form', {
         callback: function (data) {
@@ -266,12 +266,12 @@ L.U.Xhr = L.Evented.extend({
         },
       })
       // Auth links
-      var links = document.getElementsByClassName('umap-login-popup')
+      const links = document.getElementsByClassName('umap-login-popup')
       Object.keys(links).forEach((el) => {
-        var link = links[el]
+        const link = links[el]
         L.DomEvent.on(link, 'click', L.DomEvent.stop).on(link, 'click', () => {
           self.ui.closePanel()
-          var win = window.open(link.href)
+          const win = window.open(link.href)
           window.umap_proceed = () => {
             proceed()
             win.close()

From 8d6185c4767606f1104dcace816a90ecfb6408d9 Mon Sep 17 00:00:00 2001
From: David Larlet <david@larlet.fr>
Date: Mon, 22 May 2023 15:12:23 -0400
Subject: [PATCH 2/2] Manual review of Lebab for let/const conversions

---
 umap/static/umap/js/umap.controls.js  |  2 +-
 umap/static/umap/js/umap.features.js  |  4 ++--
 umap/static/umap/js/umap.js           |  8 ++++----
 umap/static/umap/js/umap.layer.js     | 16 +++++++---------
 umap/static/umap/js/umap.slideshow.js |  4 ++--
 umap/static/umap/js/umap.ui.js        |  2 +-
 umap/templates/umap/locale.js         |  6 +++---
 7 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/umap/static/umap/js/umap.controls.js b/umap/static/umap/js/umap.controls.js
index 34a380ea..0985cd5c 100644
--- a/umap/static/umap/js/umap.controls.js
+++ b/umap/static/umap/js/umap.controls.js
@@ -880,7 +880,7 @@ L.U.Map.include({
       })
     }
 
-    var filterFeatures = function () {
+    const filterFeatures = function () {
       let noResults = true
       this.eachDataLayer((datalayer) => {
         datalayer.eachFeature(function (feature) {
diff --git a/umap/static/umap/js/umap.features.js b/umap/static/umap/js/umap.features.js
index 2fac5fca..32460d97 100644
--- a/umap/static/umap/js/umap.features.js
+++ b/umap/static/umap/js/umap.features.js
@@ -140,7 +140,7 @@ L.U.FeatureMixin = {
 
   appendEditFieldsets: function (container) {
     const optionsFields = this.getShapeOptions()
-    var builder = new L.U.FormBuilder(this, optionsFields, {
+    let builder = new L.U.FormBuilder(this, optionsFields, {
       id: 'umap-feature-shape-properties',
       callback: this._redraw,
     })
@@ -148,7 +148,7 @@ L.U.FeatureMixin = {
     shapeProperties.appendChild(builder.build())
 
     const advancedOptions = this.getAdvancedOptions()
-    var builder = new L.U.FormBuilder(this, advancedOptions, {
+    builder = new L.U.FormBuilder(this, advancedOptions, {
       id: 'umap-feature-advanced-properties',
       callback: this._redraw,
     })
diff --git a/umap/static/umap/js/umap.js b/umap/static/umap/js/umap.js
index 7af18388..6ac6690f 100644
--- a/umap/static/umap/js/umap.js
+++ b/umap/static/umap/js/umap.js
@@ -340,7 +340,7 @@ L.U.Map.include({
       'umap-slideshow-enabled',
       this.options.slideshow && this.options.slideshow.active
     )
-    for (var i in this._controls) {
+    for (const i in this._controls) {
       this.removeControl(this._controls[i])
     }
     if (this.options.noControl) return
@@ -357,7 +357,7 @@ L.U.Map.include({
       })
     }
     let name, status, control
-    for (var i = 0; i < this.HIDDABLE_CONTROLS.length; i++) {
+    for (let i = 0; i < this.HIDDABLE_CONTROLS.length; i++) {
       name = this.HIDDABLE_CONTROLS[i]
       status = this.options[name + 'Control']
       if (status === false) continue
@@ -846,7 +846,7 @@ L.U.Map.include({
     L.DomEvent.on(
       download,
       'click',
-      function () {
+      () => {
         const type = types[typeInput.value]
         const content = type.formatter(this)
         let name = this.options.name || 'data'
@@ -957,7 +957,7 @@ L.U.Map.include({
       if (layerId) layer = map.datalayers[layerId]
       if (layer && clearFlag.checked) layer.empty()
       if (fileInput.files.length) {
-        var file
+        let file
         for (let i = 0, file; (file = fileInput.files[i]); i++) {
           type = type || L.Util.detectFileType(file)
           if (!type) {
diff --git a/umap/static/umap/js/umap.layer.js b/umap/static/umap/js/umap.layer.js
index 1da7fdde..2113ea15 100644
--- a/umap/static/umap/js/umap.layer.js
+++ b/umap/static/umap/js/umap.layer.js
@@ -644,7 +644,7 @@ L.U.DataLayer = L.Evented.extend({
 
   _polygonToLayer: function (geojson, latlngs) {
     // Ensure no empty hole
-    // for (var i = latlngs.length - 1; i > 0; i--) {
+    // for (let i = latlngs.length - 1; i > 0; i--) {
     //     if (!latlngs.slice()[i].length) latlngs.splice(i, 1);
     // }
     return new L.U.Polygon(this.map, latlngs, { geojson: geojson, datalayer: this })
@@ -984,14 +984,12 @@ L.U.DataLayer = L.Evented.extend({
       L.DomEvent.on(a, 'click', L.DomEvent.stop).on(
         a,
         'click',
-        function () {
-          this.restore(data.name)
-        },
+        () => this.restore(data.name),
         this
       )
     }
 
-    var versionsContainer = L.DomUtil.createFieldset(container, L._('Versions'), {
+    const versionsContainer = L.DomUtil.createFieldset(container, L._('Versions'), {
       callback: function () {
         this.map.xhr.get(this.getVersionsUrl(), {
           callback: function (data) {
@@ -1073,8 +1071,8 @@ L.U.DataLayer = L.Evented.extend({
   },
 
   getNextFeature: function (feature) {
-    const id = this._index.indexOf(L.stamp(feature)),
-      nextId = this._index[id + 1]
+    const id = this._index.indexOf(L.stamp(feature))
+    const nextId = this._index[id + 1]
     return nextId ? this._layers[nextId] : this.getNextBrowsable().getFeatureByIndex(0)
   },
 
@@ -1082,8 +1080,8 @@ L.U.DataLayer = L.Evented.extend({
     if (this._index <= 1) {
       return null
     }
-    const id = this._index.indexOf(L.stamp(feature)),
-      previousId = this._index[id - 1]
+    const id = this._index.indexOf(L.stamp(feature))
+    const previousId = this._index[id - 1]
     return previousId
       ? this._layers[previousId]
       : this.getPreviousBrowsable().getFeatureByIndex(-1)
diff --git a/umap/static/umap/js/umap.slideshow.js b/umap/static/umap/js/umap.slideshow.js
index b03ac6fe..f353cc54 100644
--- a/umap/static/umap/js/umap.slideshow.js
+++ b/umap/static/umap/js/umap.slideshow.js
@@ -13,8 +13,8 @@ L.U.Slideshow = L.Class.extend({
     this.map = map
     this._id = null
 
-    let // current feature
-      current = null
+    // current feature
+    let current = null
 
     const self = this
     try {
diff --git a/umap/static/umap/js/umap.ui.js b/umap/static/umap/js/umap.ui.js
index 39416f2e..73158257 100644
--- a/umap/static/umap/js/umap.ui.js
+++ b/umap/static/umap/js/umap.ui.js
@@ -85,7 +85,7 @@ L.U.UI = L.Evented.extend({
     this._alert.innerHTML = ''
     L.DomUtil.addClass(this.parent, 'umap-alert')
     L.DomUtil.addClass(this._alert, level_class)
-    const close = function () {
+    function close() {
       if (timeoutID !== this.ALERT_ID) {
         return
       } // Another alert has been forced
diff --git a/umap/templates/umap/locale.js b/umap/templates/umap/locale.js
index 374a6206..7dcf434b 100644
--- a/umap/templates/umap/locale.js
+++ b/umap/templates/umap/locale.js
@@ -1,3 +1,3 @@
-var locale = {{ locale|safe }};
-L.registerLocale("{{ locale_code }}", locale);
-L.setLocale("{{ locale_code }}");
\ No newline at end of file
+const locale = {{ locale|safe }}
+L.registerLocale("{{ locale_code }}", locale)
+L.setLocale("{{ locale_code }}")