From cab87cd59f0282e90b88661e2e63e930d6cb599d Mon Sep 17 00:00:00 2001
From: Yohan Boniface <yohanboniface@free.fr>
Date: Wed, 20 Dec 2023 11:45:00 +0100
Subject: [PATCH 1/7] Deal with data:image in icon image form

---
 umap/static/umap/js/umap.core.js  | 12 ++++++++++++
 umap/static/umap/js/umap.forms.js | 24 ++++++++++--------------
 2 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/umap/static/umap/js/umap.core.js b/umap/static/umap/js/umap.core.js
index e3ce8f02..2cf791ba 100644
--- a/umap/static/umap/js/umap.core.js
+++ b/umap/static/umap/js/umap.core.js
@@ -260,6 +260,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)
diff --git a/umap/static/umap/js/umap.forms.js b/umap/static/umap/js/umap.forms.js
index fb7a41c1..b3970973 100644
--- a/umap/static/umap/js/umap.forms.js
+++ b/umap/static/umap/js/umap.forms.js
@@ -538,8 +538,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,18 +596,11 @@ 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()
+    const value = this.value()
+    return (
+      L.Util.isPath(value) || L.Util.isRemoteUrl(value) || L.Util.isDataImage(value)
+    )
   },
 
   updatePreview: function () {
@@ -731,7 +724,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'

From 2208a6c67dc1c32b05e180f3dfbf67f8dc396610 Mon Sep 17 00:00:00 2001
From: Yohan Boniface <yohanboniface@free.fr>
Date: Fri, 30 Jun 2023 16:26:50 +0200
Subject: [PATCH 2/7] WIP: OpenStreetMap dedicated popup template

---
 umap/static/umap/js/umap.forms.js |  1 +
 umap/static/umap/js/umap.popup.js | 21 +++++++++++++++++++++
 2 files changed, 22 insertions(+)

diff --git a/umap/static/umap/js/umap.forms.js b/umap/static/umap/js/umap.forms.js
index b3970973..1aabfec5 100644
--- a/umap/static/umap/js/umap.forms.js
+++ b/umap/static/umap/js/umap.forms.js
@@ -372,6 +372,7 @@ L.FormBuilder.PopupContent = L.FormBuilder.Select.extend({
     ['Table', L._('Table')],
     ['GeoRSSImage', L._('GeoRSS (title + image)')],
     ['GeoRSSLink', L._('GeoRSS (only link)')],
+    ['OSM', L._('OpenStreetMap')],
   ],
 })
 
diff --git a/umap/static/umap/js/umap.popup.js b/umap/static/umap/js/umap.popup.js
index 6bccceed..e6b1d50f 100644
--- a/umap/static/umap/js/umap.popup.js
+++ b/umap/static/umap/js/umap.popup.js
@@ -251,3 +251,24 @@ L.U.PopupTemplate.GeoRSSLink = L.U.PopupTemplate.Default.extend({
     return a
   },
 })
+
+L.U.PopupTemplate.OSM = L.U.PopupTemplate.Default.extend({
+  options: {
+    className: 'umap-openstreetmap',
+  },
+
+  getName: function () {
+    const props = this.feature.properties
+    if (L.locale && props[`name:${L.locale}`]) return props[`name:${L.locale}`];
+    return props.name
+  },
+
+  renderBody: function () {
+    const props = this.feature.properties
+    let kind = props.shop || props.amenity || props.craft
+    const container = L.DomUtil.add('div')
+    const kindEl = L.DomUtil.add('h4', '', container, kind)
+    L.DomUtil.add('h3', 'popup-title', container, this.getName())
+    return container
+  },
+})

From 48ab865b9a6a31b479435692eaec91c00fa093d3 Mon Sep 17 00:00:00 2001
From: Yohan Boniface <yohanboniface@free.fr>
Date: Wed, 20 Dec 2023 12:14:02 +0100
Subject: [PATCH 3/7] More work on OpenStreetMap popup template

---
 umap/static/umap/js/umap.core.js  |  4 +--
 umap/static/umap/js/umap.popup.js | 54 ++++++++++++++++++++++++++++---
 umap/static/umap/map.css          | 25 ++++++++++++++
 3 files changed, 77 insertions(+), 6 deletions(-)

diff --git a/umap/static/umap/js/umap.core.js b/umap/static/umap/js/umap.core.js
index 2cf791ba..cff2c619 100644
--- a/umap/static/umap/js/umap.core.js
+++ b/umap/static/umap/js/umap.core.js
@@ -383,8 +383,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) => {
diff --git a/umap/static/umap/js/umap.popup.js b/umap/static/umap/js/umap.popup.js
index e6b1d50f..f4289fde 100644
--- a/umap/static/umap/js/umap.popup.js
+++ b/umap/static/umap/js/umap.popup.js
@@ -259,16 +259,62 @@ L.U.PopupTemplate.OSM = L.U.PopupTemplate.Default.extend({
 
   getName: function () {
     const props = this.feature.properties
-    if (L.locale && props[`name:${L.locale}`]) return props[`name:${L.locale}`];
+    if (L.locale && props[`name:${L.locale}`]) return props[`name:${L.locale}`]
     return props.name
   },
 
   renderBody: function () {
     const props = this.feature.properties
-    let kind = props.shop || props.amenity || props.craft
     const container = L.DomUtil.add('div')
-    const kindEl = L.DomUtil.add('h4', '', container, kind)
-    L.DomUtil.add('h3', 'popup-title', container, this.getName())
+    const title = L.DomUtil.add('h3', 'popup-title', container)
+    const color = this.feature.getDynamicOption('color')
+    title.style.backgroundColor = color
+    const iconUrl = this.feature.getDynamicOption('iconUrl')
+    let img
+    if (L.Util.isPath(iconUrl) || L.Util.isRemoteUrl(iconUrl) || L.Util.isDataImage(iconUrl)) {
+      img = L.DomUtil.add('img', 'popup-icon', title)
+      img.src = iconUrl
+    } else {
+      img = L.DomUtil.add('span', 'popup-icon', title)
+      img.textContent = iconUrl
+    }
+    if (L.DomUtil.contrastedColor(title, color)) {
+      if (L.Util.isPath(iconUrl) && iconUrl.endsWith('.svg')) {
+        img.style.filter = 'invert(1)'
+      }
+      title.style.color = 'white'
+    }
+    L.DomUtil.add('span', '', title, this.getName())
+    const street = props['addr:street']
+    if (street) {
+      const row = L.DomUtil.add('address', 'address', container)
+      const number = props['addr:housenumber']
+      if (number) {
+        // Poor way to deal with international forms of writting addresses
+        L.DomUtil.add('span', '', row, `${L._("No.")}: ${number}`)
+        L.DomUtil.add('span', '', row, `${L._("Street")}: ${street}`)
+      } else {
+        L.DomUtil.add('span', '', row, street)
+      }
+    }
+    if (props.website) {
+      L.DomUtil.element('a', {href: props.website, textContent: props.website}, container)
+    }
+    const phone = props.phone || props['contact:phone']
+    if (phone) {
+      L.DomUtil.add('div', '', container, L.DomUtil.element('a', {href: `tel:${phone}`, textContent: phone}))
+    }
+    if (props.mobile) {
+      L.DomUtil.add('div', '', container, L.DomUtil.element('a', {href: `tel:${props.mobile}`, textContent: props.mobile}))
+    }
+    const email = props.email || props['contact:email']
+    if (email) {
+      L.DomUtil.add('div', '', container, L.DomUtil.element('a', {href: `mailto:${email}`, textContent: email}))
+    }
+    const id = props['@id']
+    if (id) {
+      L.DomUtil.add('div', 'osm-link', container, L.DomUtil.element('a', {href: `https://www.openstreetmap.org/${id}`, textContent: L._('See on OpenStreetMap')}))
+    }
     return container
   },
 })
diff --git a/umap/static/umap/map.css b/umap/static/umap/map.css
index ccd5ed48..17f7a815 100644
--- a/umap/static/umap/map.css
+++ b/umap/static/umap/map.css
@@ -1266,6 +1266,31 @@ a.add-datalayer:hover,
 .umap-popup a:hover {
     text-decoration: underline;
 }
+.popup-title {
+    display: flex;
+    align-items: center;
+}
+.popup-title img {
+    margin: 0 5px;
+}
+a[href^='mailto']::before {
+  content: '🖃 ';
+}
+a[href^='tel']::before {
+  content: '🕿 ';
+}
+address span {
+    padding-right: 5px;
+}
+.osm-link {
+    margin-top: 10px;
+    text-align: right;
+    font-style: italic;
+}
+span.popup-icon {
+    padding: 5px;
+}
+
 
 /* ************* */
 /* Marker's Icon */

From 50e8161b8959c8eff09d283f0a89b8a38274103b Mon Sep 17 00:00:00 2001
From: Yohan Boniface <yohanboniface@free.fr>
Date: Tue, 26 Dec 2023 12:08:20 +0100
Subject: [PATCH 4/7] Rename var in popup.js

---
 umap/static/umap/js/umap.popup.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/umap/static/umap/js/umap.popup.js b/umap/static/umap/js/umap.popup.js
index f4289fde..c30c03a9 100644
--- a/umap/static/umap/js/umap.popup.js
+++ b/umap/static/umap/js/umap.popup.js
@@ -270,17 +270,17 @@ L.U.PopupTemplate.OSM = L.U.PopupTemplate.Default.extend({
     const color = this.feature.getDynamicOption('color')
     title.style.backgroundColor = color
     const iconUrl = this.feature.getDynamicOption('iconUrl')
-    let img
+    let icon
     if (L.Util.isPath(iconUrl) || L.Util.isRemoteUrl(iconUrl) || L.Util.isDataImage(iconUrl)) {
-      img = L.DomUtil.add('img', 'popup-icon', title)
-      img.src = iconUrl
+      icon = L.DomUtil.add('img', 'popup-icon', title)
+      icon.src = iconUrl
     } else {
-      img = L.DomUtil.add('span', 'popup-icon', title)
-      img.textContent = iconUrl
+      icon = L.DomUtil.add('span', 'popup-icon', title)
+      icon.textContent = iconUrl
     }
     if (L.DomUtil.contrastedColor(title, color)) {
       if (L.Util.isPath(iconUrl) && iconUrl.endsWith('.svg')) {
-        img.style.filter = 'invert(1)'
+        icon.style.filter = 'invert(1)'
       }
       title.style.color = 'white'
     }

From a4dbb695451b1e40dfdcd59e2ac343bc9366cc40 Mon Sep 17 00:00:00 2001
From: Yohan Boniface <yohanboniface@free.fr>
Date: Tue, 26 Dec 2023 12:09:27 +0100
Subject: [PATCH 5/7] Prettier on popup.js

---
 umap/static/umap/js/umap.popup.js | 50 ++++++++++++++++++++++++++-----
 1 file changed, 42 insertions(+), 8 deletions(-)

diff --git a/umap/static/umap/js/umap.popup.js b/umap/static/umap/js/umap.popup.js
index c30c03a9..0233b77a 100644
--- a/umap/static/umap/js/umap.popup.js
+++ b/umap/static/umap/js/umap.popup.js
@@ -271,7 +271,11 @@ L.U.PopupTemplate.OSM = L.U.PopupTemplate.Default.extend({
     title.style.backgroundColor = color
     const iconUrl = this.feature.getDynamicOption('iconUrl')
     let icon
-    if (L.Util.isPath(iconUrl) || L.Util.isRemoteUrl(iconUrl) || L.Util.isDataImage(iconUrl)) {
+    if (
+      L.Util.isPath(iconUrl) ||
+      L.Util.isRemoteUrl(iconUrl) ||
+      L.Util.isDataImage(iconUrl)
+    ) {
       icon = L.DomUtil.add('img', 'popup-icon', title)
       icon.src = iconUrl
     } else {
@@ -291,29 +295,59 @@ L.U.PopupTemplate.OSM = L.U.PopupTemplate.Default.extend({
       const number = props['addr:housenumber']
       if (number) {
         // Poor way to deal with international forms of writting addresses
-        L.DomUtil.add('span', '', row, `${L._("No.")}: ${number}`)
-        L.DomUtil.add('span', '', row, `${L._("Street")}: ${street}`)
+        L.DomUtil.add('span', '', row, `${L._('No.')}: ${number}`)
+        L.DomUtil.add('span', '', row, `${L._('Street')}: ${street}`)
       } else {
         L.DomUtil.add('span', '', row, street)
       }
     }
     if (props.website) {
-      L.DomUtil.element('a', {href: props.website, textContent: props.website}, container)
+      L.DomUtil.element(
+        'a',
+        { href: props.website, textContent: props.website },
+        container
+      )
     }
     const phone = props.phone || props['contact:phone']
     if (phone) {
-      L.DomUtil.add('div', '', container, L.DomUtil.element('a', {href: `tel:${phone}`, textContent: phone}))
+      L.DomUtil.add(
+        'div',
+        '',
+        container,
+        L.DomUtil.element('a', { href: `tel:${phone}`, textContent: phone })
+      )
     }
     if (props.mobile) {
-      L.DomUtil.add('div', '', container, L.DomUtil.element('a', {href: `tel:${props.mobile}`, textContent: props.mobile}))
+      L.DomUtil.add(
+        'div',
+        '',
+        container,
+        L.DomUtil.element('a', {
+          href: `tel:${props.mobile}`,
+          textContent: props.mobile,
+        })
+      )
     }
     const email = props.email || props['contact:email']
     if (email) {
-      L.DomUtil.add('div', '', container, L.DomUtil.element('a', {href: `mailto:${email}`, textContent: email}))
+      L.DomUtil.add(
+        'div',
+        '',
+        container,
+        L.DomUtil.element('a', { href: `mailto:${email}`, textContent: email })
+      )
     }
     const id = props['@id']
     if (id) {
-      L.DomUtil.add('div', 'osm-link', container, L.DomUtil.element('a', {href: `https://www.openstreetmap.org/${id}`, textContent: L._('See on OpenStreetMap')}))
+      L.DomUtil.add(
+        'div',
+        'osm-link',
+        container,
+        L.DomUtil.element('a', {
+          href: `https://www.openstreetmap.org/${id}`,
+          textContent: L._('See on OpenStreetMap'),
+        })
+      )
     }
     return container
   },

From 86de16521f30b458aad0b32fbb24cf8bfa26e045 Mon Sep 17 00:00:00 2001
From: Yohan Boniface <yohanboniface@free.fr>
Date: Mon, 8 Jan 2024 08:44:08 +0100
Subject: [PATCH 6/7] Refactor icon element create and constrast

---
 umap/static/umap/base.css           |  2 +
 umap/static/umap/js/umap.browser.js | 10 +++--
 umap/static/umap/js/umap.forms.js   | 17 +-------
 umap/static/umap/js/umap.icon.js    | 65 +++++++++++++++++++----------
 umap/static/umap/js/umap.popup.js   | 21 ++--------
 umap/static/umap/map.css            | 22 ++++++----
 6 files changed, 72 insertions(+), 65 deletions(-)

diff --git a/umap/static/umap/base.css b/umap/static/umap/base.css
index 78b7c342..7382225d 100644
--- a/umap/static/umap/base.css
+++ b/umap/static/umap/base.css
@@ -584,6 +584,8 @@ i.info {
     text-align: center;
     margin-bottom: 5px;
     display: block;
+    color: black;
+    font-weight: bold;
 }
 .umap-pictogram-choice img {
     vertical-align: middle;
diff --git a/umap/static/umap/js/umap.browser.js b/umap/static/umap/js/umap.browser.js
index 29ef98f3..9212ada7 100644
--- a/umap/static/umap/js/umap.browser.js
+++ b/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',
diff --git a/umap/static/umap/js/umap.forms.js b/umap/static/umap/js/umap.forms.js
index 1aabfec5..97f39d15 100644
--- a/umap/static/umap/js/umap.forms.js
+++ b/umap/static/umap/js/umap.forms.js
@@ -597,13 +597,6 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
     this.body.innerHTML = ''
   },
 
-  isImg: function () {
-    const value = this.value()
-    return (
-      L.Util.isPath(value) || L.Util.isRemoteUrl(value) || L.Util.isDataImage(value)
-    )
-  },
-
   updatePreview: function () {
     this.buttons.innerHTML = ''
     if (this.isDefault()) return
@@ -611,13 +604,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',
@@ -717,7 +704,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'
diff --git a/umap/static/umap/js/umap.icon.js b/umap/static/umap/js/umap.icon.js
index 2effda1c..b1fd7f2d 100644
--- a/umap/static/umap/js/umap.icon.js
+++ b/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'
+    }
+  }
+}
diff --git a/umap/static/umap/js/umap.popup.js b/umap/static/umap/js/umap.popup.js
index 0233b77a..dad054a3 100644
--- a/umap/static/umap/js/umap.popup.js
+++ b/umap/static/umap/js/umap.popup.js
@@ -270,24 +270,9 @@ L.U.PopupTemplate.OSM = L.U.PopupTemplate.Default.extend({
     const color = this.feature.getDynamicOption('color')
     title.style.backgroundColor = color
     const iconUrl = this.feature.getDynamicOption('iconUrl')
-    let icon
-    if (
-      L.Util.isPath(iconUrl) ||
-      L.Util.isRemoteUrl(iconUrl) ||
-      L.Util.isDataImage(iconUrl)
-    ) {
-      icon = L.DomUtil.add('img', 'popup-icon', title)
-      icon.src = iconUrl
-    } else {
-      icon = L.DomUtil.add('span', 'popup-icon', title)
-      icon.textContent = iconUrl
-    }
-    if (L.DomUtil.contrastedColor(title, color)) {
-      if (L.Util.isPath(iconUrl) && iconUrl.endsWith('.svg')) {
-        icon.style.filter = 'invert(1)'
-      }
-      title.style.color = 'white'
-    }
+    let icon = L.U.Icon.makeIconElement(iconUrl, title)
+    L.U.Icon.setIconContrast(icon, title, iconUrl, color)
+    if (L.DomUtil.contrastedColor(title, color)) title.style.color = 'white'
     L.DomUtil.add('span', '', title, this.getName())
     const street = props['addr:street']
     if (street) {
diff --git a/umap/static/umap/map.css b/umap/static/umap/map.css
index 17f7a815..b56c4967 100644
--- a/umap/static/umap/map.css
+++ b/umap/static/umap/map.css
@@ -1010,29 +1010,36 @@ a.add-datalayer:hover,
     background-color: #f8f8f3;
 }
 .umap-browse-features .feature-color {
-    box-shadow: 0 0 4px 0 black inset;
-    background-size: 70% 70%;
-    border: 4px solid #f8f8f3;
+    box-shadow: 0 0 2px 0 black inset;
     cursor: inherit;
     -moz-box-sizing:border-box;
     -webkit-box-sizing:border-box;
     box-sizing: border-box;
-    background-position: center;
+    background: none;
     display: inline-block;
     padding: 0;
     width: 24px;
+    text-align: center;
+    margin-left: 5px;
+}
+.umap-browse-features .feature-color img {
+    width: 24px;
+}
+.umap-browse-features .feature-color span {
+    font-style: normal;
+    font-weight: bold;
 }
 .umap-browse-features .polygon .feature-color,
 .umap-browse-features .polyline .feature-color {
-    box-shadow: 0 0 4px 0 black inset;
+    box-shadow: 0 0 2px 0 black inset;
     background-image: url('./img/24.svg');
     background-size: 500%;
 }
 .umap-browse-features .polyline .feature-color {
-    background-position: -48px -16px;
+    background-position: -72px -23px;
 }
 .umap-browse-features .polygon .feature-color {
-    background-position: -32px -16px;
+    background-position: -48px -25px;
 }
 .show-on-edit {
     display: none!important;
@@ -1379,7 +1386,6 @@ span.popup-icon {
 .umap-div-icon .icon_container span,
 .umap-drop-icon .icon_container span {
     vertical-align: middle;
-    color: white;
     font-weight: bold;
 }
 .umap-circle-icon {

From ba6371381a9ea89d35c8c769a10acda2300603a0 Mon Sep 17 00:00:00 2001
From: Yohan Boniface <yohanboniface@free.fr>
Date: Mon, 8 Jan 2024 12:00:19 +0100
Subject: [PATCH 7/7] Better margin around popup title icon

---
 umap/static/umap/js/umap.popup.js | 1 +
 umap/static/umap/map.css          | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/umap/static/umap/js/umap.popup.js b/umap/static/umap/js/umap.popup.js
index dad054a3..02ce1bf8 100644
--- a/umap/static/umap/js/umap.popup.js
+++ b/umap/static/umap/js/umap.popup.js
@@ -271,6 +271,7 @@ L.U.PopupTemplate.OSM = L.U.PopupTemplate.Default.extend({
     title.style.backgroundColor = color
     const iconUrl = this.feature.getDynamicOption('iconUrl')
     let icon = L.U.Icon.makeIconElement(iconUrl, title)
+    L.DomUtil.addClass(icon, 'icon')
     L.U.Icon.setIconContrast(icon, title, iconUrl, color)
     if (L.DomUtil.contrastedColor(title, color)) title.style.color = 'white'
     L.DomUtil.add('span', '', title, this.getName())
diff --git a/umap/static/umap/map.css b/umap/static/umap/map.css
index b56c4967..06d613b3 100644
--- a/umap/static/umap/map.css
+++ b/umap/static/umap/map.css
@@ -1277,8 +1277,8 @@ a.add-datalayer:hover,
     display: flex;
     align-items: center;
 }
-.popup-title img {
-    margin: 0 5px;
+.popup-title .icon {
+    margin: 5px;
 }
 a[href^='mailto']::before {
   content: '🖃 ';