Render circles at geographic positions with data-driven styling.
<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 cities = [
{ name: 'San Francisco', coordinates: [-122.4194, 37.7749], population: 870000 },
{ name: 'Oakland', coordinates: [-122.2711, 37.8044], population: 430000 },
{ name: 'Berkeley', coordinates: [-122.2727, 37.8716], population: 120000 },
];
</script>
<template>
<VMap :options="mapOptions" style="height: 500px">
<VLayerDeckglScatterplot
id="cities"
:data="cities"
:get-position="(d) => d.coordinates"
:get-radius="(d) => Math.sqrt(d.population) * 10"
:get-fill-color="[255, 140, 0, 200]"
:radius-min-pixels="5"
:radius-max-pixels="100"
:pickable="true"
@click="(info) => alert(info.object?.name)"
/>
</VMap>
</template>
Visualize connections between origin-destination pairs.
<script setup lang="ts">
import { VMap, VLayerDeckglArc } from '@geoql/v-maplibre';
const mapOptions = {
style: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
center: [-100, 40],
zoom: 3,
};
const flights = [
{ from: [-122.4, 37.8], to: [-73.9, 40.7], count: 500 },
{ from: [-122.4, 37.8], to: [-87.6, 41.9], count: 300 },
{ from: [-122.4, 37.8], to: [-118.2, 34.0], count: 800 },
];
</script>
<template>
<VMap :options="mapOptions" style="height: 500px">
<VLayerDeckglArc
id="flights"
:data="flights"
:get-source-position="(d) => d.from"
:get-target-position="(d) => d.to"
:get-source-color="[0, 128, 255]"
:get-target-color="[255, 0, 128]"
:get-width="(d) => Math.sqrt(d.count)"
:pickable="true"
/>
</VMap>
</template>
Render routes or polylines with configurable width.
<script setup lang="ts">
import { VMap, VLayerDeckglPath } from '@geoql/v-maplibre';
const mapOptions = {
style: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
center: [-122.4, 37.8],
zoom: 12,
};
const routes = [
{
path: [
[-122.4194, 37.7749],
[-122.4089, 37.7855],
[-122.3994, 37.7920],
],
name: 'Route A',
},
];
</script>
<template>
<VMap :options="mapOptions" style="height: 500px">
<VLayerDeckglPath
id="routes"
:data="routes"
:get-path="(d) => d.path"
:get-color="[0, 150, 255]"
:get-width="5"
:width-min-pixels="2"
:pickable="true"
/>
</VMap>
</template>
Render GeoJSON features with comprehensive styling.
<script setup lang="ts">
import { VMap, VLayerDeckglGeojson } from '@geoql/v-maplibre';
const mapOptions = {
style: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
center: [-122.4, 37.8],
zoom: 10,
};
const geojsonUrl = 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/geojson/vancouver-blocks.json';
</script>
<template>
<VMap :options="mapOptions" style="height: 500px">
<VLayerDeckglGeojson
id="geojson"
:data="geojsonUrl"
:get-fill-color="(f) => {
const value = f.properties?.valuePerSqm || 0;
return [255, 255 - value / 100, 0, 180];
}"
:get-line-color="[255, 255, 255]"
:get-line-width="1"
:pickable="true"
:stroked="true"
:filled="true"
/>
</VMap>
</template>
Place custom icons at geographic positions.
<script setup lang="ts">
import { VMap, VLayerDeckglIcon } from '@geoql/v-maplibre';
const mapOptions = {
style: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
center: [-122.4, 37.8],
zoom: 12,
};
const markers = [
{ coordinates: [-122.4194, 37.7749], icon: 'marker' },
{ coordinates: [-122.4089, 37.7855], icon: 'marker' },
];
const iconAtlas = 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/icon-atlas.png';
const iconMapping = {
marker: { x: 0, y: 0, width: 128, height: 128, anchorY: 128 },
};
</script>
<template>
<VMap :options="mapOptions" style="height: 500px">
<VLayerDeckglIcon
id="icons"
:data="markers"
:get-position="(d) => d.coordinates"
:get-icon="(d) => d.icon"
:icon-atlas="iconAtlas"
:icon-mapping="iconMapping"
:get-size="40"
:pickable="true"
/>
</VMap>
</template>
Add text labels to your map.
<script setup lang="ts">
import { VMap, VLayerDeckglText } 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 labels = [
{ coordinates: [-122.4194, 37.7749], text: 'San Francisco' },
{ coordinates: [-122.2711, 37.8044], text: 'Oakland' },
];
</script>
<template>
<VMap :options="mapOptions" style="height: 500px">
<VLayerDeckglText
id="labels"
:data="labels"
:get-position="(d) => d.coordinates"
:get-text="(d) => d.text"
:get-size="16"
:get-color="[255, 255, 255]"
:get-text-anchor="'middle'"
:get-alignment-baseline="'center'"
font-family="Arial"
:pickable="true"
/>
</VMap>
</template>
Render 3D columns for data visualization.
<script setup lang="ts">
import { VMap, VLayerDeckglColumn } 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,
pitch: 45,
};
const data = [
{ coordinates: [-122.4194, 37.7749], value: 1000 },
{ coordinates: [-122.4089, 37.7855], value: 500 },
{ coordinates: [-122.3994, 37.7920], value: 800 },
];
</script>
<template>
<VMap :options="mapOptions" style="height: 500px">
<VLayerDeckglColumn
id="columns"
:data="data"
:get-position="(d) => d.coordinates"
:get-elevation="(d) => d.value"
:get-fill-color="(d) => [255, d.value / 4, 0]"
:radius="100"
:elevation-scale="1"
:extruded="true"
:pickable="true"
/>
</VMap>
</template>
Render filled and stroked polygons.
<script setup lang="ts">
import { VMap, VLayerDeckglPolygon } from '@geoql/v-maplibre';
const mapOptions = {
style: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
center: [-122.4, 37.8],
zoom: 11,
};
const polygons = [
{
contour: [
[-122.45, 37.78],
[-122.40, 37.78],
[-122.40, 37.82],
[-122.45, 37.82],
],
name: 'Zone A',
},
];
</script>
<template>
<VMap :options="mapOptions" style="height: 500px">
<VLayerDeckglPolygon
id="zones"
:data="polygons"
:get-polygon="(d) => d.contour"
:get-fill-color="[255, 0, 0, 100]"
:get-line-color="[255, 0, 0]"
:get-line-width="2"
:filled="true"
:stroked="true"
:pickable="true"
/>
</VMap>
</template>