[GIS] Leaflet search and popup at other position

leafletpopupsearch

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

Best Answer

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.

Related Question