--- title: "StyleLayer | JavaScript maps SDK" description: "Documentation for MapTiler SDK" --- > For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL. # Class StyleLayer`Abstract` A base class for style layers #### Hierarchy ([View Summary](https://docs.maptiler.com/sdk-js/api-reference/hierarchy/#StyleLayer)) - [Evented](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Evented/) - StyleLayer - [SymbolStyleLayer](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.SymbolStyleLayer/) - [CircleStyleLayer](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CircleStyleLayer/) - [HeatmapStyleLayer](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.HeatmapStyleLayer/) - [LineStyleLayer](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.LineStyleLayer/) - [FillStyleLayer](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.FillStyleLayer/) - [FillExtrusionStyleLayer](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.FillExtrusionStyleLayer/) - [HillshadeStyleLayer](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.HillshadeStyleLayer/) - [ColorReliefStyleLayer](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.ColorReliefStyleLayer/) - [RasterStyleLayer](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.RasterStyleLayer/) - [BackgroundStyleLayer](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.BackgroundStyleLayer/) - [CustomStyleLayer](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CustomStyleLayer/) ##### Index ### Constructors[](#constructors) [constructor](#constructor) ### Properties[](#properties) [filter](#filter) [id](#id) [layout](#layout) [maxzoom](#maxzoom) [metadata](#metadata) [minzoom](#minzoom) [onAdd](#onadd) [onRemove](#onremove) [paint](#paint) [source](#source) [sourceLayer](#sourcelayer) [type](#type) [visibility](#visibility) ### Methods[](#methods) [createBucket?](#createbucket) [fire](#fire) [getCrossfadeParameters](#getcrossfadeparameters) [getLayoutAffectingGlobalStateRefs](#getlayoutaffectingglobalstaterefs) [getLayoutProperty](#getlayoutproperty) [getPaintAffectingGlobalStateRefs](#getpaintaffectingglobalstaterefs) [getPaintProperty](#getpaintproperty) [getVisibilityAffectingGlobalStateRefs](#getvisibilityaffectingglobalstaterefs) [hasOffscreenPass](#hasoffscreenpass) [hasTransition](#hastransition) [is3D](#is3d) [isHidden](#ishidden) [isStateDependent](#isstatedependent) [isTileClipped](#istileclipped) [listens](#listens) [off](#off) [on](#on) [once](#once) [queryIntersectsFeature?](#queryintersectsfeature) [queryRadius?](#queryradius) [recalculate](#recalculate) [recalculateVisibility](#recalculatevisibility) [resize](#resize) [serialize](#serialize) [setEventedParent](#seteventedparent) [setFilter](#setfilter) [setLayoutProperty](#setlayoutproperty) [setPaintProperty](#setpaintproperty) [updateTransitions](#updatetransitions) ## Constructors[](#constructors-1) ### constructor[](#constructor) - new StyleLayer(     layer: [LayerSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/LayerSpecification/) | [CustomLayerInterface](https://docs.maptiler.com/sdk-js/api-reference/interfaces/CustomLayerInterface/),     properties: [Readonly](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.Readonly/)<{ layout?: [Properties](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Properties/); paint?: [Properties](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Properties/) }\>,     globalState: [Record](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.Record/), ): StyleLayer[](#constructorstylelayer) #### Parameters - layer: [LayerSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/LayerSpecification/) | [CustomLayerInterface](https://docs.maptiler.com/sdk-js/api-reference/interfaces/CustomLayerInterface/) - properties: [Readonly](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.Readonly/)<{ layout?: [Properties](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Properties/); paint?: [Properties](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Properties/) }\> - globalState: [Record](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.Record/) #### Returns StyleLayer Overrides [Evented](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Evented/).[constructor](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Evented/#constructor) ## Properties[](#properties-1) ### filter[](#filter) filter: void | [FilterSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/FilterSpecification/) ### id[](#id) id: string ### `Readonly`layout[](#layout) layout: unknown ### maxzoom[](#maxzoom) maxzoom: number ### metadata[](#metadata) metadata: unknown ### minzoom[](#minzoom) minzoom: number ### `Readonly`onAdd[](#onadd) onAdd: (map: [MapLibreMap](https://docs.maptiler.com/sdk-js/api-reference/classes/MapLibreMap/)) \=> void ### `Readonly`onRemove[](#onremove) onRemove: (map: [MapLibreMap](https://docs.maptiler.com/sdk-js/api-reference/classes/MapLibreMap/)) \=> void ### `Readonly`paint[](#paint) paint: unknown ### source[](#source) source: string ### sourceLayer[](#sourcelayer) sourceLayer: string ### type[](#type) type:     | "symbol"     | "custom"     | "fill"     | "line"     | "circle"     | "heatmap"     | "fill-extrusion"     | "raster"     | "hillshade"     | "color-relief"     | "background" ### visibility[](#visibility) visibility: [VisibilitySpecification](https://docs.maptiler.com/sdk-js/api-reference/types/VisibilitySpecification/) ## Methods[](#methods-1) ### `Optional`createBucket[](#createbucket) - createBucket?(parameters: [BucketParameters](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.BucketParameters/)): [Bucket](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Bucket/)[](#createbucket-1) #### Parameters - parameters: [BucketParameters](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.BucketParameters/) #### Returns [Bucket](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Bucket/) ### fire[](#fire) - fire(event: string | [Event](https://docs.maptiler.com/sdk-js/api-reference/classes/Event/), properties?: any): this[](#fire-1) #### Parameters - event: string | [Event](https://docs.maptiler.com/sdk-js/api-reference/classes/Event/) - `Optional`properties: any #### Returns this Inherited from [Evented](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Evented/).[fire](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Evented/#fire) ### getCrossfadeParameters[](#getcrossfadeparameters) - getCrossfadeParameters(): [CrossfadeParameters](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.CrossfadeParameters/)[](#getcrossfadeparameters-1) #### Returns [CrossfadeParameters](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.CrossfadeParameters/) ### getLayoutAffectingGlobalStateRefs[](#getlayoutaffectingglobalstaterefs) - getLayoutAffectingGlobalStateRefs(): Set[](#getlayoutaffectingglobalstaterefs-1) Get list of global state references that are used within layout or filter properties. This is used to determine if layer source need to be reloaded when global state property changes. #### Returns Set ### getLayoutProperty[](#getlayoutproperty) - getLayoutProperty(name: string): any[](#getlayoutproperty-1) #### Parameters - name: string #### Returns any ### getPaintAffectingGlobalStateRefs[](#getpaintaffectingglobalstaterefs) - getPaintAffectingGlobalStateRefs(): Map[](#getpaintaffectingglobalstaterefs-1) Get list of global state references that are used within paint properties. This is used to determine if layer needs to be repainted when global state property changes. #### Returns Map ### getPaintProperty[](#getpaintproperty) - getPaintProperty(name: string): unknown[](#getpaintproperty-1) #### Parameters - name: string #### Returns unknown ### getVisibilityAffectingGlobalStateRefs[](#getvisibilityaffectingglobalstaterefs) - getVisibilityAffectingGlobalStateRefs(): Set[](#getvisibilityaffectingglobalstaterefs-1) Get list of global state references that are used within visibility expression. This is used to determine if layer visibility needs to be updated when global state property changes. #### Returns Set ### hasOffscreenPass[](#hasoffscreenpass) - hasOffscreenPass(): boolean[](#hasoffscreenpass-1) #### Returns boolean ### hasTransition[](#hastransition) - hasTransition(): boolean[](#hastransition-1) #### Returns boolean ### is3D[](#is3d) - is3D(): boolean[](#is3d-1) #### Returns boolean ### isHidden[](#ishidden) - isHidden(zoom?: number, roundMinZoom?: boolean): boolean[](#ishidden-1) #### Parameters - `Optional`zoom: number - `Optional`roundMinZoom: boolean #### Returns boolean ### isStateDependent[](#isstatedependent) - isStateDependent(): boolean[](#isstatedependent-1) #### Returns boolean ### isTileClipped[](#istileclipped) - isTileClipped(): boolean[](#istileclipped-1) #### Returns boolean ### listens[](#listens) - listens(type: string): boolean[](#listens-1) Returns a true if this instance of Evented or any forwardeed instances of Evented have a listener for the specified type. #### Parameters - type: string The event type #### Returns boolean `true` if there is at least one registered listener for specified event type, `false` otherwise Inherited from [Evented](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Evented/).[listens](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Evented/#listens) ### off[](#off) - off(type: string, listener: [Listener](https://docs.maptiler.com/sdk-js/api-reference/types/Listener/)): this[](#off-1) Removes a previously registered event listener. #### Parameters - type: string The event type to remove listeners for. - listener: [Listener](https://docs.maptiler.com/sdk-js/api-reference/types/Listener/) The listener function to remove. #### Returns this Inherited from [Evented](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Evented/).[off](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Evented/#off) ### on[](#on) - on(type: string, listener: [Listener](https://docs.maptiler.com/sdk-js/api-reference/types/Listener/)): [Subscription](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Subscription/)[](#on-1) Adds a listener to a specified event type. #### Parameters - type: string The event type to add a listen for. - listener: [Listener](https://docs.maptiler.com/sdk-js/api-reference/types/Listener/) The function to be called when the event is fired. The listener function is called with the data object passed to `fire`, extended with `target` and `type` properties. #### Returns [Subscription](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Subscription/) Inherited from [Evented](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Evented/).[on](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Evented/#on) ### once[](#once) - once(type: string, listener?: [Listener](https://docs.maptiler.com/sdk-js/api-reference/types/Listener/)): StyleLayer | Promise[](#once-1) Adds a listener that will be called only once to a specified event type. The listener will be called first time the event fires after the listener is registered. #### Parameters - type: string The event type to listen for. - `Optional`listener: [Listener](https://docs.maptiler.com/sdk-js/api-reference/types/Listener/) The function to be called when the event is fired the first time. #### Returns StyleLayer | Promise `this` or a promise if a listener is not provided Inherited from [Evented](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Evented/).[once](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Evented/#once) ### `Optional`queryIntersectsFeature[](#queryintersectsfeature) - queryIntersectsFeature?(params: [QueryIntersectsFeatureParams](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.QueryIntersectsFeatureParams/)): number | boolean[](#queryintersectsfeature-1) #### Parameters - params: [QueryIntersectsFeatureParams](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.QueryIntersectsFeatureParams/) #### Returns number | boolean ### `Optional`queryRadius[](#queryradius) - queryRadius?(bucket: [Bucket](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Bucket/)): number[](#queryradius-1) #### Parameters - bucket: [Bucket](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Bucket/) #### Returns number ### recalculate[](#recalculate) - recalculate(parameters: [EvaluationParameters](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.EvaluationParameters/), availableImages: string\[\]): void[](#recalculate-1) #### Parameters - parameters: [EvaluationParameters](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.EvaluationParameters/) - availableImages: string\[\] #### Returns void ### recalculateVisibility[](#recalculatevisibility) - recalculateVisibility(): void[](#recalculatevisibility-1) #### Returns void ### resize[](#resize) - resize(): void[](#resize-1) #### Returns void ### serialize[](#serialize) - serialize(): [LayerSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/LayerSpecification/)[](#serialize-1) #### Returns [LayerSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/LayerSpecification/) ### setEventedParent[](#seteventedparent) - setEventedParent(parent?: [Evented](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Evented/) | null, data?: any): this[](#seteventedparent-1) Bubble all events fired by this instance of Evented to this parent instance of Evented. #### Parameters - `Optional`parent: [Evented](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Evented/) | null - `Optional`data: any #### Returns this Inherited from [Evented](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Evented/).[setEventedParent](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Evented/#seteventedparent) ### setFilter[](#setfilter) - setFilter(filter: void | [FilterSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/FilterSpecification/)): void[](#setfilter-1) #### Parameters - filter: void | [FilterSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/FilterSpecification/) #### Returns void ### setLayoutProperty[](#setlayoutproperty) - setLayoutProperty(name: string, value: any, options?: [StyleSetterOptions](https://docs.maptiler.com/sdk-js/api-reference/types/StyleSetterOptions/)): void[](#setlayoutproperty-1) #### Parameters - name: string - value: any - `Optional`options: [StyleSetterOptions](https://docs.maptiler.com/sdk-js/api-reference/types/StyleSetterOptions/) #### Returns void ### setPaintProperty[](#setpaintproperty) - setPaintProperty(     name: string,     value: unknown,     options?: [StyleSetterOptions](https://docs.maptiler.com/sdk-js/api-reference/types/StyleSetterOptions/), ): boolean[](#setpaintproperty-1) #### Parameters - name: string - value: unknown - `Optional`options: [StyleSetterOptions](https://docs.maptiler.com/sdk-js/api-reference/types/StyleSetterOptions/) #### Returns boolean ### updateTransitions[](#updatetransitions) - updateTransitions(parameters: [TransitionParameters](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.TransitionParameters/)): void[](#updatetransitions-1) #### Parameters - parameters: [TransitionParameters](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.TransitionParameters/) #### Returns void