diff --git a/umap/static/umap/base.css b/umap/static/umap/base.css
index 827fa350..15b3a29b 100644
--- a/umap/static/umap/base.css
+++ b/umap/static/umap/base.css
@@ -566,6 +566,10 @@ i.info {
background-color: #999;
text-align: center;
margin-bottom: 5px;
+ display: none;
+}
+.umap-pictogram-choice.visible {
+ display: block;
}
.umap-pictogram-choice img {
vertical-align: middle;
diff --git a/umap/static/umap/js/umap.forms.js b/umap/static/umap/js/umap.forms.js
index 53510ca4..cb8e7589 100644
--- a/umap/static/umap/js/umap.forms.js
+++ b/umap/static/umap/js/umap.forms.js
@@ -586,7 +586,7 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
const img = L.DomUtil.create(
'img',
'',
- L.DomUtil.create('div', 'umap-pictogram-choice', this.buttonsContainer)
+ L.DomUtil.create('div', 'umap-pictogram-choice visible', this.buttonsContainer)
)
img.src = this.value()
L.DomEvent.on(img, 'click', this.showSymbols, this)
@@ -594,7 +594,7 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
const el = L.DomUtil.create(
'span',
'',
- L.DomUtil.create('div', 'umap-pictogram-choice', this.buttonsContainer)
+ L.DomUtil.create('div', 'umap-pictogram-choice visible', this.buttonsContainer)
)
el.textContent = this.value()
L.DomEvent.on(el, 'click', this.showSymbols, this)
@@ -610,7 +610,7 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
},
addIconPreview: function (pictogram, parent) {
- const baseClass = 'umap-pictogram-choice',
+ const baseClass = 'umap-pictogram-choice visible',
value = pictogram.src,
className = value === this.value() ? `${baseClass} selected` : baseClass,
container = L.DomUtil.create('div', className, parent),
@@ -618,6 +618,8 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
img.src = value
if (pictogram.name && pictogram.attribution) {
container.title = `${pictogram.name} — © ${pictogram.attribution}`
+ } else if (pictogram.name) {
+ container.title = pictogram.name
}
L.DomEvent.on(
container,
@@ -644,8 +646,7 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
const icons = [...this.parentNode.querySelectorAll('.umap-pictogram-choice')],
search = this.searchInput.value.toLowerCase()
icons.forEach((el) => {
- if (el.title.toLowerCase().indexOf(search) != -1) el.style.display = 'block'
- else el.style.display = 'none'
+ L.DomUtil.classIf(el, 'visible', el.title.toLowerCase().indexOf(search) !== -1)
})
},
diff --git a/umap/tests/fixtures/circle.svg b/umap/tests/fixtures/circle.svg
new file mode 100644
index 00000000..9b579a76
--- /dev/null
+++ b/umap/tests/fixtures/circle.svg
@@ -0,0 +1,4 @@
+
+
\ No newline at end of file
diff --git a/umap/tests/fixtures/star.svg b/umap/tests/fixtures/star.svg
new file mode 100644
index 00000000..2b6f5169
--- /dev/null
+++ b/umap/tests/fixtures/star.svg
@@ -0,0 +1,4 @@
+
+
\ No newline at end of file
diff --git a/umap/tests/integration/test_picto.py b/umap/tests/integration/test_picto.py
new file mode 100644
index 00000000..6a961161
--- /dev/null
+++ b/umap/tests/integration/test_picto.py
@@ -0,0 +1,68 @@
+from pathlib import Path
+
+import pytest
+from playwright.sync_api import expect
+from django.core.files.base import ContentFile
+
+from umap.models import Map, Pictogram
+
+from ..base import DataLayerFactory
+
+pytestmark = pytest.mark.django_db
+
+
+DATALAYER_DATA = {
+ "type": "FeatureCollection",
+ "features": [
+ {
+ "type": "Feature",
+ "geometry": {
+ "type": "Point",
+ "coordinates": [13.68896484375, 48.55297816440071],
+ },
+ "properties": {"_umap_options": {"color": "DarkCyan"}, "name": "Here"},
+ }
+ ],
+ "_umap_options": {"displayOnLoad": True, "name": "FooBarFoo"},
+}
+FIXTURES = Path(__file__).parent.parent / "fixtures"
+
+
+@pytest.fixture
+def pictos():
+ path = FIXTURES / "star.svg"
+ Pictogram(name="star", pictogram=ContentFile(path.read_text(), path.name)).save()
+ path = FIXTURES / "circle.svg"
+ Pictogram(name="circle", pictogram=ContentFile(path.read_text(), path.name)).save()
+
+
+def test_can_change_picto_at_map_level(map, live_server, page, pictos):
+ # Faster than doing a login
+ map.edit_status = Map.ANONYMOUS
+ map.save()
+ DataLayerFactory(map=map, data=DATALAYER_DATA)
+ page.goto(f"{live_server.url}{map.get_absolute_url()}?edit")
+ marker = page.locator(".umap-div-icon img")
+ expect(marker).to_have_count(1)
+ # Should have default img
+ expect(marker).to_have_attribute("src", "/static/umap/img/marker.png")
+ edit_settings = page.get_by_title("Edit map settings")
+ expect(edit_settings).to_be_visible()
+ edit_settings.click()
+ shape_settings = page.get_by_text("Default shape properties")
+ expect(shape_settings).to_be_visible()
+ shape_settings.click()
+ define = page.locator(".umap-field-iconUrl .define")
+ undefine = page.locator(".umap-field-iconUrl .undefine")
+ expect(define).to_be_visible()
+ expect(undefine).to_be_hidden()
+ define.click()
+ symbols = page.locator(".umap-pictogram-choice.visible")
+ expect(symbols).to_have_count(2)
+ search = page.locator(".umap-pictogram-list input")
+ search.type("star")
+ expect(symbols).to_have_count(1)
+ symbols.click()
+ expect(marker).to_have_attribute("src", "/uploads/pictogram/star.svg")
+ undefine.click()
+ expect(marker).to_have_attribute("src", "/static/umap/img/marker.png")