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.

Copy to CodeSandBox
Apply
Reset
<dx-vector-map id="vector-map" [bounds]="[-180, 85, 180, -75]"> <dxo-tooltip [enabled]="true" [customizeTooltip]="customizeTooltip"></dxo-tooltip> <dxi-layer [dataSource]="worldMap" name="areas" palette="Violet" [colorGroups]="[0, 0.5, 0.8, 1, 2, 3, 100]" colorGroupingField="population" [customize]="customizeLayers"> <dxo-label [enabled]="true" dataField="name"></dxo-label> </dxi-layer> <dxi-layer [dataSource]="markers" name="markers" elementType="bubble" dataField="value" [sizeGroups]="[0, 8000, 10000, 50000]" opacity="0.8"> <dxo-label [enabled]="false"></dxo-label> </dxi-layer> <dxi-legend title = "World Population<br/>Percentages" horizontalAlignment="left" verticalAlignment="bottom" [customizeItems]="customizeItems" [customizeText]="customizeText"> <dxo-source layer="areas" grouping="color"></dxo-source> </dxi-legend> <dxi-legend title="City Population" markerShape="circle" horizontalAlignment="right" verticalAlignment="bottom" [customizeItems]="customizeItems" [customizeText]="customizeMarkers"> <dxo-source layer="markers" grouping="size"></dxo-source> </dxi-legend> </dx-vector-map>
import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { DxVectorMapModule } from 'devextreme-angular'; import * as mapsData from 'devextreme/dist/js/vectormap-data/world.js'; import { FeatureCollection, Service } from './app.service'; if(!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', providers: [ Service ], templateUrl: 'app/app.component.html', styleUrls: ['app/app.component.css'] }) export class AppComponent { worldMap: any = mapsData.world; markers: FeatureCollection; populations: Object; constructor(service: Service) { this.markers = service.getMarkers(); this.populations = service.getPopulations(); this.customizeLayers = this.customizeLayers.bind(this); } 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") }; } customizeItems(items) { return items.reverse(); } customizeLayers(elements) { elements.forEach((element) => { let name = element.attribute("name"), population = this.populations[name]; if (population) { element.attribute("population", population); } }); } customizeMarkers(arg) { return ["< 8000K", "8000K to 10000K", "> 10000K"][arg.index]; } } @NgModule({ imports: [ BrowserModule, DxVectorMapModule ], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule);
::ng-deep #vector-map { height: 700px; width: 100%; display: block; }
import { Injectable } from '@angular/core'; export class FeatureCollection { type: string; features: Feature[]; } export class Feature { type: string; properties: FeatureProperty; geometry: FeatureGeometry; } export class FeatureProperty { value: number; text: string; } export class FeatureGeometry { type: string; coordinates: number[]; } let populations: Object = { "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 }; let markers: FeatureCollection = { 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(function (data) { return { type: "Feature", geometry: { type: "Point", coordinates: data.coordinates }, properties: { value: data.value, text: data.text } }; }) }; @Injectable() export class Service { getPopulations(): Object { return populations; } getMarkers(): FeatureCollection { return markers; } }
// In real applications, you should not transpile code in the browser. You can see how to create your own application with Angular and DevExtreme here: // https://github.com/DevExpress/devextreme-angular/blob/master/README.md System.config({ transpiler: 'ts', typescriptOptions: { module: "commonjs", emitDecoratorMetadata: true, experimentalDecorators: true }, meta: { 'typescript': { "exports": "ts" }, 'devextreme/dist/js/vectormap-data/*': { 'esModule': true } }, paths: { 'npm:': 'https://unpkg.com/' }, map: { 'ts': 'npm:plugin-typescript@7.0.6/lib/plugin.js', 'typescript': 'npm:typescript@2.2.2/lib/typescript.js', '@angular/core': 'npm:@angular/core@7.1.3/bundles/core.umd.js', '@angular/common': 'npm:@angular/common@7.1.3/bundles/common.umd.js', '@angular/compiler': 'npm:@angular/compiler@7.1.3/bundles/compiler.umd.js', '@angular/platform-browser': 'npm:@angular/platform-browser@7.1.3/bundles/platform-browser.umd.js', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@7.1.3/bundles/platform-browser-dynamic.umd.js', '@angular/router': 'npm:@angular/router@7.1.3/bundles/router.umd.js', '@angular/forms': 'npm:@angular/forms@7.1.3/bundles/forms.umd.js', '@angular/common/http': 'npm:@angular/common@7.1.3/bundles/common-http.umd.js', 'tslib': 'npm:tslib/tslib.js', 'rxjs': 'npm:rxjs@6.3.3', 'rxjs/operators': 'npm:rxjs@6.3.3/operators', 'devextreme': 'npm:devextreme@19.1', 'devextreme/dist/js/vectormap-data': 'npm:devextreme@19.1/dist/js/vectormap-data', 'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.6/dist/quill.js', 'devexpress-diagram': 'npm:devexpress-diagram', 'devextreme-angular': 'npm:devextreme-angular@19.1' }, packages: { 'app': { main: './app.component.ts', defaultExtension: 'ts' }, 'devextreme': { defaultExtension: 'js' }, 'rxjs': { main: 'index.js', defaultExtension: 'js' }, 'rxjs/operators': { main: 'index.js', defaultExtension: 'js' }, 'devextreme-angular': { main: 'index.js', defaultExtension: 'js' } } });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <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.1.3/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/19.1.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/zone.js@0.6.25/dist/zone.js"></script> <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <script src="config.js"></script> <script> System.import('app').catch(console.error.bind(console)); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> </body> </html>