29 |
30 | );
31 | };
32 |
33 | function generateRandomPoints() {
34 | var layerData = [];
35 |
36 | for (var i = 0; i < 50; i++) {
37 | layerData.push(
38 | new atlas.data.Feature(new atlas.data.Point([Math.random() * 360 - 180, Math.random() * 170 - 85]), {
39 | title: 'Pin_' + i,
40 | }),
41 | );
42 | }
43 |
44 | return layerData;
45 | }
46 |
47 | export default BubbleLayer;
48 |
--------------------------------------------------------------------------------
/src/stories/DataVisualization/ClusterAggregates/ClusterAggregate.mdx:
--------------------------------------------------------------------------------
1 | import { Source, Meta } from '@storybook/addon-docs/blocks';
2 |
3 | import ClusterAggregates from './ClusterAggregates';
4 |
5 |
6 |
7 | # Cluster Aggregates
8 | This example shows how to enable point-based clustering on a data source and render them differently from individual points on the map.
9 | Clustered points have four properties:
10 | - `cluster` - A boolean value indicating that it is a cluster.
11 | - `cluster_id` - A unique ID for the cluster which can be used with the DataSource getClusterExpansionZoom, getClusterChildren, and getClusterLeaves functions.
12 | - `point_count` - The number of points the cluster contains.
13 | - `point_count_abbreviated` - A string that abbreviates the point_count value if it is long. (i.e. 4,000 becomes 4K)
14 |
15 | For more information on clustering, see the tutorial [here](https://learn.microsoft.com/en-us/azure/azure-maps/clustering-point-data-web-sdk).
16 |
17 | You can observe the clusters by zooming in and out on the map.
18 |
19 |
20 |
21 | In this example, we use a **Bubble Layer** to render the clusters as circles and a **Symbol Layer** to render the number of points in each cluster.
22 | For the bubble layer, we set the radius and the color to change based on the numbers of points in the clusters.
23 |
24 | = 100, radius is 30 pixels.
33 | 750,
34 | 40, //If point_count >= 750, radius is 40 pixels.
35 | ],
36 |
37 | //Change the color of the cluster based on the value of the point_cluster property of the cluster.
38 | color: [
39 | 'step',
40 | ['get', 'point_count'],
41 | 'rgba(0,255,0,0.8)', //Default to green.
42 | 100,
43 | 'rgba(255,255,0,0.8)', //If the point_count >= 100, color is yellow.
44 | 750,
45 | 'rgba(255,0,0,0.8)', //If the point_count >= 100, color is red.
46 | ],
47 | strokeWidth: 0,
48 | filter: ['has', 'point_count'], //Only render data points which have a point_count property, which clusters do.
49 | };
50 | `}/>
51 |
52 | For the symbol layer, we set the text to be the `point_count_abbreviated` property of the cluster.
53 |
54 |
65 |
66 | Finally, we set the options of the **AzureMapDataSourceProvider** to enable clustering.
67 |
68 | {
77 |
78 | return (
79 |
80 |
81 |
94 |
99 |
104 |
105 |
106 |
107 | );
108 | };
109 | `} />
--------------------------------------------------------------------------------
/src/stories/DataVisualization/ClusterAggregates/ClusterAggregates.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | AzureMap,
3 | AzureMapDataSourceProvider,
4 | AzureMapLayerProvider,
5 | AzureMapsProvider,
6 | IAzureMapOptions,
7 | } from 'react-azure-maps';
8 | import { mapOptions } from '../../../key';
9 |
10 | export interface ClusterAggregatesProps {
11 | showBubbles: boolean;
12 | showNumbers: boolean;
13 | }
14 |
15 | const option: IAzureMapOptions = {
16 | ...mapOptions,
17 | center: [-97, 39],
18 | zoom: 1.5,
19 | view: 'Auto',
20 | };
21 |
22 | const bubbleLayerOptions = {
23 | //Scale the size of the clustered bubble based on the number of points inthe cluster.
24 | radius: [
25 | 'step',
26 | ['get', 'point_count'],
27 | 20, //Default of 20 pixel radius.
28 | 100,
29 | 30, //If point_count >= 100, radius is 30 pixels.
30 | 750,
31 | 40, //If point_count >= 750, radius is 40 pixels.
32 | ],
33 |
34 | //Change the color of the cluster based on the value on the point_cluster property of the cluster.
35 | color: [
36 | 'step',
37 | ['get', 'point_count'],
38 | 'rgba(0,255,0,0.8)', //Default to green.
39 | 100,
40 | 'rgba(255,255,0,0.8)', //If the point_count >= 100, color is yellow.
41 | 750,
42 | 'rgba(255,0,0,0.8)', //If the point_count >= 100, color is red.
43 | ],
44 | strokeWidth: 0,
45 | filter: ['has', 'point_count'], //Only rendered data points which have a point_count property, which clusters do.
46 | };
47 |
48 | const symbolLayerOptions = {
49 | iconOptions: {
50 | image: 'none', //Hide the icon image.
51 | },
52 | textOptions: {
53 | textField: ['get', 'point_count_abbreviated'],
54 | offset: [0, 0.4],
55 | },
56 | };
57 |
58 | const bubbleLayer = (
59 |
64 | );
65 |
66 | const symbolLayer = (
67 |
72 | );
73 |
74 | const ClusterAggregates = ({ showBubbles, showNumbers }: ClusterAggregatesProps) => {
75 | return (
76 |
77 |
99 |
100 | );
101 | };
102 |
103 | export default ClusterAggregates;
104 |
--------------------------------------------------------------------------------
/src/stories/DataVisualization/Datavisualization.mdx:
--------------------------------------------------------------------------------
1 | import { Meta, Source } from '@storybook/blocks';
2 | import ClusterAggregates from './ClusterAggregates/ClusterAggregates';
3 |
4 |
5 |
6 | # Data Visualization
7 | **react-azure-maps** provides a set of components to help you visualize data on a map like this:
8 |
9 |
10 |
11 | We will need two kinds of components to visualize data on a map:
12 | 1. ``: to provide your data to the map.
13 | 2. ``: to create a visualization layer on the map based on your data.
14 |
15 | Therefore, the basic structure of a data visualization component is as follows:
16 |
17 | {
21 | return (
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 | );
30 | };
31 | `} />
32 | ## Create a data source
33 | To create a data source, you can pass the data to the `collection` prop in various ways:
34 |
35 | You can specify a location by passing a data point:
36 | ...`}
40 | />
41 | Add more details via the `Feature` object like this:
42 | ...`}
46 | />
47 | An array of data points is accepted:
48 | ...`}
57 | />
58 | You can also provide the data by passing the `dataFromUrl` prop like this:
59 |
62 | ...
63 |
64 | `} />
65 |
66 |
67 | Now that you have created a data source, you can create a visualization layer on the map.
68 | See examples below for further details.
--------------------------------------------------------------------------------
/src/stories/DataVisualization/HeatMapLayer/HeatMapLayer.mdx:
--------------------------------------------------------------------------------
1 | import { Source, Meta } from '@storybook/blocks';
2 |
3 | import HeatMapLayer from './HeatMapLayer';
4 |
5 |
6 |
7 | # Heat Map Layer
8 |
9 | A heat map layer can be used to visualize the density of point data on the map.
10 | The following code shows how to add a simple heat map layer. A thorough tutorial can be found [here](https://learn.microsoft.com/en-us/azure/azure-maps/map-add-heat-map-layer).
11 | For more available properties, see the documentation [HeatMapLayerOptions](https://learn.microsoft.com/en-us/javascript/api/azure-maps-control/atlas.heatmaplayeroptions?view=azure-maps-typescript-latest).
12 |
13 |
14 |
15 |
24 | `}/>
25 |
26 | ## Color
27 | You can customize the color of the heat map layer by passing the `color` prop like this:
28 |
29 |
42 |
43 |
61 | `}/>
62 |
63 | ## Weight
64 | Specifies how much an individual data point contributes to the heatmap.
65 | Must be a number greater than 0. Default is `1`.
66 | In our example, we set the weight based on the "mag" property of the earthquake data.
67 |
68 | ;
81 |
82 |
95 | `}/>
96 |
97 |
98 |
--------------------------------------------------------------------------------
/src/stories/DataVisualization/HeatMapLayer/HeatMapLayer.stories.ts:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import HeatMapLayer from './HeatMapLayer';
3 |
4 | const meta: Meta = {
5 | title: 'Data Visualization/Heat Map Layer',
6 | component: HeatMapLayer,
7 | parameters: {
8 | controls: { exclude: ['color'] },
9 | storySource: {
10 | source: `
11 | import { AzureMap, AzureMapsProvider, AzureMapDataSourceProvider, AzureMapLayerProvider } from 'react-azure-maps';
12 |
13 | const magWeight = [
14 | 'interpolate',
15 | ['exponential', 2], //Using an exponential interpolation since earthquake magnitudes are on an exponential scale.
16 | ['get', 'mag'],
17 | 0,
18 | 0,
19 | 10,
20 | 1,
21 | ];
22 |
23 | const HeatMapLayer = () => {
24 | return (
25 |
26 |
27 |
31 |
40 |
41 |
42 |
43 | );
44 | };
45 | `,
46 | },
47 | },
48 | args: {
49 | radius: 10,
50 | opacity: 1,
51 | intensity: 1,
52 | weight: false,
53 | },
54 | argTypes: {
55 | radius: { control: { type: 'range', min: 1, max: 50, step: 1 } },
56 | opacity: { control: { type: 'range', min: 0, max: 1, step: 0.1 } },
57 | intensity: { control: { type: 'range', min: 0, max: 5, step: 0.1 } },
58 | weight: { description: 'base on "mag" property' },
59 | },
60 | };
61 | export default meta;
62 |
63 | type Story = StoryObj;
64 |
65 | export const Example: Story = {};
66 |
--------------------------------------------------------------------------------
/src/stories/DataVisualization/HeatMapLayer/HeatMapLayer.tsx:
--------------------------------------------------------------------------------
1 | import { mapOptions } from '../../../key';
2 | import { AzureMap, AzureMapsProvider, AzureMapDataSourceProvider, AzureMapLayerProvider } from 'react-azure-maps';
3 |
4 | export interface HeatMapLayerProps {
5 | radius?: number;
6 | opacity?: number;
7 | intensity?: number;
8 | weight?: boolean;
9 | color?: any;
10 | }
11 |
12 | const magWeight = [
13 | 'interpolate',
14 | ['exponential', 2], //Using an exponential interpolation since earthquake magnitudes are on an exponential scale.
15 | ['get', 'mag'],
16 | 0,
17 | 0,
18 | 10,
19 | 1,
20 | ];
21 |
22 | const HeatMapLayer = ({ radius, opacity, intensity, weight, color }: HeatMapLayerProps) => {
23 | return (
24 |
25 |
26 |
27 |
31 |
41 |
42 |
43 |
44 |
45 | );
46 | };
47 |
48 | export default HeatMapLayer;
49 |
--------------------------------------------------------------------------------
/src/stories/DataVisualization/ImageLayer/ImageLayer.mdx:
--------------------------------------------------------------------------------
1 | import { Source, Meta } from '@storybook/blocks';
2 | import * as ImageLayerStories from './ImageLayer.stories.ts';
3 | import ImageLayer from './ImageLayer';
4 |
5 |
6 |
7 | # Image Layer
8 |
9 | You can overlay an image on a fixed set of coordinates with the Image Layer.
10 | The 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).
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).
12 |
13 | > 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](/docs/data-visualization-tile-layer--docs).
14 |
15 |
16 |
17 |
32 | `}/>
--------------------------------------------------------------------------------
/src/stories/DataVisualization/ImageLayer/ImageLayer.stories.ts:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import ImageLayer from './ImageLayer';
3 |
4 | const meta: Meta = {
5 | title: 'Data Visualization/Image Layer',
6 | component: ImageLayer,
7 | parameters: {
8 | storySource: {
9 | source: `
10 | import { AzureMap, AzureMapsProvider, AzureMapDataSourceProvider, AzureMapLayerProvider } from 'react-azure-maps';
11 |
12 | const ImageLayer = () => {
13 |
14 | return (
15 |
16 |
17 |
18 |
36 |
37 |
38 |
39 | );
40 | };
41 | `,
42 | },
43 | },
44 | args: {
45 | opacity: 1,
46 | contrast: 0,
47 | saturation: 0,
48 | hueRotation: 0,
49 | fadeDuration: 300,
50 | },
51 | argTypes: {
52 | opacity: { control: { type: 'range', min: 0, max: 1, step: 0.1 } },
53 | contrast: { control: { type: 'range', min: -1, max: 1, step: 0.1 } },
54 | saturation: { control: { type: 'range', min: -1, max: 1, step: 0.1 } },
55 | hueRotation: { control: { type: 'range', min: 0, max: 360, step: 1 } },
56 | fadeDuration: { control: { type: 'range', min: 0, max: 1000, step: 100 } },
57 | },
58 | };
59 | export default meta;
60 |
61 | type Story = StoryObj;
62 |
63 | export const Example: Story = {};
64 |
--------------------------------------------------------------------------------
/src/stories/DataVisualization/ImageLayer/ImageLayer.tsx:
--------------------------------------------------------------------------------
1 | import { mapOptions } from '../../../key';
2 | import { AzureMap, AzureMapsProvider, AzureMapDataSourceProvider, AzureMapLayerProvider } from 'react-azure-maps';
3 | import { ImageLayerOptions } from 'azure-maps-control';
4 |
5 | const ImageLayer = ({ opacity, contrast, saturation, hueRotation, fadeDuration }: ImageLayerOptions) => {
6 | return (
7 |
8 |
9 |
10 |
11 |
29 |
30 |
31 |
32 |
33 | );
34 | };
35 |
36 | export default ImageLayer;
37 |
--------------------------------------------------------------------------------
/src/stories/DataVisualization/LineLayer/LineLayer.mdx:
--------------------------------------------------------------------------------
1 | import { Source, Meta } from '@storybook/blocks';
2 |
3 | import LineLayer from './LineLayer';
4 |
5 |
6 |
7 | # Line Layer
8 |
9 | A line layer can be used to render LineString and MultiLineString features as paths or routes on the map.
10 | It can also be used to render the outline of Polygon and MultiPolygon features.
53 | }
54 | />
55 | )}
56 |
57 |
58 |
59 |
60 | );
61 | }
62 |
63 | export default AccessiblePopups;
--------------------------------------------------------------------------------
/src/stories/MapAnnotations/Popup/Basic/Popup.mdx:
--------------------------------------------------------------------------------
1 | import { Meta, Source } from '@storybook/blocks';
2 |
3 | import * as PopupStories from './Popup.stories';
4 |
5 | import Popup from './Popup';
6 |
7 |
8 |
9 | # Popup
10 | A popup is an information window anchored at a specified position on a map.
11 | With **react-azure-maps**, you can quickly customize the `Popup` component with these 3 props:
12 |
13 | {/* show basic code */}
14 |
15 | Hello World}
20 | />
21 | `} />
--------------------------------------------------------------------------------
/src/stories/MapAnnotations/Popup/Basic/Popup.stories.ts:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import Popup from './Popup';
3 |
4 | const meta: Meta = {
5 | title: 'Map Annotations/Popup',
6 | component: Popup,
7 | args: {
8 | isVisible: true,
9 | options: {
10 | position: [0, 0],
11 | },
12 | },
13 | parameters: {
14 | storySource: {
15 | source: `
16 | import { AzureMap, AzureMapsProvider, AzureMapPopup, IAzureMapPopup } from 'react-azure-maps';
17 |
18 | const Popup = () => {
19 |
20 | return (
21 |
22 |
23 | Hello World}
27 | />
28 |
29 |
30 | );
31 | };
32 | `,
33 | },
34 | },
35 | };
36 |
37 | export default meta;
38 |
39 | type Story = StoryObj;
40 |
41 | export const Example: Story = {};
42 |
--------------------------------------------------------------------------------
/src/stories/MapAnnotations/Popup/Basic/Popup.tsx:
--------------------------------------------------------------------------------
1 | import { AzureMap, AzureMapsProvider, AzureMapPopup, IAzureMapPopup } from 'react-azure-maps';
2 | import { mapOptions } from '../../../../key';
3 |
4 | const Popup = ({ isVisible, options }: IAzureMapPopup) => {
5 | // use position as argument would be better
6 | return (
7 |
8 |
9 |
10 | Hello World
}
14 | />
15 |
16 |
17 |
18 | );
19 | };
20 |
21 | export default Popup;
22 |
--------------------------------------------------------------------------------
/src/stories/MapAnnotations/Popup/Interactive/InteractivePopup.mdx:
--------------------------------------------------------------------------------
1 | import { Meta, Source } from '@storybook/blocks';
2 |
3 | import * as InteractivePopupStories from './InteractivePopup.stories';
4 |
5 | import InteractivePopup from './InteractivePopupExample';
6 |
7 |
8 |
9 | # Interactive Popup
10 | Besides the static popup, you can also create an interactive popup containing React components.
11 | Therefore, you can easily change the states of the components both inside and outside the popup.
12 | ## Example
13 | Here is an example of an interactive popup that shows a counter counting the number of times the user has clicked on the popup.
14 | You can also change the popup's color by clicking the button on the top left corner.
15 |
16 |
17 |
18 |
19 | Let's take a look of how the interactive popup is implemented.
20 | ## Implementation
21 | ### 1. Create an interactive popup component
22 | Here we initialize a new Popup instance and render the React node children for the popup's content.
23 |
24 | {
38 | const { mapRef } = useContext(AzureMapsContext);
39 | const containerRef = document.createElement('div');
40 | const root = createRoot(containerRef);
41 | const [popupRef] = useState(new atlas.Popup({ ...options, content: containerRef }));
42 |
43 | // Add events to the popup when it is mounted
44 | useEffect(() => {
45 | if (mapRef) {
46 | events &&
47 | events.forEach(({ eventName, callback }) => {
48 | mapRef.events.add(eventName, popupRef, callback);
49 | });
50 | return () => {
51 | mapRef.popups.remove(popupRef);
52 | };
53 | }
54 | }, []);
55 |
56 | // Render the popup content and set the options
57 | useEffect(() => {
58 | root.render(children);
59 | popupRef.setOptions({
60 | ...options,
61 | content: containerRef,
62 | });
63 | if (mapRef && isVisible && !popupRef.isOpen()) {
64 | popupRef.open(mapRef);
65 | }
66 | }, [options, children]);
67 |
68 | // Toggle the popup visibility
69 | useEffect(() => {
70 | if (mapRef) {
71 | if (isVisible && !popupRef.isOpen()) {
72 | popupRef.open(mapRef);
73 | } else if (mapRef.popups.getPopups().length && !isVisible && popupRef.isOpen()) {
74 | popupRef.close();
75 | }
76 | }
77 | }, [isVisible]);
78 |
79 | return null;
80 | };
81 |
82 | export default InteractivePopup;
83 |
84 | `} />
85 |
86 | ### 2. Create your popup content
87 | In this example we create a simple counter component that increments the count when the user clicks on the popup.
88 | Also, it accepts a background color as a prop to change the popup's color.
89 | **You can create any kind of React component as the popup content.**
90 |
91 | {
95 | const [count, setCount] = useState(0);
96 |
97 | return (
98 |
99 |
This is a counter:
100 |
You have clicked {count} times.
101 |
114 |
128 |
129 | );
130 | };
131 |
132 | export default PopupContent;
133 | `}/>
134 |
135 | ### 3. Use the interactive popup
136 | Finally, you can use the interactive popup component on your map and pass your react component as children.
137 |
138 | {
145 | const [bgColor, setBgColor] = useState('white');
146 |
147 | // click to change color randomly
148 | const changeColor = () => {
149 | const color = \`#\${Math.floor(Math.random() * 16777215).toString(16)}\`;
150 | setBgColor(color);
151 | };
152 | return (
153 |
154 |