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

umap/static/umap/js/modules/rendering/template.js

@@ -1,8 +1,4 @@
-import {
-  DomEvent,
-  DomUtil,
-  CircleMarker,
-} from '../../../vendors/leaflet/leaflet-src.esm.js'
+import { DomEvent, CircleMarker } from '../../../vendors/leaflet/leaflet-src.esm.js'
 import { getLocale, translate } from '../i18n.js'
 import { Request } from '../request.js'
 import * as Utils from '../utils.js'
@@ -92,7 +88,11 @@ class PopupTemplate {
     const title = this.renderTitle(feature)
     if (title) container.appendChild(title)
     const body = await this.renderBody(feature)
-    if (body) DomUtil.add('div', 'umap-popup-content', container, body)
+    if (body) {
+      const div = DOMUtils.loadTemplate('<div class="umap-popup-content"></div>')
+      div.appendChild(body)
+      container.appendChild(div)
+    }
     const footer = this.renderFooter(feature)
     if (footer) container.appendChild(footer)
   }
@@ -108,18 +108,9 @@ export const TitleMixin = (Base) =>
   }
 
 class Table extends TitleMixin(PopupTemplate) {
-  getValue(feature, key) {
-    // TODO, manage links (url, mailto, wikipedia...)
-    const value = Utils.escapeHTML(feature.properties[key]).trim()
-    if (value.indexOf('http') === 0) {
-      return `<a href="${value}" target="_blank">${value}</a>`
-    }
-    return value
-  }
-
-  makeRow(feature, key) {
+  makeRow(feature, field) {
     return Utils.loadTemplate(
-      `<tr><th>${key}</th><td>${this.getValue(feature, key)}</td></tr>`
+      `<tr><th>${field.key}</th><td>${field.render(feature.properties[field.key])}</td></tr>`
     )
   }
 
@@ -130,7 +121,7 @@ class Table extends TitleMixin(PopupTemplate) {
       if (U.LABEL_KEYS.includes(field.key)) {
         continue
       }
-      table.appendChild(this.makeRow(feature, field.key))
+      table.appendChild(this.makeRow(feature, field))
     }
     return table
   }
@@ -138,16 +129,17 @@ class Table extends TitleMixin(PopupTemplate) {
 
 class GeoRSSImage extends TitleMixin(PopupTemplate) {
   async renderBody(feature) {
-    const body = DomUtil.create('a')
-    body.href = feature.properties.link
-    body.target = '_blank'
+    const body = DOMUtils.loadTemplate(
+      `<a href="${feature.properties.link}" target="_blank"></a>`
+    )
     if (feature.properties.img) {
-      const img = DomUtil.create('img', '', body)
-      img.src = 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
-      img.style.maxWidth = '500px'
-      img.style.maxHeight = '500px'
+      body.appendChild(
+        DOMUtils.loadTemplate(
+          `<img src=${feature.properties.img} style="max-width: 500px; max-height: 500px;">`
+        )
+      )
     }
     return body
   }
@@ -165,15 +157,16 @@ class GeoRSSLink extends PopupTemplate {
 
 class OSM extends PopupTemplate {
   renderTitle(feature) {
-    const title = DomUtil.add('h3', 'popup-title')
     const color = feature.getPreviewColor()
-    title.style.backgroundColor = color
+    const [title, { iconContainer }] = DOMUtils.loadTemplateWithRefs(`
+    <h3 class="popup-title" style="background-color: ${color};">
+      <span data-ref="iconContainer"></span> ${this.getName(feature)}
+    </h3>`)
     const iconUrl = feature.getDynamicOption('iconUrl')
-    const icon = Icon.makeElement(iconUrl, title)
-    DomUtil.addClass(icon, 'icon')
+    const icon = Icon.makeElement(iconUrl, iconContainer)
+    icon.classList.add('icon')
     Icon.setContrast(icon, title, iconUrl, color)
     if (DOMUtils.contrastedColor(title, color)) title.style.color = 'white'
-    DomUtil.add('span', '', title, this.getName(feature))
     return title
   }
 
@@ -190,15 +183,16 @@ class OSM extends PopupTemplate {
     const locale = getLocale()
     const street = props['addr:street']
     if (street) {
-      const row = DomUtil.add('address', 'address', body)
       const number = props['addr:housenumber']
+      let content
       if (number) {
         // Poor way to deal with international forms of writing addresses
-        DomUtil.add('span', '', row, `${translate('No.')}: ${number}`)
-        DomUtil.add('span', '', row, `${translate('Street')}: ${street}`)
+        content = `<span>${translate('№')}: ${number}</span><span>${translate('Street')}: ${street}</span>`
       } else {
-        DomUtil.add('span', '', row, street)
+        content = street
       }
+      const row = DOMUtils.loadTemplate(`<address class="address">${content}</address>`)
+      body.appendChild(row)
     }
     if (props.website) {
       body.appendChild(

umap/static/umap/js/modules/rendering/ui.js

@@ -2,7 +2,6 @@
 import {
   CircleMarker as BaseCircleMarker,
   DomEvent,
-  DomUtil,
   GeoJSON,
   LatLng,
   LatLngBounds,
@@ -314,7 +313,7 @@ const PathMixin = {
       this.enableEdit()
     } else {
       this._map._umap.tooltip.open({
-        content: L._('Please zoom in to edit the geometry'),
+        content: translate('Please zoom in to edit the geometry'),
       })
       this.disableEdit()
     }

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

@@ -6,6 +6,7 @@ import Orderable from './orderable.js'
 import * as Utils from './utils.js'
 import * as Icon from './rendering/icon.js'
 import { SCHEMA } from './schema.js'
+import { Registry as Fields } from './data/fields.js'
 
 const EMPTY_VALUES = ['', undefined, null]
 
@@ -28,12 +29,12 @@ class Rule {
     // cf https://caniuse.com/?search=public%20class%20field
     this._condition = null
     this.OPERATORS = [
-      ['>', this.gt],
-      ['<', this.lt],
+      ['>', 'gt'],
+      ['<', 'lt'],
       // When sent by Django
-      ['&lt;', this.lt],
-      ['!=', this.not_equal],
-      ['=', this.equal],
+      ['&lt;', 'lt'],
+      ['!=', 'not_equal'],
+      ['=', 'equal'],
     ]
     this.parent = parent
     this._umap = umap
@@ -47,58 +48,47 @@ class Rule {
     this.parent.render(fields)
   }
 
-  equal(other) {
-    return this.expected === other
-  }
-
-  not_equal(other) {
-    return this.expected !== other
-  }
-
-  gt(other) {
-    return other > this.expected
-  }
-
-  lt(other) {
-    return other < this.expected
-  }
-
   parse() {
     let vars = []
     this.cast = (v) => v
     this.operator = undefined
-    for (const [sign, func] of this.OPERATORS) {
+    let operator = undefined
+    for (const [sign, funcName] of this.OPERATORS) {
       if (this.condition.includes(sign)) {
-        this.operator = func
+        operator = funcName
         vars = this.condition.split(sign)
         break
       }
     }
     if (vars.length !== 2) return
-    this.key = vars[0]
+    this.field = this.parent.fields.get(vars[0]) || new Fields.String(vars[0])
+    this.operator = this.field[operator]
     this.expected = vars[1]
     if (EMPTY_VALUES.includes(this.expected)) {
       this.cast = (v) => EMPTY_VALUES.includes(v)
     }
-    // Special cases where we want to be lousy when checking isNaN without
-    // coercing to a Number first because we handle multiple types.
-    // See https://developer.mozilla.org/en-US/docs/Web/JavaScript/
-    // Reference/Global_Objects/Number/isNaN
-    // biome-ignore lint/suspicious/noGlobalIsNan: expected might not be a number.
-    else if (!isNaN(this.expected)) {
-      this.cast = Number.parseFloat
-    } else if (['true', 'false'].includes(this.expected)) {
-      this.cast = (v) => {
-        if (`${v}`.toLowerCase() === 'true') return true
-        if (`${v}`.toLowerCase() === 'false') return false
+    // TODO: deal with legacy rules on non typed fields
+    else {
+      this.cast = this.field.parse
+      if (
+        // Special cases where we want to be lousy when checking isNaN without
+        // coercing to a Number first because we handle multiple types.
+        // See https://developer.mozilla.org/en-US/docs/Web/JavaScript/
+        // Reference/Global_Objects/Number/isNaN
+        // biome-ignore lint/suspicious/noGlobalIsNan: expected might not be a number.
+        !isNaN(this.expected) &&
+        ['gt', 'lt'].includes(operator) &&
+        this.field.TYPE !== 'Number'
+      ) {
+        this.cast = Number.parseFloat
       }
     }
     this.expected = this.cast(this.expected)
   }
 
   match(props) {
-    if (!this.operator || !this.active) return false
-    return this.operator(this.cast(props[this.key]))
+    if (!this.operator || !this.active || !this.field) return false
+    return this.operator(this.expected, this.cast(props[this.field.key]))
   }
 
   getOption(option) {
@@ -118,6 +108,7 @@ class Rule {
       'name',
       'properties.color',
       'properties.iconClass',
+      'properties.iconSize',
       'properties.iconUrl',
       'properties.iconOpacity',
       'properties.opacity',
@@ -132,7 +123,7 @@ class Rule {
     const container = document.createElement('div')
     container.appendChild(builder.build())
     const autocomplete = new AutocompleteDatalist(builder.helpers.condition.input)
-    const properties = this.parent.fieldKeys
+    const properties = Array.from(this.parent.fields.keys())
     autocomplete.suggestions = properties
     autocomplete.input.addEventListener('input', (event) => {
       const value = event.target.value
@@ -140,9 +131,11 @@ class Rule {
         autocomplete.suggestions = [`${value}=`, `${value}!=`, `${value}>`, `${value}<`]
       } else if (value.endsWith('=')) {
         const key = value.split('!')[0].split('=')[0]
-        autocomplete.suggestions = this.parent
-          .sortedValues(key)
-          .map((str) => `${value}${str ?? ''}`)
+        if (key) {
+          autocomplete.suggestions = this.parent
+            .sortedValues(key)
+            .map((str) => `${value}${str ?? ''}`)
+        }
       }
     })
     const backButton = Utils.loadTemplate(`

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

@@ -123,13 +123,6 @@ export const SCHEMA = {
   edit_status: {
     type: Number,
   },
-  editinosmControl: {
-    type: Boolean,
-    impacts: ['ui'],
-    nullable: true,
-    label: translate('Display the control to open OpenStreetMap editor'),
-    default: null,
-  },
   editors: {
     type: Array,
   },

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

@@ -1,4 +1,3 @@
-import { DomUtil } from '../../vendors/leaflet/leaflet-src.esm.js'
 import { MutatingForm } from './form/builder.js'
 import { EXPORT_FORMATS } from './formatter.js'
 import { translate } from './i18n.js'
@@ -11,39 +10,35 @@ export default class Share {
   }
 
   build() {
-    this.container = DomUtil.create('div', '')
-    this.title = DomUtil.createTitle(
-      this.container,
-      translate('Share and download'),
-      'icon-share'
-    )
-
-    DOMUtils.copiableInput(
-      this.container,
-      translate('Link to view the map'),
-      window.location.protocol + Utils.getBaseUrl()
-    )
-
+    const downloadUrl = this._umap.urls.get('map_download', {
+      map_id: this._umap.id,
+    })
+    const [container, { shortUrl, list, customLink, textarea, iframeOptionsWrapper }] =
+      DOMUtils.loadTemplateWithRefs(`
+      <div>
+        <h3><i class="icon icon-16 icon-share"></i> ${translate('Share and download')}</h3>
+        <h4>${translate('Share')}</h4>
+        <copiable-input data-label="${translate('Link to view the map')}" data-value="${window.location.protocol + Utils.getBaseUrl()}"></copiable-input>
+        <copiable-input data-label="${translate('Short link')}" data-value="${this._umap.properties.shortUrl}" data-ref="shortUrl" hidden></copiable-input>
+        <copiable-textarea data-label="${translate('Customized link')}" data-ref="customLink"></copiable-textarea>
+        <copiable-textarea data-label="${translate('Iframe')}" data-ref="textarea"></copiable-textarea>
+        <div data-ref="iframeOptionsWrapper"></div>
+        <hr>
+        <h4>${translate('Download')}</h4>
+        <h5>${translate("Only visible layers' data")}</h5>
+        <ul data-ref="list" class="downloads"></ul>
+        <h5>${translate('All data and settings of the map')}</h5>
+        <p>
+          <a href="${downloadUrl}" download="backup.umap">
+            <i class="icon icon-16 icon-backup"></i>${translate('full backup')}
+          </a>
+        </p>
+      </div>
+    `)
+    this.container = container
     if (this._umap.properties.shortUrl) {
-      DOMUtils.copiableInput(
-        this.container,
-        translate('Short link'),
-        this._umap.properties.shortUrl
-      )
+      shortUrl.hidden = false
     }
-
-    DomUtil.create('hr', '', this.container)
-
-    DomUtil.add('h4', '', this.container, translate('Download'))
-    DomUtil.add(
-      'small',
-      'label',
-      this.container,
-      translate("Only visible layers' data")
-    )
-    const list = document.createElement('ul')
-    list.classList.add('downloads')
-    this.container.appendChild(list)
     for (const format of Object.keys(EXPORT_FORMATS).concat('jpg', 'png')) {
       const button = Utils.loadTemplate(`
         <li>
@@ -55,38 +50,7 @@ export default class Share {
       button.addEventListener('click', () => this.download(format))
       list.appendChild(button)
     }
-    DomUtil.create('div', 'vspace', this.container)
-    DomUtil.add(
-      'small',
-      'label',
-      this.container,
-      translate('All data and settings of the map')
-    )
-    const downloadUrl = this._umap.urls.get('map_download', {
-      map_id: this._umap.id,
-    })
-    const link = Utils.loadTemplate(`
-      <div>
-        <a href="${downloadUrl}">
-          <i class="icon icon-16 icon-backup"></i>${translate('full backup')}
-        </a>
-      </div>
-    `)
-    this.container.appendChild(link)
-    // File will be named by back-office
-    link.setAttribute('download', 'backup.umap')
-    DomUtil.create('hr', '', this.container)
 
-    const embedTitle = DomUtil.add('h4', '', this.container, translate('Embed the map'))
-    const iframe = DomUtil.create('textarea', 'umap-share-iframe', this.container)
-    const urlTitle = DomUtil.add('h4', '', this.container, translate('Direct link'))
-    const exportUrl = DOMUtils.copiableInput(
-      this.container,
-      translate('Share this link to open a customized map view'),
-      ''
-    )
-
-    exportUrl.type = 'text'
     const UIFields = [
       ['dimensions.width', { handler: 'Input', label: translate('width') }],
       ['dimensions.height', { handler: 'Input', label: translate('height') }],
@@ -123,14 +87,17 @@ export default class Share {
     }
     const iframeExporter = new IframeExporter(this._umap)
     const buildIframeCode = () => {
-      iframe.textContent = iframeExporter.build()
-      exportUrl.value = window.location.protocol + iframeExporter.buildUrl()
+      textarea.setAttribute('value', iframeExporter.build())
+      customLink.setAttribute(
+        'value',
+        window.location.protocol + iframeExporter.buildUrl()
+      )
     }
     buildIframeCode()
     const builder = new MutatingForm(iframeExporter, UIFields)
     builder.on('set', buildIframeCode)
-    const iframeOptions = DomUtil.createFieldset(
-      this.container,
+    const iframeOptions = DOMUtils.createFieldset(
+      iframeOptionsWrapper,
       translate('Embed and link options')
     )
     iframeOptions.appendChild(builder.build())
@@ -222,13 +189,13 @@ class IframeExporter {
       delete this.queryString.datalayers
     }
     const currentView = this.options.currentView ? window.location.hash : ''
-    const queryString = L.extend({}, this.queryString, options)
+    const queryString = Object.assign({}, this.queryString, options)
     return `${this.baseUrl}?${Utils.buildQueryString(queryString)}${currentView}`
   }
 
   build() {
     const iframeUrl = this.buildUrl()
-    let code = `<iframe width="${this.dimensions.width}" height="${this.dimensions.height}" frameborder="0" allowfullscreen allow="geolocation" src="${iframeUrl}"></iframe>`
+    let code = `<iframe style="width: ${this.dimensions.width}; height: ${this.dimensions.height}; border: 0;" allowfullscreen allow="geolocation" src="${iframeUrl}"></iframe>`
     if (this.options.includeFullScreenLink) {
       const fullUrl = this.buildUrl({ scrollWheelZoom: true })
       code += `<p><a href="${fullUrl}">${translate('See full screen')}</a></p>`

umap/static/umap/js/modules/slideshow.js

@@ -89,8 +89,8 @@ export default class Slideshow extends WithTemplate {
   play() {
     if (this._id) return
     if (this._umap.editEnabled || !this.isEnabled()) return
-    L.DomUtil.addClass(document.body, this.CLASSNAME)
-    this._id = window.setInterval(L.bind(this.loop, this), this.properties.delay)
+    document.body.classList.add(this.CLASSNAME)
+    this._id = window.setInterval(() => this.loop(), this.properties.delay)
     this.startSpinner()
     this.loop()
   }
@@ -103,7 +103,7 @@ export default class Slideshow extends WithTemplate {
   pause() {
     if (this._id) {
       this.stopSpinner()
-      L.DomUtil.removeClass(document.body, this.CLASSNAME)
+      document.body.classList.remove(this.CLASSNAME)
       window.clearInterval(this._id)
       this._id = null
     }

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

@@ -1,4 +1,3 @@
-import { DomEvent, DomUtil } from '../../vendors/leaflet/leaflet-src.esm.js'
 import { MutatingForm } from './form/builder.js'
 import { translate } from './i18n.js'
 import ContextMenu from './ui/contextmenu.js'

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

@@ -236,12 +236,18 @@ export class BottomBar extends WithTemplate {
     this.elements.layers.addEventListener('change', () => {
       const select = this.elements.layers
       const selected = select.options[select.selectedIndex].value
-      if (!selected) return
-      this._umap.datalayers.active().map((datalayer) => {
+      for (const datalayer of this._umap.datalayers.active()) {
         if (datalayer.properties.inCaption !== false) {
-          datalayer.toggle(datalayer.id === selected)
+          if (!selected) {
+            datalayer.autoVisibility = true
+            if (datalayer.showAtZoom() && !datalayer.isVisible()) {
+              datalayer.show()
+            }
+          } else {
+            datalayer.toggle(datalayer.id === selected)
+          }
         }
-      })
+      }
     })
   }
 
@@ -263,7 +269,9 @@ export class BottomBar extends WithTemplate {
     if (datalayers.length < 2) {
       this.elements.layers.hidden = true
     } else {
-      this.elements.layers.appendChild(Utils.loadTemplate(`<option value=""></option>`))
+      this.elements.layers.appendChild(
+        Utils.loadTemplate(`<option value="">${translate('All layers')}</option>`)
+      )
       this.elements.layers.hidden = !this._umap.getProperty('layerSwitcher')
       const visible = datalayers.filter((datalayer) => datalayer.isVisible())
       for (const datalayer of datalayers) {
@@ -279,27 +287,30 @@ export class BottomBar extends WithTemplate {
 }
 
 const EDIT_BAR_TEMPLATE = `
-  <ul class="umap-edit-bar dark with-transition">
-    <li data-ref="marker"><button type="button" data-getstarted><i class="icon icon-24 icon-marker"></i></button></li>
-    <li data-ref="polyline"><button type="button" data-getstarted><i class="icon icon-24 icon-polyline"></i></button></li>
-    <li data-ref="multiline" hidden>
-      <button type="button" title="${translate('Add a line to the current multi')}"><i class="icon icon-24 icon-multiline"></i></button>
-    </li>
-    <li data-ref="polygon"><button type="button" data-getstarted><i class="icon icon-24 icon-polygon"></i></button></li>
-    <li data-ref="multipolygon" hidden>
-      <button type="button" title="${translate('Add a polygon to the current multi')}"><i class="icon icon-24 icon-multipolygon"></i></button>
-    </li>
-    <li data-ref="route" hidden><button type="button" data-getstarted title="${translate('Draw along routes')}"><i class="icon icon-24 icon-route"></i></button></li>
-    <hr>
-    <li data-ref="caption" hidden><button data-getstarted type="button" title="${translate('Edit map name and caption')}"><i class="icon icon-24 icon-info"></i></button></li>
-    <li data-ref="import" hidden><button type="button"><i class="icon icon-24 icon-upload"></i></button></li>
-    <li data-ref="templates" hidden><button type="button" title="${translate('Load template')}" data-getstarted><i class="icon icon-24 icon-template"></i></button></li>
-    <li data-ref="layers" hidden><button type="button" title="${translate('Manage layers')}"><i class="icon icon-24 icon-layers"></i></button></li>
-    <li data-ref="tilelayers" hidden><button type="button" title="${translate('Change tilelayers')}"><i class="icon icon-24 icon-tilelayer"></i></button></li>
-    <li data-ref="center" hidden><button type="button"><i class="icon icon-24 icon-center"></i></button></li>
-    <li data-ref="permissions" hidden><button type="button" title="${translate('Update permissions and editors')}"><i class="icon icon-24 icon-key"></i></button></li>
-    <li data-ref="settings" hidden><button data-getstarted type="button" title="${translate('Map advanced properties')}"><i class="icon icon-24 icon-settings"></i></button></li>
-  </ul>
+  <div class="umap-edit-bar dark with-transition">
+    <ul>
+      <li data-ref="marker"><button class="drawing-tool" type="button" data-getstarted><i class="icon icon-24 icon-marker"></i></button></li>
+      <li data-ref="polyline"><button class="drawing-tool" type="button" data-getstarted><i class="icon icon-24 icon-polyline"></i></button></li>
+      <li data-ref="multiline" hidden>
+        <button class="drawing-tool" type="button" title="${translate('Add a line to the current multi')}"><i class="icon icon-24 icon-multiline"></i></button>
+      </li>
+      <li data-ref="polygon"><button class="drawing-tool" type="button" data-getstarted><i class="icon icon-24 icon-polygon"></i></button></li>
+      <li data-ref="multipolygon" hidden>
+        <button class="drawing-tool" type="button" title="${translate('Add a polygon to the current multi')}"><i class="icon icon-24 icon-multipolygon"></i></button>
+      </li>
+      <li data-ref="route" hidden><button class="drawing-tool" type="button" data-getstarted title="${translate('Draw along routes')}"><i class="icon icon-24 icon-route"></i></button></li>
+    </ul>
+    <ul>
+      <li data-ref="caption" hidden><button data-getstarted type="button" title="${translate('Edit map name and caption')}"><i class="icon icon-24 icon-info"></i></button></li>
+      <li data-ref="import" hidden><button type="button"><i class="icon icon-24 icon-upload"></i></button></li>
+      <li data-ref="templates" hidden><button type="button" title="${translate('Load template')}" data-getstarted><i class="icon icon-24 icon-template"></i></button></li>
+      <li data-ref="layers" hidden><button type="button" title="${translate('Manage layers')}"><i class="icon icon-24 icon-layers"></i></button></li>
+      <li data-ref="tilelayers" hidden><button type="button" title="${translate('Change tilelayers')}"><i class="icon icon-24 icon-tilelayer"></i></button></li>
+      <li data-ref="center" hidden><button type="button"><i class="icon icon-24 icon-center"></i></button></li>
+      <li data-ref="permissions" hidden><button type="button" title="${translate('Update permissions and editors')}"><i class="icon icon-24 icon-key"></i></button></li>
+      <li data-ref="settings" hidden><button data-getstarted type="button" title="${translate('Map advanced properties')}"><i class="icon icon-24 icon-settings"></i></button></li>
+    </ul>
+  </div>
 `
 
 export class EditBar extends WithTemplate {
@@ -315,12 +326,12 @@ export class EditBar extends WithTemplate {
   setup() {
     this.parent.appendChild(this.element)
     DomEvent.disableClickPropagation(this.element)
-    this._onClick('marker', () => this._leafletMap.editTools.startMarker())
-    this._onClick('polyline', () => this._leafletMap.editTools.startPolyline())
-    this._onClick('multiline', () => this._umap.editedFeature.ui.editor.newShape())
-    this._onClick('polygon', () => this._leafletMap.editTools.startPolygon())
-    this._onClick('multipolygon', () => this._umap.editedFeature.ui.editor.newShape())
-    this._onClick('route', () => this._leafletMap.editTools.startRoute())
+    this._onDrawing('marker', () => this._leafletMap.editTools.startMarker())
+    this._onDrawing('polyline', () => this._leafletMap.editTools.startPolyline())
+    this._onDrawing('multiline', () => this._umap.editedFeature.ui.editor.newShape())
+    this._onDrawing('polygon', () => this._leafletMap.editTools.startPolygon())
+    this._onDrawing('multipolygon', () => this._umap.editedFeature.ui.editor.newShape())
+    this._onDrawing('route', () => this._leafletMap.editTools.startRoute())
     this._onClick('caption', () => this._umap.editCaption())
     this._onClick('import', () => this._umap.importer.open())
     this._onClick('templates', () => this.templateIimporter.open())
@@ -359,6 +370,14 @@ export class EditBar extends WithTemplate {
     )
   }
 
+  _onDrawing(ref, realAction) {
+    const action = (event) => {
+      event.target.closest('button').classList.add('on')
+      realAction(event)
+    }
+    this._onClick(ref, action)
+  }
+
   _onClick(ref, action) {
     // Put the click on the button, not on the li, but keep the data-ref on the li
     // so to hide/show it when needed.