1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Leaflet search and popup at other position

Discussion in 'Programming/Internet' started by Stefan, Oct 8, 2018.

  1. Stefan

    Stefan Guest

    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

    Login To add answer/comment
     

Share This Page