Layers
Geo Layers
Examples of deck.gl geo and tile layers
See Peer Dependencies for the complete list of required packages for each component.
TripsLayer
Animate paths over time, perfect for visualizing movement data.
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { VMap } from '@geoql/v-maplibre';
import { VLayerDeckglTrips } 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: 12,
};
const trips = 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/trips/trips-v7.json';
const currentTime = ref(0);
let animation: number;
onMounted(() => {
const animate = () => {
currentTime.value = (currentTime.value + 1) % 1800;
animation = requestAnimationFrame(animate);
};
animate();
});
onUnmounted(() => {
cancelAnimationFrame(animation);
});
</script>
<template>
<VMap :options="mapOptions" style="height: 500px">
<VLayerDeckglTrips
id="trips"
:data="trips"
:get-path="(d) => d.path"
:get-timestamps="(d) => d.timestamps"
:get-color="[253, 128, 93]"
:current-time="currentTime"
:trail-length="180"
:width-min-pixels="2"
/>
</VMap>
</template>
MVTLayer
Render Mapbox Vector Tiles with deck.gl styling.
<script setup lang="ts">
import { VMap } from '@geoql/v-maplibre';
import { VLayerDeckglMVT } from '@geoql/v-maplibre/deck.gl';
const mapOptions = {
style: 'https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json',
center: [-122.4, 37.8],
zoom: 10,
};
const tileUrl = 'https://tiles.example.com/{z}/{x}/{y}.pbf';
</script>
<template>
<VMap :options="mapOptions" style="height: 500px">
<VLayerDeckglMVT
id="mvt"
:data="tileUrl"
:get-fill-color="[200, 200, 200, 100]"
:get-line-color="[100, 100, 100]"
:get-line-width="1"
:pickable="true"
:auto-highlight="true"
:highlight-color="[255, 200, 0, 128]"
/>
</VMap>
</template>
TerrainLayer
Render 3D terrain from elevation data.
<script setup lang="ts">
import { VMap } from '@geoql/v-maplibre';
import { VLayerDeckglTerrain } 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,
pitch: 45,
bearing: -30,
};
const terrainUrl = 'https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png';
const textureUrl = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';
</script>
<template>
<VMap :options="mapOptions" style="height: 500px">
<VLayerDeckglTerrain
id="terrain"
:elevation-data="terrainUrl"
:texture="textureUrl"
:elevation-decoder="{
rScaler: 256,
gScaler: 1,
bScaler: 1/256,
offset: -32768,
}"
:mesh-max-error="4"
/>
</VMap>
</template>
H3HexagonLayer
Render H3 hexagonal cells.
<script setup lang="ts">
import { VMap } from '@geoql/v-maplibre';
import { VLayerDeckglH3Hexagon } 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 h3Data = [
{ hex: '882830829bfffff', value: 100 },
{ hex: '88283082d7fffff', value: 200 },
{ hex: '88283082dbfffff', value: 150 },
];
</script>
<template>
<VMap :options="mapOptions" style="height: 500px">
<VLayerDeckglH3Hexagon
id="h3"
:data="h3Data"
:get-hexagon="(d) => d.hex"
:get-fill-color="(d) => [255, (1 - d.value / 200) * 255, 0]"
:get-elevation="(d) => d.value * 10"
:extruded="true"
:pickable="true"
/>
</VMap>
</template>
GreatCircleLayer
Render great circle arcs between points.
<script setup lang="ts">
import { VMap } from '@geoql/v-maplibre';
import { VLayerDeckglGreatCircle } from '@geoql/v-maplibre/deck.gl';
const mapOptions = {
style: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
center: [0, 30],
zoom: 1,
};
const routes = [
{ from: [-122.4, 37.8], to: [139.7, 35.7] },
{ from: [-122.4, 37.8], to: [-0.1, 51.5] },
{ from: [-122.4, 37.8], to: [151.2, -33.9] },
];
</script>
<template>
<VMap :options="mapOptions" style="height: 500px">
<VLayerDeckglGreatCircle
id="great-circles"
:data="routes"
:get-source-position="(d) => d.from"
:get-target-position="(d) => d.to"
:get-source-color="[64, 255, 0]"
:get-target-color="[0, 128, 200]"
:get-width="2"
:pickable="true"
/>
</VMap>
</template>
Tile3DLayer
Render 3D Tiles (Cesium format).
<script setup lang="ts">
import { VMap } from '@geoql/v-maplibre';
import { VLayerDeckglTile3D } from '@geoql/v-maplibre/deck.gl';
const mapOptions = {
style: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
center: [-75.6, 40.0],
zoom: 14,
pitch: 45,
};
const tilesetUrl = 'https://assets.ion.cesium.com/43978/tileset.json';
</script>
<template>
<VMap :options="mapOptions" style="height: 500px">
<VLayerDeckglTile3D
id="3d-tiles"
:data="tilesetUrl"
:point-size="2"
:pickable="true"
@tileset-load="(tileset) => console.log('Tileset loaded', tileset)"
/>
</VMap>
</template>