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){
                click: function showResultsInDiv() {
                    var d = document.getElementById('popup');
                    d.innerHTML = "";
                        for (prop in feature.properties){
                        d.innerHTML += prop+": "+feature.properties.COUNTRY+"<br>";
            }); }       


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) {


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

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

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

Hope someone can help me solve this issue

2 Answers 2


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.


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>'
  function showResultsInDiv(feature, layer, countryLayer) {
    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){
        click: () => {   
            showResultsInDiv(feature, layer, countryLayer)
  const searchControl = L.control.search({
    layer: countryLayer,
    initial: false,
    propertyName: 'name',
    zoom: 3,
    marker: false
  searchControl.on('search:locationfound', function(e) { 
    showResultsInDiv(e.layer.feature, e.layer, countryLayer)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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