Merge pull request #2 from Chia-Chi-Shen/storybook

refine mapStyle sample codes

Author: Chia-Chi-Shen

src/Test.tsx

@@ -1,16 +1,17 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import MapStyles from './MapStyles';
-import { source } from 'azure-maps-control';
 
 const meta: Meta<typeof MapStyles> = {
   title: 'Basic Usage/Map Styles',
   component: MapStyles,
   parameters: {
     layout: 'centered',
-    source: `
+    storySource: {
+      source: `
 import { AzureMap, AzureMapsProvider } from 'react-azure-maps';
 
 const MapStyles = () => {
+
   return (
     <AzureMapsProvider>
     <div className="defaultMap">
@@ -27,6 +28,7 @@ const MapStyles = () => {
   );
 };
 `,
+    },
   },
 };
 export default meta;

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

@@ -1,14 +1,48 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import LineLayer from './LineLayer';
-import { code } from './code';
 
 const meta: Meta<typeof LineLayer> = {
   title: 'Data Visualization/Line Layer',
   component: LineLayer,
   parameters: {
     layout: 'centered',
     storySource: {
-      source: code,
+      source: `
+import { AzureMap, AzureMapsProvider, AzureMapDataSourceProvider, AzureMapLayerProvider } from 'react-azure-maps';
+import atlas from 'azure-maps-control';
+
+// create a line string for the data source
+const collection = new atlas.data.LineString([
+  [-74.0039, 40.88029],
+  [-87.583, 41.93497],
+  [-105.20507, 39.77476],
+  [-122.43164, 47.66538],
+]);
+
+const LineLayer = () => {
+  return (
+    <AzureMapsProvider>
+    <div className="defaultMap">
+    <AzureMap options={your_options}>
+        <AzureMapDataSourceProvider id="LineLayer DataSourceProvider" collection={collection}>
+        <AzureMapLayerProvider
+            type="LineLayer"
+            options={{
+            strokeColor,
+            strokeWidth,
+            strokeOpacity,
+            blur,
+            lineCap,
+            translate,
+            }}
+        />
+        </AzureMapDataSourceProvider>
+    </AzureMap>
+    </div>
+    </AzureMapsProvider>
+  );
+};
+`,
     },
   },
   args: {

src/stories/DataVisualization/LineLayer/LineLayer.stories.ts

@@ -1,6 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import HtmlMarker from './HtmlMarker';
-import { code } from './code';
 
 const meta: Meta<typeof HtmlMarker> = {
   title: 'Map Annotations/HTML Marker',
@@ -13,7 +12,28 @@ const meta: Meta<typeof HtmlMarker> = {
   parameters: {
     layout: 'centered',
     storySource: {
-      source: code,
+      source: `
+import { AzureMap, AzureMapHtmlMarker, AzureMapsProvider } from 'react-azure-maps';
+import { HtmlMarkerOptions, SymbolLayerOptions } from 'azure-maps-control';
+
+const HtmlMarker = () => {
+  return (
+    <AzureMapsProvider>
+      <div className="defaultMap">
+        <AzureMap options={your_options}>
+          <AzureMapHtmlMarker
+            options={{
+                color: 'DodgerBlue',
+                text: '10',
+                position: [0, 0],
+            }}
+          />
+        </AzureMap>
+      </div>
+    </AzureMapsProvider>
+  );
+};
+`,
     },
   },
 };