add image layer example

Savina Shen (Manpower Services Taiwan Co Ltd) · Savina Shen (Manpower Services Taiwan Co Ltd) · commit 573515c7ae3b · 2024-08-15T11:19:26.000+08:00
diff --git a/public/logo2.png b/public/logo2.png
diff --git a/src/stories/BasicUsage/MapStyles/MapStyles.mdx b/src/stories/BasicUsage/MapStyles/MapStyles.mdx
@@ -26,5 +26,5 @@ const Your_Component = () => {
 };
 `}/>
 
-The props shown in the example above are all set to `true` by default.
+The props shown in the example above are all set to `true` by default.<br/>
 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).
diff --git a/src/stories/BasicUsage/MapStyles/MapStyles.stories.ts b/src/stories/BasicUsage/MapStyles/MapStyles.stories.ts
@@ -5,7 +5,6 @@ const meta: Meta<typeof MapStyles> = {
   title: 'Basic Usage/Map Styles',
   component: MapStyles,
   parameters: {
-    layout: 'centered',
     storySource: {
       source: `
 import { AzureMap, AzureMapsProvider } from 'react-azure-maps';
diff --git a/src/stories/DataVisualization/BubbleLayer/BubbleLayer.stories.ts b/src/stories/DataVisualization/BubbleLayer/BubbleLayer.stories.ts
@@ -5,7 +5,6 @@ const meta: Meta<typeof BubbleLayer> = {
   title: 'Data Visualization/Bubble Layer',
   component: BubbleLayer,
   parameters: {
-    layout: 'centered',
     storySource: {
       source: `import { AzureMap, AzureMapsProvider, AzureMapDataSourceProvider, AzureMapLayerProvider } from 'react-azure-maps';
 import atlas, { BubbleLayerOptions } from 'azure-maps-control';
diff --git a/src/stories/DataVisualization/HeatMapLayer/HeatMapLayer.mdx b/src/stories/DataVisualization/HeatMapLayer/HeatMapLayer.mdx
@@ -7,7 +7,8 @@ import HeatMapLayer from './HeatMapLayer';
 # Heat Map Layer
 
 A heat map layer can be used to visualize the density of point data on the map.<br/>
-Following code shows how to add a simple heat map layer:<br/>
+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)<br/>
+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)    
 
 <HeatMapLayer radius={10}/>
 
@@ -94,5 +95,4 @@ In our example, we set the weight based on "mag" property of the earthquake data
 />
 `}/>
 
-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)    
 
diff --git a/src/stories/DataVisualization/HeatMapLayer/HeatMapLayer.stories.ts b/src/stories/DataVisualization/HeatMapLayer/HeatMapLayer.stories.ts
@@ -5,7 +5,6 @@ const meta: Meta<typeof HeatMapLayer> = {
   title: 'Data Visualization/Heat Map Layer',
   component: HeatMapLayer,
   parameters: {
-    layout: 'centered',
     controls: { exclude: ['color'] },
   },
   args: {
diff --git a/src/stories/DataVisualization/LineLayer/LineLayer.mdx b/src/stories/DataVisualization/LineLayer/LineLayer.mdx
@@ -8,7 +8,7 @@ import LineLayer from './LineLayer';
 
 A line layer can be used to render LineString and MultiLineString features as paths or routes on the map.<br/> 
 It can also be used to render the outline of Polygon and MultiPolygon features.<br/><br/>
-Following code shows how to add a simple line layer:<br/>
+Following code shows how to add a simple line layer. A thorough tutorial can be found [here](https://learn.microsoft.com/en-us/azure/azure-maps/map-add-line-layer)<br/>
 For more available properties, see the documentation [LineLayerOptions](https://learn.microsoft.com/en-us/javascript/api/azure-maps-control/atlas.linelayeroptions?view=azure-maps-typescript-latest)
 
 <LineLayer/>
diff --git a/src/stories/DataVisualization/LineLayer/LineLayer.stories.ts b/src/stories/DataVisualization/LineLayer/LineLayer.stories.ts
@@ -5,7 +5,6 @@ const meta: Meta<typeof LineLayer> = {
   title: 'Data Visualization/Line Layer',
   component: LineLayer,
   parameters: {
-    layout: 'centered',
     storySource: {
       source: `
 import { AzureMap, AzureMapsProvider, AzureMapDataSourceProvider, AzureMapLayerProvider } from 'react-azure-maps';
diff --git a/src/stories/DataVisualization/PolygonLayer/PolygonLayer.stories.ts b/src/stories/DataVisualization/PolygonLayer/PolygonLayer.stories.ts
@@ -5,7 +5,6 @@ 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';
diff --git a/src/stories/DataVisualization/SymbolLayer/SymbolLayer.mdx b/src/stories/DataVisualization/SymbolLayer/SymbolLayer.mdx
@@ -14,7 +14,7 @@ Use a symbol layer to render large collections of points on the map. Compared to
 
 You can customize the style of both icons and texts of a symbol layer by providing the `iconOptions` and `textOptions` properties.
 
-The following code shows how to add a simple symbol layer:
+The following code shows how to add a simple symbol layer. A thorough tutorial can be found [here](https://learn.microsoft.com/en-us/azure/azure-maps/map-add-pin)
 For more available properties, see the documentation [SymbolLayerOptions](https://learn.microsoft.com/en-us/javascript/api/azure-maps-control/atlas.symbollayeroptions?view=azure-maps-typescript-latest)
 <Source code={`
 <AzureMapLayerProvider
diff --git a/src/stories/DataVisualization/SymbolLayer/SymbolLayer.stories.tsx b/src/stories/DataVisualization/SymbolLayer/SymbolLayer.stories.tsx
@@ -4,9 +4,7 @@ import SymbolLayer from './SymbolLayer';
 const meta: Meta<typeof SymbolLayer> = {
   title: 'Data Visualization/Symbol Layer',
   component: SymbolLayer,
-  parameters: {
-    layout: 'centered',
-  },
+  parameters: {},
   args: {
     image: 'pin-round-blue',
     optionsSize: 1.3,
diff --git a/src/stories/ImageLayer/ImageLayer.mdx b/src/stories/ImageLayer/ImageLayer.mdx
@@ -0,0 +1,32 @@
+import { Source, Meta } from '@storybook/blocks';
+
+import ImageLayer from './ImageLayer';
+
+<Meta title="Image Layer"/>
+
+# Image Layer
+
+You can overlay an image to a fixed set of coordinates with the Image Layer.<br/>
+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)<br/>
+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)
+
+> 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**.
+
+<ImageLayer/>
+
+<Source code={`
+<AzureMapLayerProvider
+    type="ImageLayer"
+    options={{
+        url: 'path/to/image',
+        /* An array of positions for the corners of the image listed in clockwise order:
+         [top left, top right, bottom right, bottom left]. */
+        coordinates: [
+            [-20, 20],
+            [20, 20],
+            [20, -20],
+            [-20, -20],
+        ],
+    }}
+/>
+`}/>
diff --git a/src/stories/ImageLayer/ImageLayer.stories.ts b/src/stories/ImageLayer/ImageLayer.stories.ts
@@ -5,7 +5,57 @@ const meta: Meta<typeof ImageLayer> = {
   title: 'Image Layer',
   component: ImageLayer,
   parameters: {
-    layout: 'centered',
+    storySource: {
+      source: `
+import { AzureMap, AzureMapsProvider, AzureMapDataSourceProvider, AzureMapLayerProvider } from 'react-azure-maps';
+
+const ImageLayer = () => {
+
+  return (
+    <AzureMapsProvider>
+      <div className="defaultMap">
+        <AzureMap options={your_options}>
+          <AzureMapDataSourceProvider id="ImageLayer DataSourceProvider">
+            <AzureMapLayerProvider
+              type="ImageLayer"
+              options={{
+                url: 'path/to/image',
+                // * An array of positions for the corners of the image listed in clockwise order: [top left, top right, bottom right, bottom left].
+                coordinates: [
+                    [-20, 20],
+                    [20, 20],
+                    [20, -20],
+                    [-20, -20],
+                ],
+                opacity: 1,
+                contrast: 0,
+                saturation: 0,
+                hueRotation: 0,
+                fadeDuration: 300,
+              }}
+            />
+          </AzureMapDataSourceProvider>
+        </AzureMap>
+      </div>
+    </AzureMapsProvider>
+  );
+};      
+      `,
+    },
+  },
+  args: {
+    opacity: 1,
+    contrast: 0,
+    saturation: 0,
+    hueRotation: 0,
+    fadeDuration: 300,
+  },
+  argTypes: {
+    opacity: { control: { type: 'range', min: 0, max: 1, step: 0.1 } },
+    contrast: { control: { type: 'range', min: -1, max: 1, step: 0.1 } },
+    saturation: { control: { type: 'range', min: -1, max: 1, step: 0.1 } },
+    hueRotation: { control: { type: 'range', min: 0, max: 360, step: 1 } },
+    fadeDuration: { control: { type: 'range', min: 0, max: 1000, step: 100 } },
   },
 };
 export default meta;
diff --git a/src/stories/ImageLayer/ImageLayer.tsx b/src/stories/ImageLayer/ImageLayer.tsx
@@ -1,35 +1,32 @@
 import { mapOptions } from '../../key';
 import { AzureMap, AzureMapsProvider, AzureMapDataSourceProvider, AzureMapLayerProvider } from 'react-azure-maps';
-import { LineLayerOptions } from 'azure-maps-control';
-import atlas from 'azure-maps-control';
+import { ImageLayerOptions } from 'azure-maps-control';
 
-const collection = new atlas.data.LineString([
-  [-74.0039, 40.88029],
-  [-87.583, 41.93497],
-  [-105.20507, 39.77476],
-  [-122.43164, 47.66538],
-]);
-
-const ImageLayer = () => {
+const ImageLayer = ({ opacity, contrast, saturation, hueRotation, fadeDuration }: ImageLayerOptions) => {
   return (
     <AzureMapsProvider>
       <div className="defaultMap sb-unstyled">
         <AzureMap options={{ ...mapOptions }}>
-          {/* <AzureMapDataSourceProvider id="ImageLayer DataSourceProvider"> */}
-          <AzureMapLayerProvider
-            type="ImageLayer"
-            options={{
-              url: 'https://i.imgur.com/fc4Tw0H.jpg',
-              // * An array of positions for the corners of the image listed in clockwise order: [top left, top right, bottom right, bottom left].
-              coordinates: [
-                [-130, 45],
-                [-115, 45],
-                [-115, 35],
-                [-130, 35],
-              ],
-            }}
-          />
-          {/* </AzureMapDataSourceProvider> */}
+          <AzureMapDataSourceProvider id="ImageLayer DataSourceProvider">
+            <AzureMapLayerProvider
+              type="ImageLayer"
+              options={{
+                url: 'logo2.png',
+                // * An array of positions for the corners of the image listed in clockwise order: [top left, top right, bottom right, bottom left].
+                coordinates: [
+                  [-20, 20],
+                  [20, 20],
+                  [20, -20],
+                  [-20, -20],
+                ],
+                opacity,
+                contrast,
+                saturation,
+                hueRotation,
+                fadeDuration,
+              }}
+            />
+          </AzureMapDataSourceProvider>
         </AzureMap>
       </div>
     </AzureMapsProvider>
diff --git a/src/stories/MapAnnotations/HtmlMarker/HtmlMarker.stories.tsx b/src/stories/MapAnnotations/HtmlMarker/HtmlMarker.stories.tsx
@@ -10,7 +10,6 @@ const meta: Meta<typeof HtmlMarker> = {
     position: [0, 0],
   },
   parameters: {
-    layout: 'centered',
     storySource: {
       source: `
 import { AzureMap, AzureMapHtmlMarker, AzureMapsProvider } from 'react-azure-maps';
diff --git a/src/stories/MapAnnotations/Popup/Popup.stories.ts b/src/stories/MapAnnotations/Popup/Popup.stories.ts
@@ -11,7 +11,6 @@ const meta: Meta<typeof Popup> = {
     },
   },
   parameters: {
-    layout: 'centered',
     storySource: {
       source: `
 import { AzureMap, AzureMapsProvider, AzureMapPopup, IAzureMapPopup } from 'react-azure-maps';
