feat: drawing tools example

src/examples/DrawingTools.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+
+import { AzureMap, AzureMapsProvider, AzureMapDrawingManagerProvider, AzureMapFeature, AzureMapDrawingLayerProvider, IAzureMapOptions } from 'react-azure-maps';
+import { AuthenticationType } from 'azure-maps-control';
+import { key } from "../key";
+import { wrapperStyles } from "./RouteExample";
+
+const styles = {
+  map: {
+    height: 600,
+    marginBottom: 50,
+  },
+};
+
+const option: IAzureMapOptions = {
+  center: [-122.33, 47.6],
+  zoom: 12,
+  authOptions: {
+    authType: AuthenticationType.subscriptionKey,
+    subscriptionKey: key,
+  },
+};
+
+const drawingOptions = {
+  toolbar: {
+    position: 'top-right',
+    style: 'dark',
+  }
+};
+
+const DrawingTools: React.FC = () => (
+  <div style={wrapperStyles.map}>
+    <AzureMapsProvider>
+      <div style={styles.map}>
+        <AzureMap options={option}>
+          <AzureMapDrawingManagerProvider options={drawingOptions}>
+            <AzureMapFeature
+              id={'DrawingTool MapFeature'}
+              type="Polygon"
+              coordinates={[
+                [-122.33, 47.6],
+                [-122.43, 47.6],
+                [-122.43, 47.7],
+                [-122.33, 47.6],
+              ]}
+            />
+
+            <AzureMapDrawingLayerProvider type="lineLayer" options={{strokeColor: 'red', strokeWidth: 4}}/>
+            <AzureMapDrawingLayerProvider type="pointLayer" options={{iconOptions: { image: 'marker-blue' }}}/>
+            <AzureMapDrawingLayerProvider type="polygonLayer" options={{fillColor: 'green'}}/>
+            <AzureMapDrawingLayerProvider type="polygonOutlineLayer" options={{strokeColor: 'orange'}}/>
+          </AzureMapDrawingManagerProvider>
+        </AzureMap>
+      </div>
+    </AzureMapsProvider>
+  </div>
+);
+
+export default DrawingTools;

src/examples/examplesList.tsx

@@ -19,6 +19,7 @@ import ChangeOptionsWrapper from './Options/ChangeOptionsWrapper';
 import MapWrapper from './MapRef/MapWrapper';
 import Building3d from './Buildings3D';
 import CustomTrafficVectorDatasourceExample from './CustomTrafficVectorDatasourceExample';
+import DrawingTools from './DrawingTools';
 
 export type MapExampleItem = {
   name: string;
@@ -138,5 +139,10 @@ export const examplesList: MapExampleItem[] = [
     name: 'Vector Tile Datasource Traffic',
     component: CustomTrafficVectorDatasourceExample,
     path: '/custom-traffic'
+  },
+  {
+    name: 'Drawing Tools',
+    component: DrawingTools,
+    path: '/drawing-tools',
   }
 ];