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!
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,
}