Adds Example of VectorSource with a Third Party Tileset

example/src/App.js

@@ -44,6 +44,7 @@ import QueryAtPoint from './components/QueryAtPoint';
 import QueryWithRect from './components/QueryWithRect';
 import ShapeSourceIcon from './components/ShapeSourceIcon';
 import CustomVectorSource from './components/CustomVectorSource';
+import ThirdPartyVectorTileSource from './components/ThirdPartyVectorTileSource';
 import ShowPointAnnotation from './components/ShowPointAnnotation';
 import CreateOfflineRegion from './components/CreateOfflineRegion';
 import DriveTheLine from './components/DriveTheLine';
@@ -123,6 +124,7 @@ const Examples = [
   new ExampleItem('Query Features Bounding Box', QueryWithRect),
   new ExampleItem('Shape Source From Icon', ShapeSourceIcon),
   new ExampleItem('Custom Vector Source', CustomVectorSource),
+  new ExampleItem('Third Party Vector Tile Source', ThirdPartyVectorTileSource),
   new ExampleItem('Show Point Annotation', ShowPointAnnotation),
   new ExampleItem('Create Offline Region', CreateOfflineRegion),
   new ExampleItem('Animation Along a Line', DriveTheLine),

example/src/components/ThirdPartyVectorTileSource.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import MapboxGL from '@mapbox/react-native-mapbox-gl';
+
+import BaseExamplePropTypes from './common/BaseExamplePropTypes';
+import Page from './common/Page';
+
+import sheet from '../styles/sheet';
+
+const styles = MapboxGL.StyleSheet.create({
+  line: {
+    lineCap: "round",
+    lineJoin: "round",
+    lineOpacity: 0.6,
+    lineColor: "rgb(53, 175, 109)",
+    lineWidth: 2
+  },
+});
+
+const TILEJSON_URL = "https://s3.amazonaws.com/tgaw/tilejson.json";
+
+// This example ported to React Native:
+// https://www.mapbox.com/mapbox-gl-js/example/third-party/
+class ThirdPartyVectorTileSource extends React.PureComponent {
+  static propTypes = {
+    ...BaseExamplePropTypes,
+  };
+
+  render() {
+    return (
+      <Page {...this.props}>
+        <MapboxGL.MapView
+          zoomLevel={12}
+          centerCoordinate={[-87.622088, 41.878781]}
+          styleURL="mapbox://styles/mapbox/light-v9"
+          style={sheet.matchParent}>
+          <MapboxGL.VectorSource
+            id="customTileSourceExample"
+            url={TILEJSON_URL}>
+            <MapboxGL.LineLayer
+              id="customTileSourceLine"
+              sourceLayerID="mapillary-sequences"
+              style={styles.line}
+            />
+          </MapboxGL.VectorSource>
+        </MapboxGL.MapView>
+      </Page>
+    );
+  }
+}
+
+export default ThirdPartyVectorTileSource;