[GIS] Get GeoJson feature by ID and zoom on entity

geojsonjavascriptjqueryleaflet

I have got a leaflet map with Geojson layers :
enter image description here

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,

Best Answer

Make a hash inside the onEachFeature function:

musees_layers[feature.properties.nom_musee] = musees_layers[feature.properties.id] = layer;

Then just use it in autocomplete select event:

select: function( event, ui ) {
    var layer = musees_layers[ui.item.value];

    //for markers
    map.setView(layer.getLatLng(), DEFAULT_ZOOM);

    //for polygons/polylines
    //map.fitBounds(layer.getBounds());
}
Related Question