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]
In the console,
the multiple URL's are being generated,
and the last returned URL is of the layer selected trough Radio Button,
But the Pop-Up of different layer appears on the map.
Like if I select the rainfall, the popup of cloud_cover opens up.
if (radioValue == 'Rainfall_layer') {
Rainfall_layer_url_pass = district_url_pass[0];
map.on('click',function(evt){
var resolution=map.getView().getResolution();
var coordinate=evt.coordinate;
var projection=map.getView().getProjection();
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: ' + Rainfall_data.features[0].properties.issue_date + ',' + '
for next 5 days of district:
'+ Rainfall_data.features[0].properties.district_name+ ' </caption> <tr><th> Forecast Date </th> <th> Rainfall (mm) </th> <tr> <td> ' + Rainfall_data.features[0].properties.forecast_date + ' </td> <td> ' + Rainfall_data.features[0].properties.rainfall + ' </td></tr> <tr><td> ' + Rainfall_data.features[1].properties.forecast_date + ' </td><td> ' + Rainfall_data.features[1].properties.rainfall + ' </td> <tr><td> ' + Rainfall_data.features[2].properties.forecast_date + ' </td><td> ' + Rainfall_data.features[2].properties.rainfall + ' </td> <tr><td> ' + Rainfall_data.features[3].properties.forecast_date + ' </td><td> ' + Rainfall_data.features[3].properties.rainfall + ' </td><tr><td> ' + Rainfall_data.features[4].properties.forecast_date + ' </td><td> ' + Rainfall_data.features[4].properties.rainfall + ' </td> </tr></table>'
overlay.setPosition(coordinate);
})
}
})
}
else if (radioValue == 'Maximum_temperature_layer') {
Maximum_temperature_url_pass = district_url_pass[1];
map.on('click',function(evt){
var resolution=map.getView().getResolution();
var coordinate=evt.coordinate;
var projection=map.getView().getProjection();
var Maximum_temperature_url = Maximum_temperature_url_pass.getSource().getFeatureInfoUrl(
coordinate,
resolution,
projection,
{
'INFO_FORMAT':'application/json',
'FEATURE_COUNT': '5',
'propertyName': 'issue_date,forecast_date,district_name,temperature_max'
})
console.log("Maximum_temperature_url:"+Maximum_temperature_url)
if (Maximum_temperature_url){
$.getJSON(Maximum_temperature_url,function(Maximum_temperature_data){
popup_content.innerHTML =
'<table id="weather_forecast_table"> <caption> The forecast Issued on: ' + Maximum_temperature_data.features[0].properties.issue_date + ',' + '
for next 5 days of district:
'+ Maximum_temperature_data.features[0].properties.district_name+ ' </caption> <tr><th> Forecast Date </th> <th> Maximum Temperature (°C) </th> <tr> <td> ' + Maximum_temperature_data.features[0].properties.forecast_date + ' </td> <td> ' + Maximum_temperature_data.features[0].properties.temperature_max + ' </td></tr> <tr><td> ' + Maximum_temperature_data.features[1].properties.forecast_date + ' </td><td> ' + Maximum_temperature_data.features[1].properties.temperature_max + ' </td> <tr><td> ' + Maximum_temperature_data.features[2].properties.forecast_date + ' </td><td> ' + Maximum_temperature_data.features[2].properties.temperature_max + ' </td> <tr><td> ' + Maximum_temperature_data.features[3].properties.forecast_date + ' </td><td> ' + Maximum_temperature_data.features[3].properties.temperature_max + ' </td><tr><td> ' + Maximum_temperature_data.features[4].properties.forecast_date + ' </td><td> ' + Maximum_temperature_data.features[4].properties.temperature_max + ' </td> </tr></table>'
overlay.setPosition(coordinate);
})
}
})
}
else if (radioValue == 'Minimum_temperature_layer') {
Minimum_temperature_url_pass = district_url_pass[2];
map.on('click',function(evt){
var resolution=map.getView().getResolution();
var coordinate=evt.coordinate;
var projection=map.getView().getProjection();
var Minimum_temperature_url = Minimum_temperature_url_pass.getSource().getFeatureInfoUrl(
coordinate,
resolution,
projection,
{
'INFO_FORMAT':'application/json',
'FEATURE_COUNT': '5',
'propertyName': 'issue_date,forecast_date,district_name,temperature_min'
})
console.log("Minimum_temperature_url:"+Minimum_temperature_url)
if (Minimum_temperature_url){
$.getJSON(Minimum_temperature_url,function(Minimum_temperature_data){
popup_content.innerHTML =
'<table id="weather_forecast_table"> <caption> The forecast Issued on: ' + Minimum_temperature_data.features[0].properties.issue_date + ',' + '
for next 5 days of district:
'+ Minimum_temperature_data.features[0].properties.district_name+ ' </caption> <tr><th> Forecast Date </th> <th> Minimum Temperature (°C) </th> <tr> <td> ' + Minimum_temperature_data.features[0].properties.forecast_date + ' </td> <td> ' + Minimum_temperature_data.features[0].properties.temperature_min + ' </td></tr> <tr><td> ' + Minimum_temperature_data.features[1].properties.forecast_date + ' </td><td> ' + Minimum_temperature_data.features[1].properties.temperature_min + ' </td> <tr><td> ' + Minimum_temperature_data.features[2].properties.forecast_date + ' </td><td> ' + Minimum_temperature_data.features[2].properties.temperature_min + ' </td> <tr><td> ' + Minimum_temperature_data.features[3].properties.forecast_date + ' </td><td> ' + Minimum_temperature_data.features[3].properties.temperature_min + ' </td><tr><td> ' + Minimum_temperature_data.features[4].properties.forecast_date + ' </td><td> ' + Minimum_temperature_data.features[4].properties.temperature_min + ' </td> </tr></table>'
overlay.setPosition(coordinate);
})
}
})
}
else {
Cloud_cover_url_pass = district_url_pass[3];
map.on('click',function(evt){
var resolution=map.getView().getResolution();
var coordinate=evt.coordinate;
var projection=map.getView().getProjection();
var Cloud_cover_url=Cloud_cover_url_pass.getSource().getFeatureInfoUrl(
coordinate,
resolution,
projection,
{
'INFO_FORMAT':'application/json',
'FEATURE_COUNT': '5',
//'propertyName': 'issue_date, forecast_date, district_name, cloud_cover',
'propertyName': 'issue_date,forecast_date,district_name,cloud_cover',
})
console.log("Cloud_cover_url:"+Cloud_cover_url)
if (Cloud_cover_url){
$.getJSON(Cloud_cover_url,function(Cloud_cover_data){
popup_content.innerHTML =
'<table id="weather_forecast_table"> <caption> The forecast Issued on: ' + Cloud_cover_data.features[0].properties.issue_date + ',' + '
for next 5 days of district:
'+ Cloud_cover_data.features[0].properties.district_name+ ' </caption> <tr><th> Forecast Date </th> <th> Cloud Cover (Octa) </th> <tr> <td> ' + Cloud_cover_data.features[0].properties.forecast_date + ' </td> <td> ' + Cloud_cover_data.features[0].properties.cloud_cover + ' </td></tr> <tr><td> ' + Cloud_cover_data.features[1].properties.forecast_date + ' </td><td> ' + Cloud_cover_data.features[1].properties.cloud_cover + ' </td> <tr><td> ' + Cloud_cover_data.features[2].properties.forecast_date + ' </td><td> ' + Cloud_cover_data.features[2].properties.cloud_cover + ' </td> <tr><td> ' + Cloud_cover_data.features[3].properties.forecast_date + ' </td><td> ' + Cloud_cover_data.features[3].properties.cloud_cover + ' </td><tr><td> ' + Cloud_cover_data.features[4].properties.fore
