Skip to content

Commit 83d5e8a

Browse files
author
Savina Shen (Manpower Services Taiwan Co Ltd)
committed
add polygon extrusion layer example
1 parent 1d102ed commit 83d5e8a

File tree

23 files changed

+397
-287
lines changed

23 files changed

+397
-287
lines changed

‎Events/MapEvents.mdx‎

Whitespace-only changes.

‎Events/MapEvents.stories.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+

‎Events/MapEvents.tsx‎

Whitespace-only changes.

‎src/stories/BasicUsage/MapControls/MapControl.mdx‎

Lines changed: 54 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -19,18 +19,16 @@ import {
1919
} from 'react-azure-maps';
2020
2121
<AzureMapsProvider>
22-
<div className="defaultMap">
23-
<AzureMap
24-
options={your_options}
25-
controls={[
26-
{
27-
controlName: 'StyleControl',
28-
controlOptions: { mapStyles: 'all' },
29-
options: { position: 'top-right' } as ControlOptions,
30-
},
31-
]}
32-
/>
33-
</div>
22+
<AzureMap
23+
options={your_options}
24+
controls={[
25+
{
26+
controlName: 'StyleControl',
27+
controlOptions: { mapStyles: 'all' },
28+
options: { position: 'top-right' } as ControlOptions,
29+
},
30+
]}
31+
/>
3432
</AzureMapsProvider>;
3533
`}/>
3634

@@ -45,17 +43,15 @@ import {
4543
} from 'react-azure-maps';
4644
4745
<AzureMapsProvider>
48-
<div className="defaultMap">
49-
<AzureMap
50-
options={your_options}
51-
controls={[
52-
{
53-
controlName: 'ZoomControl',
54-
options: { position: 'top-right' } as ControlOptions,
55-
},
56-
]}
57-
/>
58-
</div>
46+
<AzureMap
47+
options={your_options}
48+
controls={[
49+
{
50+
controlName: 'ZoomControl',
51+
options: { position: 'top-right' } as ControlOptions,
52+
},
53+
]}
54+
/>
5955
</AzureMapsProvider>;
6056
`}/>
6157

@@ -70,18 +66,16 @@ import {
7066
} from 'react-azure-maps';
7167
7268
<AzureMapsProvider>
73-
<div className="defaultMap">
74-
<AzureMap
75-
options={your_options}
76-
controls={[
77-
{
78-
controlName: 'CompassControl',
79-
controlOptions: { rotationDegreesDelta: 10, style: 'dark' },
80-
options: { position: 'bottom-right' } as ControlOptions,
81-
},
82-
]}
83-
/>
84-
</div>
69+
<AzureMap
70+
options={your_options}
71+
controls={[
72+
{
73+
controlName: 'CompassControl',
74+
controlOptions: { rotationDegreesDelta: 10, style: 'dark' },
75+
options: { position: 'bottom-right' } as ControlOptions,
76+
},
77+
]}
78+
/>
8579
</AzureMapsProvider>;
8680
`}/>
8781

@@ -96,18 +90,16 @@ import {
9690
} from 'react-azure-maps';
9791
9892
<AzureMapsProvider>
99-
<div className="defaultMap">
100-
<AzureMap
101-
options={your_options}
102-
controls={[
103-
{
104-
controlName: 'PitchControl',
105-
controlOptions: { pitchDegreesDelta: 10 },
106-
options: { position: 'bottom-right' } as ControlOptions,
107-
},
108-
]}
109-
/>
110-
</div>
93+
<AzureMap
94+
options={your_options}
95+
controls={[
96+
{
97+
controlName: 'PitchControl',
98+
controlOptions: { pitchDegreesDelta: 10 },
99+
options: { position: 'bottom-right' } as ControlOptions,
100+
},
101+
]}
102+
/>
111103
</AzureMapsProvider>;
112104
`}/>
113105

@@ -122,22 +114,20 @@ import {
122114
} from 'react-azure-maps';
123115
124116
<AzureMapsProvider>
125-
<div className="defaultMap">
126-
<AzureMap
127-
options={your_options}
128-
controls={[
129-
{
130-
controlName: 'TrafficControl',
131-
controlOptions: { incidents: true },
132-
options: { position: 'top-left' } as ControlOptions,
133-
},
134-
{
135-
controlName: 'TrafficLegendControl',
136-
controlOptions: {},
137-
options: { position: 'bottom-left' } as ControlOptions,
138-
},
139-
]}
140-
/>
141-
</div>
117+
<AzureMap
118+
options={your_options}
119+
controls={[
120+
{
121+
controlName: 'TrafficControl',
122+
controlOptions: { incidents: true },
123+
options: { position: 'top-left' } as ControlOptions,
124+
},
125+
{
126+
controlName: 'TrafficLegendControl',
127+
controlOptions: {},
128+
options: { position: 'bottom-left' } as ControlOptions,
129+
},
130+
]}
131+
/>
142132
</AzureMapsProvider>;
143133
`}/>

‎src/stories/BasicUsage/MapRef/MapRef.mdx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -68,8 +68,8 @@ const SetCenter = () => {
6868
onClick={() => setMapCenter(getRandomPosition())}>
6969
Change Map Center
7070
</button>
71-
<div className="defaultMap">
72-
<AzureMap options={mapOptions} />
71+
<div style={{ width: '700px', height:'300px' }}>
72+
<AzureMap options={ your_options } />
7373
</div>
7474
</>
7575
);
@@ -112,8 +112,8 @@ const SetStyle = () => {
112112
>
113113
Toggle Tile Boundaries
114114
</button>
115-
<div className="defaultMap">
116-
<AzureMap options={mapOptions} />
115+
<div style={{ width: '700px', height:'300px' }}>
116+
<AzureMap options={ your_options } />
117117
</div>
118118
</>
119119
);

‎src/stories/BasicUsage/MapStyles/MapStyles.stories.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ const MapStyles = () => {
1313
1414
return (
1515
<AzureMapsProvider>
16-
<div className="defaultMap">
1716
<AzureMap
1817
options={your_options}
1918
styleOptions={{
@@ -22,7 +21,6 @@ const MapStyles = () => {
2221
renderWorldCopies={true},
2322
}}
2423
></AzureMap>
25-
</div>
2624
</AzureMapsProvider>
2725
);
2826
};

‎src/stories/DataVisualization/BubbleLayer/BubbleLayer.stories.ts‎

Lines changed: 16 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -14,28 +14,22 @@ const collection = generateRandomPoints();
1414
1515
const BubbleLayer = () => {
1616
<AzureMapsProvider>
17-
<div className="defaultMap">
18-
<AzureMap options={your_options}>
19-
20-
<AzureMapDataSourceProvider
21-
id="BubbleLayer DataSourceProvider"
22-
collection={collection}>
23-
<AzureMapLayerProvider
24-
type="BubbleLayer"
25-
options={{
26-
radius: 10,
27-
color: 'DodgerBlue',
28-
opacity: 1,
29-
strokeColor: 'DarkBlue',
30-
strokeWidth: 2,
31-
strokeOpacity: 1,
32-
blur: 0,
33-
}}
34-
/>
35-
</AzureMapDataSourceProvider>
36-
37-
</AzureMap>
38-
</div>
17+
<AzureMap options={your_options}>
18+
<AzureMapDataSourceProvider id="BubbleLayer DataSourceProvider" collection={collection}>
19+
<AzureMapLayerProvider
20+
type="BubbleLayer"
21+
options={{
22+
radius: 10,
23+
color: 'DodgerBlue',
24+
opacity: 1,
25+
strokeColor: 'DarkBlue',
26+
strokeWidth: 2,
27+
strokeOpacity: 1,
28+
blur: 0,
29+
}}
30+
/>
31+
</AzureMapDataSourceProvider>
32+
</AzureMap>
3933
</AzureMapsProvider>
4034
);
4135
};

‎src/stories/DataVisualization/ClusterAggregates/ClusterAggregate.mdx‎

Lines changed: 26 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -75,34 +75,32 @@ const ClusterAggregates = ({ showBubbles, showNumbers }: ClusterAggregatesProps)
7575
7676
return (
7777
<AzureMapsProvider>
78-
<div className="defaultMap">
79-
<AzureMap options={your_option}>
80-
<AzureMapDataSourceProvider
81-
id="ClusterAggregates DataSourceProvider"
82-
dataFromUrl="https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson"
83-
options={{
84-
//Tell the data source to cluster point data.
85-
cluster: true,
86-
//The radius in pixels to cluster points together.
87-
clusterRadius: 45,
88-
//The maximium zoom level in which clustering occurs.
89-
//If you zoom in more than this, all points are rendered as symbols.
90-
clusterMaxZoom: 15,
91-
}}
92-
>
93-
<AzureMapLayerProvider
94-
id={'BubbleLayer LayerProvider'}
95-
options={bubbleLayerOptions}
96-
type="BubbleLayer"
97-
></AzureMapLayerProvider>
98-
<AzureMapLayerProvider
99-
id={'NumberLayer2 LayerProvider'}
100-
options={symbolLayerOptions}
101-
type="SymbolLayer"
102-
></AzureMapLayerProvider>
103-
</AzureMapDataSourceProvider>
104-
</AzureMap>
105-
</div>
78+
<AzureMap options={your_option}>
79+
<AzureMapDataSourceProvider
80+
id="ClusterAggregates DataSourceProvider"
81+
dataFromUrl="https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson"
82+
options={{
83+
//Tell the data source to cluster point data.
84+
cluster: true,
85+
//The radius in pixels to cluster points together.
86+
clusterRadius: 45,
87+
//The maximium zoom level in which clustering occurs.
88+
//If you zoom in more than this, all points are rendered as symbols.
89+
clusterMaxZoom: 15,
90+
}}
91+
>
92+
<AzureMapLayerProvider
93+
id={'BubbleLayer LayerProvider'}
94+
options={bubbleLayerOptions}
95+
type="BubbleLayer"
96+
></AzureMapLayerProvider>
97+
<AzureMapLayerProvider
98+
id={'NumberLayer2 LayerProvider'}
99+
options={symbolLayerOptions}
100+
type="SymbolLayer"
101+
></AzureMapLayerProvider>
102+
</AzureMapDataSourceProvider>
103+
</AzureMap>
106104
</AzureMapsProvider>
107105
);
108106
};

src/stories/ImageLayer/ImageLayer.mdx renamed to src/stories/DataVisualization/ImageLayer/ImageLayer.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ import ImageLayer from './ImageLayer';
77
# Image Layer
88

99
You can overlay an image to a fixed set of coordinates with the Image Layer.<br/>
10-
Following code shows how to add a simple image layer. A thorough tutorial can be found [here](https://learn.microsoft.com/en-us/azure/azure-maps/map-add-image-layer)<br/>
11-
For more available properties, see the documentation [ImageLayerOptions](https://learn.microsoft.com/en-us/javascript/api/azure-maps-control/atlas.imagelayeroptions?view=azure-maps-typescript-latest)
10+
Following code shows how to add a simple image layer. A thorough tutorial can be found [here](https://learn.microsoft.com/en-us/azure/azure-maps/map-add-image-layer).<br/>
11+
For more available properties, see the documentation [ImageLayerOptions](https://learn.microsoft.com/en-us/javascript/api/azure-maps-control/atlas.imagelayeroptions?view=azure-maps-typescript-latest).
1212

1313
> Note that browsers might have difficulty loading a large image. In this case, consider breaking your image up into tiles, and loading them into the map as a **TileLayer**.
1414

src/stories/ImageLayer/ImageLayer.stories.ts renamed to src/stories/DataVisualization/ImageLayer/ImageLayer.stories.ts

Lines changed: 22 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -13,30 +13,28 @@ const ImageLayer = () => {
1313
1414
return (
1515
<AzureMapsProvider>
16-
<div className="defaultMap">
17-
<AzureMap options={your_options}>
18-
<AzureMapDataSourceProvider id="ImageLayer DataSourceProvider">
19-
<AzureMapLayerProvider
20-
type="ImageLayer"
21-
options={{
22-
url: 'path/to/image',
23-
// * An array of positions for the corners of the image listed in clockwise order: [top left, top right, bottom right, bottom left].
24-
coordinates: [
25-
[-20, 20],
26-
[20, 20],
27-
[20, -20],
28-
[-20, -20],
29-
],
30-
opacity: 1,
31-
contrast: 0,
32-
saturation: 0,
33-
hueRotation: 0,
34-
fadeDuration: 300,
35-
}}
36-
/>
37-
</AzureMapDataSourceProvider>
38-
</AzureMap>
39-
</div>
16+
<AzureMap options={your_options}>
17+
<AzureMapDataSourceProvider id="ImageLayer DataSourceProvider">
18+
<AzureMapLayerProvider
19+
type="ImageLayer"
20+
options={{
21+
url: 'path/to/image',
22+
// * An array of positions for the corners of the image listed in clockwise order: [top left, top right, bottom right, bottom left].
23+
coordinates: [
24+
[-20, 20],
25+
[20, 20],
26+
[20, -20],
27+
[-20, -20],
28+
],
29+
opacity: 1,
30+
contrast: 0,
31+
saturation: 0,
32+
hueRotation: 0,
33+
fadeDuration: 300,
34+
}}
35+
/>
36+
</AzureMapDataSourceProvider>
37+
</AzureMap>
4038
</AzureMapsProvider>
4139
);
4240
};

0 commit comments

Comments
 (0)