feat: vector tile source example (#46)

* feat: added vector tile source into layer example

* fix: seperate vector datasource example

Co-authored-by: psrednicki <patryk.srednicki@acaisoft.com>

src/examples/CustomTrafficVectorDatasourceExample.tsx

@@ -0,0 +1,68 @@
+import React from 'react'
+import { AzureMap, AzureMapLayerProvider, AzureMapsProvider, AzureMapVectorTileSourceProvider, IAzureMapOptions } from 'react-azure-maps'
+import { key } from '../key';
+import { AuthenticationType } from 'azure-maps-control';
+import { wrapperStyles } from './RouteExample';
+import Description from '../Layout/Description';
+
+const styles = {
+  map: {
+    height: 300,
+    marginBottom: 50,
+  },
+};
+
+const option: IAzureMapOptions = {
+  center: [-122.33, 47.6],
+  zoom: 12,
+  authOptions: {
+    authType: AuthenticationType.subscriptionKey,
+    subscriptionKey: key,
+  },
+};
+
+const CustomTrafficVectorDatasourceExample: React.FC = () => (
+  <div style={wrapperStyles.map}>
+    <Description>
+      This sample shows how to create a custom vector tile datasource that renders traffic information
+    </Description>  
+    <AzureMapsProvider>
+      <div style={styles.map}>
+        <AzureMap options={option}>
+          <AzureMapVectorTileSourceProvider 
+            id={"Traffic Flow DataSource"} 
+            options={{
+              maxZoom: 22,
+              tiles: ['https://{azMapsDomain}/traffic/flow/tile/pbf?api-version=1.0&style=relative&zoom={z}&x={x}&y={y}'], 
+            }}>
+            
+            <AzureMapLayerProvider
+              id={'Flow Layer'}
+              type={'LineLayer'}
+              options={{
+                sourceLayer: 'Traffic flow',
+                strokeColor: [
+                  'interpolate',
+                  ['linear'],
+                  ['get', 'traffic_level'],
+                  0, 'red',
+                  0.33, 'orange',
+                  0.66, 'green'
+                ],
+                strokeWidth: [
+                  'interpolate',
+                  ['linear'],
+                  ['get', 'traffic_level'],
+                  0, 6,
+                  1, 1
+                ]
+              }}
+            />
+          </AzureMapVectorTileSourceProvider>
+        </AzureMap>
+      </div>
+    </AzureMapsProvider>
+  </div>
+)
+
+export default CustomTrafficVectorDatasourceExample

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 CustomTrafficVectorDatasourceExample from './CustomTrafficVectorDatasourceExample';
 
 export type MapExampleItem = {
   name: string;
@@ -131,6 +132,11 @@ export const examplesList: MapExampleItem[] = [
   {
     name: 'Building 3D',
     component: Building3d,
-    path: '/building-3d',
+    path: '/building-3d'
   },
+  {
+    name: 'Vector Tile Datasource Traffic',
+    component: CustomTrafficVectorDatasourceExample,
+    path: '/custom-traffic'
+  }
 ];