Make POST request for WMS in Leaflet for big values of cql_filter

Question

I am passing a spatial query such as CONTAINS(geom, POLYGON((// geometry))) in the cql_filter, but for big polygons GET request the allowed URI length is violated and hence my requests is getting HTTP 414 status code 'URI too long'.

I looked for the solution so someone suggested me to use POST request and it worked, but I don't know how to modify the WMS GET request in Leaflet to POST?

Alexander Kot · Answer

You have to implement your own TileLayer.WMS layer and override createTile method
export class CustomWMSLayer extends TileLayer.WMS {

loadTile = async (
    coords: Coords,
    done: DoneCallback,
    img: HTMLImageElement
  ) => {
    const fullUrl = this.getTileUrl(coords);
    const [url, urlparams] = fullUrl.split("?");

const response = await fetch(url, {
      method: "POST",
      body: urlparams,
      headers: {
        "Content-type": "application/x-www-form-urlencoded",
      },
    });
    const blobData = await response.blob();
    const fileReader = new FileReader();

fileReader.onload = () => {
      img.src = fileReader.result as string;
      done(undefined, img);
    };
    fileReader.readAsDataURL(blobData);
  };

createTile = (coords: Coords, done: DoneCallback): HTMLElement => {
    const img = document.createElement("img");
    this.loadTile(coords, done, img);

return img;
  };
}

Make POST request for WMS in Leaflet for big values of cql_filter

One Answer

Add your own answers!

Ask a Question