In leaflet I want the popup on another position then the standard. So I created a div in which the popup-information is opens.

countryLayer = L.geoJson(countryLayer, {

         onEachFeature: function (feature, layer){
           layer.on({
                click: function showResultsInDiv() {
                    var d = document.getElementById('popup');
                    d.innerHTML = "";
                        for (prop in feature.properties){
                        d.innerHTML += prop+": "+feature.properties.COUNTRY+"<br>";
                        }
                    console.log(d.innerHTML);
                }
            }); }       

});

This is working fine. I click an object and the popup opens in the top-right corner.

However I am also using the search plugin by stefanocudini (https://github.com/stefanocudini/leaflet-search) When I search I want the popup to open automatically in the div. Unfortunately I can´t get this to work. I can seach and the location is giving, but the popup does not open.

The search-control code I use is:

var searchControl = L.control.search({
    layer: countryLayer,
    initial: false,
    propertyName: 'COUNTRY',
    zoom: 15
});

searchControl.on('search:locationfound', function(e) {

    if(e.layer._popup)
        e.layer.openPopup();

}).on('search:collapsed', function(e) {

        streetsLayer.eachLayer(function(feature, layer) {   //restore feature color
            streetsLayer.resetStyle(layer);
    }); 
});

map.addControl( searchControl );  //inizialize search control

Hope someone can help me solve this issue

Since the popup already opens in a div on click, you want the search selection to open in the same div.

I have a write up I did for a class using JQuery;s autocomplete as a search tool. When loading the layer, I also load an array that I use for the search, In my case a state name value, Since this is unique I also loaded it as the Leaflet_ID. by doing I could associate the search name with a specific feature, then use the select to fire a click event with the same result as if you just clicked on it. I included a zoom to feature also.

My write up http://www.gistechsolutions.com/leaflet/DEMO/Search/index.html There is also a working example off of it.

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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