0

In continuation to How to fetch the URL of specific GeoServer layer by switching radio button, I have tried to generate the URL of specific GeoServer layer after selecting the radio button of that layer.

$('input[name="WeatherParameterLayerRadioButton"]').on('click', function() {
var radioValue = $('input[name="WeatherParameterLayerRadioButton"]:checked').val(); 

for which, I have created an array of Layers

let district_url_pass = [
  rainfall_layer, 
  maximum_temperature_layer, 
  minimum_temperature_layer,
  cloud_cover_layer]

While Checking the radio button, the URL of Button, which I am Checking, is getting generated at last, but still, the URL's of other parameters are being generated, which are appearing as the Popup enter image description here


    $('input[name="WeatherParameterLayerRadioButton"]').on('click', function() {
        var radioValue = $('input[name="WeatherParameterLayerRadioButton"]:checked').val(); 



        let district_url_pass = [
            india_dist_rainfall_layer, 
            india_dist_maximum_temperature_layer, 
            india_dist_minimum_temperature_layer,
            india_dist_cloud_cover_layer]


        map.on('click',function(evt){
        var resolution=map.getView().getResolution();
        var coordinate=evt.coordinate;  
        var projection=map.getView().getProjection();
            
        switch(radioValue) {
            case 'Rainfall_layer':
              processRainfallClick();
              break;
            case 'Maximum_temperature_layer':
              processMaxTemperatureClick();
              break;
            case 'Minimum_temperature_layer':
              processMinTemperatureClick();
              break;
            default:
              processCloudCoverClick();
            console.log(radioValue);
          }

        function processRainfallClick() {
            var Rainfall_layer_url=district_url_pass[0].getSource().getFeatureInfoUrl(
            coordinate,
            resolution,
            projection,
            {
            'INFO_FORMAT':'application/json',
            'FEATURE_COUNT': '5', 
            'propertyName': 'issue_date,forecast_date,district_name,rainfall'
            })
            console.log("URL Fired at processRainfallClick():", Rainfall_layer_url)
            $.getJSON(Rainfall_layer_url,function(Rainfall_data){
              popup_content.innerHTML = 
              '<table id="weather_forecast_table"> <caption> The forecast Issued on:&nbsp;' + Rainfall_data.features[0].properties.issue_date + ',' + '&nbsp; \nfor next 5 days of district:\n&nbsp;'+ Rainfall_data.features[0].properties.district_name+ '&nbsp; </caption> <tr><th>&nbsp; Forecast Date&nbsp; </th> <th> &nbsp; Rainfall (mm) &nbsp; </th>  <tr> <td>&nbsp; ' + Rainfall_data.features[0].properties.forecast_date + '&nbsp; </td> <td>&nbsp; ' + Rainfall_data.features[0].properties.rainfall + '&nbsp; </td></tr> <tr><td>&nbsp; ' + Rainfall_data.features[1].properties.forecast_date + '&nbsp; </td><td>&nbsp; ' + Rainfall_data.features[1].properties.rainfall + '&nbsp; </td> <tr><td>&nbsp; ' + Rainfall_data.features[2].properties.forecast_date + '&nbsp; </td><td>&nbsp; ' + Rainfall_data.features[2].properties.rainfall + '&nbsp; </td> <tr><td>&nbsp; ' + Rainfall_data.features[3].properties.forecast_date + '&nbsp; </td><td>&nbsp; ' + Rainfall_data.features[3].properties.rainfall + '&nbsp; </td><tr><td>&nbsp; ' + Rainfall_data.features[4].properties.forecast_date + '&nbsp; </td><td>&nbsp; ' + Rainfall_data.features[4].properties.rainfall + '&nbsp; </td> </tr></table>'
    
              overlay.setPosition(coordinate);
            })
        }

        function processMaxTemperatureClick() {
            var Maximum_temperature_url = district_url_pass[1].getSource().getFeatureInfoUrl(
                coordinate,
                resolution,
                projection,
                {
                'INFO_FORMAT':'application/json',
                'FEATURE_COUNT': '5', 
                'propertyName': 'issue_date,forecast_date,district_name,temperature_max'
                })
                console.log("URL Fired at processMaxTemperatureClick():"+Maximum_temperature_url)
                    $.getJSON(Maximum_temperature_url,function(Maximum_temperature_data){
                        popup_content.innerHTML = 
                        '<table id="weather_forecast_table"> <caption> The forecast Issued on:&nbsp;' + Maximum_temperature_data.features[0].properties.issue_date + ',' + '&nbsp; \nfor next 5 days of district:\n&nbsp;'+ Maximum_temperature_data.features[0].properties.district_name+ '&nbsp; </caption> <tr><th>&nbsp; Forecast Date&nbsp; </th> <th> &nbsp; Maximum Temperature  (°C) &nbsp; </th>  <tr> <td>&nbsp; ' + Maximum_temperature_data.features[0].properties.forecast_date + '&nbsp; </td> <td>&nbsp; ' + Maximum_temperature_data.features[0].properties.temperature_max + '&nbsp; </td></tr> <tr><td>&nbsp; ' + Maximum_temperature_data.features[1].properties.forecast_date + '&nbsp; </td><td>&nbsp; ' + Maximum_temperature_data.features[1].properties.temperature_max + '&nbsp; </td> <tr><td>&nbsp; ' + Maximum_temperature_data.features[2].properties.forecast_date + '&nbsp; </td><td>&nbsp; ' + Maximum_temperature_data.features[2].properties.temperature_max + '&nbsp; </td> <tr><td>&nbsp; ' + Maximum_temperature_data.features[3].properties.forecast_date + '&nbsp; </td><td>&nbsp; ' + Maximum_temperature_data.features[3].properties.temperature_max + '&nbsp; </td><tr><td>&nbsp; ' + Maximum_temperature_data.features[4].properties.forecast_date + '&nbsp; </td><td>&nbsp; ' + Maximum_temperature_data.features[4].properties.temperature_max + '&nbsp; </td> </tr></table>'
        
                        overlay.setPosition(coordinate);
                    })
            }

            function processMinTemperatureClick() {
            var Minimum_temperature_url = district_url_pass[2].getSource().getFeatureInfoUrl(
                coordinate,
                resolution,
                projection,
                {
                'INFO_FORMAT':'application/json',
                'FEATURE_COUNT': '5', 
                'propertyName': 'issue_date,forecast_date,district_name,temperature_min'
                })
                console.log("URL Fired at processMinTemperatureClick():"+Minimum_temperature_url)
                    $.getJSON(Minimum_temperature_url,function(Minimum_temperature_data){
                        popup_content.innerHTML = 
                        '<table id="weather_forecast_table"> <caption> The forecast Issued on:&nbsp;' + Minimum_temperature_data.features[0].properties.issue_date + ',' + '&nbsp; \nfor next 5 days of district:\n&nbsp;'+ Minimum_temperature_data.features[0].properties.district_name+ '&nbsp; </caption> <tr><th>&nbsp; Forecast Date&nbsp; </th> <th> &nbsp; Minimum Temperature  (°C) &nbsp; </th>  <tr> <td>&nbsp; ' + Minimum_temperature_data.features[0].properties.forecast_date + '&nbsp; </td> <td>&nbsp; ' + Minimum_temperature_data.features[0].properties.temperature_min + '&nbsp; </td></tr> <tr><td>&nbsp; ' + Minimum_temperature_data.features[1].properties.forecast_date + '&nbsp; </td><td>&nbsp; ' + Minimum_temperature_data.features[1].properties.temperature_min + '&nbsp; </td> <tr><td>&nbsp; ' + Minimum_temperature_data.features[2].properties.forecast_date + '&nbsp; </td><td>&nbsp; ' + Minimum_temperature_data.features[2].properties.temperature_min + '&nbsp; </td> <tr><td>&nbsp; ' + Minimum_temperature_data.features[3].properties.forecast_date + '&nbsp; </td><td>&nbsp; ' + Minimum_temperature_data.features[3].properties.temperature_min + '&nbsp; </td><tr><td>&nbsp; ' + Minimum_temperature_data.features[4].properties.forecast_date + '&nbsp; </td><td>&nbsp; ' + Minimum_temperature_data.features[4].properties.temperature_min + '&nbsp; </td> </tr></table>'

                        overlay.setPosition(coordinate);
                    })
            }

        function processCloudCoverClick() {
            var Cloud_cover_url=district_url_pass[7].getSource().getFeatureInfoUrl(
                coordinate,
                resolution,
                projection,
                {
                'INFO_FORMAT':'application/json',
                'FEATURE_COUNT': '5', 
                'propertyName': 'issue_date,forecast_date,district_name,cloud_cover',
                })
                console.log("URL Fired at processCloudCoverClick():", Cloud_cover_url)
                $.getJSON(Cloud_cover_url,function(Cloud_cover_data){
                    popup_content.innerHTML = 
                    '<table id="weather_forecast_table"> <caption> The forecast Issued on:&nbsp;' + Cloud_cover_data.features[0].properties.issue_date + ',' + '&nbsp; \nfor next 5 days of district:\n&nbsp;'+ Cloud_cover_data.features[0].properties.district_name+ '&nbsp; </caption> <tr><th>&nbsp; Forecast Date&nbsp; </th> <th> &nbsp; Cloud Cover (Octa) &nbsp; </th>  <tr> <td>&nbsp; ' + Cloud_cover_data.features[0].properties.forecast_date + '&nbsp; </td> <td>&nbsp; ' + Cloud_cover_data.features[0].properties.cloud_cover + '&nbsp; </td></tr> <tr><td>&nbsp; ' + Cloud_cover_data.features[1].properties.forecast_date + '&nbsp; </td><td>&nbsp; ' + Cloud_cover_data.features[1].properties.cloud_cover + '&nbsp; </td> <tr><td>&nbsp; ' + Cloud_cover_data.features[2].properties.forecast_date + '&nbsp; </td><td>&nbsp; ' + Cloud_cover_data.features[2].properties.cloud_cover + '&nbsp; </td> <tr><td>&nbsp; ' + Cloud_cover_data.features[3].properties.forecast_date + '&nbsp; </td><td>&nbsp; ' + Cloud_cover_data.features[3].properties.cloud_cover + '&nbsp; </td><tr><td>&nbsp; ' + Cloud_cover_data.features[4].properties.forecast_date + '&nbsp; </td><td>&nbsp; ' + Cloud_cover_data.features[4].properties.cloud_cover + '&nbsp; </td> </tr></table>'

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


How to rectify this so that only that pop-up appears, which is selected using radio Button?

1 Answer 1

1

Problem is in the way you are handling radio button selection. On each selection you define new map click event function with map.on('click', ..., but the previous ones stay valid. As a consequence upon each click all those functions get fired.

Solution is to define map click event processing function only once and then within it decide which layer will be processes, depending on radioValue.

Code could then look something like this:

var resolution, coordinate, projection;

map.on('click', function (evt) {
  resolution = map.getView().getResolution();
  coordinate = evt.coordinate;
  projection = map.getView().getProjection();
  switch(radioValue) {
    case 'Rainfall_layer':
      processRainfallClick();
      break;
    case 'Maximum_temperature_layer':
      processMaxTemperatureClick();
      break;
    case 'Minimum_temperature_layer':
      processMinTemperatureClick();
      break;
    default:
      processCloudCoverClick();
  }
});
      
function processRainfallClick() {
  Rainfall_layer_url_pass = district_url_pass[0];
  var Rainfall_layer_url = Rainfall_layer_url_pass.getSource().getFeatureInfoUrl(
    coordinate,
    resolution,
    projection, {
      'INFO_FORMAT': 'application/json',
      'FEATURE_COUNT': '5',
      'propertyName': 'issue_date,forecast_date,district_name,rainfall'
    })
  console.log("Rainfall_layer_url:" + Rainfall_layer_url)
  if (Rainfall_layer_url) {
    $.getJSON(Rainfall_layer_url, function (Rainfall_data) {

      popup_content.innerHTML =
        '<table id="weather_forecast_table"> <caption> The forecast Issued on:&nbsp;' + Rainfall_data.features[0].properties.issue_date + ',' + '&nbsp; \nfor next 5 days of district:\n&nbsp;' + Rainfall_data.features[0].properties.district_name + '&nbsp; </caption> <tr><th>&nbsp; Forecast Date&nbsp; </th> <th> &nbsp; Rainfall (mm) &nbsp; </th>  <tr> <td>&nbsp; ' + Rainfall_data.features[0].properties.forecast_date + '&nbsp; </td> <td>&nbsp; ' + Rainfall_data.features[0].properties.rainfall + '&nbsp; </td></tr> <tr><td>&nbsp; ' + Rainfall_data.features[1].properties.forecast_date + '&nbsp; </td><td>&nbsp; ' + Rainfall_data.features[1].properties.rainfall + '&nbsp; </td> <tr><td>&nbsp; ' + Rainfall_data.features[2].properties.forecast_date + '&nbsp; </td><td>&nbsp; ' + Rainfall_data.features[2].properties.rainfall + '&nbsp; </td> <tr><td>&nbsp; ' + Rainfall_data.features[3].properties.forecast_date + '&nbsp; </td><td>&nbsp; ' + Rainfall_data.features[3].properties.rainfall + '&nbsp; </td><tr><td>&nbsp; ' + Rainfall_data.features[4].properties.forecast_date + '&nbsp; </td><td>&nbsp; ' + Rainfall_data.features[4].properties.rainfall + '&nbsp; </td> </tr></table>'

      overlay.setPosition(coordinate);
    })
  }
}
.
.
.
7
  • Hiii, @TomazicM, Thanks for your time, I have followed your approach, but still, multiple URL's are being generated. I have cleared the console, and checked the cloud cover radio button, Its value is being shown at the last, but other URL's still building, while checking, as in console (the figure i have update in the Question above). Commented Jan 25, 2021 at 11:23
  • Is there any way to filter specific URL of only that parameter, which is assigned for a particular Radio Button when pressed, and other URL’s don't appear/generate . Maybe that way, The proper popup will show up.? Commented Jan 25, 2021 at 14:25
  • As far as I understand, this should work. Without possibility to try your actual code I can't say where it goes wrong.
    – TomazicM
    Commented Jan 25, 2021 at 14:41
  • Sorry, but I can't try it since layers come from your local server.
    – TomazicM
    Commented Jan 25, 2021 at 14:58
  • Ohh Okay @TomazicM, any other way possible? (Remote Access or Anything)? Commented Jan 25, 2021 at 15:17

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.