Adding env to options when doing L.tileLayer.wms for leaflet

Question

I have an application using ngx-leaflet, Leaflet for Angular, and I'm trying to do a L.titleLayer.wms but adding an extra option to tileLayer.wms. It looks likes this:

L.tileLayer.wms(url, {
    layers: layerName,
    format: 'image/png8',
    version: '1.1.0',
    transparent: true,
    attribution: "",
    tileSize: 512,
    styles: styleName,
    env: env // This is the additional option that I am trying to add
});

However, when I try to do this, I get the following error: Argument of type '{ layers: string; format: string; version: string; transparent: true; attribution: string; tileSize: number; styles: string; env: string; }' is not assignable to parameter of type 'WMSOptions'. Object literal may only specify known properties, and 'env' does not exist in type 'WMSOptions'

I'm pretty sure it's because the library only accepts these options for WMSOptions:

export interface WMSOptions extends TileLayerOptions {
    layers?: string | undefined;
    styles?: string | undefined;
    format?: string | undefined;
    transparent?: boolean | undefined;
    version?: string | undefined;
    crs?: CRS | undefined;
    uppercase?: boolean | undefined;
}

So I tried to extend TileLayer and created another file that looks like this:

import * as L from 'leaflet';

export namespace ExtendWMS {
    export class WMS extends L.TileLayer {
        constructor(baseUrl: string, options: ExtendOptions) {            
            super (baseUrl, options)
        };

        setParams(params: ExtendParams, noRedraw?: boolean): this {
            return this;
        }

        wmsParams: ExtendParams;
        options: ExtendOptions;
    }
}

export namespace extendLayer {
    function wms(baseUrl: string, options: ExtendOptions): L.TileLayer.WMS {
        return new ExtendWMS.WMS(baseUrl, options)
    };
}

export interface ExtendOptions extends L.WMSOptions{
    env?: string | undefined;
}


export interface ExtendParams extends L.WMSParams{
    env?: string | undefined;
}

This is so that the WMSOptions will have the env variable that I need to add to the call, but when I do this and call it,

ExtendWMS.WMS(url, {
    layers: layerName,
    format: 'image/png8',
    version: '1.1.0',
    transparent: true,
    attribution: "",
    tileSize: 512,
    styles: styleName,
    env: env // This is the additional option that I am trying to add
});

I am unable to add the layer to the map and I notice that the wmsParams is missing: t.WMS {_url: url, options: {…}, _events: {…}, _initHooksCalled: true} when I try to console log the L.tileLayer.wms call...(I noticed that url, options and wmsParams is all present in the L.tileLayer.wms call)

Is there a way I can include the env option to WMSOption so that when I do a L.tileLayer.wms call, it will accept the env as a parameter? I'm trying to do this because I want to change the style for the specific layer in GeoServer: https://docs.geoserver.org/stable/en/user/services/wms/vendor.html#env

Any help with this is greatly appreciated!

Answer 1

All I needed to do to get it to work is:

import * as L from 'leaflet';

export class ExtendWMS extends L.TileLayer {
    constructor(baseUrl: string, options: ExtendOptions ) {
        super (baseUrl, options)

        L.Util.setOptions(this, options);
    };
}

export interface ExtendOptions extends L.WMSOptions {
    layers: string ;
    styles?: string | undefined;
    format?: string | undefined;
    transparent?: boolean | undefined;
    version: string;
    crs?: L.CRS | undefined;
    uppercase?: boolean | undefined;
    env?: string | undefined;
    attribution?: string|undefined,
    tileSize?: number|undefined,
    icon: string|undefined,
    tiled: boolean|undefined,
}