Vue Vector Map - Palette

This demo shows how to color specific map areas using a palette. In the VectorMap component, a palette defines a range of colors that are used to paint areas. This range is divided into segments using the value assigned to the colorGroups property. Each segment contributes a color into an array of colors.

The map in this demo represents the top 40 countries by population. Map areas are colored according to the percentage of population.

Backend API

<template> <DxVectorMap id="vector-map" :bounds="bounds" > <DxLayer :data-source="mapsWorld" :color-groups="colorGroups" :customize="customizeLayer" palette="Violet" name="areas" color-grouping-field="population" /> <DxTooltip :enabled="true" :customize-tooltip="customizeTooltip" /> <DxLegend :customize-text="customizeText" > <DxSource layer="areas" grouping="color" /> </DxLegend> </DxVectorMap> </template> <script setup lang="ts"> // @ts-ignore import * as mapsData from 'devextreme-dist/js/vectormap-data/world.js'; import { DxVectorMap, DxLayer, DxLegend, DxSource, DxTooltip, } from 'devextreme-vue/vector-map'; import { type MapLayerElement } from 'devextreme/viz/vector_map'; import { populations } from './data.ts'; const mapsWorld = mapsData.world; const bounds = [-180, 85, 180, -60]; const colorGroups = [0, 0.5, 0.8, 1, 2, 3, 100]; const customizeTooltip = (arg: any) => ((arg.attribute('population')) ? { text: `${arg.attribute('name')}: ${arg.attribute('population')}% of world population` } : {}); const customizeText = ( { index, start, end }: Record<string, any> & { end: number; index: number; start: number; }) => { if (index === 0) { return '< 0.5%'; } return (index === 5) ? '> 3%' : `${start}% to ${end}%`; }; function customizeLayer(elements: MapLayerElement[]) { elements.forEach((element) => { element.attribute('population', populations[element.attribute('name')]); }); } </script> <style> #vector-map { height: 440px; } </style>

export const populations: Record<string, any> = { China: 19, India: 17.4, 'United States': 4.44, Indonesia: 3.45, Brazil: 2.83, Pakistan: 2.62, 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, Iran: 1.08, Turkey: 1.07, 'Congo (Kinshasa)': 0.94, France: 0.92, Thailand: 0.9, 'United Kingdom': 0.89, Italy: 0.85, Burma: 0.84, 'South Africa': 0.74, 'S. 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, Iraq: 0.47, Morocco: 0.46, Uzbekistan: 0.43, };

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>