Using Leaflet.heat

The guide explains how to use the Leaflet.heat plugin. A dedicated composable is available to help you use this plugin.

WARNING

This is only possible in a client-side environment. You should either :

• Use a Client-Only Page.
• Wrap your component inside the ClientOnly component.
• Set your rendering strategy to ssr: false for the appropriate route.

Installation

• First install leaflet.heat

npm install leaflet.heat

• Update your Nuxt config to activate the plugin

export default defineNuxtConfig({
  modules: ['@nuxtjs/leaflet'],
  leaflet: {
    heat: true
  }
})

• Use the useLHeat composable in your component

WARNING

It is very important to keep the manual import of Leaflet and the :use-global-leaflet="true" as leaflet.heat requires Leaflet to be loaded globally.

<template>
  <div style="height:100vh; width:100vw">
    <h1>Heat</h1>
    <LMap
      ref="map"
      :zoom="17"
      :max-zoom="22"
      :center="[47.21322, -1.559482]"
      :use-global-leaflet="true"
      @ready="onMapReady"
    >
      <LTileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution="&amp;copy; <a href=&quot;https://www.openstreetmap.org/&quot;>OpenStreetMap</a> contributors"
        layer-type="base"
        name="OpenStreetMap"
      />
    </LMap>
  </div>
</template>

<script setup lang="ts">
import L from 'leaflet';
import { ref } from 'vue';

const isDrawing = ref(false);
const map = ref(null) as any;

// Create heat data
const heatPoints = [{
  lat: 47.21322,
  lng: -1.559482,
  intensity: 100.0
}, {
  lat: 47.21322,
  lng: -1.558482,
  intensity: 50.0
}, {
  lat: 47.21322,
  lng: -1.557482,
  intensity: 25.0
}, {
  lat: 47.21322,
  lng: -1.556482,
  intensity: 10.0
}];

// When the map is ready
const onMapReady = async () => {
  const heat = await useLHeat({
    leafletObject: map.value.leafletObject,
    heatPoints: heatPoints,
    // (optional) radius : default 50
    radius: 50,
  });

  // (optional) Make the heat layer drawable
  map.value.leafletObject.on({
    movestart: function () { isDrawing.value = false; },
    moveend:   function () { isDrawing.value = true; },
    mousemove: function (e: any) {
      if (isDrawing.value) {
        heat.addLatLng(e.latlng);
      }
    }
  })
}
</script>