umap-project 2.3.0__py3-none-any.whl → 2.4.0__py3-none-any.whl

umap/static/umap/js/umap.js

@@ -1,5 +1,5 @@
 L.Map.mergeOptions({
-  overlay: null,
+  overlay: {},
   datalayers: [],
   hash: true,
   maxZoomLimit: 24,
@@ -20,9 +20,6 @@ L.Map.mergeOptions({
   enablePolygonDraw: true,
   enablePolylineDraw: true,
   limitBounds: {},
-  importPresets: [
-    // {url: 'http://localhost:8019/en/datalayer/1502/', label: 'Simplified World Countries', format: 'geojson'}
-  ],
   slideshow: {},
   clickable: true,
   permissions: {},
@@ -33,6 +30,8 @@ U.Map = L.Map.extend({
   includes: [ControlsMixin],
 
   initialize: function (el, geojson) {
+    this.sync_engine = new U.SyncEngine(this)
+    this.sync = this.sync_engine.proxy(this)
     // Locale name (pt_PT, en_US…)
     // To be used for Django localization
     if (geojson.properties.locale) L.setLocale(geojson.properties.locale)
@@ -57,15 +56,16 @@ U.Map = L.Map.extend({
     this.urls = new U.URLs(this.options.urls)
 
     this.panel = new U.Panel(this)
+    this.tooltip = new U.Tooltip(this._controlContainer)
+    this.dialog = new U.Dialog(this._controlContainer)
     if (this.hasEditMode()) {
       this.editPanel = new U.EditPanel(this)
       this.fullPanel = new U.FullPanel(this)
     }
-    this.ui = new U.UI(this._container)
-    this.ui.on('dataloading', (e) => this.fire('dataloading', e))
-    this.ui.on('dataload', (e) => this.fire('dataload', e))
-    this.server = new U.ServerRequest(this.ui)
-    this.request = new U.Request(this.ui)
+    L.DomEvent.on(document.body, 'dataloading', (e) => this.fire('dataloading', e))
+    L.DomEvent.on(document.body, 'dataload', (e) => this.fire('dataload', e))
+    this.server = new U.ServerRequest()
+    this.request = new U.Request()
 
     this.initLoader()
     this.name = this.options.name
@@ -205,40 +205,9 @@ U.Map = L.Map.extend({
       this.editTools = new U.Editable(this)
       this.renderEditToolbar()
     }
+
     this.initShortcuts()
-    this.onceDataLoaded(function () {
-      const slug = L.Util.queryString('feature')
-      if (slug && this.features_index[slug]) this.features_index[slug].view()
-      if (this.options.noControl) return
-      this.initCaptionBar()
-      if (L.Util.queryString('share')) {
-        this.share.open()
-      } else if (this.options.onLoadPanel === 'databrowser') {
-        this.openBrowser('data')
-      } else if (this.options.onLoadPanel === 'datalayers') {
-        this.openBrowser('layers')
-      } else if (this.options.onLoadPanel === 'datafilters') {
-        this.panel.mode = 'expanded'
-        this.openBrowser('filters')
-      } else if (this.options.onLoadPanel === 'caption') {
-        this.panel.mode = 'condensed'
-        this.displayCaption()
-      }
-      if (L.Util.queryString('edit')) {
-        if (this.hasEditMode()) this.enableEdit()
-        // Sometimes users share the ?edit link by mistake, let's remove
-        // this search parameter from URL to prevent this
-        const url = new URL(window.location)
-        url.searchParams.delete('edit')
-        history.pushState({}, '', url)
-      }
-      if (L.Util.queryString('download')) {
-        const download_url = this.urls.get('map_download', {
-          map_id: this.options.umap_id,
-        })
-        window.location = download_url
-      }
-    })
+    this.onceDataLoaded(this.setViewFromQueryString)
 
     window.onbeforeunload = () => (this.editEnabled && this.isDirty) || null
     this.backup()
@@ -246,6 +215,25 @@ U.Map = L.Map.extend({
     this.on('click contextmenu.show', this.closeInplaceToolbar)
   },
 
+  initSyncEngine: async function () {
+    if (this.options.websocketEnabled == false) return
+    if (this.options.syncEnabled != true) {
+      this.sync.stop()
+    } else {
+      const ws_token_uri = this.urls.get('map_websocket_auth_token', {
+        map_id: this.options.umap_id,
+      })
+      await this.sync.authenticate(ws_token_uri, this.options.websocketURI, this.server)
+    }
+  },
+
+  getSyncMetadata: function () {
+    return {
+      engine: this.sync,
+      subject: 'map',
+    }
+  },
+
   render: function (fields) {
     let impacts = U.Utils.getImpactsFromSchema(fields)
 
@@ -269,6 +257,8 @@ U.Map = L.Map.extend({
         case 'bounds':
           this.handleLimitBounds()
           break
+        case 'sync':
+          this.initSyncEngine()
       }
     }
   },
@@ -311,6 +301,44 @@ U.Map = L.Map.extend({
     }
   },
 
+  setViewFromQueryString: function () {
+    if (this.options.noControl) return
+    this.initCaptionBar()
+    if (L.Util.queryString('share')) {
+      this.share.open()
+    } else if (this.options.onLoadPanel === 'databrowser') {
+      this.panel.setDefaultMode('expanded')
+      this.openBrowser('data')
+    } else if (this.options.onLoadPanel === 'datalayers') {
+      this.panel.setDefaultMode('condensed')
+      this.openBrowser('layers')
+    } else if (this.options.onLoadPanel === 'datafilters') {
+      this.panel.setDefaultMode('expanded')
+      this.openBrowser('filters')
+    } else if (this.options.onLoadPanel === 'caption') {
+      this.panel.setDefaultMode('condensed')
+      this.openCaption()
+    }
+    // Comes after default panels, so if it opens in a panel it will
+    // take precedence.
+    const slug = L.Util.queryString('feature')
+    if (slug && this.features_index[slug]) this.features_index[slug].view()
+    if (L.Util.queryString('edit')) {
+      if (this.hasEditMode()) this.enableEdit()
+      // Sometimes users share the ?edit link by mistake, let's remove
+      // this search parameter from URL to prevent this
+      const url = new URL(window.location)
+      url.searchParams.delete('edit')
+      history.pushState({}, '', url)
+    }
+    if (L.Util.queryString('download')) {
+      const download_url = this.urls.get('map_download', {
+        map_id: this.options.umap_id,
+      })
+      window.location = download_url
+    }
+  },
+
   // Merge the given schema with the default one
   // Missing keys inside the schema are merged with the default ones.
   overrideSchema: function (schema) {
@@ -357,7 +385,7 @@ U.Map = L.Map.extend({
       icon: 'umap-fake-class',
       iconLoading: 'umap-fake-class',
       flyTo: this.options.easing,
-      onLocationError: (err) => this.ui.alert({ content: err.message }),
+      onLocationError: (err) => U.Alert.error(err.message),
     })
     this._controls.fullscreen = new L.Control.Fullscreen({
       title: { false: L._('View Fullscreen'), true: L._('Exit Fullscreen') },
@@ -382,24 +410,21 @@ U.Map = L.Map.extend({
     else this.scrollWheelZoom.disable()
     this.browser = new U.Browser(this)
     this.facets = new U.Facets(this)
+    this.caption = new U.Caption(this)
     this.importer = new U.Importer(this)
     this.drop = new U.DropControl(this)
     this.share = new U.Share(this)
+    this.rules = new U.Rules(this)
     this._controls.tilelayers = new U.TileLayerControl(this)
   },
 
   renderControls: function () {
-    L.DomUtil.classIf(
-      document.body,
-      'umap-caption-bar-enabled',
-      this.options.captionBar ||
-        (this.options.slideshow && this.options.slideshow.active)
-    )
-    L.DomUtil.classIf(
-      document.body,
-      'umap-slideshow-enabled',
+    const hasSlideshow = Boolean(
       this.options.slideshow && this.options.slideshow.active
     )
+    const barEnabled = this.options.captionBar || hasSlideshow
+    document.body.classList.toggle('umap-caption-bar-enabled', barEnabled)
+    document.body.classList.toggle('umap-slideshow-enabled', hasSlideshow)
     for (const control of Object.values(this._controls)) {
       this.removeControl(control)
     }
@@ -474,6 +499,7 @@ U.Map = L.Map.extend({
 
   onDataLayersChanged: function () {
     if (this.browser) this.browser.update()
+    this.caption.refresh()
   },
 
   ensurePanesOrder: function () {
@@ -517,73 +543,80 @@ U.Map = L.Map.extend({
 
   initShortcuts: function () {
     const globalShortcuts = function (e) {
-      const key = e.keyCode,
-        modifierKey = e.ctrlKey || e.metaKey
-
-      /* Generic shortcuts */
-      if (key === U.Keys.F && modifierKey) {
-        L.DomEvent.stop(e)
-        this.search()
-      } else if (e.keyCode === U.Keys.ESC) {
-        if (this.help.visible()) {
-          this.help.hide()
-        } else {
-          this.panel.close()
+      if (e.key === 'Escape') {
+        if (this.dialog.visible) {
+          this.dialog.close()
+        } else if (this.importer.dialog.visible) {
+          this.importer.dialog.close()
+        } else if (this.editEnabled && this.editTools.drawing()) {
+          this.editTools.stopDrawing()
+        } else if (this.measureTools.enabled()) {
+          this.measureTools.stopDrawing()
+        } else if (this.editPanel?.isOpen()) {
           this.editPanel?.close()
+        } else if (this.fullPanel?.isOpen()) {
           this.fullPanel?.close()
+        } else if (this.panel.isOpen()) {
+          this.panel.close()
         }
       }
 
-      if (!this.hasEditMode()) return
+      // From now on, only ctrl/meta shortcut
+      if (!(e.ctrlKey || e.metaKey) || e.shiftKey) return
 
-      /* Edit mode only shortcuts */
-      if (key === U.Keys.E && modifierKey && !this.editEnabled) {
-        L.DomEvent.stop(e)
-        this.enableEdit()
-      } else if (key === U.Keys.E && modifierKey && this.editEnabled && !this.isDirty) {
+      if (e.key === 'f') {
         L.DomEvent.stop(e)
-        this.disableEdit()
+        this.search()
       }
-      if (key === U.Keys.S && modifierKey) {
-        L.DomEvent.stop(e)
-        if (this.isDirty) {
-          this.save()
+
+      /* Edit mode only shortcuts */
+      if (!this.hasEditMode()) return
+
+      // Edit mode Off
+      if (!this.editEnabled) {
+        switch (e.key) {
+          case 'e':
+            L.DomEvent.stop(e)
+            this.enableEdit()
+            break
         }
+        return
       }
-      if (key === U.Keys.Z && modifierKey && this.isDirty) {
-        L.DomEvent.stop(e)
-        this.askForReset()
-      }
-      if (key === U.Keys.M && modifierKey && this.editEnabled) {
-        L.DomEvent.stop(e)
-        this.editTools.startMarker()
-      }
-      if (key === U.Keys.P && modifierKey && this.editEnabled) {
-        L.DomEvent.stop(e)
-        this.editTools.startPolygon()
-      }
-      if (key === U.Keys.L && modifierKey && this.editEnabled) {
-        L.DomEvent.stop(e)
-        this.editTools.startPolyline()
-      }
-      if (key === U.Keys.I && modifierKey && this.editEnabled) {
-        L.DomEvent.stop(e)
-        this.importer.open()
-      }
-      if (key === U.Keys.O && modifierKey && this.editEnabled) {
-        L.DomEvent.stop(e)
-        this.importer.openFiles()
-      }
-      if (key === U.Keys.H && modifierKey && this.editEnabled) {
-        L.DomEvent.stop(e)
-        this.help.show('edit')
-      }
-      if (e.keyCode === U.Keys.ESC) {
-        if (this.editEnabled && this.editTools.drawing()) {
-          this.editTools.stopDrawing()
-        }
-        if (this.measureTools.enabled()) this.measureTools.stopDrawing()
+
+      // Edit mode on
+      let used = true
+      switch (e.key) {
+        case 'e':
+          if (!this.isDirty) this.disableEdit()
+          break
+        case 's':
+          if (this.isDirty) this.save()
+          break
+        case 'z':
+          if (this.isDirty) this.askForReset()
+          break
+        case 'm':
+          this.editTools.startMarker()
+          break
+        case 'p':
+          this.editTools.startPolygon()
+          break
+        case 'l':
+          this.editTools.startPolyline()
+          break
+        case 'i':
+          this.importer.open()
+          break
+        case 'o':
+          this.importer.openFiles()
+          break
+        case 'h':
+          this.help.show('edit')
+          break
+        default:
+          used = false
       }
+      if (used) L.DomEvent.stop(e)
     }
     L.DomEvent.addListener(document, 'keydown', globalShortcuts, this)
   },
@@ -644,10 +677,7 @@ U.Map = L.Map.extend({
     } catch (e) {
       console.error(e)
       this.removeLayer(tilelayer)
-      this.ui.alert({
-        content: `${L._('Error in the tilelayer URL')}: ${tilelayer._url}`,
-        level: 'error',
-      })
+      U.Alert.error(`${L._('Error in the tilelayer URL')}: ${tilelayer._url}`)
       // Users can put tilelayer URLs by hand, and if they add wrong {variable},
       // Leaflet throw an error, and then the map is no more editable
     }
@@ -679,10 +709,7 @@ U.Map = L.Map.extend({
     } catch (e) {
       this.removeLayer(overlay)
       console.error(e)
-      this.ui.alert({
-        content: `${L._('Error in the overlay URL')}: ${overlay._url}`,
-        level: 'error',
-      })
+      U.Alert.error(`${L._('Error in the overlay URL')}: ${overlay._url}`)
     }
   },
 
@@ -773,11 +800,14 @@ U.Map = L.Map.extend({
     return L.Map.prototype.setMaxBounds.call(this, bounds)
   },
 
-  createDataLayer: function (datalayer) {
-    datalayer = datalayer || {
-      name: `${L._('Layer')} ${this.datalayers_index.length + 1}`,
+  createDataLayer: function (options = {}, sync) {
+    options.name = options.name || `${L._('Layer')} ${this.datalayers_index.length + 1}`
+    const datalayer = new U.DataLayer(this, options, sync)
+
+    if (sync !== false) {
+      datalayer.sync.upsert(datalayer.options)
     }
-    return new U.DataLayer(this, datalayer)
+    return datalayer
   },
 
   newDataLayer: function () {
@@ -789,24 +819,25 @@ U.Map = L.Map.extend({
     return U.SCHEMA[option] && U.SCHEMA[option].default
   },
 
-  getOption: function (option) {
+  getOption: function (option, feature) {
+    if (feature) {
+      const value = this.rules.getOption(option, feature)
+      if (value !== undefined) return value
+    }
     if (U.Utils.usableOption(this.options, option)) return this.options[option]
     return this.getDefaultOption(option)
   },
 
-  updateExtent: function () {
+  setCenterAndZoom: function () {
+    this._setCenterAndZoom()
+    U.Alert.success(L._('The zoom and center have been modified.'))
+  },
+
+  _setCenterAndZoom: function () {
     this.options.center = this.getCenter()
     this.options.zoom = this.getZoom()
     this.isDirty = true
     this._default_extent = false
-    if (this.options.umap_id) {
-      // We do not want an extra message during the map creation
-      // to avoid the double notification/alert.
-      this.ui.alert({
-        content: L._('The zoom and center have been modified.'),
-        level: 'info',
-      })
-    }
   },
 
   updateTileLayers: function () {
@@ -845,12 +876,11 @@ U.Map = L.Map.extend({
   processFileToImport: function (file, layer, type) {
     type = type || U.Utils.detectFileType(file)
     if (!type) {
-      this.ui.alert({
-        content: L._('Unable to detect format of file {filename}', {
+      U.Alert.error(
+        L._('Unable to detect format of file {filename}', {
           filename: file.name,
-        }),
-        level: 'error',
-      })
+        })
+      )
       return
     }
     if (type === 'umap') {
@@ -861,6 +891,13 @@ U.Map = L.Map.extend({
     }
   },
 
+  importFromUrl: async function (uri) {
+    const response = await this.request.get(uri)
+    if (response && response.ok) {
+      this.importRaw(await response.text())
+    }
+  },
+
   importRaw: function (rawData) {
     const importedData = JSON.parse(rawData)
 
@@ -876,7 +913,11 @@ U.Map = L.Map.extend({
     if (importedData.geometry) this.options.center = this.latLng(importedData.geometry)
     const self = this
     importedData.layers.forEach((geojson) => {
-      delete geojson._umap_options['id'] // Never trust an id at this stage
+      if (!geojson._umap_options && geojson._storage) {
+        geojson._umap_options = geojson._storage
+        delete geojson._storage
+      }
+      delete geojson._umap_options?.id // Never trust an id at this stage
       const dataLayer = self.createDataLayer(geojson._umap_options)
       dataLayer.fromUmapGeoJSON(geojson)
     })
@@ -902,18 +943,17 @@ U.Map = L.Map.extend({
         self.importRaw(rawData)
       } catch (e) {
         console.error('Error importing data', e)
-        self.ui.alert({
-          content: L._('Invalid umap data in {filename}', { filename: file.name }),
-          level: 'error',
-        })
+        U.Alert.error(L._('Invalid umap data in {filename}', { filename: file.name }))
       }
     }
   },
 
   openBrowser: function (mode) {
-    this.onceDatalayersLoaded(function () {
-      this.browser.open(mode)
-    })
+    this.onceDatalayersLoaded(() => this.browser.open(mode))
+  },
+
+  openCaption: function () {
+    this.onceDatalayersLoaded(() => this.caption.open())
   },
 
   eachDataLayer: function (method, context) {
@@ -965,7 +1005,7 @@ U.Map = L.Map.extend({
   },
 
   checkDirty: function () {
-    L.DomUtil.classIf(this._container, 'umap-is-dirty', this.isDirty)
+    this._container.classList.toggle('umap-is-dirty', this.isDirty)
   },
 
   addDirtyDatalayer: function (datalayer) {
@@ -998,6 +1038,7 @@ U.Map = L.Map.extend({
   },
 
   saveSelf: async function () {
+    this.rules.commit()
     const geojson = {
       type: 'Feature',
       geometry: this.geometry(),
@@ -1008,66 +1049,56 @@ U.Map = L.Map.extend({
     formData.append('center', JSON.stringify(this.geometry()))
     formData.append('settings', JSON.stringify(geojson))
     const uri = this.urls.get('map_save', { map_id: this.options.umap_id })
-    const [data, response, error] = await this.server.post(uri, {}, formData)
+    const [data, _, error] = await this.server.post(uri, {}, formData)
     // FIXME: login_required response will not be an error, so it will not
     // stop code while it should
-    if (!error) {
-      let duration = 3000,
-        alert = { content: L._('Map has been saved!'), level: 'info' }
-      if (!this.options.umap_id) {
-        alert.content = L._('Congratulations, your map has been created!')
-        this.options.umap_id = data.id
-        this.permissions.setOptions(data.permissions)
-        this.permissions.commit()
-        if (data.permissions && data.permissions.anonymous_edit_url) {
-          alert.duration = Infinity
-          alert.content =
-            L._(
-              'Your map has been created! As you are not logged in, here is your secret link to edit the map, please keep it safe:'
-            ) + `<br>${data.permissions.anonymous_edit_url}`
-
-          alert.actions = [
-            {
-              label: L._('Copy link'),
-              callback: () => {
-                L.Util.copyToClipboard(data.permissions.anonymous_edit_url)
-                this.ui.alert({
-                  content: L._('Secret edit link copied to clipboard!'),
-                  level: 'info',
-                })
-              },
-              callbackContext: this,
-            },
-          ]
-          if (this.options.urls.map_send_edit_link) {
-            alert.actions.push({
-              label: L._('Send me the link'),
-              input: L._('Email'),
-              callback: this.sendEditLink,
-              callbackContext: this,
-            })
-          }
-        }
-      } else if (!this.permissions.isDirty) {
+    if (error) {
+      return
+    }
+
+    if (!this.options.umap_id) {
+      this.options.umap_id = data.id
+      this.permissions.setOptions(data.permissions)
+      this.permissions.commit()
+      if (data?.permissions?.anonymous_edit_url) {
+        this.once('saved', () => {
+          U.AlertCreation.info(
+            L._('Your map has been created with an anonymous account!'),
+            Number.Infinity,
+            data.permissions.anonymous_edit_url,
+            this.options.urls.map_send_edit_link
+              ? this.sendEditLinkEmail.bind(this)
+              : null
+          )
+        })
+      } else {
+        this.once('saved', () => {
+          U.Alert.success(L._('Congratulations, your map has been created!'))
+        })
+      }
+    } else {
+      if (!this.permissions.isDirty) {
         // Do not override local changes to permissions,
         // but update in case some other editors changed them in the meantime.
         this.permissions.setOptions(data.permissions)
         this.permissions.commit()
       }
-      // Update URL in case the name has changed.
-      if (history && history.pushState)
-        history.pushState({}, this.options.name, data.url)
-      else window.location = data.url
-      alert.content = data.info || alert.content
-      this.once('saved', () => this.ui.alert(alert))
-      this.editPanel.close()
-      this.permissions.save()
+      this.once('saved', () => {
+        U.Alert.success(data.info || L._('Map has been saved!'))
+      })
     }
+    // Update URL in case the name has changed.
+    if (history?.pushState) {
+      history.pushState({}, this.options.name, data.url)
+    } else {
+      window.location = data.url
+    }
+    this.permissions.save()
   },
 
   save: function () {
     if (!this.isDirty) return
-    if (this._default_extent) this.updateExtent()
+    if (this._default_extent) this._setCenterAndZoom()
     this.backup()
     this.once('saved', () => {
       this.isDirty = false
@@ -1080,33 +1111,20 @@ U.Map = L.Map.extend({
     }
   },
 
-  sendEditLink: async function () {
-    const input = this.ui._alert.querySelector('input')
-    const email = input.value
-
-    const formData = new FormData()
-    formData.append('email', email)
-
-    const url = this.urls.get('map_send_edit_link', { map_id: this.options.umap_id })
-    await this.server.post(url, {}, formData)
-  },
-
   star: async function () {
-    if (!this.options.umap_id)
-      return this.ui.alert({
-        content: L._('Please save the map first'),
-        level: 'error',
-      })
+    if (!this.options.umap_id) {
+      return U.Alert.error(L._('Please save the map first'))
+    }
     const url = this.urls.get('map_star', { map_id: this.options.umap_id })
     const [data, response, error] = await this.server.post(url)
-    if (!error) {
-      this.options.starred = data.starred
-      let msg = data.starred
-        ? L._('Map has been starred')
-        : L._('Map has been unstarred')
-      this.ui.alert({ content: msg, level: 'info' })
-      this.renderControls()
+    if (error) {
+      return
     }
+    this.options.starred = data.starred
+    U.Alert.success(
+      data.starred ? L._('Map has been starred') : L._('Map has been unstarred')
+    )
+    this.renderControls()
   },
 
   geometry: function () {
@@ -1410,6 +1428,8 @@ U.Map = L.Map.extend({
         this.options.limitBounds.north = L.Util.formatNum(bounds.getNorth())
         this.options.limitBounds.east = L.Util.formatNum(bounds.getEast())
         boundsBuilder.fetchAll()
+
+        this.sync.update(this, 'options.limitBounds', this.options.limitBounds)
         this.isDirty = true
         this.handleLimitBounds()
       },
@@ -1465,6 +1485,12 @@ U.Map = L.Map.extend({
     slideshow.appendChild(slideshowBuilder.build())
   },
 
+  _editSync: function (container) {
+    const sync = L.DomUtil.createFieldset(container, L._('Real-time collaboration'))
+    const builder = new U.FormBuilder(this, ['options.syncEnabled'])
+    sync.appendChild(builder.build())
+  },
+
   _advancedActions: function (container) {
     const advancedActions = L.DomUtil.createFieldset(container, L._('Advanced actions'))
     const advancedButtons = L.DomUtil.create('div', 'button-bar half', advancedActions)
@@ -1510,10 +1536,10 @@ U.Map = L.Map.extend({
   editCaption: function () {
     if (!this.editEnabled) return
     if (this.options.editMode !== 'advanced') return
-    const container = L.DomUtil.create('div', 'umap-edit-container'),
-      metadataFields = ['options.name', 'options.description'],
-      title = L.DomUtil.create('h3', '', container)
-    title.textContent = L._('Edit map details')
+    const container = L.DomUtil.create('div', 'umap-edit-container')
+    const metadataFields = ['options.name', 'options.description']
+
+    L.DomUtil.createTitle(container, L._('Edit map details'), 'icon-caption')
     const builder = new U.FormBuilder(this, metadataFields, {
       className: 'map-metadata',
     })
@@ -1542,10 +1568,14 @@ U.Map = L.Map.extend({
     this._editShapeProperties(container)
     this._editDefaultProperties(container)
     this._editInteractionsProperties(container)
+    this.rules.edit(container)
     this._editTilelayer(container)
     this._editOverlay(container)
     this._editBounds(container)
     this._editSlideshow(container)
+    if (this.options.websocketEnabled) {
+      this._editSync(container)
+    }
     this._advancedActions(container)
 
     this.editPanel.open({ content: container, className: 'dark' })
@@ -1556,6 +1586,7 @@ U.Map = L.Map.extend({
     this.editEnabled = true
     this.drop.enable()
     this.fire('edit:enabled')
+    this.initSyncEngine()
   },
 
   disableEdit: function () {
@@ -1567,6 +1598,7 @@ U.Map = L.Map.extend({
     this.fire('edit:disabled')
     this.editPanel.close()
     this.fullPanel.close()
+    this.sync.stop()
   },
 
   hasEditMode: function () {
@@ -1590,8 +1622,8 @@ U.Map = L.Map.extend({
       L.DomUtil.createButton(
         'umap-about-link flat',
         container,
-        L._('About'),
-        this.displayCaption,
+        L._('Open caption'),
+        this.openCaption,
         this
       )
       L.DomUtil.createButton(
@@ -1741,7 +1773,7 @@ U.Map = L.Map.extend({
     items.push(
       '-',
       {
-        text: L._('See layers'),
+        text: L._('Open browser'),
         callback: () => this.openBrowser('layers'),
       },
       {
@@ -1757,8 +1789,8 @@ U.Map = L.Map.extend({
     }
     items.push(
       {
-        text: L._('About'),
-        callback: this.displayCaption,
+        text: L._('Open caption'),
+        callback: this.openCaption,
       },
       {
         text: this.help.displayLabel('SEARCH'),
@@ -1844,10 +1876,6 @@ U.Map = L.Map.extend({
     if (this._controls.search) this._controls.search.open()
   },
 
-  getFilterKeys: function () {
-    return (this.options.filterKey || this.options.sortKey || 'name').split(',')
-  },
-
   getLayersBounds: function () {
     const bounds = new L.latLngBounds()
     this.eachBrowsableDataLayer((d) => {
@@ -1855,4 +1883,13 @@ U.Map = L.Map.extend({
     })
     return bounds
   },
+
+  sendEditLinkEmail: async function (formData) {
+    const sendLink =
+      this.options.urls.map_send_edit_link &&
+      this.urls.get('map_send_edit_link', {
+        map_id: this.options.umap_id,
+      })
+    await this.server.post(sendLink, {}, formData)
+  },
 })