<dx-vector-map
id="map-container"
[maxZoomFactor]="2"
[projection]="projection">
<dxo-title
text="Map of Pangaea"
subtitle="with modern continental outlines"></dxo-title>
<dxo-export [enabled]="true"></dxo-export>
<dxi-layer
[dataSource]="pangaeaBorders"
name="pangaea"
[hoverEnabled]="false"
color="#bb7862"></dxi-layer>
<dxi-layer
[dataSource]="pangaeaContinents"
name="continents"
[customize]="customizeLayer">
<dxo-label [enabled]="true" dataField="name"></dxo-label>
</dxi-layer>
</dx-vector-map>
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(function (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[][][];
}
let 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]
]
]
}
}]
};
let 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/
System.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@3.5.3/lib/typescript.js',
'@angular': 'npm:@angular',
'tslib': 'npm:tslib@2.0.3/tslib.js',
'rxjs': 'npm:rxjs@6.3.3',
'devextreme/dist/js/vectormap-data': 'js/vectormap-data',
'rrule': 'npm:rrule@2.6.6/dist/es5/rrule.js',
'luxon': 'npm:luxon@1.25.0/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign@1.1.0',
'devextreme': 'npm:devextreme@20.2.4',
'jszip': 'npm:jszip@3.5.0/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@0.9.7/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.0.5',
'devexpress-gantt': 'npm:devexpress-gantt@2.0.8',
'devextreme-angular': 'npm:devextreme-angular@20.2.4',
'preact': 'npm:preact@10.5.7/dist/preact.js',
'preact/hooks': 'npm:preact@10.5.7/hooks/dist/hooks.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:@angular/*/package.json",
"npm:@angular/common/*/package.json",
"npm:rxjs/package.json",
"npm:rxjs/operators/package.json",
"npm:devextreme-angular/*/package.json",
"npm:devextreme-angular/ui/*/package.json",
"npm:devextreme-angular/package.json",
"npm:devexpress-diagram/package.json",
"npm:devexpress-gantt/package.json",
]
});
<!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/20.2.4/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.4/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.10.2/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>