Skip to main content

HeatmapLayer

HeatmapLayer

Visualize point density as a heat gradient

Tags: heatmap density cluster visualization

View Demo

The HeatmapLayer component visualizes point density using a color gradient. Excellent for showing clusters, hot spots, or concentration of events. The intensity and radius can be data-driven.

Import​

<script>
  import { HeatmapLayer } from '@classic-homes/maps-svelte';
</script>
// React
import { HeatmapLayer } from '@classic-homes/maps-react';

Basic Usage​

<script>
  import { Map, HeatmapLayer } from '@classic-homes/maps-svelte';
</script>

<Map title="Event Heatmap" center={[-122.4, 37.8]} zoom={11}>
  <HeatmapLayer
    id="events-heatmap"
    source="events"
    heatmapRadius={20}
    heatmapIntensity={1.5}
    heatmapWeight={['get', 'magnitude']}
  />
</Map>

Props​

Component-Specific Props​

Prop Type Default Description
id string required Unique layer identifier
source string required Source ID to use
heatmapIntensity number | Expression 1 Intensity multiplier
heatmapRadius number | Expression 30 Radius in pixels
heatmapWeight number | Expression 1 Weight per point
heatmapOpacity number | Expression 1 Opacity (0-1)
heatmapColor Expression - Color ramp expression
visible boolean true Layer visibility

Inherited Base Map Props​

Prop Type Default Description
title string required Map title for accessibility (aria-label)
description string - Optional description for screen readers
height number | string 400 Map height in pixels or CSS value
width number | string - Map width in pixels or CSS value
loading boolean false Show loading skeleton
error string | null - Error message to display
emptyMessage string - Message shown when data is empty
theme 'light' | 'dark' | 'auto' 'auto' Theme preference
animation boolean true Enable/disable animations (respects prefers-reduced-motion)
class string - Custom CSS class for styling

Accessibility​

  • The title prop is used as aria-label for screen readers
  • Keyboard navigation support for interactive elements
  • Animations respect prefers-reduced-motion media query
  • High contrast colors in both light and dark modes
  • CircleLayer - Render circles at point locations
  • DeckOverlay - Integrate Deck.gl layers for advanced WebGL visualizations
On this page