OpenLayers – How to Close Automatic Popup on Button Click

openlayerspopup

I'm using the fixed popup, to show the location, according to the latitude and longitude entered by the user.
When you click the button to delete the search, would you like to run or close the automatic popup?
How should I do? I'm using OpenLayers

Fixed popup link: I'm using the fixed popup, to show the location, according to the latitude and longitude entered by the user.

When you click the button to delete the search, would you like to run or close the automatic popup?
How should I do? I'm using OpenLayers

var view = map.getView();
var zoom = view.getZoom();
 // Popup overlay

var popup_lat_long = new ol.Overlay.FixedPopup ({
    popupClass: "default", //"tooltips", "warning" "black" "default", "tips", "shadow",
    closeBox: true
});
popup_lat_long.setPixelPosition([10,10], 'auto')
map.addOverlay(popup_lat_long)

document.getElementById('butonSearchLatLong').addEventListener('click', function() {
       
    view = map.getView();
    zoom = view.getZoom();
    
    var lat = parseFloat(document.getElementById('lat').value);
    var lon = parseFloat(document.getElementById('lon').value);

    // Converting lat long to mercator projection
    proj_lat_long = ol.proj.fromLonLat([lat, lon])

    // Zoom to lat lon
    map.setView(
        new ol.View({
            center: proj_lat_long,
            zoom: 17
        })
    );

    popup_lat_long.setPixelPosition([10,10], 'auto')
    popup_lat_long.show(proj_lat_long, 'Lat: ' + lat + '<br/> Lon: ' + lon); 
});

document.getElementById('buttonDeleteLatLong').addEventListener('click', function() {
    view.setZoom(zoom);
    map.setView(view)
        
});

Fixed popup link: http://viglino.github.io/ol-ext/examples/popup/map.fixedpopup.html#:~:text=Fixed%20popups%20are%20Openlayers%20popups,its%20position%20on% 20the%20map.&text=Map%20tiles%20by%20Stamen%20Design%2C%20under%20CC%20BY%203.0.

enter image description here

Best Answer

If you look at the docs of the ol-ext fixed popup, you'll see it has .hide() method, by which displayed popup can be hidden.

So relevant part of your code could look like this:

document.getElementById('buttonDeleteLatLong').addEventListener('click', function() {
  view.setZoom(zoom);
  map.setView(view);
  popup_lat_long.hide();
});
Related Question