daily pastebin goal
55%
SHARE
TWEET

Untitled

a guest Jun 14th, 2018 54 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. This is what i have tried
  2.  
  3.     <div class="dx-viewport">
  4. <div class="demo-container">
  5.     <dx-vector-map
  6.     id="vector-map"
  7.     [bounds]="[-180, 85, 180, -75]">
  8.     <dxo-tooltip
  9.         [enabled]="true"
  10.         [customizeTooltip]="customizeTooltip"></dxo-tooltip>
  11.     <dxi-layer
  12.         [dataSource]="worldMap"
  13.         name="areas"
  14.         palette="Violet"
  15.         [colorGroups]="[100]"
  16.         colorGroupingField="population"
  17.         [customize]="customizeLayers">
  18.         <dxo-label [enabled]="true" dataField="name"></dxo-label>
  19.     </dxi-layer>
  20.     <dxi-layer
  21.         [dataSource]="markers"
  22.         name="markers"
  23.         valueField= "user"
  24.         elementType="bubble"
  25.         dataField="value"
  26.         [sizeGroups]="[0, 10000]"
  27.         opacity="0.8">
  28.         <dxo-label [enabled]="true"></dxo-label>
  29.     </dxi-layer>
  30.  
  31.  
  32. </dx-vector-map>
  33.  
  34. </div>
  35. </div>
  36.  
  37.  
  38.  
  39.  
  40.  
  41. This is the service map.service.ts
  42. <pre>
  43.  import { Injectable } from '@angular/core';
  44.  
  45.  
  46.  export class FeatureCollection {
  47.   type: string;
  48.   features: Feature[];
  49. }
  50.  
  51.     export class Feature {
  52.    type: string;
  53.   properties: FeatureProperty;
  54.   geometry: FeatureGeometry;
  55. }
  56.  
  57. export class FeatureProperty {
  58.   text: string;
  59.   user: string;
  60.   value: number;
  61.    // tooltip: string;
  62. }
  63.  
  64. export class FeatureGeometry {
  65.   type: string;
  66.   coordinates: number[];
  67. }
  68.  
  69. // let populations: Object = {
  70. //     "China": 19,
  71. //     "India": 17.4,
  72. //     "United States": 4.44,
  73. //     "Indonesia": 3.45,
  74. //     "Brazil": 2.83,
  75. //     "Nigeria": 2.42,
  76. //     "Bangladesh": 2.18,
  77. //     "Russia": 2.04,
  78. //     "Japan": 1.77,
  79. //     "Mexico": 1.67,
  80. //     "Philippines": 1.39,
  81. //     "Vietnam": 1.25,
  82. //     "Ethiopia": 1.23,
  83. //     "Egypt": 1.21,
  84. //     "Germany": 1.13,
  85. //     "Turkey": 1.07,
  86. //     "Democratic Republic of the Congo": 0.94,
  87. //     "France": 0.92,
  88. //     "Thailand": 0.9,
  89. //     "United Kingdom": 0.89,
  90. //     "Italy": 0.85,
  91. //     "Burma": 0.84,
  92. //     "South Africa": 0.74,
  93. //     "South Korea": 0.7,
  94. //     "Colombia": 0.66,
  95. //     "Spain": 0.65,
  96. //     "Tanzania": 0.63,
  97. //     "Kenya": 0.62,
  98. //     "Ukraine": 0.6,
  99. //     "Argentina": 0.59,
  100. //     "Algeria": 0.54,
  101. //     "Poland": 0.54,
  102. //     "Sudan": 0.52,
  103. //     "Canada": 0.49,
  104. //     "Uganda": 0.49,
  105. //     "Morocco": 0.46,
  106. //     "Uzbekistan": 0.43
  107. // };
  108.  
  109.  
  110.  
  111. let markers: FeatureCollection = {
  112.   type: "FeatureCollection",
  113.   features: [
  114.   {
  115.       coordinates: [-74, 40.7],
  116.       user:"0",
  117.       text: "New York City",
  118.       value: 8406 ,
  119.  
  120.  
  121.   },
  122.   {
  123.       coordinates: [100.47, 13.75],
  124.       user:"1",
  125.       text: "Bangkok",
  126.       value: 8281
  127.   },
  128.   {
  129.       coordinates: [44.43, 33.33],
  130.       user:"1",
  131.       text: "Baghdad",
  132.       value: 7181
  133.   },
  134.   {
  135.       coordinates: [37.62, 55.75],
  136.       user:"1",
  137.       text: "Moscow",
  138.       value: 12111
  139.   },
  140.   {
  141.       coordinates: [121.5, 31.2],
  142.       user:"1",
  143.       text: "Shanghai",
  144.       value: 24150
  145.   },
  146.   {
  147.       coordinates: [-43.18, -22.9],
  148.       user:"1",
  149.       text: "Rio de Janeiro",
  150.       value: 6429
  151.   },
  152.   {
  153.       coordinates: [31.23, 30.05],
  154.       user:"1",
  155.       text: "Cairo",
  156.       value: 8922
  157.   },
  158.   {
  159.       coordinates: [28.95, 41],
  160.       user:"1",
  161.       text: "Istanbul",
  162.       value: 14160
  163.   },
  164.   {
  165.       coordinates: [127, 37.55],
  166.       user:"1",
  167.       text: "Seoul",
  168.       value: 10388
  169.   },
  170.   {
  171.       coordinates: [139.68, 35.68],
  172.       user:"1",
  173.       text: "Tokyo",
  174.       value: 9071
  175.   },
  176.   {
  177.       coordinates: [103.83, 1.28],
  178.       user:"1",
  179.       text: "Singapore",
  180.       value: 5399
  181.   },
  182.  
  183.   ].map(function (data) {
  184.   return {
  185.       type: "Feature",
  186.       geometry: {
  187.           type: "Point",
  188.           coordinates: data.coordinates
  189.       },
  190.       properties: {
  191.           text: data.text,
  192.           user: data.user,
  193.           value: data.value,
  194.        // tooltip: "<b>" + data.text + "</b>n" + data.value + "K"
  195.       }
  196.   }
  197.   })
  198. };
  199.  
  200. @Injectable({
  201.   providedIn: 'root'
  202. })
  203.      export class MapService {
  204.     // getPopulations(): Object {
  205.     //     return populations;
  206.     // }
  207.  
  208.  
  209.   getMarkers(): FeatureCollection {
  210.     return markers;
  211. }
  212.  
  213.  
  214.  
  215.   constructor() { }
  216. }
  217.  
  218.  
  219. </pre>
  220. This is finance.component.ts
  221.  
  222. <pre>
  223. import { Component, OnInit } from '@angular/core';
  224. import { NgModule, enableProdMode } from '@angular/core';
  225. import { BrowserModule } from '@angular/platform-browser';
  226. import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  227. import { DxVectorMapModule } from 'devextreme-angular';
  228. import * as mapsData from '../../../../assets/vectormap-data/world.js';
  229. //import * as mapsData from                            
  230. '../../../../../node_modules/datamaps/dist/datamaps.world.min.js'
  231. //const mapsData =    
  232. require('../../../../../node_modules/datamaps/dist/datamaps.world.min.js');
  233. import { FeatureCollection, MapService } from './map.service';
  234.  
  235. @Component({
  236. selector: 'app-finance',
  237. templateUrl: './finance.component.html',
  238. providers: [ MapService ],
  239. styleUrls: ['./finance.component.scss']
  240. })
  241.  
  242. export class FinanceComponent implements OnInit {
  243. worldMap: any = mapsData.world;
  244. markers: FeatureCollection;
  245. populations: Object;
  246. captions:Object;
  247.  
  248. constructor(service: MapService) {
  249. this.markers = service.getMarkers();
  250. // this.populations = service.getPopulations();
  251. // this.customizeLayers = this.customizeLayers.bind(this);
  252. }
  253.  
  254. // customizeText(arg) {
  255. // if(arg.index === 0) {
  256. // return "< 0.5%";
  257. // } else if (arg.index === 5) {
  258. // return "> 3%";
  259. // } else {
  260. // return arg.start + "% to " + arg.end + "%";
  261. // }
  262. // }
  263.  
  264. customizeTooltip(arg) {
  265. return {
  266. text: arg.attribute("text"),
  267. };
  268. }
  269. // customizeLayers(elements) {
  270. // elements.forEach((element) => {
  271. // let name = element.attribute("name"),
  272. // population = this.populations[name];
  273. // if (population) {
  274. // element.attribute("population", population);
  275. // }
  276. // });
  277. // }
  278.  
  279. // customizeTooltip(arg) {
  280. // if(arg.layer.type === "marker") {
  281. // return {
  282. // text: arg.attribute("tooltip")
  283. // };
  284. // }
  285. // }
  286.  
  287.  
  288. // customizeMarkers(arg) {
  289. // return ["< 8000K", "8000K to 10000K", "> 10000K"][arg.index];
  290. // }
  291. ngOnInit() {
  292. }
  293. }
  294.  
  295.  
  296. </pre>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top