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 { 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();
}
customizeTooltip(arg) {
return {
text: arg.attribute("text"),
};
}
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;
}
export class FeatureGeometry {
type: string;
coordinates: number[];
}
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,
}
}
})
};
@Injectable({
providedIn: 'root'
})
export class MapService {
getMarkers(): FeatureCollection {
return markers;
}
constructor() { }
}