Your search did not match any results.
Vector Map

Area with Labels and Two Legends

Documentation

The VectorMap widget allows you to use color and size indicators to better illustrate the values associated with areas/markers. Use map legends to provide additional information on colors and marker size.

Apply
Reset
<template> <dx-vector-map id="vector-map" :bounds="bounds" > <dx-layer :data-source="mapsWorld" :color-groups="colorGroups" :customize="customizeLayer" name="areas" color-grouping-field="population" palette="Violet" > <dx-label :enabled="true" data-field="name" /> </dx-layer> <dx-layer :data-source="markers" :size-groups="sizeGroups" :opacity="0.8" name="markers" element-type="bubble" data-field="value" > <dx-label :enabled="false" /> </dx-layer> <dx-legend :customize-items="customizeItems" :customize-text="customizeText" title = "World Population<br/>Percentages" horizontal-alignment="left" vertical-alignment="bottom" > <dx-source layer="areas" grouping="color" /> </dx-legend> <dx-legend :customize-items="customizeItems" :customize-text="customizeMarkers" title="City Population" marker-shape="circle" horizontal-alignment="right" vertical-alignment="bottom" > <dx-source layer="markers" grouping="size" /> </dx-legend> <dx-tooltip :enabled="true" :customize-tooltip="customizeTooltip" /> </dx-vector-map> </template> <script> import * as mapsData from 'devextreme/dist/js/vectormap-data/world.js'; import { DxVectorMap, DxLabel, DxLayer, DxLegend, DxSource, DxTooltip, } from 'devextreme-vue/vector-map'; import { populations, markers } from './data.js'; export default { components: { DxVectorMap, DxLabel, DxLayer, DxLegend, DxSource, DxTooltip }, data() { return { markers, populations, colorGroups: [0, 0.5, 0.8, 1, 2, 3, 100], mapsWorld: mapsData.world, bounds: [-180, 85, 180, -75], sizeGroups: [0, 8000, 10000, 50000] }; }, methods: { customizeText(arg) { if(arg.index === 0) { return '< 0.5%'; } else if (arg.index === 5) { return '> 3%'; } else { return `${arg.start }% to ${ arg.end }%`; } }, customizeTooltip(arg) { return { text: arg.attribute('text') }; }, customizeMarkers(arg) { return ['< 8000K', '8000K to 10000K', '> 10000K'][arg.index]; }, customizeItems(items) { return items.reverse(); }, customizeLayer(elements) { elements.forEach((element) => { let name = element.attribute('name'), population = this.populations[name]; if (population) { element.attribute('population', population); } }); } } }; </script> <style> #vector-map { height: 700px; } </style>
import Vue from 'vue'; import App from './App.vue'; new Vue({ el: '#app', components: { App }, template: '<App/>' });
<!DOCTYPE html> <html> <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=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.3/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.3/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import('./index.js'); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> <span v-if="false">Loading...</span> </div> </div> </body> </html>
export const populations = { '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 => { return { type: 'Feature', geometry: { type: 'Point', coordinates: data.coordinates }, properties: { value: data.value, text: data.text } }; }) };
System.config({ transpiler: 'plugin-babel', paths: { 'npm:': 'https://unpkg.com/' }, map: { vue: 'npm:vue@2.6.3/dist/vue.esm.browser.js', 'vue-loader': 'npm:dx-systemjs-vue-browser@latest/index.js', 'devextreme': 'npm:devextreme@19.2', 'devextreme/dist/js/vectormap-data': 'npm:devextreme@19.2/dist/js/vectormap-data', 'devextreme-vue': 'npm:devextreme-vue@19.2', jszip: 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.7/dist/quill.js', 'devexpress-diagram': 'npm:devexpress-diagram', 'devexpress-gantt': 'npm:devexpress-gantt', 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js' }, meta: { '*.vue': { loader: 'vue-loader' }, 'devextreme/dist/js/vectormap-data/*': { esModule: true } }, packages: { 'devextreme-vue': { main: 'index.js' }, 'devextreme': { defaultExtension: 'js' } }, babelOptions: { sourceMaps: false, stage0: true } });