umap-project 2.8.2__py3-none-any.whl → 2.9.0b0__py3-none-any.whl

umap/static/umap/js/modules/formatter.js

@@ -1,5 +1,6 @@
 /* Uses globals for: csv2geojson, osmtogeojson (not available as ESM) */
 import { translate } from './i18n.js'
+import { uMapAlert as Alert } from '../components/alerts/alert.js'
 
 export const EXPORT_FORMATS = {
   geojson: {
@@ -58,11 +59,7 @@ export class Formatter {
   }
 
   async fromGeoJSON(str) {
-    try {
-      return JSON.parse(str)
-    } catch (err) {
-      U.Alert.error(`Invalid JSON file: ${err}`)
-    }
+    return JSON.parse(str)
   }
 
   async fromOSM(str) {
@@ -106,8 +103,8 @@ export class Formatter {
               message: err[0].message,
             })
           }
-          U.Alert.error(message, 10000)
-          console.error(err)
+          Alert.error(message, 10000)
+          console.debug(err)
         }
         if (result?.features.length) {
           callback(result)
@@ -127,7 +124,7 @@ export class Formatter {
     const doc = new DOMParser().parseFromString(x, 'text/xml')
     const errorNode = doc.querySelector('parsererror')
     if (errorNode) {
-      U.Alert.error(translate('Cannot parse data'))
+      Alert.error(translate('Cannot parse data'))
     }
     return doc
   }

umap/static/umap/js/modules/help.js

@@ -228,7 +228,9 @@ export default class Help {
 
   parse(container) {
     for (const element of container.querySelectorAll('[data-help]')) {
-      this.button(element, element.dataset.help.split(','))
+      if (element.dataset.help) {
+        this.button(element, element.dataset.help.split(','))
+      }
     }
   }
 

umap/static/umap/js/modules/importer.js

@@ -305,7 +305,7 @@ export default class Importer extends Utils.WithTemplate {
       this.onSuccess()
     } catch (e) {
       this.onError(translate('Invalid umap data'))
-      console.error(e)
+      console.debug(e)
       return false
     }
   }

umap/static/umap/js/modules/permissions.js

@@ -3,6 +3,7 @@ import { translate } from './i18n.js'
 import { uMapAlert as Alert } from '../components/alerts/alert.js'
 import { ServerStored } from './saving.js'
 import * as Utils from './utils.js'
+import { MutatingForm } from './form/builder.js'
 
 // Dedicated object so we can deal with a separate dirty status, and thus
 // call the endpoint only when needed, saving one call at each save.
@@ -58,7 +59,7 @@ export class MapPermissions extends ServerStored {
           selectOptions: this._umap.properties.share_statuses,
         },
       ])
-      const builder = new U.FormBuilder(this, fields)
+      const builder = new MutatingForm(this, fields)
       const form = builder.build()
       container.appendChild(form)
 
@@ -133,7 +134,7 @@ export class MapPermissions extends ServerStored {
       { handler: 'ManageEditors', label: translate("Map's editors") },
     ])
 
-    const builder = new U.FormBuilder(this, topFields)
+    const builder = new MutatingForm(this, topFields)
     const form = builder.build()
     container.appendChild(form)
     if (collaboratorsFields.length) {
@@ -141,7 +142,7 @@ export class MapPermissions extends ServerStored {
         `<fieldset class="separator"><legend>${translate('Manage collaborators')}</legend></fieldset>`
       )
       container.appendChild(fieldset)
-      const builder = new U.FormBuilder(this, collaboratorsFields)
+      const builder = new MutatingForm(this, collaboratorsFields)
       const form = builder.build()
       container.appendChild(form)
     }
@@ -269,7 +270,7 @@ export class DataLayerPermissions extends ServerStored {
         },
       ],
     ]
-    const builder = new U.FormBuilder(this, fields, {
+    const builder = new MutatingForm(this, fields, {
       className: 'umap-form datalayer-permissions',
     })
     const form = builder.build()

umap/static/umap/js/modules/rendering/icon.js

@@ -70,6 +70,11 @@ const BaseIcon = DivIcon.extend({
   },
 
   onAdd: () => {},
+
+  _setIconStyles: function (img, name) {
+    if (this.feature.isActive()) this.options.className += ' umap-icon-active'
+    DivIcon.prototype._setIconStyles.call(this, img, name)
+  },
 })
 
 const DefaultIcon = BaseIcon.extend({
@@ -86,7 +91,6 @@ const DefaultIcon = BaseIcon.extend({
   },
 
   _setIconStyles: function (img, name) {
-    if (this.feature.isActive()) this.options.className += ' umap-icon-active'
     BaseIcon.prototype._setIconStyles.call(this, img, name)
     const color = this._getColor()
     const opacity = this._getOpacity()

umap/static/umap/js/modules/rendering/layers/classified.js

@@ -88,7 +88,11 @@ const ClassifiedMixin = {
   },
 
   getColorSchemes: function (classes) {
-    return this.colorSchemes.filter((scheme) => Boolean(colorbrewer[scheme][classes]))
+    const found = this.colorSchemes.filter((scheme) =>
+      Boolean(colorbrewer[scheme][classes])
+    )
+    if (found.length) return found
+    return [['', translate('Default')]]
   },
 }
 
@@ -191,7 +195,7 @@ export const Choropleth = FeatureGroup.extend({
         'options.choropleth.property',
         {
           handler: 'Select',
-          selectOptions: this.datalayer._propertiesIndex,
+          selectOptions: this.datalayer.allProperties(),
           label: translate('Choropleth property value'),
         },
       ],
@@ -300,7 +304,7 @@ export const Circles = FeatureGroup.extend({
         'options.circles.property',
         {
           handler: 'Select',
-          selectOptions: this.datalayer._propertiesIndex,
+          selectOptions: this.datalayer.allProperties(),
           label: translate('Property name to compute circles'),
         },
       ],
@@ -377,7 +381,7 @@ export const Categorized = FeatureGroup.extend({
 
   _getValue: function (feature) {
     const key =
-      this.datalayer.options.categorized.property || this.datalayer._propertiesIndex[0]
+      this.datalayer.options.categorized.property || this.datalayer.allProperties()[0]
     return feature.properties[key]
   },
 
@@ -420,7 +424,7 @@ export const Categorized = FeatureGroup.extend({
     } else {
       this.options.colors = colorbrewer?.Accent[this._classes]
         ? colorbrewer?.Accent[this._classes]
-        : U.COLORS // Fixme: move COLORS to modules/
+        : Utils.COLORS
     }
   },
 
@@ -430,7 +434,7 @@ export const Categorized = FeatureGroup.extend({
         'options.categorized.property',
         {
           handler: 'Select',
-          selectOptions: this.datalayer._propertiesIndex,
+          selectOptions: this.datalayer.allProperties(),
           label: translate('Category property'),
         },
       ],
@@ -464,7 +468,7 @@ export const Categorized = FeatureGroup.extend({
 
   onEdit: function (field, builder) {
     // Only compute the categories if we're dealing with categorized
-    if (!field.startsWith('options.categorized')) return
+    if (!field.startsWith('options.categorized') && field !== 'options.type') return
     // If user touches the categories, then force manual mode
     if (field === 'options.categorized.categories') {
       this.datalayer.options.categorized.mode = 'manual'

umap/static/umap/js/modules/rendering/layers/cluster.js

@@ -63,7 +63,17 @@ export const Cluster = L.MarkerClusterGroup.extend({
 
   addLayer: function (layer) {
     this._layers.push(layer)
-    return L.MarkerClusterGroup.prototype.addLayer.call(this, layer)
+    try {
+      return L.MarkerClusterGroup.prototype.addLayer.call(this, layer)
+    } catch (error) {
+      console.debug(error)
+      // Certainly a race condition when loading a clustered layer
+      // while zooming (this for example can happen at load, when the
+      // initial zoom is changed by uMap).
+      // FIXME: remove when this is merged:
+      // https://github.com/Leaflet/Leaflet.markercluster/pull/1048/files
+      return this
+    }
   },
 
   removeLayer: function (layer) {

umap/static/umap/js/modules/rendering/map.js

@@ -32,7 +32,6 @@ const ControlsMixin = {
     'locate',
     'measure',
     'editinosm',
-    'star',
     'tilelayers',
   ],
 
@@ -84,7 +83,6 @@ const ControlsMixin = {
     this._controls.search = new U.SearchControl()
     this._controls.embed = new Control.Embed(this._umap)
     this._controls.tilelayersChooser = new U.TileLayerChooser(this)
-    if (this.options.user?.id) this._controls.star = new U.StarControl(this._umap)
     this._controls.editinosm = new Control.EditInOSM({
       position: 'topleft',
       widgetOptions: {

umap/static/umap/js/modules/rules.js

@@ -3,6 +3,7 @@ import { translate } from './i18n.js'
 import * as Utils from './utils.js'
 import { AutocompleteDatalist } from './autocomplete.js'
 import Orderable from './orderable.js'
+import { MutatingForm } from './form/builder.js'
 
 const EMPTY_VALUES = ['', undefined, null]
 
@@ -129,7 +130,7 @@ class Rule {
       'options.dashArray',
     ]
     const container = DomUtil.create('div')
-    const builder = new U.FormBuilder(this, options)
+    const builder = new MutatingForm(this, options)
     const defaultShapeProperties = DomUtil.add('div', '', container)
     defaultShapeProperties.appendChild(builder.build())
     const autocomplete = new AutocompleteDatalist(builder.helpers.condition.input)

umap/static/umap/js/modules/schema.js

@@ -447,6 +447,11 @@ export const SCHEMA = {
     label: translate('Display label'),
     inheritable: true,
     default: false,
+    choices: [
+      [true, translate('always')],
+      [false, translate('never')],
+      ['null', translate('on hover')],
+    ],
   },
   slideshow: {
     type: Object,
@@ -478,12 +483,6 @@ export const SCHEMA = {
     label: translate('Sort key'),
     inheritable: true,
   },
-  starControl: {
-    type: Boolean,
-    impacts: ['ui'],
-    nullable: true,
-    label: translate('Display the star map button'),
-  },
   stroke: {
     type: Boolean,
     impacts: ['data'],

umap/static/umap/js/modules/share.js

@@ -2,6 +2,7 @@ import { DomUtil } from '../../vendors/leaflet/leaflet-src.esm.js'
 import { EXPORT_FORMATS } from './formatter.js'
 import { translate } from './i18n.js'
 import * as Utils from './utils.js'
+import { MutatingForm } from './form/builder.js'
 
 export default class Share {
   constructor(umap) {
@@ -125,9 +126,8 @@ export default class Share {
       exportUrl.value = window.location.protocol + iframeExporter.buildUrl()
     }
     buildIframeCode()
-    const builder = new U.FormBuilder(iframeExporter, UIFields, {
-      callback: buildIframeCode,
-    })
+    const builder = new MutatingForm(iframeExporter, UIFields)
+    builder.on('set', buildIframeCode)
     const iframeOptions = DomUtil.createFieldset(
       this.container,
       translate('Embed and link options')

umap/static/umap/js/modules/sync/engine.js

@@ -61,6 +61,8 @@ export class SyncEngine {
     this._reconnectTimeout = null
     this._reconnectDelay = RECONNECT_DELAY
     this.websocketConnected = false
+    this.closeRequested = false
+    this.peerId = Utils.generateId()
   }
 
   async authenticate() {
@@ -75,10 +77,14 @@ export class SyncEngine {
   }
 
   start(authToken) {
+    const path = this._umap.urls.get('ws_sync', { map_id: this._umap.id })
+    const protocol = window.location.protocol === 'http:' ? 'ws:' : 'wss:'
     this.transport = new WebSocketTransport(
-      this._umap.properties.websocketURI,
+      `${protocol}//${window.location.host}${path}`,
       authToken,
-      this
+      this,
+      this.peerId,
+      this._umap.properties.user?.name
     )
   }
 
@@ -124,7 +130,7 @@ export class SyncEngine {
 
     if (this.offline) return
     if (this.transport) {
-      this.transport.send('OperationMessage', message)
+      this.transport.send('OperationMessage', { sender: this.peerId, ...message })
     }
   }
 
@@ -140,9 +146,8 @@ export class SyncEngine {
     updater.applyMessage(operation)
   }
 
-  getNumberOfConnectedPeers() {
-    if (this.peers) return this.peers.length
-    return 0
+  getPeers() {
+    return this.peers || {}
   }
 
   /**
@@ -176,6 +181,7 @@ export class SyncEngine {
    * @param {Object} payload
    */
   onOperationMessage(payload) {
+    if (payload.sender === this.peerId) return
     this._operations.storeRemoteOperations([payload])
     this._applyOperation(payload)
   }
@@ -187,9 +193,8 @@ export class SyncEngine {
    * @param {string} payload.uuid The server-assigned uuid for this peer
    * @param {string[]} payload.peers The list of peers uuids
    */
-  onJoinResponse({ uuid, peers }) {
-    debug('received join response', { uuid, peers })
-    this.uuid = uuid
+  onJoinResponse({ peer, peers }) {
+    debug('received join response', { peer, peers })
     this.onListPeersResponse({ peers })
 
     // Get one peer at random
@@ -210,7 +215,7 @@ export class SyncEngine {
    * @param {string[]} payload.peers The list of peers uuids
    */
   onListPeersResponse({ peers }) {
-    debug('received peerinfo', { peers })
+    debug('received peerinfo', peers)
     this.peers = peers
     this.updaters.map.update({ key: 'numberOfConnectedPeers' })
   }
@@ -285,7 +290,7 @@ export class SyncEngine {
   sendToPeer(recipient, verb, payload) {
     payload.verb = verb
     this.transport.send('PeerMessage', {
-      sender: this.uuid,
+      sender: this.peerId,
       recipient: recipient,
       message: payload,
     })
@@ -297,7 +302,7 @@ export class SyncEngine {
    * @returns {string|bool} the selected peer uuid, or False if none was found.
    */
   _getRandomPeer() {
-    const otherPeers = this.peers.filter((p) => p !== this.uuid)
+    const otherPeers = Object.keys(this.peers).filter((p) => p !== this.peerId)
     if (otherPeers.length > 0) {
       const random = Math.floor(Math.random() * otherPeers.length)
       return otherPeers[random]
@@ -483,7 +488,7 @@ export class Operations {
     return (
       Utils.deepEqual(local.subject, remote.subject) &&
       Utils.deepEqual(local.metadata, remote.metadata) &&
-      (!shouldCheckKey || (shouldCheckKey && local.key == remote.key))
+      (!shouldCheckKey || (shouldCheckKey && local.key === remote.key))
     )
   }
 }

umap/static/umap/js/modules/sync/updaters.js

@@ -72,6 +72,14 @@ export class DataLayerUpdater extends BaseUpdater {
     }
     datalayer.render([key])
   }
+
+  delete({ metadata }) {
+    const datalayer = this.getDataLayerFromID(metadata.id)
+    if (datalayer) {
+      datalayer.del(false)
+      datalayer.commitDelete()
+    }
+  }
 }
 
 export class FeatureUpdater extends BaseUpdater {

umap/static/umap/js/modules/sync/websocket.js

@@ -3,25 +3,28 @@ const PING_INTERVAL = 30000
 const FIRST_CONNECTION_TIMEOUT = 2000
 
 export class WebSocketTransport {
-  constructor(webSocketURI, authToken, messagesReceiver) {
+  constructor(webSocketURI, authToken, messagesReceiver, peerId, username) {
     this.receiver = messagesReceiver
-    this.closeRequested = false
 
     this.websocket = new WebSocket(webSocketURI)
 
     this.websocket.onopen = () => {
-      this.send('JoinRequest', { token: authToken })
+      this.send('JoinRequest', { token: authToken, peer: peerId, username })
       this.receiver.onConnection()
     }
     this.websocket.addEventListener('message', this.onMessage.bind(this))
     this.websocket.onclose = () => {
       console.log('websocket closed')
-      if (!this.closeRequested) {
+      if (!this.receiver.closeRequested) {
         console.log('Not requested, reconnecting...')
         this.receiver.reconnect()
       }
     }
 
+    this.websocket.onerror = (error) => {
+      console.log('WS ERROR', error)
+    }
+
     this.ensureOpen = setInterval(() => {
       if (this.websocket.readyState !== WebSocket.OPEN) {
         this.websocket.close()
@@ -35,6 +38,7 @@ export class WebSocketTransport {
     // See https://making.close.com/posts/reliable-websockets/ for more details.
     this.pingInterval = setInterval(() => {
       if (this.websocket.readyState === WebSocket.OPEN) {
+        console.log('sending ping')
         this.websocket.send('ping')
         this.pongReceived = false
         setTimeout(() => {
@@ -64,7 +68,8 @@ export class WebSocketTransport {
   }
 
   close() {
-    this.closeRequested = true
+    console.log('Closing')
+    this.receiver.closeRequested = true
     this.websocket.close()
   }
 }

umap/static/umap/js/modules/tableeditor.js

@@ -2,6 +2,7 @@ import { DomEvent, DomUtil } from '../../vendors/leaflet/leaflet-src.esm.js'
 import { translate } from './i18n.js'
 import ContextMenu from './ui/contextmenu.js'
 import { WithTemplate, loadTemplate } from './utils.js'
+import { MutatingForm } from './form/builder.js'
 
 const TEMPLATE = `
   <table>
@@ -103,7 +104,7 @@ export default class TableEditor extends WithTemplate {
   }
 
   resetProperties() {
-    this.properties = this.datalayer._propertiesIndex
+    this.properties = this.datalayer.allProperties()
     if (this.properties.length === 0) {
       this.properties = [U.DEFAULT_LABEL_KEY, 'description']
     }
@@ -205,7 +206,7 @@ export default class TableEditor extends WithTemplate {
     const tr = event.target.closest('tr')
     const feature = this.datalayer.getFeatureById(tr.dataset.feature)
     const handler = property === 'description' ? 'Textarea' : 'Input'
-    const builder = new U.FormBuilder(feature, [[field, { handler }]], {
+    const builder = new MutatingForm(feature, [[field, { handler }]], {
       id: `umap-feature-properties_${L.stamp(feature)}`,
     })
     cell.innerHTML = ''

umap/static/umap/js/modules/ui/bar.js

@@ -2,13 +2,14 @@ import { DomEvent } from '../../../vendors/leaflet/leaflet-src.esm.js'
 import { translate } from '../i18n.js'
 import { WithTemplate } from '../utils.js'
 import ContextMenu from './contextmenu.js'
+import * as Utils from '../utils.js'
 
 const TOP_BAR_TEMPLATE = `
 <div class="umap-main-edit-toolbox with-transition dark">
     <div class="umap-left-edit-toolbox" data-ref="left">
         <div class="logo"><a class="" href="/" title="${translate('Go to the homepage')}">uMap</a></div>
-        <button class="map-name" type="button" data-ref="name"></button>
-        <button class="share-status" type="button" data-ref="share"></button>
+        <button class="map-name flat" type="button" data-ref="name"></button>
+        <button class="share-status flat" type="button" data-ref="share"></button>
     </div>
     <div class="umap-right-edit-toolbox" data-ref="right">
         <button class="connected-peers round" type="button" data-ref="peers">
@@ -19,7 +20,7 @@ const TOP_BAR_TEMPLATE = `
           <i class="icon icon-16 icon-profile"></i>
           <span class="username" data-ref="username"></span>
         </button>
-        <button class="umap-help-link" type="button" title="${translate('Help')}" data-ref="help">${translate('Help')}</button>
+        <button class="umap-help-link flat" type="button" title="${translate('Help')}" data-ref="help">${translate('Help')}</button>
         <button class="edit-cancel round" type="button" data-ref="cancel">
             <i class="icon icon-16 icon-restore"></i>
             <span class="">${translate('Cancel edits')}</span>
@@ -96,17 +97,22 @@ export class TopBar extends WithTemplate {
       }
     })
 
-    const connectedPeers = this._umap.sync.getNumberOfConnectedPeers()
     this.elements.peers.addEventListener('mouseover', () => {
-      if (!connectedPeers) return
+      const connectedPeers = this._umap.sync.getPeers()
+      if (!Object.keys(connectedPeers).length) return
+      const ul = Utils.loadTemplate(
+        `<ul>${Object.entries(connectedPeers)
+          .sort((el) => el !== this._umap.user?.name)
+          .map(([id, name]) => `<li>${name || translate('Anonymous')}</li>`)
+          .join('')}</ul>`
+      )
       this._umap.tooltip.open({
-        content: translate('{connectedPeers} peer(s) currently connected to this map', {
-          connectedPeers: connectedPeers,
-        }),
+        content: ul,
         anchor: this.elements.peers,
         position: 'bottom',
         delay: 500,
         duration: 5000,
+        accent: true,
       })
     })
 
@@ -145,7 +151,9 @@ export class TopBar extends WithTemplate {
   }
 
   redraw() {
-    this.elements.peers.hidden = !this._umap.getProperty('syncEnabled')
+    const syncEnabled = this._umap.getProperty('syncEnabled')
+    this.elements.peers.hidden = !syncEnabled
+    this.elements.cancel.hidden = syncEnabled
     this.elements.saveLabel.hidden = this._umap.permissions.isDraft()
     this.elements.saveDraftLabel.hidden = !this._umap.permissions.isDraft()
   }

umap/static/umap/js/modules/ui/base.js

@@ -2,27 +2,18 @@ export class Positioned {
   openAt({ anchor, position }) {
     if (anchor && position === 'top') {
       this.anchorTop(anchor)
-    } else if (anchor && position === 'left') {
-      this.anchorLeft(anchor)
     } else if (anchor && position === 'bottom') {
       this.anchorBottom(anchor)
-    } else {
-      this.anchorAbsolute()
     }
   }
 
-  anchorAbsolute() {
-    this.container.className = ''
-    const left =
-      this.parent.offsetLeft +
-      this.parent.clientWidth / 2 -
-      this.container.clientWidth / 2
-    const top = this.parent.offsetTop + 75
-    this.setPosition({ top: top, left: left })
+  toggleClassPosition(position) {
+    this.container.classList.toggle('tooltip-bottom', position === 'bottom')
+    this.container.classList.toggle('tooltip-top', position === 'top')
   }
 
   anchorTop(el) {
-    this.container.className = 'tooltip-top'
+    this.toggleClassPosition('top')
     const coords = this.getPosition(el)
     this.setPosition({
       left: coords.left - 10,
@@ -31,23 +22,15 @@ export class Positioned {
   }
 
   anchorBottom(el) {
-    this.container.className = 'tooltip-bottom'
+    this.toggleClassPosition('bottom')
     const coords = this.getPosition(el)
+    const selfCoords = this.getPosition(this.container)
     this.setPosition({
-      left: coords.left,
+      left: coords.left + coords.width / 2 - selfCoords.width / 2,
       top: coords.bottom + 11,
     })
   }
 
-  anchorLeft(el) {
-    this.container.className = 'tooltip-left'
-    const coords = this.getPosition(el)
-    this.setPosition({
-      top: coords.top,
-      right: document.documentElement.offsetWidth - coords.left + 11,
-    })
-  }
-
   getPosition(el) {
     return el.getBoundingClientRect()
   }

umap/static/umap/js/modules/ui/tooltip.js

@@ -1,24 +1,32 @@
-import { DomEvent, DomUtil } from '../../../vendors/leaflet/leaflet-src.esm.js'
+import { DomEvent } from '../../../vendors/leaflet/leaflet-src.esm.js'
 import { translate } from '../i18n.js'
 import { Positioned } from './base.js'
+import * as Utils from '../utils.js'
 
 export default class Tooltip extends Positioned {
   constructor(parent) {
     super()
     this.parent = parent
-    this.container = DomUtil.create('div', 'with-transition', this.parent)
-    this.container.id = 'umap-tooltip-container'
+    this.container = Utils.loadTemplate('<div class="umap-tooltip-container"></div>')
+    this.parent.appendChild(this.container)
     DomEvent.disableClickPropagation(this.container)
-    DomEvent.on(this.container, 'contextmenu', DomEvent.stopPropagation) // Do not activate our custom context menu.
-    DomEvent.on(this.container, 'wheel', DomEvent.stopPropagation)
-    DomEvent.on(this.container, 'MozMousePixelScroll', DomEvent.stopPropagation)
+    this.container.addEventListener('contextmenu', (event) => event.stopPropagation()) // Do not activate our custom context menu.
+    this.container.addEventListener('wheel', (event) => event.stopPropagation())
+    this.container.addEventListener('MozMousePixelScroll', (event) =>
+      event.stopPropagation()
+    )
   }
 
   open(opts) {
+    this.container.classList.toggle('tooltip-accent', Boolean(opts.accent))
     const showIt = () => {
+      if (opts.content.nodeType === 1) {
+        this.container.appendChild(opts.content)
+      } else {
+        this.container.innerHTML = Utils.escapeHTML(opts.content)
+      }
+      this.parent.classList.add('umap-tooltip')
       this.openAt(opts)
-      L.DomUtil.addClass(this.parent, 'umap-tooltip')
-      this.container.innerHTML = U.Utils.escapeHTML(opts.content)
     }
     this.TOOLTIP_ID = window.setTimeout(L.bind(showIt, this), opts.delay || 0)
     const id = this.TOOLTIP_ID
@@ -26,7 +34,7 @@ export default class Tooltip extends Positioned {
       this.close(id)
     }
     if (opts.anchor) {
-      L.DomEvent.once(opts.anchor, 'mouseout', closeIt)
+      opts.anchor.addEventListener('mouseout', closeIt, { once: true })
     }
     if (opts.duration !== Number.POSITIVE_INFINITY) {
       window.setTimeout(closeIt, opts.duration || 3000)
@@ -38,9 +46,9 @@ export default class Tooltip extends Positioned {
     // in the meantime. Eg. after a mouseout from the anchor.
     window.clearTimeout(id)
     if (id && id !== this.TOOLTIP_ID) return
-    this.container.className = ''
+    this.toggleClassPosition()
     this.container.innerHTML = ''
     this.setPosition({})
-    L.DomUtil.removeClass(this.parent, 'umap-tooltip')
+    this.parent.classList.remove('umap-tooltip')
   }
 }