CODEWITHSUNDEEP
leafletmapboxtileswms
Atul
Atul

Reputation: 268

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

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.

Upvotes: 0

Views: 3138

Answers (1)

IvanSanchez
IvanSanchez

Reputation: 19069

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]])
});

Upvotes: 2

Related Questions