I have got a leaflet map with Geojson layers :
I use jquery Autocomplete to search an entity by name or id, I have no problem with that. I need your help because I'm not able to refer to a specific point in my layer (without a click on the map). Ideally, I would zoom in on it and open a popup.
Here is my code for loading Geojson markers :
var markers = L.markerClusterGroup({showCoverageOnHover: false,disableClusteringAtZoom: 9});
var points_rand = L.geoJson(points, {
onEachFeature: function (feature, layer) //functionality on click on feature
{
//ARRAY FOR AUTOCOMPLETE
musees_names_array.push(feature.properties.nom_musee, feature.properties.id);
//ARRAY KEY VALUE
musees_key_value[feature.properties.nom_musee] = feature.properties.id;
{
var title_ = "<p class = \"leaf_title\">"+feature.properties.nom_musee+"</p>";
var subtitle = "";
var ouverture = "";
if(feature.properties.site_web != null ){
subtitle +="<b>Site web : </b>"
+"<a href=\"http://"+feature.properties.site_web+"\">"+feature.properties.site_web+"</a></br>";
}
if(feature.properties.periode_ouverture != null ){
subtitle +="<b>Horaires : </b>"
+" <div class = \"leaf_ouverture\">"+feature.properties.periode_ouverture+"</div></br>";
}
}
layer.bindPopup(
title_ + subtitle + ouverture
)
layer.setIcon(IconPerso);
}
});
After a research with Autocomplete I have a function with the id selected but I don't know how zoom on a specific marker :
$(function() {
$("#search_musee").autocomplete(
{
source:musees_names_array,
minLength: 3,
select: function( event, ui ) {
var id_musee = musees_key_value[ui.item.value];// ID selected
//HERE IS MY PROBLEM
//I would like something like :
// map.fitBounds(SPECIFIC_MARKER.getBounds());
}
})
});
I did some research like trigger event leaflet but without success,