Skip to content

Commit 392bd36

Browse files
Chia-Chi-ShenChia-Chi-Shen
authored
Merge pull request #102 from Chia-Chi-Shen/storybook
Add Events Examples and Implement Anonymous Authentication
2 parents 2a3ba68 + 7d1885e commit 392bd36

40 files changed

+1070
-301
lines changed

‎.storybook/preview.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,8 @@ const preview: Preview = {
2222
'*',
2323
'Data Visualization',
2424
['Introduction'],
25+
'Events',
26+
['Map Events'],
2527
],
2628
},
2729
},

‎public/logo2.png

1.53 KB
Loading

‎src/key.ts

+8-4
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
import { IAzureMapOptions, AuthenticationType } from 'react-azure-maps';
22

3-
export const key = process.env.STORYBOOK_AZURE_MAPS_KEY || '';
4-
53
export const mapOptions: IAzureMapOptions = {
64
authOptions: {
7-
authType: AuthenticationType.subscriptionKey,
8-
subscriptionKey: key,
5+
authType: AuthenticationType.anonymous,
6+
clientId: '2a60774c-f588-423b-b004-56d213773ee6',
7+
getToken: (resolve, reject) => {
8+
fetch('https://anonymous-auth.azurewebsites.net/api/GetAccessToken-Prod')
9+
.then((result) => result.text())
10+
.then((result) => resolve(result))
11+
.catch((error) => reject(new Error(`Failed to fetch anon auth token: ${error.message}`)));
12+
},
913
},
1014
center: [0, 0],
1115
view: 'Auto',

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

+54-64
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

+15-8
Original file line numberDiff line numberDiff line change
@@ -33,12 +33,19 @@ Remember to wrap your component with AzureMapsProvider to provide the necessary
3333
import { AzureMapsProvider } from 'react-azure-maps';
3434
import YourComponent from './YourComponent';
3535
36-
<AzureMapsProvider>
37-
<YourComponent/>
38-
</AzureMapsProvider>
36+
const NewComponent = () => {
37+
return(
38+
<AzureMapsProvider>
39+
<YourComponent/>
40+
</AzureMapsProvider>
41+
);
42+
}
3943
`}/>
4044

4145
## Examples
46+
Here are two examples of how to use the `mapRef` to change the map's display. <br/>
47+
Only codes refering to the usage of `mapRef` are shown here. Don't forget to wrap your component with `AzureMapsProvider` when implementing the examples!
48+
4249
In the first example, we use the `setCamera()` function to change the center of the map. <br/>
4350
Click the button to see the effect.
4451

@@ -68,14 +75,14 @@ const SetCenter = () => {
6875
onClick={() => setMapCenter(getRandomPosition())}>
6976
Change Map Center
7077
</button>
71-
<div className="defaultMap">
72-
<AzureMap options={mapOptions} />
78+
<div style={{ width: '700px', height:'300px' }}>
79+
<AzureMap options={ your_options } />
7380
</div>
7481
</>
7582
);
7683
};
7784
78-
const getRandomPosition = () => {
85+
function getRandomPosition() {
7986
const randomLongitude = Math.floor(Math.random() * (180 - -180) + -180);
8087
const randomLatitude = Math.floor(Math.random() * (-90 - 90) + 90);
8188
return [randomLatitude, randomLongitude];
@@ -112,8 +119,8 @@ const SetStyle = () => {
112119
>
113120
Toggle Tile Boundaries
114121
</button>
115-
<div className="defaultMap">
116-
<AzureMap options={mapOptions} />
122+
<div style={{ width: '700px', height:'300px' }}>
123+
<AzureMap options={ your_options } />
117124
</div>
118125
</>
119126
);

‎src/stories/BasicUsage/MapStyles/MapStyles.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,5 +26,5 @@ const Your_Component = () => {
2626
};
2727
`}/>
2828

29-
The props shown in the example above are all set to `true` by default.
29+
The props shown in the example above are all set to `true` by default.<br/>
3030
For more available properties, see the documentation for [StyleOptions](https://learn.microsoft.com/en-us/javascript/api/azure-maps-control/atlas.styleoptions?view=azure-maps-typescript-latest).

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

-3
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ const meta: Meta<typeof MapStyles> = {
55
title: 'Basic Usage/Map Styles',
66
component: MapStyles,
77
parameters: {
8-
layout: 'centered',
98
storySource: {
109
source: `
1110
import { AzureMap, AzureMapsProvider } from 'react-azure-maps';
@@ -14,7 +13,6 @@ const MapStyles = () => {
1413
1514
return (
1615
<AzureMapsProvider>
17-
<div className="defaultMap">
1816
<AzureMap
1917
options={your_options}
2018
styleOptions={{
@@ -23,7 +21,6 @@ const MapStyles = () => {
2321
renderWorldCopies={true},
2422
}}
2523
></AzureMap>
26-
</div>
2724
</AzureMapsProvider>
2825
);
2926
};

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

+16-23
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ const meta: Meta<typeof BubbleLayer> = {
55
title: 'Data Visualization/Bubble Layer',
66
component: BubbleLayer,
77
parameters: {
8-
layout: 'centered',
98
storySource: {
109
source: `import { AzureMap, AzureMapsProvider, AzureMapDataSourceProvider, AzureMapLayerProvider } from 'react-azure-maps';
1110
import atlas, { BubbleLayerOptions } from 'azure-maps-control';
@@ -15,28 +14,22 @@ const collection = generateRandomPoints();
1514
1615
const BubbleLayer = () => {
1716
<AzureMapsProvider>
18-
<div className="defaultMap">
19-
<AzureMap options={your_options}>
20-
21-
<AzureMapDataSourceProvider
22-
id="BubbleLayer DataSourceProvider"
23-
collection={collection}>
24-
<AzureMapLayerProvider
25-
type="BubbleLayer"
26-
options={{
27-
radius: 10,
28-
color: 'DodgerBlue',
29-
opacity: 1,
30-
strokeColor: 'DarkBlue',
31-
strokeWidth: 2,
32-
strokeOpacity: 1,
33-
blur: 0,
34-
}}
35-
/>
36-
</AzureMapDataSourceProvider>
37-
38-
</AzureMap>
39-
</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>
4033
</AzureMapsProvider>
4134
);
4235
};

0 commit comments

Comments
 (0)