---
title: "HeatmapLayerOptions | 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.

# Type Alias HeatmapLayerOptions

type HeatmapLayerOptions \= {  
    [beforeId](#beforeid)?: string;  
    [colorRamp](#colorramp)?: [ColorRamp](https://docs.maptiler.com/sdk-js/api-reference/classes/ColorRamp/);  
    [data](#data): [FeatureCollection](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.FeatureCollection/) | string;  
    [intensity](#intensity)?: number | [ZoomNumberValues](https://docs.maptiler.com/sdk-js/api-reference/types/ZoomNumberValues/);  
    [layerId](#layerid)?: string;  
    [maxzoom](#maxzoom)?: number;  
    [minzoom](#minzoom)?: number;  
    [opacity](#opacity)?: number | [ZoomNumberValues](https://docs.maptiler.com/sdk-js/api-reference/types/ZoomNumberValues/);  
    [property](#property)?: string;  
    [radius](#radius)?: number | [ZoomNumberValues](https://docs.maptiler.com/sdk-js/api-reference/types/ZoomNumberValues/) | [PropertyValues](https://docs.maptiler.com/sdk-js/api-reference/types/PropertyValues/);  
    [sourceId](#sourceid)?: string;  
    [weight](#weight)?: [PropertyValues](https://docs.maptiler.com/sdk-js/api-reference/types/PropertyValues/) | number;  
    [zoomCompensation](#zoomcompensation)?: boolean;  
}

##### Index

### Properties[](#properties)

[beforeId?](#beforeid) [colorRamp?](#colorramp) [data](#data) [intensity?](#intensity) [layerId?](#layerid) [maxzoom?](#maxzoom) [minzoom?](#minzoom) [opacity?](#opacity) [property?](#property) [radius?](#radius) [sourceId?](#sourceid) [weight?](#weight) [zoomCompensation?](#zoomcompensation)

## Properties[](#properties-1)

### `Optional`beforeId[](#beforeid)

beforeId?: string

The ID of an existing layer to insert the new layer before, resulting in the new layer appearing visually beneath the existing layer. If this argument is not specified, the layer will be appended to the end of the layers array and appear visually above all other layers.

### `Optional`colorRamp[](#colorramp)

colorRamp?: [ColorRamp](https://docs.maptiler.com/sdk-js/api-reference/classes/ColorRamp/)

The ColorRamp instance to use for visualization. The color ramp is expected to be defined in the range `[0, 1]` or else will be forced to this range. Default: `ColorRampCollection.TURBO`

### data[](#data)

data: [FeatureCollection](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.FeatureCollection/) | string

A geojson Feature collection or a URL to a geojson or the UUID of a MapTiler Cloud dataset.

### `Optional`intensity[](#intensity)

intensity?: number | [ZoomNumberValues](https://docs.maptiler.com/sdk-js/api-reference/types/ZoomNumberValues/)

The intensity is zoom-dependent. By default, the intensity is going to be scaled by zoom to preserve a natural aspect or the data distribution.

### `Optional`layerId[](#layerid)

layerId?: string

ID to give to the layer. If not provided, an auto-generated ID of the for "maptiler-layer-xxxxxx" will be auto-generated, with "xxxxxx" being a random string.

### `Optional`maxzoom[](#maxzoom)

maxzoom?: number

Zoom level after which it no longer show. Default: `22`

### `Optional`minzoom[](#minzoom)

minzoom?: number

Zoom level at which it starts to show. Default: `0`

### `Optional`opacity[](#opacity)

opacity?: number | [ZoomNumberValues](https://docs.maptiler.com/sdk-js/api-reference/types/ZoomNumberValues/)

The opacity can be a fixed value or zoom-driven. Default: fades-in 0.25z after minzoom and fade-out 0.25z before maxzoom

### `Optional`property[](#property)

property?: string

Use a property to apply a weight to each data point. Using a property requires also using the options `.propertyValueWeight` or otherwise will be ignored. Default: none, the points will all have a weight of `1`.

### `Optional`radius[](#radius)

radius?: number | [ZoomNumberValues](https://docs.maptiler.com/sdk-js/api-reference/types/ZoomNumberValues/) | [PropertyValues](https://docs.maptiler.com/sdk-js/api-reference/types/PropertyValues/)

The radius (in screenspace) can be:

-   a fixed number that will be constant across zoom level
-   of type `ZoomNumberValues` to be ramped accoding to zoom level (`.zoomCompensation` will then be ignored)
-   of type `PropertyValues` to be driven by the value of a property. If so, the option `.property` must be provided and will still be resized according to zoom level, unless the option `.zoomCompensation` is set to `false`.

Default:

### `Optional`sourceId[](#sourceid)

sourceId?: string

ID to give to the geojson source. If not provided, an auto-generated ID of the for "maptiler-source-xxxxxx" will be auto-generated, with "xxxxxx" being a random string.

### `Optional`weight[](#weight)

weight?: [PropertyValues](https://docs.maptiler.com/sdk-js/api-reference/types/PropertyValues/) | number

The weight to give to each data point. If of type `PropertyValueWeights`, then the options `.property` must also be provided. If used a number, all data points will be weighted by the same number (which is of little interest)

### `Optional`zoomCompensation[](#zoomcompensation)

zoomCompensation?: boolean

If the radius is driven by a property, then it will also scale by zoomming if `.zoomCompensation` is `true`. If `false`, the radius will not adapt according to the zoom level. Default: `true`