Avoid popups outside map area of GeoServer Layer using Openlayers

Question

I have added the function to show a custom message for the feature where data is not available in WMS layer of GeoServer, and it is working

but is there any way by which popup does not open outside the WMS layer/Map area. Like no popup should appear on click outside the map area.

    map.on('click',function(evt){
      old.check = true;
      old.resolution = map.getView().getResolution();
      old.coordinate = evt.coordinate;
      old.projection = map.getView().getProjection();
      loadData(old);
    });

function Day_1(old) {
          var Day_1_weather_warning_layer_url = weather_warning_layer_day_1.getSource().getFeatureInfoUrl(
              old.coordinate,
              old.resolution,
              old.projection,
              {
              'INFO_FORMAT':'application/json',
              'FEATURE_COUNT': '5', 
              'propertyName': 'issue_date,updated_at,utc_time,state_name,state_id,district_name,district_id,api_district_name,day_1,day1_color'
              })
                  $.getJSON(Day_1_weather_warning_layer_url,function(weather_warning_layer_data){ 

              if(weather_warning_layer_data.numberReturned == 0){
                
                popup_content.innerHTML =              
                '<table id="crop_advisory_not_available_table"> <caption> Weather warning will be updated soon for this region. &nbsp; </caption> </table>';
                overlay.setPosition(old.coordinate);
                } else {

                some other variables which I have to show in the table

                popup_content.innerHTML ='<table id="weather_forecast_table"> <caption> Weather Warning updated at&nbsp;' + warning_updated_at + '&nbsp; \nfor district:\n&nbsp;'+ district_name + '&nbsp; </caption> <tr><th>&nbsp; Validity&nbsp; </th> <th> &nbsp; Weather Warnings &nbsp; </th>  <tr> <td>&nbsp; ' + formatted_issue_date + " (08:30 IST) to " + warning_valid_till + " (08:30 IST) "+'&nbsp; </td> <td>&nbsp; ' + warning_results + '&nbsp; </td> </tr></table>'

              overlay.setPosition(old.coordinate);                
              }              
            })
    }

I found some answers here as

Prevent popup from appearing when clicking outside WMS layer

How to prevent popup when there is no feature

but could not get the logic, how to avoid popup outside WMS.

I could have thought of something to close the popup if the JSON URL of GetFeatureInfo has some different attributes

but the URL data is similar in both cases as:

1. URL inside WMS, where no data is present

{"type":"FeatureCollection","features":[],"totalFeatures":"unknown","numberReturned":0,"timeStamp":"2021-06-04T17:02:30.603Z","crs":null}

2. URL outside WMS area, where no data is present

{"type":"FeatureCollection","features":[],"totalFeatures":"unknown","numberReturned":0,"timeStamp":"2021-06-04T17:02:02.174Z","crs":null}

Answer 1

A click event on the map should not happen if the pointer is not on the map viewport. You could stop the popup working if it is not in a region covered by the WMS:

map.on('click',function(evt){
  var hit = map.forEachLayerAtPixel(evt.pixel, function () {
    return true;
  });
  if (hit) {
    old.check = true;
    old.resolution = map.getView().getResolution();
    old.coordinate = evt.coordinate;
    old.projection = map.getView().getProjection();
    loadData(old);
  }
});

(the code assumes the WMS is the only layer).