I have a page where i am displaying a geoserver wms layer with cql filter using leaflet.

Right now the map is displayed according to the filter but its not in the center as well as not at optimum zoom. I could not figure out how to use leaflet fit bounds sort of functionality on wms layer.

Right now the map looks like this:

Map

I have following configurations:

Leaflet: 1.3.1

Geo Server: 2.13.2

The code for the same is as follows:

var layer = geoserverlayerarray[selectedstate];
    var latitude = latitudearray[selectedstate];
    var longitude = longitudearray[selectedstate];
    districtid = pad_with_zeroes(districtid,3);
    //alert(districtid);
    $('#districtmap').hide();
    $('#villagemap').hide();
    $('#districtwisevillagemap').empty();
    $('#districtwisevillagemap').show();
    var container = L.DomUtil.get('districtwisevillagemap');
    if(container != null){
      container._leaflet_id = null;
    }
    var map = L.map('districtwisevillagemap').setView([latitude, longitude],7);
    var mywms = L.tileLayer.wms(wms_server+"?viewparams=BASIC_SEARCH_ID:"+basicsearchid, {
      layers: layer,
      format: 'image/png',
      transparent: true,
      version: '1.1.0',
      maxZoom: 14,
      minZoom: 0,
      CQL_FILTER: 'dtcode11='+districtid
    });
    mywms.addTo(map);
    map.addEventListener('click', function(e) {
      Identify(e,map);
    });

0 Answers