---
title: "heatmapPaint"
description: "Generate a Mapbox heatmap layer paint that linearly maps a feature property to heat weight and colors by density."
canonical_url: "https://mapbox.mhaibaraai.cn/en/docs/utils/heatmap"
---
# heatmapPaint

> Generate a Mapbox heatmap layer paint that linearly maps a feature property to heat weight and colors by density.

## Introduction

`heatmapPaint` generates a complete heatmap layer paint in one call: it linearly maps a specified feature property to a 0..1 heat weight via `weightRange`, and colors the result by `heatmap-density` through color stops (density 0 is automatically transparent to avoid flooding the entire map with a background color). This eliminates the need to hand-write verbose `interpolate` expressions.

Import from `@movk/mapbox/utils/heatmap` (not auto-imported).

## Usage

Render point data with a `temperature` property as a heatmap:

```vue [HeatmapPaintExample.vue]
<script setup lang="ts">
import { heatmapPaint } from '@movk/mapbox/utils/heatmap'
import type { FeatureCollection } from 'geojson'

const data: FeatureCollection = {
  type: 'FeatureCollection',
  features: Array.from({ length: 200 }, (_, i) => ({
    type: 'Feature',
    properties: { temperature: (i * 37) % 40 },
    geometry: { type: 'Point', coordinates: [116.3 + ((i * 53) % 100) / 500, 39.85 + ((i * 71) % 100) / 600] }
  }))
}

const paint = heatmapPaint({ weightProperty: 'temperature', weightRange: [0, 40], radius: 28 })
</script>

<template>
  <div class="h-115 w-full overflow-hidden rounded-(--ui-radius) border border-default">
    <MapboxMap :options="{ style: 'mapbox://styles/mapbox/dark-v11', center: [116.4, 39.93], zoom: 11 }">
      <MapboxLayer layer-id="heat" type="heatmap" :source="{ type: 'geojson', data }" :paint="paint" />
    </MapboxMap>
  </div>
</template>
```

## API

### `heatmapPaint()`

Generate a heatmap layer paint object.

**options.weightProperty** (`string`): Feature property used as the weight value, default 'temperature'.

**options.weightRange** (`[number, number]`): Value range [min, max] of the weight property, linearly mapped to 0..1, default [0, 40].

**options.colorStops** (`[number, string][]`): Density-color stops [density 0..1, color][]; defaults to a five-step blue→red ramp with density 0 automatically transparent.

**options.radius** (`number`): Heatmap radius in pixels, default 30.

**options.intensity** (`number`): Heatmap intensity, default 1.

**options.opacity** (`number`): Overall opacity, default 1.

Returns a heatmap layer paint object that can be bound directly to the `paint` prop of `<MapboxLayer type="heatmap">`.

## Changelog

See commit history for [src/runtime/utils/heatmapPaint.ts](https://github.com/mhaibaraai/movk-mapbox/commits/main/src/runtime/utils/heatmapPaint.ts).


## Sitemap

See the full [sitemap](https://mapbox.mhaibaraai.cn/sitemap.md) for all pages.