Custom Map Data

import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { DxVectorMapModule } from 'devextreme-angular'; import { FeatureCollection, Service } from './app.service'; if (!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', providers: [Service], templateUrl: 'app/app.component.html', styleUrls: ['app/app.component.css'], }) export class AppComponent { pangaeaBorders: FeatureCollection; pangaeaContinents: FeatureCollection; projection: any; constructor(service: Service) { this.pangaeaBorders = service.getPangaeaBorders(); this.pangaeaContinents = service.getPangaeaContinents(); this.projection = { to(coordinates) { return [coordinates[0] / 100, coordinates[1] / 100]; }, from(coordinates) { return [coordinates[0] * 100, coordinates[1] * 100]; }, }; } customizeLayer(elements) { elements.forEach((element) => { element.applySettings({ color: element.attribute('color'), }); }); } } @NgModule({ imports: [ BrowserModule, DxVectorMapModule, ], declarations: [AppComponent], bootstrap: [AppComponent], }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule);

::ng-deep #map-container { height: 570px; }

import { Injectable } from '@angular/core'; export class FeatureCollection { type: string; features: Feature[]; } export class Feature { type: string; properties: FeatureProperty; geometry: FeatureGeometry; } export class FeatureProperty { name: string; color?: string; } export class FeatureGeometry { type: string; coordinates: number[][][]; } const pangaeaBorders: FeatureCollection = { type: 'FeatureCollection', features: [{ type: 'Feature', properties: { name: 'Pangaea', }, geometry: { type: 'Polygon', coordinates: [ [ [-28, 86.33], [-28, 88], [-27.33, 89.67], [-25.67, 91.67], [-21.33, 93.67], [-15, 95.67], [-7.67, 98.67], [-4.67, 99.33], [-1, 99.33], [4.67, 99], [9.33, 97.33], [13.33, 96], [19, 96], [25.33, 95], [29.33, 93], [34.67, 91.67], [41.67, 89.33], [45.33, 88.67], [48.67, 85.67], [52, 82.33], [55.67, 79.67], [60.67, 75.67], [64, 71.67], [64.67, 70.67], [65.67, 68.33], [66.33, 67.33], [67, 66.33], [69, 65], [72, 63.33], [75.33, 61], [78.33, 58.33], [80.33, 56], [81.67, 53], [84, 50], [84.67, 48], [84.67, 46.67], [82.33, 47.67], [81, 48.33], [80.33, 48.33], [79.67, 47.67], [80.33, 45], [82.33, 43.33], [85, 40.67], [87.33, 38.67], [90, 36.67], [92, 35.67], [92, 36.33], [91, 38], [90, 39.67], [93.33, 40], [96.67, 39.67], [97.67, 39], [98.67, 37.67], [99.33, 36.33], [102, 25], [101.67, 23], [99.33, 22], [96.33, 22.67], [93.33, 25], [92, 27], [90.33, 28], [89.33, 30.33], [89.33, 32], [90.33, 32.67], [91.33, 33.33], [89, 35], [84.33, 38], [81.67, 40], [79.33, 41.67], [77.67, 43.33], [75.67, 45], [74, 46.67], [72.67, 49], [70.67, 50], [67.67, 50.67], [64.67, 50.67], [62, 50.33], [59.67, 49.33], [56.67, 46.33], [54.33, 44], [54.33, 41.33], [51.67, 38], [50, 35.67], [48.33, 33.67], [48.33, 32.33], [42.33, 31.33], [37.67, 31.67], [35.67, 32], [30.33, 31], [26.33, 30.33], [22, 31.67], [17, 33.33], [13, 32.67], [11.67, 32], [10, 30], [8, 26.67], [8, 23], [8, 20], [8.67, 19.33], [9.33, 18], [9.33, 15.33], [11.33, 12.67], [12.67, 10.67], [15.33, 8.67], [19, 6], [24, 4.67], [26, 4.67], [37.67, 4.33], [40.67, 1.67], [40.67, 0.33], [40.33, -1.33], [40.67, -3], [41.67, -4.33], [41.67, -5.33], [40.33, -6.67], [39, -9.33], [38, -10.67], [37.33, -14], [38.67, -17], [42.33, -18.67], [44.33, -19], [47, -19], [48.67, -18.67], [50.33, -19.67], [50.33, -21], [48, -21.33], [47, -22.67], [46, -24.33], [45, -26.33], [46.33, -26.67], [49, -27.67], [51, -28], [53.33, -30.33], [54.33, -33.67], [55, -34.67], [53.67, -36.33], [52, -40.33], [51.33, -42.33], [52, -43.67], [54, -45.33], [54.33, -46], [54.67, -47.33], [55, -48.67], [57.33, -50], [60, -51.33], [62, -52.33], [64.33, -53.67], [64.67, -54], [65.33, -55.67], [66.67, -57.33], [68, -58.33], [69.33, -58], [71, -57.67], [71.67, -59.67], [72.67, -62], [73, -64.33], [73, -66.33], [72.33, -68.67], [71.67, -70], [71, -71.33], [71.67, -73.67], [72.67, -75], [72.67, -77], [71.33, -80], [68.67, -81.67], [65.67, -84.67], [64.33, -85.67], [60.67, -88], [58, -89.67], [55.67, -91], [52.33, -92], [49, -92.67], [47.67, -93.67], [46, -94.67], [44, -96], [39, -96.67], [37.33, -96.67], [34.67, -97], [32, -97.67], [32.33, -98.67], [28.67, -99.67], [23.67, -99.33], [21.67, -99.33], [22.33, -97.33], [22, -96.33], [21, -95.67], [19.67, -95.33], [18.67, -94.67], [17.67, -94], [18.67, -92.67], [19.67, -91], [19.67, -89.67], [19.67, -87.67], [15, -89.33], [12.33, -89.33], [9, -88.67], [4.33, -86.67], [-0.67, -85], [-4, -83.67], [-3.67, -82], [-2, -78.33], [-4.33, -78.33], [-7.33, -75.33], [-8.67, -74], [-11, -73], [-13, -73.33], [-15, -73.33], [-17.33, -74.67], [-15.67, -76.67], [-14.67, -77.33], [-14.67, -78.33], [-16.33, -79], [-18.67, -80], [-20.33, -79.67], [-26, -73], [-33, -66.67], [-33.33, -61.67], [-33.33, -57.33], [-33.33, -55], [-33.67, -52.67], [-35, -50.67], [-37.33, -48.33], [-39.67, -46.67], [-42.33, -45], [-43, -44.67], [-45, -44], [-46.33, -42.33], [-46.67, -41.67], [-49, -41], [-50.33, -41], [-51.67, -40.67], [-52, -39], [-52.33, -38], [-52.67, -37.33], [-53.33, -36.67], [-54.67, -36], [-56.33, -36], [-57, -35.67], [-57.67, -34.67], [-57.67, -33.33], [-57, -31.67], [-56.67, -29.67], [-56.33, -29.33], [-56.67, -27.33], [-57.33, -25.67], [-57.67, -24.33], [-56.33, -23.67], [-55.33, -23], [-55, -21.67], [-55.67, -19.33], [-57, -18.33], [-60.33, -18.33], [-62.33, -17], [-63.33, -16.33], [-62, -15], [-58.67, -15.33], [-56.33, -15], [-53.33, -13.67], [-51.67, -11.33], [-51.33, -10.67], [-52, -8.33], [-53.33, -5.33], [-55.67, -3.67], [-58.33, -2.67], [-59.67, -2.67], [-60.67, -1.67], [-61, 0], [-60.33, 0.67], [-59.33, 3], [-59.33, 4.33], [-59.33, 6.33], [-60.33, 10], [-62, 12], [-63.67, 14], [-64, 15], [-63, 18.67], [-61.67, 21.67], [-60, 25.67], [-57.33, 32], [-55.67, 35.67], [-55, 38.33], [-54, 42], [-54.33, 44], [-54.33, 45], [-54, 46.33], [-53.67, 47.67], [-55, 48.67], [-57, 49.67], [-59.33, 50], [-61.33, 51], [-62.67, 51.33], [-63.33, 52.33], [-61.67, 54], [-61.67, 56.67], [-60, 58], [-57.33, 60], [-55.67, 61.67], [-52, 61.67], [-50.33, 63.67], [-45.67, 63], [-42.67, 62.67], [-40.67, 62.33], [-39.33, 64], [-37.67, 66], [-36.67, 67], [-35, 67.33], [-32, 67], [-30.33, 66], [-27.67, 64], [-25.33, 63.33], [-23.33, 63.67], [-21.33, 64], [-19.33, 64.33], [-17, 63.67], [-14.67, 62.33], [-12.33, 61], [-9.33, 61], [-8.33, 63.67], [-9, 67], [-10.33, 70.33], [-14, 73], [-15.33, 73], [-16.67, 74], [-17, 76], [-18.67, 78.33], [-20.67, 79], [-22.67, 79], [-25.67, 79], [-28.67, 78], [-30.33, 77], [-31.67, 76], [-33.33, 77], [-34.67, 79.67], [-34, 81], [-32.67, 82], [-32, 83.67], [-32.67, 85.67], [-32.67, 86.67], [-31, 87], [-28.33, 86.67], ], ], }, }], }; const pangaeaContinents: FeatureCollection = { type: 'FeatureCollection', features: [{ type: 'Feature', properties: { name: 'Eurasia', color: '#70b3a1', }, geometry: { type: 'Polygon', coordinates: [ [ [-28.33, 86.67], [-27.33, 85], [-26.33, 84.33], [-24.33, 83.67], [-22.67, 84], [-21.33, 85], [-20.33, 86.33], [-18.33, 86.33], [-15.67, 86.33], [-13, 86.67], [-10.33, 86.67], [-7, 86.33], [-3.67, 86.67], [-2, 87.67], [-0.67, 88.67], [-2, 88.67], [-3.33, 89], [-5.67, 90.33], [-7, 91.33], [-5.67, 92.33], [-2, 93.33], [2, 93.33], [7.67, 92.67], [10.67, 92.67], [16.33, 92], [20.33, 92], [24.67, 92], [26.67, 92], [27.67, 91.33], [28, 90.33], [27, 89.33], [26.67, 88], [27.33, 86.67], [29, 85.67], [37.33, 85.67], [38.67, 84.33], [41.33, 83], [42, 84.33], [43.33, 84.33], [47.33, 82], [50.67, 80.33], [55.67, 79.67], [60.67, 75.67], [64, 71.67], [64.67, 70.67], [65.67, 68.33], [66.33, 67.33], [67, 66.33], [69, 65], [72, 63.33], [75.33, 61], [78.33, 58.33], [80.33, 56], [81.67, 53], [84, 50], [84.67, 48], [84.67, 46.67], [82.33, 47.67], [81, 48.33], [80.33, 48.33], [79.67, 47.67], [80.33, 45], [82.33, 43.33], [85, 40.67], [87.33, 38.67], [90, 36.67], [92, 35.67], [92, 36.33], [91, 38], [90, 39.67], [93.33, 40], [96.67, 39.67], [97.67, 39], [98.67, 37.67], [99.33, 36.33], [102, 25], [101.67, 23], [99.33, 22], [96.33, 22.67], [93.33, 25], [92, 27], [90.33, 28], [89.33, 30.33], [89.33, 32], [90.33, 32.67], [91.33, 33.33], [89, 35], [84.33, 38], [81.67, 40], [79.33, 41.67], [77.67, 43.33], [75.67, 45], [74, 46.67], [72.67, 49], [70.67, 50], [67.67, 50.67], [64.67, 50.67], [62, 50.33], [59.67, 49.33], [56.67, 46.33], [54.33, 44], [54.33, 41.33], [51.67, 38], [50, 35.67], [48.33, 33.67], [48.33, 32.33], [42.33, 31.33], [37.67, 31.67], [35.67, 32], [30.33, 31], [26.33, 30.33], [22, 31.67], [17, 33.33], [13, 33], [13.67, 34.67], [15, 37.67], [15.33, 40], [14.33, 41.33], [11.67, 41.67], [8.67, 43.33], [8, 45], [6, 44.67], [6.67, 41.67], [7.67, 39.33], [8.33, 35.67], [9, 32.33], [9.33, 29.67], [7.67, 32.67], [6, 34.67], [3.67, 36], [2.33, 36.33], [1.67, 37.33], [1.67, 39], [2.33, 40.33], [2.33, 42.67], [2, 44.67], [2, 46.33], [2, 47.33], [3, 48.33], [4, 49.33], [6.33, 49.33], [7.67, 49.67], [9, 50], [8.67, 49], [8.67, 47.67], [10.67, 47.67], [13, 47.67], [15.33, 48.33], [17, 49.33], [14, 50.67], [12.33, 51.67], [12, 52.33], [12, 54], [12, 55.33], [9, 55.33], [6.33, 56], [4, 56.67], [2.33, 57.67], [3, 58.67], [2.67, 60.67], [4.67, 59.33], [6, 58.33], [7.67, 57.33], [9.67, 56.33], [11.67, 56.33], [12, 57.33], [11.67, 58.67], [11.67, 59.67], [12.67, 60], [14.33, 61], [13.33, 62.67], [11.67, 63.33], [10.33, 63.33], [7.67, 63.67], [7.67, 65], [6, 66], [3, 67], [-0.33, 67.67], [-2.33, 67.67], [-5, 68.67], [-3.67, 69.67], [-0.67, 71.33], [-0.67, 73], [-2.33, 74], [-4.67, 75], [-5.33, 75.33], [-5.67, 77], [-6.33, 78], [-8.67, 78], [-11.33, 77.33], [-17, 76], [-18.67, 78.33], [-20.67, 79], [-22.67, 79], [-25.67, 79], [-28.67, 78], [-30.33, 77], [-31.67, 76], [-33.33, 77], [-34.67, 79.67], [-34, 81], [-32.67, 82], [-32, 83.67], [-32.67, 85.67], [-32.67, 86.67], [-31, 87], [-28.33, 86.67], ], ], }, }, { type: 'Feature', properties: { name: 'Australia', color: '#bb626a', }, geometry: { type: 'Polygon', coordinates: [ [ [64.67, -54], [65.33, -55.67], [66.67, -57.33], [68, -58.33], [69.33, -58], [71, -57.67], [71.67, -59.67], [72.67, -62], [73, -64.33], [73, -66.33], [72.33, -68.67], [71.67, -70], [71, -71.33], [72, -74], [70, -74.33], [67.33, -76], [64, -79.67], [61, -82.67], [64.67, -85.33], [64.67, -85.67], [60.67, -88], [58, -89.67], [55.67, -91], [52.33, -92], [49, -92.67], [47.67, -93.67], [46, -94.67], [44, -96], [39, -96.67], [37.33, -96.67], [34.67, -97], [32, -97.67], [31.33, -96], [31, -95], [31.33, -93.67], [32.33, -91.67], [33.33, -91], [33.33, -90], [36, -87.33], [39, -85], [42, -81.67], [45.33, -79.33], [47.67, -78], [49.67, -75], [50.33, -72.33], [50.33, -68.67], [50.33, -66], [51, -63.67], [55.33, -60.33], [58.67, -57.33], [61.33, -55], ], ], }, }, { type: 'Feature', properties: { name: 'Antarctica', color: '#057d85', }, geometry: { type: 'Polygon', coordinates: [ [ [50.33, -66], [50.33, -68.67], [50.33, -72.33], [49.67, -75], [47.67, -78], [45.33, -79.33], [42, -81.67], [39, -85], [36, -87.33], [33.33, -90], [32.67, -89.33], [30.33, -87.67], [28.67, -86.67], [27, -84.67], [23.67, -84.33], [19.33, -87.33], [19.67, -87.67], [15, -89.33], [12.33, -89.33], [9, -88.67], [4.33, -86.67], [-0.67, -85], [-4, -83.67], [-3.67, -82], [-2, -78.33], [-4.33, -78.33], [-7.33, -75.33], [-8.67, -74], [-10.33, -71.67], [-7.67, -71.67], [-4.33, -71.67], [-0.67, -72.33], [1.67, -73], [3.67, -73.33], [5.33, -73.33], [6.33, -72.67], [7, -70.33], [7.33, -66.67], [8, -63.33], [9, -61], [10.67, -58.67], [14.33, -57], [19.33, -54.67], [24.33, -53.67], [29.67, -52.33], [34.33, -51], [35.33, -51], [36.67, -51], [38, -51.67], [39.33, -53.67], [39.67, -55.33], [39.67, -56.67], [40.33, -58.33], [42, -58.33], [44.33, -58], [47, -58.33], [49.33, -59.33], [50.67, -61.33], [51, -62], ], ], }, }, { type: 'Feature', properties: { name: 'Africa', color: '#ab394b', }, geometry: { type: 'Polygon', coordinates: [ [ [7.67, -61.67], [3.33, -61.67], [0.67, -63.67], [-2, -65], [-5.33, -65.67], [-9.33, -66], [-12, -65.33], [-13.33, -64.33], [-13.67, -63.33], [-13.67, -62.33], [-12.33, -61.33], [-11, -58.67], [-10.33, -56.67], [-10, -54.67], [-10, -53], [-10.33, -50], [-11, -48], [-11.33, -47], [-11.33, -46.33], [-11.33, -45.33], [-9.33, -43.67], [-7, -41], [-5, -38.67], [-4.33, -37], [-3.67, -35.33], [-3.67, -33.33], [-4, -31.67], [-4.33, -30], [-3.67, -28.33], [-3.33, -26.33], [-3, -25.33], [-3.67, -23.67], [-5, -22.67], [-7, -21], [-8, -19.33], [-9.33, -17], [-9.67, -15.67], [-11, -14.33], [-14, -13.67], [-16.67, -14], [-20.33, -12.67], [-21.33, -11.33], [-22.33, -7.33], [-24.33, -3.33], [-24.67, -0.67], [-23.33, 2], [-21, 5.33], [-18.33, 6.33], [-15.33, 8], [-11.67, 10.33], [-8.67, 12.33], [-5.33, 13], [-2, 13], [0, 12.67], [2.67, 11.33], [5, 10.33], [8, 9.33], [9.67, 8.67], [10.33, 7.67], [10, 6.67], [8.67, 5.67], [9.67, 4.33], [11.33, 2.33], [13, 0.67], [15.33, 0], [16.67, 0], [16.67, 1.67], [17.67, 1.33], [19, 0.33], [21, -1], [23.33, -1.67], [25.67, -1.67], [28.33, -2], [27.67, -3.67], [27.33, -5.67], [27, -8.33], [28, -11], [29, -14.33], [30.67, -19], [33, -25.67], [33, -26.33], [33.67, -27.33], [34.67, -28.33], [35.67, -28.33], [36.67, -28.33], [38.67, -28], [40, -28], [41, -28.33], [40.67, -30], [39, -32.67], [36.67, -34.67], [34.67, -36], [31.67, -38], [27.67, -39.33], [24.67, -42], [23.33, -43.33], [22.33, -45.33], [21.67, -47.33], [22, -48.67], [21.67, -50.67], [19.33, -52.33], [16, -55], [14.33, -57], [10.67, -58.67], [9, -61], [8, -63.33], ], ], }, }, { type: 'Feature', properties: { name: 'South America', color: '#dac599', }, geometry: { type: 'Polygon', coordinates: [ [ [-51.33, -10.67], [-46.67, -10.67], [-43, -11.33], [-35.33, -12.67], [-35.33, -14.33], [-34.67, -15], [-32.67, -15], [-29, -15.67], [-27, -17.33], [-25.33, -19], [-24.33, -19.67], [-21.67, -20], [-17.67, -20.33], [-13.33, -20.33], [-11, -22], [-9.33, -24.33], [-8.67, -27], [-9, -29.33], [-10, -31.33], [-10.33, -33.67], [-10.33, -36.33], [-11, -39], [-13.33, -42.67], [-15.33, -45], [-16.33, -47.33], [-16.67, -50.33], [-17.33, -53], [-17, -54], [-17.67, -55], [-19.33, -56], [-20.33, -57], [-20.67, -57.67], [-20, -60], [-19, -61.33], [-20.33, -62.67], [-22, -64], [-22, -65.67], [-21.67, -67], [-21.33, -67.33], [-22.33, -68], [-22.67, -69], [-21.67, -70], [-20, -72], [-19.33, -74], [-17.33, -74.67], [-15.67, -76.67], [-14.67, -77.33], [-14.67, -78.33], [-16.33, -79], [-18.67, -80], [-20.33, -79.67], [-26, -73], [-33, -66.67], [-33.33, -61.67], [-33.33, -57.33], [-33.33, -55], [-33.67, -52.67], [-35, -50.67], [-37.33, -48.33], [-39.67, -46.67], [-42.33, -45], [-43, -44.67], [-45, -44], [-46.33, -42.33], [-46.67, -41.67], [-49, -41], [-50.33, -41], [-51.67, -40.67], [-52, -39], [-52.33, -38], [-52.67, -37.33], [-53.33, -36.67], [-54.67, -36], [-56.33, -36], [-57, -35.67], [-57.67, -34.67], [-57.67, -33.33], [-57, -31.67], [-56.67, -29.67], [-56.33, -29.33], [-56.67, -27.33], [-57.33, -25.67], [-57.67, -24.33], [-56.33, -23.67], [-55.33, -23], [-55, -21.67], [-55.67, -19.33], [-57, -18.33], [-60.33, -18.33], [-62.33, -17], [-63.33, -16.33], [-62, -15], [-58.67, -15.33], [-56.33, -15], [-53.33, -13.67], [-51.67, -11.33], ], ], }, }, { type: 'Feature', properties: { name: 'North America', color: '#153459', }, geometry: { type: 'Polygon', coordinates: [ [ [-57.67, 50], [-57, 52], [-56.67, 53], [-57, 54.67], [-56.67, 55.33], [-55.33, 55.67], [-53.67, 56], [-52, 56.33], [-50.67, 57.33], [-49.67, 58.67], [-48.33, 59], [-46.67, 59], [-45.33, 59.67], [-43.67, 60], [-42.33, 59], [-41.67, 57.33], [-42.33, 55.33], [-43, 53.67], [-41.33, 52.67], [-42, 51.67], [-41.33, 50], [-40, 48.67], [-39, 48], [-37.33, 47.67], [-35.33, 50.33], [-34, 47], [-32, 45], [-32.67, 43.33], [-32, 42.67], [-28, 41.67], [-25, 38], [-30.67, 34.33], [-31.67, 33.33], [-32.33, 32], [-32, 30], [-31, 27.67], [-29, 25.67], [-27.67, 24.33], [-26.67, 22.67], [-25, 22.67], [-23, 23.67], [-22, 25.33], [-21.67, 27], [-21.67, 28.67], [-21.33, 30.33], [-20.33, 31.33], [-19.33, 31.67], [-17.33, 31.67], [-15.67, 31], [-14, 29.67], [-12, 27.67], [-10.33, 25], [-9.67, 22.67], [-12.33, 22.33], [-13.33, 21.67], [-14.33, 20.33], [-14.67, 19], [-14, 17], [-17.33, 15.33], [-19, 13.67], [-20, 11], [-22, 10.33], [-24.67, 7.33], [-26.33, 5], [-29, 2.33], [-30.33, 1], [-31, 0], [-29.33, -2], [-29, -3.67], [-31.67, -4], [-32.33, -2.33], [-33.33, -1], [-35, -0.33], [-36.33, -0.33], [-38.67, -3], [-40.67, -3.33], [-43, -3.33], [-44.67, -3.33], [-46, -4.67], [-46.33, -6.33], [-46.67, -8], [-46.33, -10], [-46.67, -10.67], [-51.33, -10.67], [-52, -8.33], [-53.33, -5.33], [-55.67, -3.67], [-58.33, -2.67], [-59.67, -2.67], [-60.67, -1.67], [-61, 0], [-60.33, 0.67], [-59.33, 3], [-59.33, 4.33], [-59.33, 6.33], [-60.33, 10], [-62, 12], [-63.67, 14], [-64, 15], [-63, 18.67], [-61.67, 21.67], [-60, 25.67], [-57.33, 32], [-55.67, 35.67], [-55, 38.33], [-54, 42], [-54.33, 44], [-54.33, 45], [-54, 46.33], [-53.67, 47.67], [-55, 48.67], [-57, 49.67], ], ], }, }, { type: 'Feature', properties: { name: 'India', color: '#b1d2c6', }, geometry: { type: 'Polygon', coordinates: [ [ [44.67, -26.33], [45, -26.33], [46.33, -26.67], [49, -27.67], [51, -28], [53.33, -30.33], [54.33, -33.67], [55, -34.67], [53.67, -36.33], [52, -40.33], [51.33, -42.33], [52, -43.67], [54, -45.33], [54.33, -46], [54.67, -47.33], [55, -48.67], [57.33, -50], [60, -51.33], [62, -52.33], [64, -53.33], [61.33, -55], [58.67, -57.33], [55.33, -60.33], [51, -63.67], [51.33, -62.33], [51, -62], [50.67, -61.33], [49.33, -59.33], [47, -58.33], [47.33, -57.67], [47.67, -57.33], [49, -56], [50.67, -55], [51.67, -54], [49, -53.33], [46.33, -52.67], [42.67, -52.33], [39.67, -53.33], [39.67, -53.67], [38, -51.67], [36.67, -51], [35.33, -51], [34.33, -51], [29.67, -52.33], [28.67, -52.33], [30, -51.33], [31.33, -49], [33.33, -46.33], [35, -43], [37.33, -41], [40, -39.67], [40.67, -39], [41, -38], [40.33, -36.33], [36.67, -34.67], [39, -32.67], [40.67, -30], [41, -28.33], [41.33, -28], ], ], }, }], }; @Injectable() export class Service { getPangaeaBorders(): FeatureCollection { return pangaeaBorders; } getPangaeaContinents(): FeatureCollection { return pangaeaContinents; } }

// In real applications, you should not transpile code in the browser. // You can see how to create your own application with Angular and DevExtreme here: // https://js.devexpress.com/Documentation/Guide/Angular_Components/Getting_Started/Create_a_DevExtreme_Application/ window.config = { transpiler: 'ts', typescriptOptions: { module: 'system', emitDecoratorMetadata: true, experimentalDecorators: true, }, meta: { 'typescript': { 'exports': 'ts', }, 'devextreme/dist/js/vectormap-data/*': { 'esModule': true, }, 'devextreme/localization.js': { 'esModule': true, }, }, paths: { 'npm:': 'https://unpkg.com/', }, map: { 'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js', 'typescript': 'npm:typescript@4.3.5/lib/typescript.js', '@angular/core': 'npm:@angular/core@12.2.16', '@angular/platform-browser': 'npm:@angular/platform-browser@12.2.16', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@12.2.16', '@angular/forms': 'npm:@angular/forms@12.2.16', '@angular/common': 'npm:@angular/common@12.2.16', '@angular/compiler': 'npm:@angular/compiler@12.2.16', 'tslib': 'npm:tslib@2.3.1/tslib.js', 'rxjs': 'npm:rxjs@6.4.0', 'devextreme/dist/js/vectormap-data': 'js/vectormap-data', 'rrule': 'npm:rrule@2.6.6/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.0/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@21.2.7/cjs', 'devextreme/bundles/dx.all': 'npm:devextreme@21.2.7/bundles/dx.all.js', 'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.5.14/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.1.47', 'devexpress-gantt': 'npm:devexpress-gantt@4.0.13', 'devextreme-angular': 'npm:devextreme-angular@21.2.7', '@devextreme/runtime': 'npm:@devextreme/runtime@2.3.14', 'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat@7.4.11/dist/inferno-compat.min.js', 'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js', 'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js', 'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js', 'inferno-clone-vnode': 'npm:inferno-clone-vnode@7.4.11/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class@7.4.11/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras@7.4.11/dist/inferno-extras.min.js', }, packages: { 'app': { main: './app.component.ts', defaultExtension: 'ts', }, 'devextreme': { defaultExtension: 'js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/events': { main: 'index', }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js', }, }, packageConfigPaths: [ 'npm:@devextreme/*/package.json', 'npm:@devextreme/runtime@2.3.14/inferno/package.json', 'npm:@angular/*/package.json', 'npm:@angular/common@12.2.16/*/package.json', 'npm:rxjs@6.4.0/package.json', 'npm:rxjs@6.4.0/operators/package.json', 'npm:devextreme-angular@21.2.7/*/package.json', 'npm:devextreme-angular@21.2.7/ui/*/package.json', 'npm:devextreme-angular@21.2.7/package.json', 'npm:devexpress-diagram@2.1.47/package.json', 'npm:devexpress-gantt@4.0.13/package.json', ], }; System.config(window.config);

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.2.7/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.2.7/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/zone.js@0.11.4/dist/zone.js"></script> <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script src="config.js"></script> <script> System.import("app").catch(console.error.bind(console)); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> </body> </html>