Legend - Vue Vector Map

<template> <DxVectorMap id="vector-map" :bounds="bounds" > <DxLayer :data-source="mapsWorld" :color-groups="colorGroups" :customize="customizeLayer" name="areas" color-grouping-field="population" palette="Violet" > <DxLabel :enabled="true" data-field="name" /> </DxLayer> <DxLayer :data-source="markers" :size-groups="sizeGroups" :opacity="0.8" name="markers" element-type="bubble" data-field="value" > <DxLabel :enabled="false" /> </DxLayer> <DxLegend :customize-items="customizeItems" :customize-text="customizeText" title="World Population<br/>Percentages" horizontal-alignment="left" vertical-alignment="bottom" > <DxSource layer="areas" grouping="color" /> </DxLegend> <DxLegend :customize-items="customizeItems" :customize-text="customizeMarkers" title="City Population" marker-shape="circle" horizontal-alignment="right" vertical-alignment="bottom" > <DxSource layer="markers" grouping="size" /> </DxLegend> <DxTooltip :enabled="true" :customize-tooltip="customizeTooltip" /> </DxVectorMap> </template> <script setup lang="ts"> // @ts-ignore import * as mapsData from 'devextreme-dist/js/vectormap-data/world.js'; import { DxVectorMap, DxLabel, DxLayer, DxLegend, DxSource, DxTooltip, type DxVectorMapTypes, } from 'devextreme-vue/vector-map'; import { type MapLayerElement } from 'devextreme/viz/vector_map'; import { populations, markers } from './data.ts'; const colorGroups = [0, 0.5, 0.8, 1, 2, 3, 100]; const mapsWorld: Record<string, unknown> = mapsData.world; const bounds = [-180, 85, 180, -75]; const sizeGroups = [0, 8000, 10000, 50000]; const customizeTooltip = (info: MapLayerElement) => ({ text: info.attribute('text') }); const customizeMarkers = ({ index }: any) => ['< 8000K', '8000K to 10000K', '> 10000K'][index]; const customizeItems = (items: DxVectorMapTypes.LegendItem[]) => items.reverse(); function customizeText({ index, start, end }: Record<string, any>) { if (index === 0) { return '< 0.5%'; } return (index === 5) ? '> 3%' : `${start}% to ${end}%`; } function customizeLayer(elements: MapLayerElement[]) { elements.forEach((element) => { const name: string = element.attribute('name'); const population = populations[name]; if (population) { element.attribute('population', population); } }); } </script> <style> #vector-map { height: 700px; } </style>

export const populations: Record<string, unknown> = { China: 19, India: 17.4, 'United States': 4.44, Indonesia: 3.45, Brazil: 2.83, Nigeria: 2.42, Bangladesh: 2.18, Russia: 2.04, Japan: 1.77, Mexico: 1.67, Philippines: 1.39, Vietnam: 1.25, Ethiopia: 1.23, Egypt: 1.21, Germany: 1.13, Turkey: 1.07, 'Democratic Republic of the Congo': 0.94, France: 0.92, Thailand: 0.9, 'United Kingdom': 0.89, Italy: 0.85, Burma: 0.84, 'South Africa': 0.74, 'South Korea': 0.7, Colombia: 0.66, Spain: 0.65, Tanzania: 0.63, Kenya: 0.62, Ukraine: 0.6, Argentina: 0.59, Algeria: 0.54, Poland: 0.54, Sudan: 0.52, Canada: 0.49, Uganda: 0.49, Morocco: 0.46, Uzbekistan: 0.43, }; export const markers = { type: 'FeatureCollection', features: [ { coordinates: [-74, 40.7], text: 'New York City', value: 8406, }, { coordinates: [100.47, 13.75], text: 'Bangkok', value: 8281, }, { coordinates: [37.62, 55.75], text: 'Moscow', value: 12111, }, { coordinates: [121.5, 31.2], text: 'Shanghai', value: 24150, }, { coordinates: [-43.18, -22.9], text: 'Rio de Janeiro', value: 6429, }, { coordinates: [31.23, 30.05], text: 'Cairo', value: 8922, }, { coordinates: [28.95, 41], text: 'Istanbul', value: 14160, }, { coordinates: [127, 37.55], text: 'Seoul', value: 10388, }, { coordinates: [139.68, 35.68], text: 'Tokyo', value: 9071, }, { coordinates: [103.83, 1.28], text: 'Singapore', value: 5399, }, { coordinates: [30.3, 59.95], text: 'Saint Petersburg', value: 5131, }, { coordinates: [28.03, -26.2], text: 'Johannesburg', value: 4434, }, { coordinates: [144.95, -37.8], text: 'Melbourne', value: 4252, }, ].map((data) => ({ type: 'Feature', geometry: { type: 'Point', coordinates: data.coordinates, }, properties: { value: data.value, text: data.text, }, })), };

import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="./bundle.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> <script src="bundles/vendor/vue.vendor.js"></script> <script src="./bundle.js"></script> </body> </html>

Vue Vector Map - Legend