---
title: "Aggregation Layers"
description: "Examples of deck.gl aggregation and heatmap layers"
canonical_url: "https://v-maplibre.geoql.in/layers/aggregation-layers"
---
# Aggregation Layers

> Examples of deck.gl aggregation and heatmap layers

> See [Peer Dependencies](https://v-maplibre.geoql.in/guide/peer-dependencies) for the complete list of required packages for each component.

<callout icon="i-lucide-external-link" target="_blank" to="https://mapcn-vue.geoql.in/examples">

See all interactive examples at **mapcn-vue.geoql.in/examples**

</callout>

## HeatmapLayer

[Live Demo](https://mapcn-vue.geoql.in/examples/deckgl-heatmap)

Visualize point density as a heatmap.

```vue
<script setup lang="ts">
  import { VMap } from '@geoql/v-maplibre';
  import { VLayerDeckglHeatmap } from '@geoql/v-maplibre/deck.gl';

  const mapOptions = {
    style: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
    center: [-122.4, 37.8],
    zoom: 11,
  };

  const earthquakes = 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/screen-grid/ca-earthquakes.json';
</script>

<template>
  <VMap :options="mapOptions" style="height: 500px">
    <VLayerDeckglHeatmap
      id="heatmap"
      :data="earthquakes"
      :get-position="(d) => [d.longitude, d.latitude]"
      :get-weight="(d) => d.magnitude"
      :radius-pixels="30"
      :intensity="1"
      :threshold="0.03"
    />
  </VMap>
</template>
```

## HexagonLayer

[Live Demo](https://mapcn-vue.geoql.in/examples/deckgl-hexagon)

Aggregate points into hexagonal bins with optional 3D elevation.

```vue
<script setup lang="ts">
  import { VMap } from '@geoql/v-maplibre';
  import { VLayerDeckglHexagon } from '@geoql/v-maplibre/deck.gl';

  const mapOptions = {
    style: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
    center: [-122.4, 37.8],
    zoom: 11,
    pitch: 45,
  };

  const points = 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/3d-heatmap/heatmap-data.csv';
</script>

<template>
  <VMap :options="mapOptions" style="height: 500px">
    <VLayerDeckglHexagon
      id="hexagons"
      :data="points"
      :get-position="(d) => [Number(d.lng), Number(d.lat)]"
      :radius="200"
      :elevation-scale="4"
      :elevation-range="[0, 1000]"
      :extruded="true"
      :pickable="true"
      :coverage="0.8"
    />
  </VMap>
</template>
```

## GridLayer

[Live Demo](https://mapcn-vue.geoql.in/examples/deckgl-grid)

Aggregate points into a square grid.

```vue
<script setup lang="ts">
  import { VMap } from '@geoql/v-maplibre';
  import { VLayerDeckglGrid } from '@geoql/v-maplibre/deck.gl';

  const mapOptions = {
    style: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
    center: [-122.4, 37.8],
    zoom: 11,
    pitch: 45,
  };

  const points = [
    { coordinates: [-122.42, 37.78] },
    { coordinates: [-122.41, 37.79] },
    { coordinates: [-122.43, 37.77] },
  ];
</script>

<template>
  <VMap :options="mapOptions" style="height: 500px">
    <VLayerDeckglGrid
      id="grid"
      :data="points"
      :get-position="(d) => d.coordinates"
      :cell-size="200"
      :elevation-scale="4"
      :extruded="true"
      :pickable="true"
    />
  </VMap>
</template>
```

## ContourLayer

[Live Demo](https://mapcn-vue.geoql.in/examples/deckgl-contour)

Render contour lines from point data.

```vue
<script setup lang="ts">
  import { VMap } from '@geoql/v-maplibre';
  import { VLayerDeckglContour } from '@geoql/v-maplibre/deck.gl';

  const mapOptions = {
    style: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
    center: [-122.4, 37.8],
    zoom: 11,
  };

  const points = 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/screen-grid/ca-earthquakes.json';

  const contours = [
    { threshold: 1, color: [255, 255, 178], strokeWidth: 1 },
    { threshold: 5, color: [254, 204, 92], strokeWidth: 2 },
    { threshold: 10, color: [253, 141, 60], strokeWidth: 3 },
    { threshold: 20, color: [227, 26, 28], strokeWidth: 4 },
  ];
</script>

<template>
  <VMap :options="mapOptions" style="height: 500px">
    <VLayerDeckglContour
      id="contours"
      :data="points"
      :get-position="(d) => [d.longitude, d.latitude]"
      :contours="contours"
      :cell-size="200"
    />
  </VMap>
</template>
```

## ScreenGridLayer

[Live Demo](https://mapcn-vue.geoql.in/examples/deckgl-screengrid)

Screen-space grid aggregation with fixed pixel size.

```vue
<script setup lang="ts">
  import { VMap } from '@geoql/v-maplibre';
  import { VLayerDeckglScreenGrid } from '@geoql/v-maplibre/deck.gl';

  const mapOptions = {
    style: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
    center: [-122.4, 37.8],
    zoom: 11,
  };

  const points = 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/screen-grid/ca-earthquakes.json';
</script>

<template>
  <VMap :options="mapOptions" style="height: 500px">
    <VLayerDeckglScreenGrid
      id="screen-grid"
      :data="points"
      :get-position="(d) => [d.longitude, d.latitude]"
      :get-weight="(d) => d.magnitude"
      :cell-size-pixels="20"
      :opacity="0.8"
    />
  </VMap>
</template>
```


## Sitemap

See the full [sitemap](https://v-maplibre.geoql.in/sitemap.md) for all pages.