Leaflet search and popup at other position

Question

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

Answer 1

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.

Answer 2

You can use the same function for the click event on a single element and on the search:locationfound event from the searchControl. See this working example.

(async() => {
  const defaultStyle = {
    fillColor: 'blue', 
    fillOpacity: 0.5,  
    weight: 1,
    opacity: 1,
    color: '#ffffff',
    dashArray: '4'
  };
  
  const highlightStyle = {
    fillColor: 'green',
    weight: 2,
    opacity: 1
  };


  const link = "https://gist.githubusercontent.com/phil-pedruco/10447085/raw/426fb47f0a6793776a044f17e66d17cbbf8061ad/countries.geo.json";
  const countryData = await fetch(link).then(res => res.json());

  const map = L.map('map').setView([0, 0], 2);

  const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
  }).addTo(map);
  
  function showResultsInDiv(feature, layer, countryLayer) {
    countryLayer.setStyle(defaultStyle);
    layer.setStyle(highlightStyle);
    const overlay = document.getElementById('overlay');
    overlay.innerHTML = "";
    for (let prop in feature.properties) {
      overlay.innerHTML += feature.properties.name;
    }
  }
  
  const countryLayer = L.geoJson(countryData, {
    style: function() {
        return defaultStyle
    },
    onEachFeature: function (feature, layer){
      layer.on({
        click: () => {   
            showResultsInDiv(feature, layer, countryLayer)
        }
      }); 
    }       
    }).addTo(map);
  
  const searchControl = L.control.search({
    layer: countryLayer,
    initial: false,
    propertyName: 'name',
    zoom: 3,
    marker: false
  });
  map.addControl(searchControl);
  
  searchControl.on('search:locationfound', function(e) { 
    showResultsInDiv(e.layer.feature, e.layer, countryLayer)
  });
  
})();