umap-project 3.4.0b1__py3-none-any.whl → 3.4.2__py3-none-any.whl

umap/static/umap/js/modules/data/layer.js

@@ -1,9 +1,9 @@
 // FIXME: this module should not depend on Leaflet
 import {
   DomEvent,
-  DomUtil,
   GeoJSON,
   stamp,
+  SVG,
 } from '../../../vendors/leaflet/leaflet-src.esm.js'
 import {
   uMapAlert as Alert,
@@ -19,10 +19,12 @@ import { Heat } from '../rendering/layers/heat.js'
 import * as Schema from '../schema.js'
 import TableEditor from '../tableeditor.js'
 import * as Utils from '../utils.js'
+import * as DOMUtils from '../domutils.js'
 import { LineString, Point, Polygon } from './features.js'
 import Rules from '../rules.js'
-import { FeatureManager, FieldManager } from '../managers.js'
+import { FeatureManager } from '../managers.js'
 import { Filters } from '../filters.js'
+import { Fields, getDefaultFields } from './fields.js'
 
 export const LAYER_TYPES = [
   DefaultLayer,
@@ -49,7 +51,7 @@ export class DataLayer {
     this.parentPane = this._leafletMap.getPane('overlayPane')
     this.pane = this._leafletMap.createPane(`datalayer${stamp(this)}`, this.parentPane)
     // FIXME: should be on layer
-    this.renderer = L.svg({ pane: this.pane })
+    this.renderer = new SVG({ pane: this.pane })
     this.defaultProperties = {
       displayOnLoad: true,
       inCaption: true,
@@ -83,20 +85,15 @@ export class DataLayer {
     }
     this.connectToMap()
     this.permissions = new DataLayerPermissions(this._umap, this)
-    this.rules = new Rules(umap, this)
 
     this._needsFetch = this.createdOnServer || this.isRemoteLayer()
+    this.fields = new Fields(this, this._umap.dialog)
+    this.filters = new Filters(this, this._umap)
+    this.rules = new Rules(umap, this)
+
     if (!this.createdOnServer) {
       if (this.showAtLoad()) this.show()
     }
-    if (!this._needsFetch && !this._umap.fields.size) {
-      this.properties.fields = [
-        { key: U.DEFAULT_LABEL_KEY, type: 'String' },
-        { key: 'description', type: 'Text' },
-      ]
-    }
-    this.fields = new FieldManager(this, this._umap.dialog)
-    this.filters = new Filters(this, this._umap)
 
     // Only layers that are displayed on load must be hidden/shown
     // Automatically, others will be shown manually, and thus will
@@ -148,12 +145,6 @@ export class DataLayer {
     this.properties.rank = value
   }
 
-  get fieldKeys() {
-    // Needed to get a similar API from layer and uMap, but
-    // uMap whould return concat of all datalayers fields
-    return Array.from(this.fields.keys())
-  }
-
   get sortKey() {
     return this.getProperty('sortKey') || U.DEFAULT_LABEL_KEY
   }
@@ -209,7 +200,7 @@ export class DataLayer {
   }
 
   // This method does a targeted update of the UI,
-  // it whould be merged with `render`` method and the
+  // it would be merged with `render`` method and the
   // SCHEMA at some point
   propagate(fields = []) {
     const impacts = {
@@ -232,27 +223,28 @@ export class DataLayer {
   }
 
   showAtLoad() {
-    return this.autoLoaded && this.showAtZoom()
+    return this.autoVisibility && this.showAtZoom()
   }
 
-  get autoLoaded() {
-    if (this._autoLoaded === undefined) {
+  get autoVisibility() {
+    if (this._autoVisibility === undefined) {
       if (this._umap.datalayersFromQueryString) {
         const datalayerIds = this._umap.datalayersFromQueryString
-        this._autoLoaded = datalayerIds.includes(this.id.toString())
+        this._autoVisibility = datalayerIds.includes(this.id.toString())
         if (this.properties.old_id) {
-          this._autoLoaded =
-            this._autoLoaded || datalayerIds.includes(this.properties.old_id.toString())
+          this._autoVisibility =
+            this._autoVisibility ||
+            datalayerIds.includes(this.properties.old_id.toString())
         }
       } else {
-        this._autoLoaded = this.properties.displayOnLoad
+        this._autoVisibility = this.properties.displayOnLoad
       }
     }
-    return this._autoLoaded
+    return this._autoVisibility
   }
 
-  set autoLoaded(value) {
-    this._autoLoaded = value
+  set autoVisibility(value) {
+    this._autoVisibility = value
   }
 
   insertBefore(other) {
@@ -453,6 +445,10 @@ export class DataLayer {
     this._umap.featuresIndex[feature.getSlug()] = feature
     // TODO: quid for remote data ?
     this.inferFields(feature)
+    if (!this.fields.size && !this._umap.fields.size) {
+      this.properties.fields = getDefaultFields()
+      this.fields.pull()
+    }
     try {
       this.showFeature(feature)
     } catch (error) {
@@ -491,7 +487,7 @@ export class DataLayer {
 
   inferFields(feature) {
     for (const key in feature.properties) {
-      if (typeof feature.properties[key] !== 'object') {
+      if (key && typeof feature.properties[key] !== 'object') {
         if (key.indexOf('_') === 0) continue
         if (this.fields.has(key)) continue
         if (this._umap.fields.has(key)) continue
@@ -529,12 +525,10 @@ export class DataLayer {
     this.features.forEach((feature) => callback(feature))
   }
 
-  sortedValues(property) {
-    return this.features
-      .all()
-      .map((feature) => feature.properties[property])
-      .filter((val, idx, arr) => arr.indexOf(val) === idx)
-      .sort(Utils.naturalSort)
+  sortedValues(key) {
+    const field = this.fields.get(key) || this._umap.fields.get(key)
+    if (!field) return []
+    return field.values(this.features.all()).sort(Utils.naturalSort)
   }
 
   addData(geojson, sync) {
@@ -779,7 +773,11 @@ export class DataLayer {
         },
       ],
     ]
-    DomUtil.createTitle(container, translate('Layer properties'), 'icon-layers')
+    container.appendChild(
+      DOMUtils.loadTemplate(`
+      <h3><i class="icon icon-16 icon-layers"></i>${translate('Layer properties')}</h3>
+    `)
+    )
     const builder = new MutatingForm(this, metadataFields)
     builder.on('set', ({ detail }) => {
       this._umap.onDataLayersChanged()
@@ -825,7 +823,7 @@ export class DataLayer {
     const builder = new MutatingForm(this, fields, {
       id: 'datalayer-advanced-properties',
     })
-    const shapeFieldset = DomUtil.createFieldset(
+    const shapeFieldset = DOMUtils.createFieldset(
       container,
       translate('Shape properties')
     )
@@ -850,7 +848,7 @@ export class DataLayer {
         this.reindex()
       }
     })
-    const advancedFieldset = DomUtil.createFieldset(
+    const advancedFieldset = DOMUtils.createFieldset(
       container,
       translate('Advanced properties')
     )
@@ -869,7 +867,7 @@ export class DataLayer {
       'properties.interactive',
     ]
     const builder = new MutatingForm(this, fields)
-    const popupFieldset = DomUtil.createFieldset(
+    const popupFieldset = DOMUtils.createFieldset(
       container,
       translate('Interaction options')
     )
@@ -887,7 +885,7 @@ export class DataLayer {
       'properties.textPathPosition',
     ]
     const builder = new MutatingForm(this, fields)
-    const fieldset = DomUtil.createFieldset(container, translate('Line decoration'))
+    const fieldset = DOMUtils.createFieldset(container, translate('Line decoration'))
     fieldset.appendChild(builder.build())
   }
 
@@ -937,23 +935,21 @@ export class DataLayer {
       fields.push('properties.remoteData.ttl')
     }
 
-    const remoteDataContainer = DomUtil.createFieldset(
+    const remoteDataContainer = DOMUtils.createFieldset(
       container,
       translate('Remote data')
     )
     const builder = new MutatingForm(this, fields)
     remoteDataContainer.appendChild(builder.build())
-    DomUtil.createButton(
-      'button umap-verify',
-      remoteDataContainer,
-      translate('Verify remote URL'),
-      () => this.fetchRemoteData(true),
-      this
-    )
+    const button = DOMUtils.loadTemplate(`
+      <button class="umap-verify" type="button">${translate('Verify remote URL')}</button>
+    `)
+    button.addEventListener('click', () => this.fetchRemoteData(true))
+    remoteDataContainer.appendChild(button)
   }
 
   _buildAdvancedActions(container) {
-    const advancedActions = DomUtil.createFieldset(
+    const advancedActions = DOMUtils.createFieldset(
       container,
       translate('Advanced actions')
     )
@@ -993,7 +989,7 @@ export class DataLayer {
     if (!this._umap.editEnabled) {
       return
     }
-    const container = DomUtil.create('div', 'umap-layer-properties-container')
+    const container = document.createElement('div')
     this._editMetadata(container)
     this._editLayerProperties(container)
     this._editShapeProperties(container)
@@ -1010,15 +1006,13 @@ export class DataLayer {
 
     this._buildAdvancedActions(container)
 
-    const backButton = DomUtil.createButtonIcon(
-      undefined,
-      'icon-back',
-      translate('Back to layers')
-    )
+    const backButton = DOMUtils.loadTemplate(`
+      <button class="icon icon-16 icon-back" type="button" title="${translate('Back to layers')}"></button>
+    `)
     // Fixme: remove me when this is merged and released
     // https://github.com/Leaflet/Leaflet/pull/9052
     DomEvent.disableClickPropagation(backButton)
-    DomEvent.on(backButton, 'click', this._umap.editDatalayers, this._umap)
+    backButton.addEventListener('click', () => this._umap.editDatalayers())
 
     return this._umap.editPanel.open({
       content: container,
@@ -1069,14 +1063,14 @@ export class DataLayer {
       button.addEventListener('click', () => this.restore(data.ref))
     }
 
-    const versionsContainer = DomUtil.createFieldset(container, translate('Versions'), {
-      async callback() {
+    const versionsContainer = DOMUtils.createFieldset(container, translate('Versions'))
+    versionsContainer.closest('details').addEventListener('toggle', async (event) => {
+      if (event.target.open) {
         const [{ versions }, response, error] = await this._umap.server.get(
           this.getVersionsUrl()
         )
         if (!error) versions.forEach(appendVersion)
-      },
-      context: this,
+      }
     })
   }
 
@@ -1126,7 +1120,7 @@ export class DataLayer {
     // From now on, do not try to how/hide
     // automatically this layer, as user
     // has taken control on this.
-    this.autoLoaded = false
+    this.autoVisibility = false
     let display = force
     if (force === undefined) {
       if (!this.isVisible()) display = true
@@ -1347,7 +1341,10 @@ export class DataLayer {
         rules.set(rule.condition, rule)
       }
       for (const rule of this._umap.rules) {
-        if (!rules.has(rule.condition) && this.fields.has(rule.key)) {
+        if (
+          !rules.has(rule.condition) &&
+          (this.fields.has(rule.field.key) || this._umap.fields.has(rule.field.key))
+        ) {
           rules.set(rule.condition, rule)
         }
       }
@@ -1366,31 +1363,17 @@ export class DataLayer {
   }
 
   renderToolbox(container) {
-    const toggle = DomUtil.createButtonIcon(
-      container,
-      'icon-eye',
-      translate('Show/hide layer')
-    )
-    const table = DomUtil.createButtonIcon(
-      container,
-      'icon-table show-on-edit',
-      translate('Edit properties in a table')
-    )
-    const zoomTo = DomUtil.createButtonIcon(
-      container,
-      'icon-zoom',
-      translate('Zoom to layer extent')
-    )
-    const edit = DomUtil.createButtonIcon(
-      container,
-      'icon-edit show-on-edit',
-      translate('Edit')
-    )
-    const remove = DomUtil.createButtonIcon(
-      container,
-      'icon-delete show-on-edit',
-      translate('Delete layer')
-    )
+    const [span, { toggle, table, zoomTo, edit, remove }] =
+      DOMUtils.loadTemplateWithRefs(`
+      <span>
+        <button class="icon icon-16 icon-eye" title="${translate('Show/hide layer')}" type="button" data-ref="toggle"></button>
+        <button class="icon icon-16 icon-table show-on-edit" title="${translate('Edit properties in a table')}" type="button" data-ref="table"></button>
+        <button class="icon icon-16 icon-zoom" title="${translate('Zoom to layer extent')}" type="button" data-ref="zoomTo"></button>
+        <button class="icon icon-16 icon-edit show-on-edit" title="${translate('Edit')}" type="button" data-ref="edit"></button>
+        <button class="icon icon-16 icon-delete show-on-edit" title="${translate('Delete layer')}" type="button" data-ref="remove"></button>
+      </span>
+    `)
+    container.appendChild(span)
     if (this.isReadOnly()) {
       container.classList.add('readonly')
     } else {
@@ -1414,7 +1397,7 @@ export class DataLayer {
   propagateDelete() {
     const els = this.getHidableElements()
     for (const el of els) {
-      DomUtil.remove(el)
+      el.remove()
     }
   }
 
@@ -1427,15 +1410,15 @@ export class DataLayer {
 
   propagateHide() {
     const els = this.getHidableElements()
-    for (let i = 0; i < els.length; i++) {
-      DomUtil.addClass(els[i], 'off')
+    for (const el of els) {
+      el.classList.add('off')
     }
   }
 
   propagateShow() {
     const els = this.getHidableElements()
-    for (let i = 0; i < els.length; i++) {
-      DomUtil.removeClass(els[i], 'off')
+    for (const el of els) {
+      el.classList.remove('off')
     }
   }
 }

umap/static/umap/js/modules/domutils.js

@@ -32,7 +32,7 @@ export const copyToClipboard = (textToCopy) => {
   tooltip.open({ content: translate('✅ Copied!'), duration: 5000 })
 }
 
-export const copiableInput = (parent, label, value) => {
+export const copiableInput = (parent, label, value = '') => {
   const [container, { input, button }] = Utils.loadTemplateWithRefs(`
     <div class="copiable-input">
       <label>${label}<input type="text" readOnly value="${value}" data-ref=input /></label>
@@ -83,11 +83,11 @@ export const hexToRGB = (hex) => {
     .map((x) => Number.parseInt(x, 16))
 }
 
-const CACHE_CONSTRAST = {}
+const CACHE_CONTRAST = {}
 export const contrastedColor = (el, bgcolor) => {
   // Return 0 for black and 1 for white
   // bgcolor is a human color, it can be a any keyword (purple…)
-  if (typeof CACHE_CONSTRAST[bgcolor] !== 'undefined') return CACHE_CONSTRAST[bgcolor]
+  if (typeof CACHE_CONTRAST[bgcolor] !== 'undefined') return CACHE_CONTRAST[bgcolor]
   let rgb = window.getComputedStyle(el).getPropertyValue('background-color')
   rgb = RGBRegex.exec(rgb)
   if (rgb && rgb.length === 4) {
@@ -104,6 +104,26 @@ export const contrastedColor = (el, bgcolor) => {
   }
   if (!rgb) return 1
   const out = contrastWCAG21(rgb)
-  if (bgcolor) CACHE_CONSTRAST[bgcolor] = out
+  if (bgcolor) CACHE_CONTRAST[bgcolor] = out
   return out
 }
+
+export const createFieldset = (parent, title, options) => {
+  options = options || {}
+  const [details, { summary, fieldset }] = loadTemplateWithRefs(`
+    <details class="${options.className || ''}">
+      <summary data-ref="summary"><h4>${title}</h4></summary>
+      <fieldset data-ref="fieldset"></fieldset>
+    </details>
+  `)
+  details.open = options.on === true
+  parent.appendChild(details)
+  if (options.icon) {
+    const icon = loadTemplate(`<i class="icon icon-16 ${options.icon}"></i>`)
+    summary.insertBefore(icon, summary.firstChild)
+  }
+  return fieldset
+}
+
+export const loadTemplateWithRefs = Utils.loadTemplateWithRefs
+export const loadTemplate = Utils.loadTemplate

umap/static/umap/js/modules/filters.js

@@ -6,27 +6,6 @@ import { Fields } from './form/fields.js'
 
 const EMPTY_VALUE = translate('<empty value>')
 
-const getParser = (type) => {
-  switch (type) {
-    case 'Number':
-      return Number.parseFloat
-    case 'Datetime':
-      return (v) => new Date(v)
-    case 'Date':
-      return Utils.parseNaiveDate
-    case 'Boolean':
-      return Boolean
-    case 'Enum':
-      return (v) => {
-        if (!v) return [EMPTY_VALUE]
-        return String(v || '')
-          .split(',')
-          .map((s) => s.trim())
-      }
-    default:
-      return (v) => String(v || '')
-  }
-}
 const Widgets = {}
 
 class BaseWidget {
@@ -73,13 +52,13 @@ Widgets.MinMax = class extends BaseWidget {
     return this.userData.min !== undefined || this.userData.max !== undefined
   }
   getFormField(field) {
-    if (field.type === 'Number') {
+    if (field.TYPE === 'Number') {
       return 'FilterByNumber'
     }
-    if (field.type === 'Date') {
+    if (field.TYPE === 'Date') {
       return 'FilterByDate'
     }
-    if (field.type === 'Datetime') {
+    if (field.TYPE === 'Datetime') {
       return 'FilterByDateTime'
     }
     return super.getFormField(field)
@@ -179,23 +158,22 @@ export class Filters {
   }
 
   isActive() {
-    return this.available.values().some((obj) => obj.isActive())
+    return Array.from(this.available.values()).some((obj) => obj.isActive())
   }
 
   // Loop on the data to compute the list of choices, min
   // and max values.
   computeInitialData() {
     const initialData = Object.fromEntries(
-      this.available.keys().map((name) => [name, {}])
+      Array.from(this.available.keys()).map((name) => [name, {}])
     )
 
     for (const [name, filter] of this.available.entries()) {
       const field = this._parent.fields.get(name)
       if (!field) continue
-      const parser = getParser(field.type)
       this._parent.eachFeature((feature) => {
         let value = feature.properties[name]
-        value = parser(value)
+        value = field.parse(value)
         filter.computeInitialData(initialData[name], value)
       })
     }
@@ -228,14 +206,8 @@ export class Filters {
   }
 
   load() {
-    let filters = this._parent.properties.filters || []
-    // TMP fix for dev server to update map created before changing
-    // filters to be an array
-    if (typeof filters === 'object' && !Array.isArray(filters) && filters !== null) {
-      filters = Object.entries(filters).map(([fieldKey, props]) => {
-        return { fieldKey, ...props }
-      })
-    }
+    let filters = this._parent.properties.filters
+    if (!Array.isArray(filters)) filters = []
     for (const filter of filters) {
       this._add({ ...filter })
     }
@@ -306,7 +278,7 @@ export class Filters {
 
   _listFilters(filters, container, title) {
     const template = `
-      <details open>
+      <details>
         <summary>${title}</summary>
         <ul data-ref=ul></ul>
         <div>
@@ -322,9 +294,8 @@ export class Filters {
           `<li>${translate('Add a field prior to create a filter.')}</li>`
         )
       )
-    }
-    if (!filters.size) {
-      body.open = false
+    } else if (!filters._parent.fields.isDefault()) {
+      body.open = true
     }
     filters.available.forEach((filter, fieldKey) => {
       const [li, { edit, remove }] = Utils.loadTemplateWithRefs(
@@ -378,9 +349,9 @@ export class Filters {
   createFilterForm(fieldKey) {
     let widget = 'Checkbox'
     const field = this._parent.fields.get(fieldKey)
-    if (['Number', 'Date', 'Datetime'].includes(field?.type)) {
+    if (['Number', 'Date', 'Datetime'].includes(field?.TYPE)) {
       widget = 'MinMax'
-    } else if (field?.type === 'Boolean') {
+    } else if (field?.TYPE === 'Boolean') {
       widget = 'Switch'
     }
     const properties = {
@@ -393,7 +364,9 @@ export class Filters {
       ? [fieldKey]
       : [
           '',
-          ...this._parent.fieldKeys.filter((fieldKey) => !this.available.has(fieldKey)),
+          ...Array.from(this._parent.fields.keys()).filter(
+            (fieldKey) => !this.available.has(fieldKey)
+          ),
         ]
     const metadata = [
       [
@@ -442,8 +415,9 @@ export class Filters {
     `)
     body.appendChild(form.build())
     editField.addEventListener('click', () => {
-      this._umap.dialog.accept()
-      this._parent.fields.editField(fieldKey)
+      this._umap.dialog.accept().then(() => {
+        this._parent.fields.editField(fieldKey)
+      })
     })
 
     return this._umap.dialog.open({ template: container }).then(() => {
@@ -474,8 +448,7 @@ export class Filters {
       // This field may only exist on another layer.
       if (!field) continue
       let value = feature.properties[fieldKey]
-      const parser = getParser(field.type)
-      value = parser(value)
+      value = field.parse(value)
       if (obj.match(value)) return true
     }
     return false

umap/static/umap/js/modules/form/fields.js

@@ -746,7 +746,7 @@ Fields.PropertyInput = class extends Fields.BlurInput {
     super.build()
     const autocomplete = new AutocompleteDatalist(this.input)
     // Will be used on Umap and DataLayer
-    const properties = this.builder.obj.fieldKeys
+    const properties = Array.from(this.builder.obj.fields.keys())
     autocomplete.suggestions = properties
   }
 }
@@ -1217,7 +1217,7 @@ Fields.ManageOwner = class extends Fields.Base {
     super.build()
     const options = {
       className: 'edit-owner',
-      on_select: L.bind(this.onSelect, this),
+      on_select: (choice) => this.onSelect(choice),
       placeholder: translate("Type new owner's username"),
     }
     this.autocomplete = new AjaxAutocomplete(this.container, options)
@@ -1248,8 +1248,8 @@ Fields.ManageEditors = class extends Fields.Base {
     super.build()
     const options = {
       className: 'edit-editors',
-      on_select: L.bind(this.onSelect, this),
-      on_unselect: L.bind(this.onUnselect, this),
+      on_select: (choice) => this.onSelect(choice),
+      on_unselect: (choice) => this.onUnselect(choice),
       placeholder: translate("Type editor's username"),
     }
     this.autocomplete = new AjaxAutocompleteMultiple(this.container, options)

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

@@ -71,7 +71,15 @@ export class Formatter {
     } catch (e) {
       src = this.toDom(str)
     }
-    return osmtogeojson(src, { flatProperties: true })
+    const data = osmtogeojson(src, { flatProperties: true })
+    // FIXME: make a PR to osmtogeojson when it's more active
+    // cf https://github.com/umap-project/umap/issues/3072
+    for (const feature of data.features || []) {
+      const [osm_type, osm_id] = feature.properties.id.split('/')
+      feature.properties.osm_id = osm_id
+      feature.properties.osm_type = osm_type
+    }
+    return data
   }
 
   fromCSV(str, callback) {

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

@@ -1,7 +1,7 @@
-import { DomEvent, DomUtil } from '../../vendors/leaflet/leaflet-src.esm.js'
 import { translate } from './i18n.js'
 import Dialog from './ui/dialog.js'
 import * as Utils from './utils.js'
+import * as DOMUtils from './domutils.js'
 
 const SHORTCUTS = {
   DRAW_MARKER: {
@@ -118,7 +118,7 @@ const ENTRIES = {
     <dt>KML</dt>
     <dd>${translate('Properties imported:')}name, description</dd>
     <dt>CSV</dt>
-    <dd>${translate('Comma, tab or semi-colon separated values. SRS WGS84 is implied. Only Point geometries are imported. The import will look at the column headers for any mention of «lat» and «lon» at the begining of the header, case insensitive. All other column are imported as properties.')}</dd>
+    <dd>${translate('Comma, tab or semi-colon separated values. SRS WGS84 is implied. Only Point geometries are imported. The import will look at the column headers for any mention of «lat» and «lon» at the beginning of the header, case insensitive. All other column are imported as properties.')}</dd>
     <dt>uMap</dt>
     <dd>${translate('Imports all umap data, including layers and settings.')}</dd>
   </div>
@@ -209,15 +209,15 @@ export default class Help {
   }
 
   show(entries) {
-    const container = DomUtil.add('div')
-    DomUtil.createTitle(container, translate('Help'))
+    const container = DOMUtils.loadTemplate(`
+      <div>
+        <h3><i class="icon icon-16 icon-help"></i> ${translate('Help')}</h3>
+      </div>
+    `)
     for (const name of entries) {
-      DomUtil.element({
-        tagName: 'div',
-        className: 'umap-help-entry',
-        parent: container,
-        innerHTML: ENTRIES[name],
-      })
+      container.appendChild(
+        DOMUtils.loadTemplate(`<div class="umap-help-entry">${ENTRIES[name]}</div>`)
+      )
     }
     this.dialog.open({ template: container })
   }
@@ -253,11 +253,10 @@ export default class Help {
   }
 
   button(container, entries) {
-    const button = DomUtil.createButton(
-      'umap-help-button',
-      container,
-      translate('Help')
+    const button = DOMUtils.loadTemplate(
+      `<button class="umap-help-button" type="button">${translate('Help')}</button>`
     )
+    container.appendChild(button)
     button.addEventListener('click', () => this.show(entries))
     return button
   }