umap-project 1.12.2__py3-none-any.whl → 1.13.0__py3-none-any.whl

umap/static/umap/js/umap.browser.js

@@ -13,7 +13,7 @@ L.U.Browser = L.Class.extend({
       zoom_to = L.DomUtil.create('i', 'feature-zoom_to', feature_li),
       edit = L.DomUtil.create('i', 'show-on-edit feature-edit', feature_li),
       del = L.DomUtil.create('i', 'show-on-edit feature-delete', feature_li),
-      color = L.DomUtil.create('i', 'feature-color', feature_li),
+      colorBox = L.DomUtil.create('i', 'feature-color', feature_li),
       title = L.DomUtil.create('span', 'feature-title', feature_li),
       symbol = feature._getIconUrl
         ? L.U.Icon.prototype.formatUrl(feature._getIconUrl(), feature)
@@ -22,8 +22,12 @@ L.U.Browser = L.Class.extend({
     edit.title = L._('Edit this feature')
     del.title = L._('Delete this feature')
     title.textContent = feature.getDisplayName() || '—'
-    color.style.backgroundColor = feature.getOption('color')
-    if (symbol) color.style.backgroundImage = `url(${symbol})`
+    const bgcolor = feature.getOption('color')
+    colorBox.style.backgroundColor = bgcolor
+    if (symbol && symbol !== this.map.options.default_iconUrl) {
+      const icon = L.U.Icon.makeIconElement(symbol, colorBox)
+      L.U.Icon.setIconContrast(icon, colorBox, symbol, bgcolor)
+    }
     L.DomEvent.on(
       zoom_to,
       'click',
@@ -58,6 +62,8 @@ L.U.Browser = L.Class.extend({
     container.id = `browse_data_datalayer_${datalayer.umap_id}`
     datalayer.renderToolbox(headline)
     L.DomUtil.add('span', '', headline, datalayer.options.name)
+    const counter = L.DomUtil.add('span', 'datalayer-counter', headline, datalayer.count())
+    counter.title = L._('{count} features in this layer', {count: datalayer.count()})
     const ul = L.DomUtil.create('ul', '', container)
     L.DomUtil.classIf(container, 'off', !datalayer.isVisible())
 

umap/static/umap/js/umap.controls.js

@@ -409,9 +409,9 @@ L.Control.Embed = L.Control.extend({
     const shareButton = L.DomUtil.createButton(
       '',
       container,
-      L._('Share, download and embed this map'),
-      map.renderShareBox,
-      map
+      L._('Share and download'),
+      map.share.open,
+      map.share
     )
     L.DomEvent.on(shareButton, 'dblclick', L.DomEvent.stopPropagation)
     return container
@@ -632,12 +632,14 @@ L.U.DataLayersControl = L.Control.extend({
       function (e) {
         const layer = this.map.datalayers[e.src.dataset.id],
           other = this.map.datalayers[e.dst.dataset.id],
-          minIndex = Math.min(e.initialIndex, e.finalIndex)
+          minIndex = Math.min(layer.getRank(), other.getRank()),
+          maxIndex = Math.max(layer.getRank(), other.getRank())
         if (e.finalIndex === 0) layer.bringToTop()
         else if (e.finalIndex > e.initialIndex) layer.insertBefore(other)
         else layer.insertAfter(other)
         this.map.eachDataLayerReverse((datalayer) => {
-          if (datalayer.getRank() >= minIndex) datalayer.isDirty = true
+          if (datalayer.getRank() >= minIndex && datalayer.getRank() <= maxIndex)
+            datalayer.isDirty = true
         })
         this.map.indexDatalayers()
       },
@@ -894,46 +896,6 @@ L.U.Map.include({
     this.ui.openPanel({ data: { html: container }, actions: actions })
   },
 
-  EXPORT_TYPES: {
-    geojson: {
-      formatter: function (map) {
-        return JSON.stringify(map.toGeoJSON(), null, 2)
-      },
-      ext: '.geojson',
-      filetype: 'application/json',
-    },
-    gpx: {
-      formatter: function (map) {
-        return togpx(map.toGeoJSON())
-      },
-      ext: '.gpx',
-      filetype: 'application/gpx+xml',
-    },
-    kml: {
-      formatter: function (map) {
-        return tokml(map.toGeoJSON())
-      },
-      ext: '.kml',
-      filetype: 'application/vnd.google-earth.kml+xml',
-    },
-    csv: {
-      formatter: function (map) {
-        const table = []
-        map.eachFeature((feature) => {
-          const row = feature.toGeoJSON()['properties'],
-            center = feature.getCenter()
-          delete row['_umap_options']
-          row['Latitude'] = center.lat
-          row['Longitude'] = center.lng
-          table.push(row)
-        })
-        return csv2geojson.dsv.csvFormat(table)
-      },
-      ext: '.csv',
-      filetype: 'text/csv',
-    },
-  },
-
   renderEditToolbar: function () {
     const container = L.DomUtil.create(
       'div',
@@ -1081,107 +1043,6 @@ L.U.Map.include({
       this
     )
   },
-
-  renderShareBox: function () {
-    const container = L.DomUtil.create('div', 'umap-share')
-    const title = L.DomUtil.create('h3', '', container)
-    title.textContent = L._('Share, download and embed this map')
-
-    const embedTitle = L.DomUtil.add('h4', '', container, L._('Embed the map'))
-    const iframe = L.DomUtil.create('textarea', 'umap-share-iframe', container)
-    const urlTitle = L.DomUtil.add('h4', '', container, L._('Direct link'))
-    const exportUrl = L.DomUtil.create('input', 'umap-share-url', container)
-    let option
-    exportUrl.type = 'text'
-    const UIFields = [
-      ['dimensions.width', { handler: 'Input', label: L._('width') }],
-      ['dimensions.height', { handler: 'Input', label: L._('height') }],
-      [
-        'options.includeFullScreenLink',
-        { handler: 'Switch', label: L._('Include full screen link?') },
-      ],
-      [
-        'options.currentView',
-        { handler: 'Switch', label: L._('Current view instead of default map view?') },
-      ],
-      [
-        'options.keepCurrentDatalayers',
-        { handler: 'Switch', label: L._('Keep current visible layers') },
-      ],
-      [
-        'options.viewCurrentFeature',
-        { handler: 'Switch', label: L._('Open current feature on load') },
-      ],
-      'queryString.moreControl',
-      'queryString.scrollWheelZoom',
-      'queryString.miniMap',
-      'queryString.scaleControl',
-      'queryString.onLoadPanel',
-      'queryString.captionBar',
-      'queryString.captionMenus',
-    ]
-    for (let i = 0; i < this.HIDDABLE_CONTROLS.length; i++) {
-      UIFields.push(`queryString.${this.HIDDABLE_CONTROLS[i]}Control`)
-    }
-    const iframeExporter = new L.U.IframeExporter(this)
-    const buildIframeCode = () => {
-      iframe.innerHTML = iframeExporter.build()
-      exportUrl.value = window.location.protocol + iframeExporter.buildUrl()
-    }
-    buildIframeCode()
-    const builder = new L.U.FormBuilder(iframeExporter, UIFields, {
-      callback: buildIframeCode,
-    })
-    const iframeOptions = L.DomUtil.createFieldset(container, L._('Export options'))
-    iframeOptions.appendChild(builder.build())
-    if (this.options.shortUrl) {
-      L.DomUtil.create('hr', '', container)
-      L.DomUtil.add('h4', '', container, L._('Short URL'))
-      const shortUrl = L.DomUtil.create('input', 'umap-short-url', container)
-      shortUrl.type = 'text'
-      shortUrl.value = this.options.shortUrl
-    }
-    L.DomUtil.create('hr', '', container)
-    L.DomUtil.add('h4', '', container, L._('Backup data'))
-    const downloadUrl = L.Util.template(this.options.urls.map_download, {
-      map_id: this.options.umap_id,
-    })
-    const link = L.DomUtil.createLink(
-      'button',
-      container,
-      L._('Download full data'),
-      downloadUrl
-    )
-    let name = this.options.name || 'data'
-    name = name.replace(/[^a-z0-9]/gi, '_').toLowerCase()
-    link.setAttribute('download', `${name}.umap`)
-    L.DomUtil.create('hr', '', container)
-    L.DomUtil.add('h4', '', container, L._('Download data'))
-    const typeInput = L.DomUtil.create('select', '', container)
-    typeInput.name = 'format'
-    const exportCaveat = L.DomUtil.add(
-      'small',
-      'help-text',
-      container,
-      L._('Only visible features will be downloaded.')
-    )
-    for (const key in this.EXPORT_TYPES) {
-      if (this.EXPORT_TYPES.hasOwnProperty(key)) {
-        option = L.DomUtil.create('option', '', typeInput)
-        option.value = key
-        option.textContent = this.EXPORT_TYPES[key].name || key
-        if (this.EXPORT_TYPES[key].selected) option.selected = true
-      }
-    }
-    L.DomUtil.createButton(
-      'button',
-      container,
-      L._('Download data'),
-      () => this.download(typeInput.value),
-      this
-    )
-    this.ui.openPanel({ data: { html: container } })
-  },
 })
 
 /* Used in view mode to define the current tilelayer */
@@ -1363,9 +1224,47 @@ L.U.StarControl = L.Control.extend({
 
 L.U.Search = L.PhotonSearch.extend({
   initialize: function (map, input, options) {
+    this.options.placeholder = L._('Type a place name or coordinates')
     L.PhotonSearch.prototype.initialize.call(this, map, input, options)
     this.options.url = map.options.urls.search
     if (map.options.maxBounds) this.options.bbox = map.options.maxBounds.toBBoxString()
+    this.reverse = new L.PhotonReverse({
+      handleResults: (geojson) => {
+        this.handleResultsWithReverse(geojson)
+      },
+    })
+  },
+
+  handleResultsWithReverse: function (geojson) {
+    const latlng = this.reverse.latlng
+    geojson.features.unshift({
+      type: 'Feature',
+      geometry: { type: 'Point', coordinates: [latlng.lng, latlng.lat] },
+      properties: {
+        name: L._('Go to "{coords}"', { coords: `${latlng.lat} ${latlng.lng}` }),
+      },
+    })
+
+    this.handleResults(geojson)
+  },
+
+  search: function () {
+    const pattern = /^(?<lat>[-+]?\d{1,2}[.,]\d+)\s*[ ,]\s*(?<lng>[-+]?\d{1,3}[.,]\d+)$/
+    if (pattern.test(this.input.value)) {
+      this.hide()
+      const { lat, lng } = pattern.exec(this.input.value).groups
+      const latlng = L.latLng(lat, lng)
+      if (latlng.isValid()) {
+        this.reverse.doReverse(latlng)
+      } else {
+        this.map.ui.alert({ content: 'Invalid latitude or longitude', mode: 'error' })
+      }
+      return
+    }
+    // Only numbers, abort.
+    if (/^[\d .,]*$/.test(this.input.value)) return
+    // Do normal search
+    L.PhotonSearch.prototype.search.call(this)
   },
 
   onBlur: function (e) {
@@ -1513,77 +1412,6 @@ L.U.ContextMenu = L.Map.ContextMenu.extend({
   },
 })
 
-L.U.IframeExporter = L.Evented.extend({
-  options: {
-    includeFullScreenLink: true,
-    currentView: false,
-    keepCurrentDatalayers: false,
-    viewCurrentFeature: false,
-  },
-
-  queryString: {
-    scaleControl: false,
-    miniMap: false,
-    scrollWheelZoom: false,
-    zoomControl: true,
-    editMode: 'disabled',
-    moreControl: true,
-    searchControl: null,
-    tilelayersControl: null,
-    embedControl: null,
-    datalayersControl: true,
-    onLoadPanel: 'none',
-    captionBar: false,
-    captionMenus: true,
-  },
-
-  dimensions: {
-    width: '100%',
-    height: '300px',
-  },
-
-  initialize: function (map) {
-    this.map = map
-    this.baseUrl = L.Util.getBaseUrl()
-    // Use map default, not generic default
-    this.queryString.onLoadPanel = this.map.options.onLoadPanel
-  },
-
-  getMap: function () {
-    return this.map
-  },
-
-  buildUrl: function (options) {
-    const datalayers = []
-    if (this.options.viewCurrentFeature && this.map.currentFeature) {
-      this.queryString.feature = this.map.currentFeature.getSlug()
-    }
-    if (this.options.keepCurrentDatalayers) {
-      this.map.eachDataLayer((datalayer) => {
-        if (datalayer.isVisible() && datalayer.umap_id) {
-          datalayers.push(datalayer.umap_id)
-        }
-      })
-      this.queryString.datalayers = datalayers.join(',')
-    } else {
-      delete this.queryString.datalayers
-    }
-    const currentView = this.options.currentView ? window.location.hash : ''
-    const queryString = L.extend({}, this.queryString, options)
-    return `${this.baseUrl}?${L.Util.buildQueryString(queryString)}${currentView}`
-  },
-
-  build: function () {
-    const iframeUrl = this.buildUrl()
-    let code = `<iframe width="${this.dimensions.width}" height="${this.dimensions.height}" frameborder="0" allowfullscreen allow="geolocation" src="${iframeUrl}"></iframe>`
-    if (this.options.includeFullScreenLink) {
-      const fullUrl = this.buildUrl({ scrollWheelZoom: true })
-      code += `<p><a href="${fullUrl}">${L._('See full screen')}</a></p>`
-    }
-    return code
-  },
-})
-
 L.U.Editable = L.Editable.extend({
   initialize: function (map, options) {
     L.Editable.prototype.initialize.call(this, map, options)

umap/static/umap/js/umap.core.js

@@ -262,6 +262,18 @@ L.Util.hasVar = (value) => {
   return typeof value === 'string' && value.indexOf('{') != -1
 }
 
+L.Util.isPath = function (value) {
+  return value && value.length && value.startsWith('/')
+}
+
+L.Util.isRemoteUrl = function (value) {
+  return value && value.length && value.startsWith('http')
+}
+
+L.Util.isDataImage = function (value) {
+  return value && value.length && value.startsWith('data:image')
+}
+
 L.Util.copyToClipboard = function (textToCopy) {
   // https://stackoverflow.com/a/65996386
   // Navigator clipboard api needs a secure context (https)
@@ -346,6 +358,24 @@ L.DomUtil.createLink = (className, container, content, url, target, title) => {
   return el
 }
 
+L.DomUtil.createCopiableInput = (parent, label, value) => {
+  const wrapper = L.DomUtil.add('div', 'copiable-input', parent)
+  const labelEl = L.DomUtil.add('label', '', wrapper, label)
+  const input = L.DomUtil.add('input', '', labelEl)
+  input.type = 'text'
+  input.readOnly = true
+  input.value = value
+  const button = L.DomUtil.createButton(
+    '',
+    wrapper,
+    '',
+    () => L.Util.copyToClipboard(input.value),
+    this
+  )
+  button.title = L._('copy')
+  return input
+}
+
 L.DomUtil.classIf = (el, className, bool) => {
   if (bool) L.DomUtil.addClass(el, className)
   else L.DomUtil.removeClass(el, className)
@@ -373,8 +403,8 @@ L.DomUtil.after = (target, el) => {
 }
 
 L.DomUtil.RGBRegex = /rgb *\( *([0-9]{1,3}) *, *([0-9]{1,3}) *, *([0-9]{1,3}) *\)/
-L.DomUtil.TextColorFromBackgroundColor = (el) => {
-  return L.DomUtil.contrastedColor(el) ? '#ffffff' : '#000000'
+L.DomUtil.TextColorFromBackgroundColor = (el, bgcolor) => {
+  return L.DomUtil.contrastedColor(el, bgcolor) ? '#ffffff' : '#000000'
 }
 const _CACHE_CONSTRAST = {}
 L.DomUtil.contrastedColor = (el, bgcolor) => {
@@ -436,60 +466,62 @@ L.U.Keys = {
 }
 
 L.U.Help = L.Class.extend({
-
   SHORTCUTS: {
     DRAW_MARKER: {
-      shortcut:'Modifier+M',
-      label: L._('Draw a marker')
+      shortcut: 'Modifier+M',
+      label: L._('Draw a marker'),
     },
     DRAW_LINE: {
-      shortcut:'Modifier+L',
-      label: L._('Draw a polyline')
+      shortcut: 'Modifier+L',
+      label: L._('Draw a polyline'),
     },
     DRAW_POLYGON: {
-      shortcut:'Modifier+P',
-      label: L._('Draw a polygon')
+      shortcut: 'Modifier+P',
+      label: L._('Draw a polygon'),
     },
     TOGGLE_EDIT: {
-      shortcut:'Modifier+E',
-      label: L._('Toggle edit mode')
+      shortcut: 'Modifier+E',
+      label: L._('Toggle edit mode'),
     },
     STOP_EDIT: {
-      shortcut:'Modifier+E',
-      label: L._('Stop editing')
+      shortcut: 'Modifier+E',
+      label: L._('Stop editing'),
     },
     SAVE_MAP: {
-      shortcut:'Modifier+S',
-      label: L._('Save map')
+      shortcut: 'Modifier+S',
+      label: L._('Save map'),
     },
     IMPORT_PANEL: {
-      shortcut:'Modifier+I',
-      label: L._('Import data')
+      shortcut: 'Modifier+I',
+      label: L._('Import data'),
     },
     SEARCH: {
-      shortcut:'Modifier+F',
-      label: L._('Search location')
+      shortcut: 'Modifier+F',
+      label: L._('Search location'),
     },
     CANCEL: {
-      shortcut:'Modifier+Z',
-      label: L._('Cancel edits')
+      shortcut: 'Modifier+Z',
+      label: L._('Cancel edits'),
     },
     PREVIEW: {
-      shortcut:'Modifier+E',
-      label: L._('Back to preview')
+      shortcut: 'Modifier+E',
+      label: L._('Back to preview'),
     },
     SAVE: {
-      shortcut:'Modifier+S',
-      label: L._('Save current edits')
+      shortcut: 'Modifier+S',
+      label: L._('Save current edits'),
     },
   },
 
-  displayLabel: function (action, withKbdTag=true) {
-    let {shortcut, label} = this.SHORTCUTS[action]
+  displayLabel: function (action, withKbdTag = true) {
+    let { shortcut, label } = this.SHORTCUTS[action]
     const modifier = this.isMacOS ? 'Cmd' : 'Ctrl'
     shortcut = shortcut.replace('Modifier', modifier)
     if (withKbdTag) {
-      shortcut = shortcut.split('+').map((el) => `<kbd>${el}</kbd>`).join('+')
+      shortcut = shortcut
+        .split('+')
+        .map((el) => `<kbd>${el}</kbd>`)
+        .join('+')
       label += ` ${shortcut}`
     } else {
       label += ` (${shortcut})`
@@ -515,7 +547,9 @@ L.U.Help = L.Class.extend({
     const label = L.DomUtil.create('span', '', closeButton)
     label.title = label.textContent = L._('Close')
     this.content = L.DomUtil.create('div', 'umap-help-content', this.box)
-    this.isMacOS = /mac/i.test(navigator.userAgentData ? navigator.userAgentData.platform : navigator.platform)
+    this.isMacOS = /mac/i.test(
+      navigator.userAgentData ? navigator.userAgentData.platform : navigator.platform
+    )
   },
 
   onKeyDown: function (e) {
@@ -708,7 +742,9 @@ L.U.Help = L.Class.extend({
   facetKey: L._(
     'Comma separated list of properties to use for facet search (eg.: mykey,otherkey). To control label, add it after a | (eg.: mykey|My Key,otherkey|Other Key)'
   ),
-  interactive: L._('If false, the polygon or line will act as a part of the underlying map.'),
+  interactive: L._(
+    'If false, the polygon or line will act as a part of the underlying map.'
+  ),
   outlink: L._('Define link to open in a new window on polygon click.'),
   dynamicRemoteData: L._('Fetch data each time map view changes.'),
   proxyRemoteData: L._("To use if remote server doesn't allow cross domain (slower)"),

umap/static/umap/js/umap.forms.js

@@ -372,16 +372,20 @@ L.FormBuilder.PopupContent = L.FormBuilder.Select.extend({
     ['Table', L._('Table')],
     ['GeoRSSImage', L._('GeoRSS (title + image)')],
     ['GeoRSSLink', L._('GeoRSS (only link)')],
+    ['OSM', L._('OpenStreetMap')],
   ],
 })
 
 L.FormBuilder.LayerTypeChooser = L.FormBuilder.Select.extend({
-  selectOptions: [
-    ['Default', L._('Default')],
-    ['Cluster', L._('Clustered')],
-    ['Heat', L._('Heatmap')],
-    ['Choropleth', L._('Choropleth')],
-  ],
+  getOptions: function () {
+    const layer_classes = [
+      L.U.Layer.Default,
+      L.U.Layer.Cluster,
+      L.U.Layer.Heat,
+      L.U.Layer.Choropleth,
+    ]
+    return layer_classes.map((class_) => [class_.TYPE, class_.NAME])
+  },
 })
 
 L.FormBuilder.SlideshowDelay = L.FormBuilder.IntSelect.extend({
@@ -538,8 +542,8 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
     this.footer.innerHTML = ''
     this.buildTabs()
     const value = this.value()
-    if (!value || value.startsWith('/')) this.showSymbolsTab()
-    else if (value.startsWith('http')) this.showURLTab()
+    if (!value || L.Util.isPath(value)) this.showSymbolsTab()
+    else if (L.Util.isRemoteUrl(value) || L.Util.isDataImage(value)) this.showURLTab()
     else this.showCharsTab()
     const closeButton = L.DomUtil.createButton(
       'button action-button',
@@ -596,20 +600,6 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
     this.body.innerHTML = ''
   },
 
-  isPath: function () {
-    const value = this.value()
-    return value && value.length && value.startsWith('/')
-  },
-
-  isRemoteUrl: function () {
-    const value = this.value()
-    return value && value.length && value.startsWith('http')
-  },
-
-  isImg: function () {
-    return this.isPath() || this.isRemoteUrl()
-  },
-
   updatePreview: function () {
     this.buttons.innerHTML = ''
     if (this.isDefault()) return
@@ -617,13 +607,7 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
       // Do not try to render URL with variables
       const box = L.DomUtil.create('div', 'umap-pictogram-choice', this.buttons)
       L.DomEvent.on(box, 'click', this.onDefine, this)
-      if (this.isImg()) {
-        const img = L.DomUtil.create('img', '', box)
-        img.src = this.value()
-      } else {
-        const el = L.DomUtil.create('span', '', box)
-        el.textContent = this.value()
-      }
+      const icon = L.U.Icon.makeIconElement(this.value(), box)
     }
     this.button = L.DomUtil.createButton(
       'button action-button',
@@ -723,7 +707,7 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
 
   showCharsTab: function () {
     this.openTab('chars')
-    const value = !this.isImg() ? this.value() : null
+    const value = !L.U.Icon.isImg(this.value()) ? this.value() : null
     const input = this.buildInput(this.body, value)
     input.placeholder = L._('Type char or paste emoji')
     input.type = 'text'
@@ -731,7 +715,10 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
 
   showURLTab: function () {
     this.openTab('url')
-    const value = this.isRemoteUrl() ? this.value() : null
+    const value =
+      L.Util.isRemoteUrl(this.value()) || L.Util.isDataImage(this.value())
+        ? this.value()
+        : null
     const input = this.buildInput(this.body, value)
     input.placeholder = L._('Add image URL')
     input.type = 'url'

umap/static/umap/js/umap.icon.js

@@ -67,15 +67,8 @@ L.U.Icon.Default = L.U.Icon.extend({
 
   onAdd: function () {
     const src = this._getIconUrl('icon')
-    // Decide whether to switch svg to white or not, but do it
-    // only for internal SVG, as invert could do weird things
-    if (src.startsWith('/') && src.endsWith('.svg')) {
-      const bgcolor = this._getColor()
-      // Must be called after icon container is added to the DOM
-      if (L.DomUtil.contrastedColor(this.elements.container, bgcolor)) {
-        this.elements.img.style.filter = 'invert(1)'
-      }
-    }
+    const bgcolor = this._getColor()
+    L.U.Icon.setIconContrast(this.elements.icon, this.elements.container, src, bgcolor)
   },
 
   createIcon: function () {
@@ -89,18 +82,7 @@ L.U.Icon.Default = L.U.Icon.extend({
     this.elements.arrow = L.DomUtil.create('div', 'icon_arrow', this.elements.main)
     const src = this._getIconUrl('icon')
     if (src) {
-      // An url.
-      if (
-        src.startsWith('http') ||
-        src.startsWith('/') ||
-        src.startsWith('data:image')
-      ) {
-        this.elements.img = L.DomUtil.create('img', null, this.elements.container)
-        this.elements.img.src = src
-      } else {
-        this.elements.span = L.DomUtil.create('span', null, this.elements.container)
-        this.elements.span.textContent = src
-      }
+      this.elements.icon = L.U.Icon.makeIconElement(src, this.elements.container)
     }
     this._setIconStyles(this.elements.main, 'icon')
     return this.elements.main
@@ -208,3 +190,44 @@ L.U.Icon.Cluster = L.DivIcon.extend({
     return color || L.DomUtil.TextColorFromBackgroundColor(el, backgroundColor)
   },
 })
+
+L.U.Icon.isImg = function (src) {
+  return L.Util.isPath(src) || L.Util.isRemoteUrl(src) || L.Util.isDataImage(src)
+}
+
+L.U.Icon.makeIconElement = function (src, parent) {
+  let icon
+  if (L.U.Icon.isImg(src)) {
+    icon = L.DomUtil.create('img')
+    icon.src = src
+  } else {
+    icon = L.DomUtil.create('span')
+    icon.textContent = src
+  }
+  parent.appendChild(icon)
+  return icon
+}
+
+L.U.Icon.setIconContrast = function (el, parent, src, bgcolor) {
+  /*
+   * el: the element we'll adapt the style, it can be an image or text
+   * parent: the element we'll consider to decide whether to adapt the style,
+   * by looking at its background color
+   * src: the raw "icon" value, can be an URL, a path, text, emoticon, etc.
+   * bgcolor: the background color, used for caching and in case we cannot guess the
+   * parent background color
+   */
+
+  if (L.DomUtil.contrastedColor(parent, bgcolor)) {
+    // Decide whether to switch svg to white or not, but do it
+    // only for internal SVG, as invert could do weird things
+    if (L.Util.isPath(src) && src.endsWith('.svg')) {
+      // Must be called after icon container is added to the DOM
+      // An image
+      el.style.filter = 'invert(1)'
+    } else if (!el.src) {
+      // Text icon
+      el.style.color = 'white'
+    }
+  }
+}