Layers

Deck.gl Layers

High-performance WebGL visualization layers powered by deck.gl

Overview

v-maplibre provides Vue 3 components for all major deck.gl layer types. These layers render on a separate WebGL canvas (overlaid mode) for optimal performance and easier debugging.

Installation

Install the required deck.gl packages alongside v-maplibre:

pnpm add @geoql/v-maplibre @deck.gl/core @deck.gl/layers @deck.gl/mapbox

npm install @geoql/v-maplibre @deck.gl/core @deck.gl/layers @deck.gl/mapbox

For additional layer types, install the corresponding packages:

pnpm add @deck.gl/aggregation-layers  # Heatmap, Hexagon, Grid, etc.
pnpm add @deck.gl/geo-layers          # Trips, MVT, Tile, H3, etc.
pnpm add @deck.gl/mesh-layers         # SimpleMesh, Scenegraph

Basic Usage

<script setup lang="ts">
  import { VMap, VLayerDeckglScatterplot } from '@geoql/v-maplibre';

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

  const data = [
    { coordinates: [-122.4, 37.8], size: 100 },
    { coordinates: [-122.5, 37.7], size: 200 },
  ];
</script>

<template>
  <VMap :options="mapOptions" style="height: 500px">
    <VLayerDeckglScatterplot
      id="scatterplot"
      :data="data"
      :get-position="(d) => d.coordinates"
      :get-radius="(d) => d.size"
      :get-fill-color="[255, 140, 0]"
      :radius-min-pixels="5"
      :pickable="true"
      @click="(info) => console.log('Clicked:', info.object)"
    />
  </VMap>
</template>

Available Layers

Core Layers (@deck.gl/layers)

Component	Description
`VLayerDeckglScatterplot`	Circles/points at geographic positions
`VLayerDeckglArc`	Arcs between origin-destination pairs
`VLayerDeckglLine`	Flat lines between points
`VLayerDeckglPath`	Polylines/routes with width
`VLayerDeckglPolygon`	Filled/stroked polygons
`VLayerDeckglSolidPolygon`	Extruded 3D polygons
`VLayerDeckglGeojson`	GeoJSON features with styling
`VLayerDeckglIcon`	Icons/markers at positions
`VLayerDeckglText`	Text labels
`VLayerDeckglColumn`	3D columns/cylinders
`VLayerDeckglBitmap`	Georeferenced images
`VLayerDeckglGridCell`	Grid cells with elevation
`VLayerDeckglPointCloud`	3D point clouds

Aggregation Layers (@deck.gl/aggregation-layers)

Component	Description
`VLayerDeckglHeatmap`	Density heatmap visualization
`VLayerDeckglHexagon`	Hexagonal binning with elevation
`VLayerDeckglGrid`	Square grid aggregation
`VLayerDeckglContour`	Contour/isoline visualization
`VLayerDeckglScreenGrid`	Screen-space grid (fixed pixel size)

Geo Layers (@deck.gl/geo-layers)

Component	Description
`VLayerDeckglTrips`	Animated path visualization
`VLayerDeckglMVT`	Mapbox Vector Tiles
`VLayerDeckglTile`	Generic tile layer
`VLayerDeckglTile3D`	3D Tiles (Cesium format)
`VLayerDeckglTerrain`	Terrain mesh from elevation data
`VLayerDeckglH3Hexagon`	H3 hexagonal cells
`VLayerDeckglH3Cluster`	H3 hexagon clusters
`VLayerDeckglGreatCircle`	Great circle arcs
`VLayerDeckglS2`	S2 geometry cells
`VLayerDeckglGeohash`	Geohash grid cells
`VLayerDeckglQuadkey`	Quadkey tile cells
`VLayerDeckglWMS`	WMS tile service

Mesh Layers (@deck.gl/mesh-layers)

Component	Description
`VLayerDeckglSimpleMesh`	3D mesh objects
`VLayerDeckglScenegraph`	glTF/GLB 3D models

Generic Layer

Component	Description
`VLayerDeckgl`	Generic wrapper for any deck.gl layer

Common Props

All deck.gl layer components share these common props:

Prop	Type	Default	Description
`id`	`string`	required	Unique layer identifier
`data`	`array \| string \| Promise`	required	Data source
`visible`	`boolean`	`true`	Layer visibility
`opacity`	`number`	`1`	Layer opacity (0-1)
`pickable`	`boolean`	`true`	Enable picking/interaction
`autoHighlight`	`boolean`	`false`	Highlight on hover
`highlightColor`	`Color`	-	Highlight color
`beforeId`	`string`	-	MapLibre layer to insert before

Events

All layers emit these events when pickable is enabled:

Event	Payload	Description
`@click`	`PickingInfo`	Clicked on a feature
`@hover`	`PickingInfo`	Hovering over a feature

<VLayerDeckglScatterplot
  :pickable="true"
  @click="handleClick"
  @hover="handleHover"
/>

Accessors

Many props accept accessor functions for data-driven styling:

<VLayerDeckglScatterplot
  :data="data"
  :get-position="(d) => d.coordinates"
  :get-radius="(d) => d.population / 1000"
  :get-fill-color="(d) => d.risk > 0.5 ? [255, 0, 0] : [0, 255, 0]"
/>

TypeScript

Import types from deck.gl packages:

import type { Color, PickingInfo, Position } from '@deck.gl/core';

Edit this pageorReport an issue

VMarker

Add interactive markers to your map

Core Layers

Examples of deck.gl core visualization layers