🧩 LHeatLayer

A Leaflet plugin for heatmaps

🧪 Demo

<script setup lang="ts">
import { LMap, LTileLayer } from '@maxel01/vue-leaflet'
import { LHeatLayer } from '@maxel01/vue-leaflet-plugins'
import { LatLng } from 'leaflet'
import { coords } from '../../utils/leaflet.hotline/coords'

const latLngs = coords.map((latLng) => new LatLng(latLng))
</script>

<template>
    <LMap :zoom="14" :center="[50.512, 6.997]">
        <LTileLayer
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            layer-type="base"
            name="OpenStreetMap"
        />
        <LHeatLayer :latLngs="latLngs" :radius="10" />
    </LMap>
</template>

⚙️ Props

Prop name	Description	Type	Reactive	Default	Required
latLngs	LatLngs of the heat map	Array	true	-	true
minOpacity	the minimum opacity the heat will start at	number	true	-	false
maxZoom	zoom level where the points reach maximum intensity (as intensity scales with zoom), equals maxZoom of the map by default	number	true	-	false
radius	radius of each "point" of the heatmap, 25 by default	number	true	-	false
blur	amount of blur, 15 by default	number	true	-	false
max	maximum point intensity, 1.0 by default	number	true	-	false
gradient	color gradient config, e.g. {0.4: 'blue', 0.65: 'lime', 1: 'red'}	-	true	-	false

🔗 Inherited props

from LayerProps

Prop name	Description	Type	Reactive	Default	Required
pane	By default, the layer will be added to the map's overlay pane. Overriding this option will cause the layer to be placed on another pane by default. Not effective if the renderer option is set (the renderer option will override the pane option).	string	initOnly	-	false
attribution	String to be shown in the attribution control, e.g. "© OpenStreetMap contributors". It describes the layer data and is often a legal obligation towards copyright holders and tile providers.	string	true	-	false
name	-	string	true	-	false
layerType	-	LayerType	true	-	false
visible	-	boolean	true	-	false

from ComponentProps

Prop name	Description	Type	Reactive	Default	Required
options	Leaflet options to pass to the component constructor.	T	initOnly	-	false

Emits

Event	Arguments	Description
ready	HeatLayer	Triggers when the component is ready

🎯 Slots

Name	Description
default	Used to inject Leaflet child components like <LPopup> or <LTooltip> into the LHeatLayer.

🧭 Exposes

Name	Type	Description
ready	Ref<boolean>	Indicates whether the component and its underlying Leaflet object are fully initialized.
leafletObject	Ref<HeatLayer | undefined>	The underlying Leaflet instance. Can be used to directly interact with the Leaflet API (e.g. calling methods or accessing internal state).