I managed to incorporate the devextreme angular 2 map into my demo project. My goal is to display the count of individuals with the name 'x' on the bubble as a label/text on the vector map, without the need for hovering to see a tooltip. I want the label to be visible directly on the bubble itself in the Demos > maps>vectormap>bubble markers
Current state (focus on bubbles): https://i.sstatic.net/Gk3hn.png
Desired outcome (focus on bubbles): https://i.sstatic.net/v9caW.png
This is what I tried:
<div class="dx-viewport">
<div class="demo-container">
<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]="[100]"
colorGroupingField="population"
[customize]="customizeLayers">
<dxo-label [enabled]="true" dataField="name"></dxo-label>
</dxi-layer>
<dxi-layer
[dataSource]="markers"
name="markers"
valueField= "user"
elementType="bubble"
dataField="value"
[sizeGroups]="[0, 10000]"
opacity="0.8">
<dxo-label [enabled]="true"></dxo-label>
</dxi-layer>
</dx-vector-map>
</div>
</div>
This is the service map.service.ts
<pre>
import { Injectable } from '@angular/core';
export class FeatureCollection {
type: string;
features: Feature[];
}
export class Feature {
type: string;
properties: FeatureProperty;
geometry: FeatureGeometry;
}
export class FeatureProperty {
text: string;
user: string;
value: number;
// tooltip: 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 = {
...
};
@Injectable({
providedIn: 'root'
})
export class MapService {
...
</pre>
This is finance.component.ts
<pre>
import { Component, OnInit } from '@angular/core';
import { NgModule, 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 '../../../../assets/vectormap-data/world.js';
...
@Component({
...
export class FinanceComponent implements OnInit {
...
constructor(service: MapService) {...}
...
customizeTooltip(arg) {
return {
text: arg.attribute("text"),
};
}
...
ngOnInit() {
}
}
</pre>