feat: drawing tools example

src/examples/DrawingTool/DrawingTool.tsx

@@ -0,0 +1,85 @@
+import React, { useState } from 'react';
+import {
+  AzureMap,
+  AzureMapDataSourceProvider,
+  AzureMapDrawingManagerProvider,
+  AzureMapFeature,
+  AzureMapLayerProvider,
+  AzureMapsProvider,
+  IAzureMapOptions,
+} from 'react-azure-maps';
+import { AuthenticationType } from 'azure-maps-control';
+import { key } from '../../key';
+import { control, drawing } from 'azure-maps-drawing-tools';
+import Description from '../../Layout/Description';
+import { Button } from '@material-ui/core';
+import { wrapperStyles } from '../Options/ChangeOptionsWrapper';
+
+const option: IAzureMapOptions = {
+  authOptions: {
+    authType: AuthenticationType.subscriptionKey,
+    subscriptionKey: key,
+  },
+};
+
+const drawingOptions = {
+  toolbar: new control.DrawingToolbar({
+    position: 'top-right',
+    style: 'dark',
+  }),
+};
+
+const mode = {
+  mode: drawing.DrawingMode.drawPolygon,
+};
+
+const DrawingTool: React.FC = () => {
+  const [options, setOptions] = useState<any>(drawingOptions);
+  return (
+    <div>
+      <Description>Change options in child</Description>
+      <div style={wrapperStyles.buttonContainer}>
+        <Button size="small" variant="contained" color="secondary" onClick={() => setOptions(mode)}>
+          Change Bounds
+        </Button>
+      </div>
+      <AzureMapsProvider>
+        <div style={{ height: '300px' }}>
+          <AzureMap options={option}>
+            <AzureMapDrawingManagerProvider options={options}>
+              <AzureMapDataSourceProvider
+                events={{
+                  dataadded: (e: any) => {
+                    console.log('Data on source added', e);
+                  },
+                }}
+                id={'DrawingTool AzureMapDataSourceProvider'}
+                options={{}}
+              >
+                <AzureMapLayerProvider id={'DrawingTool AzureMapLayerProvider'} options={{}} type={'PolygonLayer'} />
+                <AzureMapFeature
+                  id={'DrawingTool MapFeature'}
+                  type="Polygon"
+                  coordinates={[
+                    [-50, -20],
+                    [0, 40],
+                    [50, -20],
+                    [-50, -20],
+                  ]}
+                />
+              </AzureMapDataSourceProvider>
+            </AzureMapDrawingManagerProvider>
+          </AzureMap>
+        </div>
+      </AzureMapsProvider>
+      <AzureMapsProvider>
+        <div style={{ height: '300px' }}>
+          <AzureMap options={option}>
+            <AzureMapDrawingManagerProvider options={options} />
+          </AzureMap>
+        </div>
+      </AzureMapsProvider>
+    </div>
+  );
+};
+export default DrawingTool;

src/examples/examplesList.tsx

@@ -18,6 +18,7 @@ import TrafficOptionsExample from './TrafficOptions';
 import ChangeOptionsWrapper from './Options/ChangeOptionsWrapper';
 import MapWrapper from './MapRef/MapWrapper';
 import Building3d from "./Buildings3D";
+import DrawingTool from "./DrawingTool/DrawingTool";
 
 export type MapExampleItem = {
   name: string;
@@ -38,6 +39,11 @@ export const examplesList: MapExampleItem[] = [
     component: MapWrapper,
     path: '/map-ref-example',
   },
+  {
+    name: 'Drawing Tools',
+    component: DrawingTool,
+    path: '/drawing-tools',
+  },
   {
     name: 'Layers',
     component: AzureLayer,