Skip to content

Commit fd88f5e

Browse files
dxvladislavvolkovdxvladislavvolkov
authored
Migrate Map demos to the new nested component syntax (#31552)
1 parent 618b430 commit fd88f5e

File tree

15 files changed

+205
-123
lines changed

15 files changed

+205
-123
lines changed

‎apps/demos/Demos/VectorMap/BubbleMarkers/Angular/app/app.component.html‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
<dx-vector-map id="vector-map" [bounds]="[-180, 85, 180, -60]">
2-
<dxo-tooltip
2+
<dxo-vector-map-tooltip
33
[enabled]="true"
44
[customizeTooltip]="customizeTooltip"
5-
></dxo-tooltip>
6-
<dxi-layer [dataSource]="worldMap" [hoverEnabled]="false"></dxi-layer>
7-
<dxi-layer
5+
></dxo-vector-map-tooltip>
6+
<dxi-vector-map-layer
7+
[dataSource]="worldMap"
8+
[hoverEnabled]="false"
9+
></dxi-vector-map-layer>
10+
<dxi-vector-map-layer
811
[dataSource]="markers"
912
[minSize]="20"
1013
[maxSize]="40"
@@ -13,12 +16,15 @@
1316
name="bubbles"
1417
elementType="bubble"
1518
dataField="value"
16-
></dxi-layer>
17-
<dxi-legend
19+
></dxi-vector-map-layer>
20+
<dxi-vector-map-legend
1821
markerShape="circle"
1922
[customizeText]="customizeText"
2023
[customizeItems]="customizeItems"
2124
>
22-
<dxo-source layer="bubbles" grouping="size"></dxo-source>
23-
</dxi-legend>
25+
<dxo-vector-map-source
26+
layer="bubbles"
27+
grouping="size"
28+
></dxo-vector-map-source>
29+
</dxi-vector-map-legend>
2430
</dx-vector-map>

‎apps/demos/Demos/VectorMap/ColorsCustomization/Angular/app/app.component.html‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,13 @@
33
[bounds]="[-180, 85, 180, -60]"
44
(onClick)="click($event)"
55
>
6-
<dxo-tooltip [enabled]="true" [customizeTooltip]="customizeTooltip">
7-
<dxo-font color="#fff"></dxo-font>
8-
<dxo-border [visible]="false"></dxo-border>
9-
</dxo-tooltip>
10-
<dxi-layer [dataSource]="worldMap" [customize]="customizeLayers"> </dxi-layer>
6+
<dxo-vector-map-tooltip
7+
[enabled]="true"
8+
[customizeTooltip]="customizeTooltip"
9+
>
10+
<dxo-vector-map-font color="#fff"></dxo-vector-map-font>
11+
<dxo-vector-map-border [visible]="false"></dxo-vector-map-border>
12+
</dxo-vector-map-tooltip>
13+
<dxi-vector-map-layer [dataSource]="worldMap" [customize]="customizeLayers">
14+
</dxi-vector-map-layer>
1115
</dx-vector-map>

‎apps/demos/Demos/VectorMap/CustomAnnotations/Angular/app/app.component.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
<dx-vector-map id="vector-map" [bounds]="[-118, 55, -80, 23]">
2-
<dxi-layer [dataSource]="usaMap"></dxi-layer>
3-
<dxo-common-annotation-settings type="custom" template="template">
4-
</dxo-common-annotation-settings>
5-
<dxi-annotation
2+
<dxi-vector-map-layer [dataSource]="usaMap"></dxi-vector-map-layer>
3+
<dxo-vector-map-common-annotation-settings type="custom" template="template">
4+
</dxo-vector-map-common-annotation-settings>
5+
<dxi-vector-map-annotation
66
*ngFor="let data of states"
77
[data]="data.data"
88
[offsetX]="data.offsetX"
99
[offsetY]="data.offsetY"
1010
[coordinates]="data.coordinates"
1111
>
12-
</dxi-annotation>
12+
</dxi-vector-map-annotation>
1313
<svg *dxTemplate="let annotation of 'template'" class="annotation">
1414
<image attr.href="{{ getImagePath(annotation) }}" width="60" height="40" />
1515
<rect x="0" y="0" class="border" />

‎apps/demos/Demos/VectorMap/CustomMapData/Angular/app/app.component.html‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,23 @@
11
<dx-vector-map id="map-container" [maxZoomFactor]="2" [projection]="projection">
2-
<dxo-title
2+
<dxo-vector-map-title
33
text="Map of Pangaea"
44
subtitle="with modern continental outlines"
5-
></dxo-title>
6-
<dxo-export [enabled]="true"></dxo-export>
7-
<dxi-layer
5+
></dxo-vector-map-title>
6+
<dxo-vector-map-export [enabled]="true"></dxo-vector-map-export>
7+
<dxi-vector-map-layer
88
[dataSource]="pangaeaBorders"
99
name="pangaea"
1010
[hoverEnabled]="false"
1111
color="#bb7862"
12-
></dxi-layer>
13-
<dxi-layer
12+
></dxi-vector-map-layer>
13+
<dxi-vector-map-layer
1414
[dataSource]="pangaeaContinents"
1515
name="continents"
1616
[customize]="customizeLayer"
1717
>
18-
<dxo-label [enabled]="true" dataField="name"></dxo-label>
19-
</dxi-layer>
18+
<dxo-vector-map-label
19+
[enabled]="true"
20+
dataField="name"
21+
></dxo-vector-map-label>
22+
</dxi-vector-map-layer>
2023
</dx-vector-map>

‎apps/demos/Demos/VectorMap/CustomProjection/Angular/app/app.component.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@
33
[projection]="customProjection"
44
title="Wagner VI projection"
55
>
6-
<dxo-export [enabled]="true"></dxo-export>
7-
<dxi-layer [dataSource]="worldMap"></dxi-layer>
8-
<dxi-layer
6+
<dxo-vector-map-export [enabled]="true"></dxo-vector-map-export>
7+
<dxi-vector-map-layer [dataSource]="worldMap"></dxi-vector-map-layer>
8+
<dxi-vector-map-layer
99
[dataSource]="coordLinesData"
1010
[hoverEnabled]="false"
1111
[borderWidth]="1"
1212
color="#aaa"
13-
></dxi-layer>
13+
></dxi-vector-map-layer>
1414
</dx-vector-map>

‎apps/demos/Demos/VectorMap/DynamicViewport/Angular/app/app.component.html‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,12 @@
55
(onZoomFactorChanged)="zoomChanged($event)"
66
(onCenterChanged)="centerChanged($event)"
77
>
8-
<dxi-layer [dataSource]="worldMap"></dxi-layer>
9-
<dxo-control-bar [panVisible]="pan.value" [zoomVisible]="zoom.value">
10-
</dxo-control-bar>
8+
<dxi-vector-map-layer [dataSource]="worldMap"></dxi-vector-map-layer>
9+
<dxo-vector-map-control-bar
10+
[panVisible]="pan.value"
11+
[zoomVisible]="zoom.value"
12+
>
13+
</dxo-vector-map-control-bar>
1114
</dx-vector-map>
1215
<div class="options">
1316
<div class="caption">Options</div>

‎apps/demos/Demos/VectorMap/FloorPlan/Angular/app/app.component.html‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,22 @@
11
<dx-vector-map id="vector-map" [projection]="projection">
2-
<dxo-tooltip
2+
<dxo-vector-map-tooltip
33
[enabled]="true"
44
[customizeTooltip]="customizeTooltip"
5-
></dxo-tooltip>
6-
<dxi-layer
5+
></dxo-vector-map-tooltip>
6+
<dxi-vector-map-layer
77
[hoverEnabled]="false"
88
[dataSource]="buildingData"
99
name="building"
10-
></dxi-layer>
11-
<dxi-layer
10+
></dxi-vector-map-layer>
11+
<dxi-vector-map-layer
1212
color="transparent"
1313
[dataSource]="roomsData"
1414
name="rooms"
1515
[borderWidth]="1"
1616
>
17-
<dxo-label [enabled]="true" dataField="name"></dxo-label>
18-
</dxi-layer>
17+
<dxo-vector-map-label
18+
[enabled]="true"
19+
dataField="name"
20+
></dxo-vector-map-label>
21+
</dxi-vector-map-layer>
1922
</dx-vector-map>

‎apps/demos/Demos/VectorMap/ImageMarkers/Angular/app/app.component.html‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,21 @@
11
<dx-vector-map id="vector-map" [bounds]="[-118, 52, -80, 20]">
2-
<dxo-loading-indicator [show]="true"></dxo-loading-indicator>
3-
<dxi-layer
2+
<dxo-vector-map-loading-indicator
3+
[show]="true"
4+
></dxo-vector-map-loading-indicator>
5+
<dxi-vector-map-layer
46
[dataSource]="usaMap"
57
borderColor="#ffffff"
68
[hoverEnabled]="false"
7-
></dxi-layer>
8-
<dxi-layer
9+
></dxi-vector-map-layer>
10+
<dxi-vector-map-layer
911
[dataSource]="weather"
1012
dataField="url"
1113
elementType="image"
1214
type="marker"
1315
[size]="51"
1416
>
15-
<dxo-label dataField="text">
16-
<dxo-font [size]="14"></dxo-font>
17-
</dxo-label>
18-
</dxi-layer>
17+
<dxo-vector-map-label dataField="text">
18+
<dxo-vector-map-font [size]="14"></dxo-vector-map-font>
19+
</dxo-vector-map-label>
20+
</dxi-vector-map-layer>
1921
</dx-vector-map>

‎apps/demos/Demos/VectorMap/Legend/Angular/app/app.component.html‎

Lines changed: 23 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,54 @@
11
<dx-vector-map id="vector-map" [bounds]="[-180, 85, 180, -75]">
2-
<dxo-tooltip
2+
<dxo-vector-map-tooltip
33
[enabled]="true"
44
[customizeTooltip]="customizeTooltip"
5-
></dxo-tooltip>
6-
<dxi-layer
5+
></dxo-vector-map-tooltip>
6+
<dxi-vector-map-layer
77
[dataSource]="worldMap"
88
name="areas"
99
palette="Violet"
1010
[colorGroups]="[0, 0.5, 0.8, 1, 2, 3, 100]"
1111
colorGroupingField="population"
1212
[customize]="customizeLayers"
1313
>
14-
<dxo-label [enabled]="true" dataField="name"></dxo-label>
15-
</dxi-layer>
16-
<dxi-layer
14+
<dxo-vector-map-label
15+
[enabled]="true"
16+
dataField="name"
17+
></dxo-vector-map-label>
18+
</dxi-vector-map-layer>
19+
<dxi-vector-map-layer
1720
[dataSource]="markers"
1821
name="markers"
1922
elementType="bubble"
2023
dataField="value"
2124
[sizeGroups]="[0, 8000, 10000, 50000]"
2225
opacity="0.8"
2326
>
24-
<dxo-label [enabled]="false"></dxo-label>
25-
</dxi-layer>
26-
<dxi-legend
27+
<dxo-vector-map-label [enabled]="false"></dxo-vector-map-label>
28+
</dxi-vector-map-layer>
29+
<dxi-vector-map-legend
2730
title="World Population<br/>Percentages"
2831
horizontalAlignment="left"
2932
verticalAlignment="bottom"
3033
[customizeItems]="customizeItems"
3134
[customizeText]="customizeText"
3235
>
33-
<dxo-source layer="areas" grouping="color"></dxo-source>
34-
</dxi-legend>
35-
<dxi-legend
36+
<dxo-vector-map-source
37+
layer="areas"
38+
grouping="color"
39+
></dxo-vector-map-source>
40+
</dxi-vector-map-legend>
41+
<dxi-vector-map-legend
3642
title="City Population"
3743
markerShape="circle"
3844
horizontalAlignment="right"
3945
verticalAlignment="bottom"
4046
[customizeItems]="customizeItems"
4147
[customizeText]="customizeMarkers"
4248
>
43-
<dxo-source layer="markers" grouping="size"></dxo-source>
44-
</dxi-legend>
49+
<dxo-vector-map-source
50+
layer="markers"
51+
grouping="size"
52+
></dxo-vector-map-source>
53+
</dxi-vector-map-legend>
4554
</dx-vector-map>

‎apps/demos/Demos/VectorMap/MultipleLayers/Angular/app/app.component.html‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,29 @@
44
[maxZoomFactor]="3"
55
title="Sea Currents"
66
>
7-
<dxo-export [enabled]="true"></dxo-export>
8-
<dxi-layer [dataSource]="worldMap" [hoverEnabled]="false"></dxi-layer>
9-
<dxi-layer
7+
<dxo-vector-map-export [enabled]="true"></dxo-vector-map-export>
8+
<dxi-vector-map-layer
9+
[dataSource]="worldMap"
10+
[hoverEnabled]="false"
11+
></dxi-vector-map-layer>
12+
<dxi-vector-map-layer
1013
name="water"
1114
[dataSource]="streamsData"
1215
colorGroupingField="tag"
1316
[colorGroups]="[0, 1, 2]"
1417
[palette]="['#3c20c8', '#d82020']"
1518
borderColor="none"
1619
[hoverEnabled]="false"
17-
></dxi-layer>
18-
<dxi-legend
20+
></dxi-vector-map-layer>
21+
<dxi-vector-map-legend
1922
horizontalAlignment="right"
2023
verticalAlignment="top"
2124
[customizeText]="customizeText"
2225
>
23-
<dxo-font [size]="14"></dxo-font>
24-
<dxo-source layer="water" grouping="color"></dxo-source>
25-
</dxi-legend>
26+
<dxo-vector-map-font [size]="14"></dxo-vector-map-font>
27+
<dxo-vector-map-source
28+
layer="water"
29+
grouping="color"
30+
></dxo-vector-map-source>
31+
</dxi-vector-map-legend>
2632
</dx-vector-map>

0 commit comments

Comments
 (0)