feat: display a target on hover on search results

Co-authored-by: David Larlet <david@larlet.fr>
This commit is contained in:
Yohan Boniface 2025-03-06 17:25:40 +01:00
parent ae5bc9746c
commit 782386bad4
2 changed files with 15 additions and 0 deletions

View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none"><g filter="url(#a)"><circle cx="16" cy="12" r="6" fill="#2980B9"/></g><g filter="url(#b)"><circle cx="16" cy="12" r="11.5" stroke="#2980B9" shape-rendering="crispEdges"/></g><defs><filter id="a" width="20" height="20" x="6" y="6" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="4"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_2923_3333"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_2923_3333" result="shape"/></filter><filter id="b" width="32" height="32" x="0" y="0" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="4"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_2923_3333"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_2923_3333" result="shape"/></filter></defs></svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

View file

@ -468,6 +468,20 @@ U.Search = L.PhotonSearch.extend({
})
el.appendChild(tools)
this._formatResult(feature, el)
const path = U.SCHEMA.iconUrl.default.replace('marker.svg', 'target.svg')
const icon = L.icon({
iconUrl: path,
iconSize: [24, 24],
iconAnchor: [12, 12],
})
const coords = feature.geometry.coordinates
const target = L.marker([coords[1], coords[0]], { icon })
el.addEventListener('mouseover', (event) => {
target.addTo(this.map)
})
el.addEventListener('mouseout', (event) => {
target.removeFrom(this.map)
})
},
setChoice: function (choice) {