This is what i have 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 = {
  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: "<b>" + data.text + "</b>n" + data.value + "K"
      }
  }
  })
};

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


  getMarkers(): FeatureCollection {
    return markers;
}



  constructor() { }
}


</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';
//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() {
}
}


</pre>