add symbol and polygon layer

Author: Savina Shen (Manpower Services Taiwan Co Ltd)

package-lock.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "azure-maps-control": "^3.0.1",
+    "azure-maps-control": "^3.3.0",
     "react": "^18.2.0",
     "react-azure-maps": "^1.0.0",
     "react-dom": "^18.2.0",

package.json

@@ -2,3 +2,7 @@
   width: 700px;
   height: 300px;
 }
+
+.atlas-map .azure-map-copyright a {
+  font-size: 9px;
+}

src/Storybook.css

@@ -19,8 +19,6 @@ For more available properties, see the documentation [BubbleLayerOptions](https:
 {/* <Canvas of={BubbleLayerStories.Example} sourceState="none" /> */}
 
 <Source code={`
-import { AzureMapLayerProvider } from 'react-azure-maps';
-
 <AzureMapLayerProvider
     type="BubbleLayer"
     options={{

src/stories/DataVisualization/BubbleLayer/BubbleLayer.mdx

@@ -18,18 +18,22 @@ Therefore, the basic structure of a data visualization component is as follows:
 <Source code= {`
 import { AzureMap, AzureMapsProvider, AzureMapDataSourceProvider, AzureMapLayerProvider } from 'react-azure-maps';
 
-<AzureMapsProvider>
-    <AzureMap options={your_options}>
-        <AzureMapDataSourceProvider 
-            id="your_layer_id" 
-            collection={your_data}>
-            <AzureMapLayerProvider
-                type="layer_type"
-                options={your_layer_options}
-            />
-        </AzureMapDataSourceProvider>
-    </AzureMap>
-</AzureMapsProvider>
+const Your_Component = () => {
+    return (
+        <AzureMapsProvider>
+            <AzureMap options={your_options}>
+                <AzureMapDataSourceProvider 
+                    id="your_layer_id" 
+                    collection={your_data}>
+                    <AzureMapLayerProvider
+                        type="layer_type"
+                        options={your_layer_options}
+                    />
+                </AzureMapDataSourceProvider>
+            </AzureMap>
+        </AzureMapsProvider>
+    )
+}
 `} />
 ## Create a data source
 To create a data source, you can pass the data to the `collection` prop in various ways: <br/>

src/stories/DataVisualization/Datavisualization.mdx

@@ -12,8 +12,6 @@ Following code shows how to add a simple heat map layer:<br/>
 <HeatMapLayer radius={10}/>
 
 <Source code={`
-import { AzureMapLayerProvider } from 'react-azure-maps';
-
 <AzureMapLayerProvider
     type="HeatLayer"
     options={{
@@ -42,8 +40,6 @@ You can customize the color of the heat map layer by passing the `color` prop li
             ]}/>
 
 <Source code={`
-import { AzureMapLayerProvider } from 'react-azure-maps';
-
 <AzureMapLayerProvider
     type="HeatLayer"
     options={{
@@ -82,8 +78,6 @@ In our example, we set the weight based on "mag" property of the earthquake data
 />
 
 <Source code={`
-import { AzureMapLayerProvider } from 'react-azure-maps';
-
 <AzureMapLayerProvider
     type="HeatLayer"
     options={{

src/stories/DataVisualization/HeatMapLayer/HeatMapLayer.mdx

@@ -14,8 +14,6 @@ For more available properties, see the documentation [LineLayerOptions](https://
 <LineLayer/>
 
 <Source code={`
-import { AzureMapLayerProvider } from 'react-azure-maps';
-
 <AzureMapLayerProvider
     type="LineLayer"
     options={{

src/stories/DataVisualization/LineLayer/LineLayer.mdx

@@ -34,18 +34,4 @@ const LineLayer = ({ strokeColor, strokeWidth, strokeOpacity, blur, lineCap, tra
   );
 };
 
-function generateRandomPoints() {
-  var layerData = [];
-
-  for (var i = 0; i < 50; i++) {
-    layerData.push(
-      new atlas.data.Feature(new atlas.data.Point([Math.random() * 360 - 180, Math.random() * 170 - 85]), {
-        title: 'Pin_' + i,
-      }),
-    );
-  }
-
-  return layerData;
-}
-
 export default LineLayer;

src/stories/DataVisualization/LineLayer/LineLayer.tsx

@@ -0,0 +1,13 @@
+import PolygonLayer from './PolygonLayer';
+import { Source, Meta } from '@storybook/addon-docs/blocks';
+import * as PolygonLayerStories from './PolygonLayer.stories';
+
+<Meta of={PolygonLayerStories}/>
+
+# PolygonLayer
+
+To create a polygon, add it to a data source, and render it with a polygon layer using the PolygonLayer class.
+
+<PolygonLayer fillOpacity={0.5} fillColor={'black'}/>
+<Source code={`<AzureMapLayerProvider type="PolygonLayer" options={{ fillColor: 'black', fillOpacity: 0.5 }} />;
+`}/>

src/stories/DataVisualization/PolygonLayer/PolygonLayer.mdx

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import PolygonLayer from './PolygonLayer';
+
+const meta: Meta<typeof PolygonLayer> = {
+  title: 'Data Visualization/Polygon Layer',
+  component: PolygonLayer,
+  parameters: {
+    layout: 'centered',
+    storySource: {
+      source: `
+import { AzureMap, AzureMapsProvider, AzureMapDataSourceProvider, AzureMapLayerProvider } from 'react-azure-maps';
+import atlas from 'azure-maps-control';
+
+const collection = new atlas.data.Polygon([
+  [
+    [-15.82031, 2.46018],
+    [14.0625, 30.14512],
+    [40.78125, 2.81137],
+    [12.30468, 65.21989],
+    [-15.82031, 2.46018],
+  ],
+]);
+
+const PolygonLayer = () => {
+
+  return (
+    <AzureMapsProvider>
+      <div className="defaultMap">
+        <AzureMap options={{ ...mapOptions, center: [12, 39], zoom: 0 }}>
+          <AzureMapDataSourceProvider id="PolygonLayer DataSourceProvider" collection={collection}>
+            <AzureMapLayerProvider type="PolygonLayer"  
+                                   options={{ fillColor: 'rgba(0, 0, 255, 0.5)', fillOpacity: 0.8, }} />
+          </AzureMapDataSourceProvider>
+        </AzureMap>
+      </div>
+    </AzureMapsProvider>
+  );
+};
+
+export default PolygonLayer;
+`,
+    },
+  },
+  args: {
+    fillColor: 'rgba(0, 0, 255, 0.5)',
+    fillOpacity: 0.8,
+  },
+  argTypes: {
+    fillOpacity: {
+      control: { type: 'range', min: 0, max: 1, step: 0.1 },
+    },
+  },
+};
+
+export default meta;
+
+export const Example: StoryObj<typeof PolygonLayer> = {};