diff --git a/umap/static/umap/img/16.svg b/umap/static/umap/img/16.svg
index 3c1eb12c..6950d1f7 100644
--- a/umap/static/umap/img/16.svg
+++ b/umap/static/umap/img/16.svg
@@ -1 +1 @@
-
+
diff --git a/umap/static/umap/img/24.svg b/umap/static/umap/img/24.svg
index a1f6f6fd..8ae40765 100644
--- a/umap/static/umap/img/24.svg
+++ b/umap/static/umap/img/24.svg
@@ -13,10 +13,10 @@
1
-
-
+
+
-
+
@@ -47,7 +47,7 @@
-
+
diff --git a/umap/static/umap/img/source/16.svg b/umap/static/umap/img/source/16.svg
index fb7d31ef..aad5d758 100644
--- a/umap/static/umap/img/source/16.svg
+++ b/umap/static/umap/img/source/16.svg
@@ -1,4 +1,4 @@
-
+
diff --git a/umap/static/umap/img/source/24.svg b/umap/static/umap/img/source/24.svg
index c6eaab05..72eddd1b 100644
--- a/umap/static/umap/img/source/24.svg
+++ b/umap/static/umap/img/source/24.svg
@@ -2,7 +2,7 @@
-
-
+
+
-
+
@@ -60,7 +60,7 @@
-
+
diff --git a/umap/static/umap/js/umap.controls.js b/umap/static/umap/js/umap.controls.js
index 287ca885..438f2235 100644
--- a/umap/static/umap/js/umap.controls.js
+++ b/umap/static/umap/js/umap.controls.js
@@ -430,44 +430,31 @@ U.Search = L.PhotonSearch.extend({
},
formatResult: function (feature, el) {
- const tools = L.DomUtil.create('span', 'search-result-tools', el)
- const zoom = L.DomUtil.createButtonIcon(
- tools,
- 'icon-zoom',
- L._('Zoom to this place')
- )
- const edit = L.DomUtil.createButtonIcon(
- tools,
- 'icon-edit',
- L._('Save this location as new feature')
- )
- // We need to use "mousedown" because Leaflet.Photon listen to mousedown
- // on el.
- L.DomEvent.on(zoom, 'mousedown', (e) => {
- L.DomEvent.stop(e)
- this.zoomToFeature(feature)
- })
- L.DomEvent.on(edit, 'mousedown', (e) => {
- L.DomEvent.stop(e)
+ const [tools, { button }] = U.Utils.loadTemplateWithRefs(`
+
+ `)
+ button.addEventListener('mousedown', (event) => {
+ event.stopPropagation()
const datalayer = this.map._umap.defaultEditDataLayer()
- const layer = datalayer.makeFeature(feature)
- layer.isDirty = true
- layer.edit()
+ const marker = datalayer.makeFeature(feature)
+ marker.isDirty = true
+ marker.edit()
+ this.map._umap.panel.close()
})
+ el.appendChild(tools)
this._formatResult(feature, el)
},
- zoomToFeature: function (feature) {
- const zoom = Math.max(this.map.getZoom(), 16) // Never unzoom.
- this.map.setView(
- [feature.geometry.coordinates[1], feature.geometry.coordinates[0]],
- zoom
- )
- },
-
- onSelected: function (feature) {
- this.zoomToFeature(feature)
- this.map.panel.close()
+ setChoice: function (choice) {
+ choice = choice || this.RESULTS[this.CURRENT]
+ if (choice) {
+ const feature = choice.feature
+ const zoom = Math.max(this.map.getZoom(), 14) // Never unzoom.
+ this.map.setView(
+ [feature.geometry.coordinates[1], feature.geometry.coordinates[0]],
+ zoom
+ )
+ }
},
})
diff --git a/umap/static/umap/map.css b/umap/static/umap/map.css
index fd61b9b6..84d2d9e9 100644
--- a/umap/static/umap/map.css
+++ b/umap/static/umap/map.css
@@ -263,18 +263,26 @@ ul.photon-autocomplete {
.photon-autocomplete li {
min-height: 40px;
line-height: 1em;
- padding: 5px 10px;
+ padding-inline-start: 10px;
overflow: hidden;
white-space: nowrap;
font-size: 1em;
- border-inline-start: 4px solid #efefef;
+ border-inline-start: 4px solid var(--color-lightGray);
}
.photon-autocomplete li strong {
display: block;
+ margin-top: 5px;
+}
+.photon-autocomplete button {
+ margin: 0;
+}
+.photon-autocomplete button:hover {
+ background-color: var(--color-brightCyan);
}
.photon-autocomplete li.on {
- border-inline-start: 4px solid #2980b9;
+ border-inline-start: 4px solid var(--color-brightCyan);
cursor: pointer;
+ background-color: var(--color-lightCyan);
}
.photon-autocomplete li.photon-no-result {
text-align: center;
@@ -292,6 +300,9 @@ ul.photon-autocomplete {
}
.search-result-tools {
float: inline-end;
+ display: none;
+}
+.photon-autocomplete li.on .search-result-tools {
display: block;
}