1

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,

1

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());
}
  • Thanks for this issue ! I have now a new problem, some layers (polygon) don't a "_leaflet_id" property. entity_key_dep[feature.properties.code_dept] = layer._leaflet_id; console.log(layer._leaflet_id); – Benno Sep 11 '15 at 13:01
  • I have got sometimes "undefined" and sometimes a correct leaflet id in firebug .... – Benno Sep 11 '15 at 13:03
  • 1
    Use function L.stamp(layer) - it adds internal Leaflet's ID to the layer (which you can see as _leaflet_id property) and returns that ID. – Alexander Parshin Sep 11 '15 at 13:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.