diff --git a/example/src/App.js b/example/src/App.js index 08bdabb3b..da3e12421 100644 --- a/example/src/App.js +++ b/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), diff --git a/example/src/components/ThirdPartyVectorTileSource.js b/example/src/components/ThirdPartyVectorTileSource.js new file mode 100644 index 000000000..f8aa62b7d --- /dev/null +++ b/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 ( + + + + + + + + ); + } +} + +export default ThirdPartyVectorTileSource;