Showing multiple search results on leaflet map [closed] - leaflet

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
https://www.website.ro/harta this is the map that uses leaflet.js and https://github.com/stefanocudini/leaflet-search, but i can search only single locations.
https://www.website.ro/public/ajax?q=electri
If i search for "electri" it has 3 locations, i want to show them when i hit enter, not to show "Not found".
Already searched on google, stackoverflow, didnt found similar answer/problem.

Answer 1

This can be done with careful use of the options that leaflet-search provides. First, let's create an array that will hold the potential results, and a featureLayer to render any results that show up:
const results = [];
var resultsLayer = L.featureGroup();
Now we can overwrite the buildTip option as a function which does pretty much what it does already by default, but pushes the results to an array as well:
var controlSearch = new L.Control.Search({
...options,
// hijack buildtip function, push results to array
buildTip: (text, loc) => {
results.push(loc); // <---- crucial line here
// the rest of this is lifted from the source code almost exactly
// so as to keep the same behavior when clicking on an option
const tip = L.DomUtil.create("div");
tip.innerHTML = text;
L.DomEvent.disableClickPropagation(tip)
.on(tip, "click", L.DomEvent.stop, controlSearch)
.on(
tip,
"click",
function (e) {
controlSearch._input.value = text;
controlSearch._handleAutoresize();
controlSearch._input.focus();
controlSearch._hideTooltip();
controlSearch._handleSubmit();
},
controlSearch
);
return tip;
},
// only move to the location if there are not multiple results
moveToLocation: results.length
? () => {}
: L.Control.Search._defaultMoveToLocation
});
Now we add an event listener to the input of the search, and if the user presses enter, and there are multiple results, the results that were pushed into the results array will be added to the resultsLayer as markers, and added to the map:
inputEl.addEventListener("keypress", function (e) {
if (e.key === "Enter" && results.length) {
markersLayer.remove();
results.forEach((result) => {
const marker = L.marker(result);
resultsLayer.addLayer(marker);
});
map.fitBounds(resultsLayer.getBounds());
}
});
Working codesandbox
Note this will likely require some cleanup work (i.e. emptying the array on new or empty searches), or readding the full data set if the search is empty, etc., but this should be enough to get you started.
Edit - Full item info
You asked in a comment how we can get the full details of an item and put that in a popup. Reading through leaflet-search's docs and source code, there doesn't seem to be any place that their code 'catches' the entire data object. The buildTip function really only needs 2 pieces of data from an item - the text to show in the tooltip, and the location it refers to. There's a bunch of TODOs regarding keeping the source data in a cache, but they're still todos.
What I would do is use the title and loc that is returned in a result to filter the original data and find its corresponding item in the original data:
const getFullItem = (title, loc) => {
return data.find((item) => item.title === title && loc.equals(item.loc));
};
We can also create a generic function to build the popup text for all the makers, and the results, so the popups are all consistent:
const buildPopupText = (item) => {
return `
<h4>Title: ${item.title}</h4>
<p>Phone: ${item.telefon}</p>
<p>more stuff from ${item.whatever}</p>
`;
};
When we hit enter and we map through the results, we'll use the result to get the original item:
inputEl.addEventListener("keypress", function (e) {
if (e.key === "Enter" && results.length) {
results.forEach((result) => {
const originalItem = getFullItem(result.text, result.loc);
const marker = L.marker(result.loc);
marker.bindPopup(buildPopupText(originalItem));
resultsLayer.addLayer(marker);
});
map.fitBounds(resultsLayer.getBounds());
}
});
So now the results popups build a popup from the originalItem, which has all the properties you'll need.
Working codesandbox