How to add label/text on bubbles on the vectormap in angular + typescript in devextreme tool

See more:

HTML

DevExpress

Typescript

, +

hi i have integrated the devextreme angular 2 map in my demo project , i want to show say count of people with name x , on the bubble as label/ text , on the vector map , else we can say i dont want to use tooltip , i want to show the label without hovering on particular bubble in the <a href="https://js.devexpress.com/Demos/WidgetsGallery/Demo/VectorMap/BubbleMarkers/jQuery/Light/"><pre>Demos>maps>vectormap>bubble markers

this is what i want

What I have tried:

This is finance.component.html

<pre><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 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';
//import * as mapsData from '../../../../../node_modules/datamaps/dist/datamaps.world.min.js'
//const mapsData = require('../../../../../node_modules/datamaps/dist/datamaps.world.min.js');
import { FeatureCollection, MapService } from './map.service';

@Component({
selector: 'app-finance',
templateUrl: './finance.component.html',
providers: [ MapService ],
styleUrls: ['./finance.component.scss']
})

export class FinanceComponent implements OnInit {
worldMap: any = mapsData.world;
markers: FeatureCollection;
populations: Object;
captions:Object;

constructor(service: MapService) {
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"),
};
}
// customizeLayers(elements) {
// elements.forEach((element) => {
// let name = element.attribute("name"),
// population = this.populations[name];
// if (population) {
// element.attribute("population", population);
// }
// });
// }

// customizeTooltip(arg) {
// if(arg.layer.type === "marker") {
// return {
// text: arg.attribute("tooltip")
// };
// }
// }


// customizeMarkers(arg) {
// return ["< 8000K", "8000K to 10000K", "> 10000K"][arg.index];
// }
ngOnInit() {
}
}

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 = {
  type: "FeatureCollection",
  features: [
      {
          coordinates: [-74, 40.7],
          user:"0",
          text: "New York City",
          value: 8406 ,
          
         
      },
      {
          coordinates: [100.47, 13.75],
          user:"1",
          text: "Bangkok",
          value: 8281
      },
      {
          coordinates: [44.43, 33.33],
          user:"1",
          text: "Baghdad",
          value: 7181
      },
      {
          coordinates: [37.62, 55.75],
          user:"1",
          text: "Moscow",
          value: 12111
      },
      {
          coordinates: [121.5, 31.2],
          user:"1",
          text: "Shanghai",
          value: 24150
      },
      {
          coordinates: [-43.18, -22.9],
          user:"1",
          text: "Rio de Janeiro",
          value: 6429
      },
      {
          coordinates: [31.23, 30.05],
          user:"1",
          text: "Cairo",
          value: 8922
      },
      {
          coordinates: [28.95, 41],
          user:"1",
          text: "Istanbul",
          value: 14160
      },
      {
          coordinates: [127, 37.55],
          user:"1",
          text: "Seoul",
          value: 10388
      },
      {
          coordinates: [139.68, 35.68],
          user:"1",
          text: "Tokyo",
          value: 9071
      },
      {
          coordinates: [103.83, 1.28],
          user:"1",
          text: "Singapore",
          value: 5399
      },
 
  ].map(function (data) {
      return {
          type: "Feature",
          geometry: {
              type: "Point",
              coordinates: data.coordinates
          },
          properties: {
              text: data.text,
              user: data.user,
              value: data.value,
           // tooltip: "" + data.text + "\n" + data.value + "K"
          }
      }
  })
};

@Injectable({
  providedIn: 'root'
})
export class MapService {
    // getPopulations(): Object {
    //     return populations;
    // }


  getMarkers(): FeatureCollection {
    return markers; 
}

 

  constructor() { }
}