From 3535df11862b403f37e21debf637ce741c8ccb47 Mon Sep 17 00:00:00 2001
From: ambientlight <primary.taras.vozniuk@gmail.com>
Date: Tue, 6 Apr 2021 01:52:58 +0800
Subject: [PATCH 1/2] feat: added vector tile source into layer example

---
 src/examples/AzureLayer.tsx | 37 +++++++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/src/examples/AzureLayer.tsx b/src/examples/AzureLayer.tsx
index c8b67d7..df7a286 100644
--- a/src/examples/AzureLayer.tsx
+++ b/src/examples/AzureLayer.tsx
@@ -3,6 +3,7 @@ import {
   AzureMapsProvider,
   AzureMap,
   AzureMapDataSourceProvider,
+  AzureMapVectorTileSourceProvider,
   AzureMapLayerProvider,
   AzureMapFeature,
   AzureMapHtmlMarker,
@@ -116,6 +117,42 @@ const AzureLayer: React.FC = () => {
             </AzureMap>
           </div>
         </AzureMapsProvider>
+        <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>
     </>
   );

From 487aed889c249d589d2d899925dc7acd0dd6daf2 Mon Sep 17 00:00:00 2001
From: ambientlight <primary.taras.vozniuk@gmail.com>
Date: Sat, 10 Apr 2021 01:05:44 +0800
Subject: [PATCH 2/2] fix: seperate vector datasource example

---
 src/examples/AzureLayer.tsx                   | 37 ----------
 .../CustomTrafficVectorDatasourceExample.tsx  | 68 +++++++++++++++++++
 src/examples/examplesList.tsx                 |  6 ++
 3 files changed, 74 insertions(+), 37 deletions(-)
 create mode 100644 src/examples/CustomTrafficVectorDatasourceExample.tsx

diff --git a/src/examples/AzureLayer.tsx b/src/examples/AzureLayer.tsx
index df7a286..c8b67d7 100644
--- a/src/examples/AzureLayer.tsx
+++ b/src/examples/AzureLayer.tsx
@@ -3,7 +3,6 @@ import {
   AzureMapsProvider,
   AzureMap,
   AzureMapDataSourceProvider,
-  AzureMapVectorTileSourceProvider,
   AzureMapLayerProvider,
   AzureMapFeature,
   AzureMapHtmlMarker,
@@ -117,42 +116,6 @@ const AzureLayer: React.FC = () => {
             </AzureMap>
           </div>
         </AzureMapsProvider>
-        <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>
     </>
   );
diff --git a/src/examples/CustomTrafficVectorDatasourceExample.tsx b/src/examples/CustomTrafficVectorDatasourceExample.tsx
new file mode 100644
index 0000000..d3c9a87
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/src/examples/examplesList.tsx b/src/examples/examplesList.tsx
index 6561759..4cf1338 100644
--- a/src/examples/examplesList.tsx
+++ b/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;
@@ -132,5 +133,10 @@ export const examplesList: MapExampleItem[] = [
     name: 'Building 3D',
     component: Building3d,
     path: '/building-3d'
+  },
+  {
+    name: 'Vector Tile Datasource Traffic',
+    component: CustomTrafficVectorDatasourceExample,
+    path: '/custom-traffic'
   }
 ];