How to load WMS tiles only inside a bounding box in Leaflet? - leaflet

Question

I have an application in which I use mapbox.js to load basemap tiles for a location. Then user can load WMS tiles from a WMS server, of size 256X256 which get loaded on top of the basemap.
I am using mapbox and leaflet to display map as follow:
window.map = L.map('map', { 'minZoom': minZoomLevel(), 'maxZoom': maxZoomLevel(), reuseTiles: true, unloadInvisibleTiles: true }).setView(["35.7804", "-78.6391"], 17)
Then I am using Leaflet, to send requests to my server, and from there send request to WMS server to load tiles using this:
wms = L.tileLayer.wms('/viewers/wms', {
minZoom: 12,
maxZoom: 25,
layers: 'some layer name',
format: 'image/png',
updateWhenIdle: false,
transparent: true,
reuseTiles: true,
showTheRasterReturned: true,
COVERAGE_CQL_FILTER: 'featureId=\'' + featureId + '\''
});
By the time the request reaches my server, a BBOX attribute is added automatically by leaflet which has different co-ordinates (I think it is taking full viewport) i.e.
Started GET
"/viewers/wms?SERVICE=WMS&REQUEST=GetMap&VERSION=1.1.1&LAYERS=some
layer
name&STYLES=&FORMAT=image%2Fpng&TRANSPARENT=true&HEIGHT=256&WIDTH=256&REUSETILES=true&SHOWTHERASTERRETURNED=true&COVERAGE_CQL_FILTER=featureId%3D%279d3a23cba90680cecda337a926f563a6%27&SRS=EPSG%3A3857&**BBOX=-8755402.967897227,4285977.050006404,-8755097.219784087,4286282.798119542**" for 127.0.0.1 at 2018-06-27 16:51:01 -0400
A BBOX attribute is added by leaflet on the fly which are as follows
BBOX=-8755402.967897227,4285977.050006404,-8755097.219784087,4286282.798119542"
although, I want to get tiles only for these co-ordinates:
southWest ={lat: 35.77712238348847, lng: -78.64827990531921}
northEast {lat: 35.783693840245284, lng: -78.62991213798523}
setting up a BBOX option inside L.tileLayer.wms does not help either, as BBOX co-ordinates are added by leaflet.

Answer 1

Leaflet is working as expected.
You just have to remember that while Leaflet uses different Coordinate Reference Systems (CRSs) for the display projection and for L.LatLngs. You specify L.LatLngs (and bounds, etc) in EPSG:4326 (AKA equirectangular), and Leaflet will translate everything into EPSG:3857 (AKA Spherical Mercator).
Note how the URL for the WMS request includes a SRS=EPSG%3A3857 parameter (which means SRS=EPSG:3857 once URI-decoded). This means that Leaflet is providing coordinates in EPSG:3857, and expecting an image projected in EPSG:3857.
If you see no images, that likely means that your WMS server does not support EPSG:3857. Also, I encourage you to read through the Leaflet WMS/TMS tutorial, which highlights how to use different CRSs with WMS raster sources.
although, I want to get tiles only for these co-ordinates
Then use the bounds option of L.TileLayer.WMS. (If you don't see this option in the documentation, remember that L.TileLayer.WMS inherits options from L.TileLayer, which in turn inherits options from L.GridLayer)
Like so:
wms = L.tileLayer.wms('/viewers/wms', {
minZoom: 12,
maxZoom: 25,
layers: 'some layer name',
format: 'image/png',
updateWhenIdle: false,
transparent: true,
reuseTiles: true,
showTheRasterReturned: true,
COVERAGE_CQL_FILTER: 'featureId=\'' + featureId + '\''
bounds: L.latLngBounds([[35.77, -78.65],[35.78, -78.63]])
});