add tile layer example

Author: Savina Shen (Manpower Services Taiwan Co Ltd)

src/stories/TileLayer/TileLayer.mdx

@@ -0,0 +1,23 @@
+import { Source, Meta } from '@storybook/blocks';
+
+import TileLayer from './TileLayer';
+
+<Meta title="Tile Layer"/>
+
+# Tile Layer
+
+Tile layers allow you to superimpose images on top of Azure Maps base map tiles.
+Following code shows how to add a simple tile layer. A thorough tutorial can be found [here](https://learn.microsoft.com/en-us/azure/azure-maps/map-add-tile-layer)<br/>
+For more available properties, see the documentation [TileLayerOptions](https://learn.microsoft.com/en-us/javascript/api/azure-maps-control/atlas.tilelayeroptions?view=azure-maps-typescript-latest)
+
+<TileLayer/>
+
+<Source code={`
+<AzureMapLayerProvider
+    type="TileLayer"
+    options={{
+        tileUrl: 'path/to/tile',
+        tileSize: 256,
+    }}
+/>
+`}/>

src/stories/TileLayer/TileLayer.stories.ts

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import TileLayer from './TileLayer';
+
+const meta: Meta<typeof TileLayer> = {
+  title: 'Tile Layer',
+  component: TileLayer,
+  parameters: {
+    storySource: {
+      source: `
+import { AzureMap, AzureMapsProvider, AzureMapDataSourceProvider, AzureMapLayerProvider } from 'react-azure-maps';
+
+const TileLayer = () => {
+  
+return (
+    <AzureMapsProvider>
+      <div className="defaultMap">
+        <AzureMap options={{ ...your_options, style: 'night' }}>
+          <AzureMapDataSourceProvider id="TileLayer DataSourceProvider">
+            <AzureMapLayerProvider
+              type="TileLayer"
+              options={{
+                tileUrl:
+                  'https://mrdata.usgs.gov/services/gscworld?FORMAT=image/png&HEIGHT=1024&LAYERS=geology&REQUEST=GetMap&STYLES=default&TILED=true&TRANSPARENT=true&WIDTH=1024&VERSION=1.3.0&SERVICE=WMS&CRS=EPSG:3857&BBOX={bbox-epsg-3857}',
+                bounds: [-50, -20, 50, 20], //[west, south, east, north]
+                tileSize: 50,
+              }}
+            />
+          </AzureMapDataSourceProvider>
+        </AzureMap>
+      </div>
+    </AzureMapsProvider>
+  );
+};
+
+export default TileLayer;
+
+`,
+    },
+  },
+  args: {
+    bounds: [-50, -20, 50, 20],
+    tileSize: 50,
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof TileLayer>;
+export const Example: Story = {};

src/stories/TileLayer/TileLayer.tsx

@@ -0,0 +1,27 @@
+import { mapOptions } from '../../key';
+import { AzureMap, AzureMapsProvider, AzureMapDataSourceProvider, AzureMapLayerProvider } from 'react-azure-maps';
+import { TileLayerOptions } from 'azure-maps-control';
+
+const TileLayer = ({ bounds = [-50, -20, 50, 20], tileSize = 50 }: TileLayerOptions) => {
+  return (
+    <AzureMapsProvider>
+      <div className="defaultMap sb-unstyled">
+        <AzureMap options={{ ...mapOptions, style: 'night' }}>
+          <AzureMapDataSourceProvider id="TileLayer DataSourceProvider">
+            <AzureMapLayerProvider
+              type="TileLayer"
+              options={{
+                tileUrl:
+                  'https://mrdata.usgs.gov/services/gscworld?FORMAT=image/png&HEIGHT=1024&LAYERS=geology&REQUEST=GetMap&STYLES=default&TILED=true&TRANSPARENT=true&WIDTH=1024&VERSION=1.3.0&SERVICE=WMS&CRS=EPSG:3857&BBOX={bbox-epsg-3857}',
+                bounds, //[west, south, east, north]
+                tileSize,
+              }}
+            />
+          </AzureMapDataSourceProvider>
+        </AzureMap>
+      </div>
+    </AzureMapsProvider>
+  );
+};
+
+export default TileLayer;