How to fetch the URL of specific GeoServer layer by switching radio button?

Question

I have multiple Geoserver layers, let 3 here (Rainfall, Maximum Temperature and Minimum Temperature)

The name of layer and values assigned in the radio button to switch the layers is same.

As I check the radio button, I am getting the value of that specific layer

but when I pass this value, I am unable to fetch the URL of that layer

how to make this layer value string work in GetFeatureInfo function of Openlayers 6, to get the URL of that specific layer which we select from sidebar?

Any other suggestions are highly appreciated.

<body>
   <div class="grid-container">
        <div class="grid-1">
            <div class="sidebar">
                <h3>Weather Parameters</h3>
          <input type="radio" name="WeatherParameterLayerRadioButton" value="india_dist_rainfall_layer" checked> Rainfall <br>
          <input type="radio" name="WeatherParameterLayerRadioButton" value="india_dist_maximum_temperature_layer"> Maximum Temperature <br>
          <input type="radio" name="WeatherParameterLayerRadioButton" value="india_dist_minimum_temperature_layer"> Minimum Temperature <br>                
            </div>
            <div class="grid-2">
                <div id= 'js-map' class='map'></div>
            </div>
   </div>
</body>

window.onload = init;

function init(){

    // 1.1 Rainfall
    var india_dist_rainfall_layer_source = new ol.source.TileWMS({
        url: "http://localhost:8080/geoserver/agrodss/wms",
        params: {"LAYERS":" agrodss:Rainfall (mm)", "tiled": true},
        serverType: "geoserver",
    })
    var india_dist_rainfall_layer = new ol.layer.Tile({
        source: india_dist_rainfall_layer_source, 
        opacity: 0.0,
        visible:true,
        title: "Rainfall"
    })

    // 1.2 Maximum Temperature
    var india_dist_maximum_temperature_layer_source = new ol.source.TileWMS({
        url: "http://localhost:8080/geoserver/agrodss/wms",
        params: {"LAYERS":"agrodss:Maximum Temperature (°C)", "tiled": true},
        serverType: "geoserver",
    })
    var india_dist_maximum_temperature_layer = new ol.layer.Tile({
        source: india_dist_maximum_temperature_layer_source, 
        opacity: 0.0,
        visible:true,
        title: "Maximum_Temperature"
    })

    var myview = new ol.View({
        center: ol.proj.fromLonLat([80, 22]),
        zoom: 3, 
        maxZoom: 9,
        minZoom: 2,
      });

    var map = new ol.Map({
        target: 'js-map',
        view: myview,
    });

    var weatherParameterLayerGroup = new ol.layer.Group({
      layers: [ 
        india_dist_rainfall_layer, 
        india_dist_maximum_temperature_layer
      ]
    })


map.on('click',function(evt){
      var resolution=map.getView().getResolution();
      var coordinate=evt.coordinate;    
      var projection=map.getView().getProjection();
      //console.log(resolution, coord, projection)

//switching layers to get layer value
      var weatherParameterLayerURLs = document.querySelectorAll('.sidebar > input[type=radio]');
      for (let weatherParameterLayerURL of weatherParameterLayerURLs){
      weatherParameterLayerURL.addEventListener('change', function(){
      var weatherParameterLayerURLpass = this.value;

      //GET URL (not working)
      var district_url=weatherParameterLayerURLpass.getSource().getFeatureInfoUrl()

      //GET URL (working)
      var district_url=india_dist_maximum_temperature_layer.getSource().getFeatureInfoUrl()

Answer 1

If you have the GetFeatureInfo URL you can get at the GetMap URL, just by changing the value of the request parameter from GetFeatureInfo to GetMap

How to fetch the URL of specific GeoServer layer by switching radio button?

Question

1 answers

solution1
0 2021-01-25 10:23:43

How to fetch the URL of specific GeoServer layer by switching radio button?

Question

1 answers

solution1 0 2021-01-25 10:23:43

solution1
0 2021-01-25 10:23:43