Added more examples

example/src/App.js

@@ -35,6 +35,9 @@ import ShowRegionDidChange from './components/ShowRegionDidChange';
 import YoYo from './components/YoYo';
 import EarthQuakes from './components/EarthQuakes';
 import GeoJSONSource from './components/GeoJSONSource';
+import WatercolorRasterTiles from './components/WatercolorRasterTiles';
+import TwoByTwo from './components/TwoByTwo';
+import IndoorBuilding from './components/IndoorBuilding';
 
 const styles = StyleSheet.create({
   header: {
@@ -84,6 +87,9 @@ const Examples = [
   new ExampleItem('Yo Yo Camera', YoYo),
   new ExampleItem('Clustering Earthquakes', EarthQuakes),
   new ExampleItem('GeoJSON Source', GeoJSONSource),
+  new ExampleItem('Watercolor Raster Tiles', WatercolorRasterTiles),
+  new ExampleItem('Two Map Views', TwoByTwo),
+  new ExampleItem('Indoor Building Map', IndoorBuilding),
 ];
 
 class App extends React.Component {

example/src/components/GeoJSONSource.js

@@ -5,9 +5,14 @@ import BaseExamplePropTypes from './common/BaseExamplePropTypes';
 import Page from './common/Page';
 
 import sheet from '../styles/sheet';
+
+import gridPattern from '../assets/grid_pattern.png'
 import smileyFaceGeoJSON from '../assets/smiley_face.json';
 
 const layerStyles = MapboxGL.StyleSheet.create({
+  background: {
+    backgroundPattern: gridPattern,
+  },
   smileyFace: {
     fillAntialias: true,
     fillColor: 'white',
@@ -31,6 +36,10 @@ class GeoJSONSource extends React.Component {
             style={sheet.matchParent}
             styleURL={MapboxGL.StyleURL.Dark}>
 
+            <MapboxGL.VectorSource>
+              <MapboxGL.BackgroundLayer id='background' style={layerStyles.background} />
+            </MapboxGL.VectorSource>
+
             <MapboxGL.ShapeSource id='smileyFaceSource' shape={smileyFaceGeoJSON}>
               <MapboxGL.FillLayer id='smileyFaceFill' style={layerStyles.smileyFace} />
             </MapboxGL.ShapeSource>

example/src/components/IndoorBuilding.js

@@ -0,0 +1,92 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import MapboxGL from 'react-native-mapbox-gl';
+import { Slider } from 'react-native-elements';
+
+import BaseExamplePropTypes from './common/BaseExamplePropTypes';
+import Page from './common/Page';
+
+import sheet from '../styles/sheet';
+import colors from '../styles/colors';
+import indoorMapGeoJSON from '../assets/indoor_3d_map.json';
+
+const styles = StyleSheet.create({
+  slider: {
+    flex: 1,
+    alignItems: 'stretch',
+    justifyContent: 'center',
+    maxHeight: 60,
+    paddingHorizontal: 24,
+  }
+});
+
+const layerStyles = MapboxGL.StyleSheet.create({
+  light: {
+
+  },
+  building: {
+    fillExtrusionOpacity: 0.5,
+    fillExtrusionHeight: MapboxGL.StyleSheet.identity('height'),
+    fillExtrusionBase: MapboxGL.StyleSheet.identity('base_height'),
+    fillExtrusionColor: MapboxGL.StyleSheet.identity('color'),
+    fillExtrusionColorTransition: { duration: 2000, delay: 0 },
+  },
+});
+
+class IndoorBuilding extends React.Component {
+  static propTypes = {
+    ...BaseExamplePropTypes,
+  };
+
+  constructor (props) {
+    super(props);
+
+    this.state = {
+      sliderValue: -80,
+    };
+
+    this.onSliderChange = this.onSliderChange.bind(this);
+  }
+
+  onSliderChange (value) {
+    this.setState({ sliderValue: value });
+  }
+
+  render () {
+    return (
+      <Page {...this.props}>
+        <MapboxGL.MapView
+            zoomLevel={16}
+            pitch={40}
+            heading={20}
+            centerCoordinate={[-87.61694, 41.86625]}
+            ref={(ref) => this.map = ref}
+            style={sheet.matchParent}>
+
+            <MapboxGL.Light style={{ position: [5, 90, this.state.sliderValue] }} />
+
+            <MapboxGL.ShapeSource id='indoorBuildingSource' shape={indoorMapGeoJSON}>
+              <MapboxGL.FillExtrusionLayer
+                id='building3d'
+                style={layerStyles.building} />
+            </MapboxGL.ShapeSource>
+
+        </MapboxGL.MapView>
+
+        <View style={styles.slider}>
+          <Slider
+            value={this.state.sliderValue}
+            onValueChange={this.onSliderChange}
+            thumbTintColor={colors.primary.blue}
+            minimumValue={-180}
+            maximumValue={180}
+            thumbTouchSize={{ width: 44, height: 44 }}
+            maximumTrackTintColor={colors.secondary.purpleLight}
+            minimumTrackTintColor={colors.secondary.purpleDark} />
+        </View>
+      </Page>
+    );
+  }
+}
+
+export default IndoorBuilding;

example/src/components/TwoByTwo.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import MapboxGL from 'react-native-mapbox-gl';
+
+import BaseExamplePropTypes from './common/BaseExamplePropTypes';
+import Page from './common/Page';
+
+import sheet from '../styles/sheet';
+import smileyFaceGeoJSON from '../assets/smiley_face.json';
+
+const layerStyles = MapboxGL.StyleSheet.create({
+  smileyFaceLight: {
+    fillAntialias: true,
+    fillColor: 'white',
+    fillOutlineColor: 'rgba(255, 255, 255, 0.84)',
+  },
+  smileyFaceDark: {
+    fillAntialias: true,
+    fillColor: 'black',
+    fillOutlineColor: 'rgba(0, 0, 0, 0.84)',
+  },
+});
+
+class TwoByTwo extends React.Component {
+  static propTypes = {
+    ...BaseExamplePropTypes,
+  };
+
+  renderMap (styleURL, layerStyle) {
+    return (
+      <MapboxGL.MapView
+          zoomLevel={2}
+          centerCoordinate={[-35.15165038, 40.62357280]}
+          onSetCameraComplete={this.onUpdateZoomLevel}
+          ref={(ref) => this.map = ref}
+          style={sheet.matchParent}
+          styleURL={styleURL}>
+          <MapboxGL.ShapeSource id='smileyFaceSource' shape={smileyFaceGeoJSON}>
+            <MapboxGL.FillLayer id='smileyFaceFill' style={layerStyle} />
+          </MapboxGL.ShapeSource>
+      </MapboxGL.MapView>
+    );
+  }
+
+  render () {
+    return (
+      <Page {...this.props}>
+        {this.renderMap(MapboxGL.StyleURL.Light, layerStyles.smileyFaceDark)}
+        {this.renderMap(MapboxGL.StyleURL.Dark, layerStyles.smileyFaceLight)}
+      </Page>
+    );
+  }
+}
+
+export default TwoByTwo;

example/src/components/WatercolorRasterTiles.js

@@ -0,0 +1,84 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import MapboxGL from 'react-native-mapbox-gl';
+import { Slider } from 'react-native-elements';
+
+import BaseExamplePropTypes from './common/BaseExamplePropTypes';
+import Page from './common/Page';
+
+import sheet from '../styles/sheet';
+import colors from '../styles/colors';
+import { SF_OFFICE_COORDINATE } from '../utils';
+
+const styles = StyleSheet.create({
+  slider: {
+    flex: 1,
+    alignItems: 'stretch',
+    justifyContent: 'center',
+    maxHeight: 60,
+    paddingHorizontal: 24,
+  }
+});
+
+const layerStyles = MapboxGL.StyleSheet.create({
+  watercolors: {
+    rasterOpacity: 1,
+  },
+});
+
+class WatercolorRasterTiles extends React.Component {
+  static propTypes = {
+    ...BaseExamplePropTypes,
+  };
+
+  constructor (props) {
+    super(props);
+
+    this.state = {
+      opacity: 1,
+    }
+
+    this.onOpacityChange = this.onOpacityChange.bind(this);
+  }
+
+  onOpacityChange (value) {
+    this.setState({ opacity: value });
+  }
+
+  render () {
+    const rasterSourceProps = {
+      id: 'stamenWatercolorSource',
+      url: 'https://stamen-tiles.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg',
+      tileSize: 256,
+    };
+
+    return (
+      <Page {...this.props}>
+        <MapboxGL.MapView
+            zoomLevel={16}
+            centerCoordinate={SF_OFFICE_COORDINATE}
+            style={sheet.matchParent}>
+
+            <MapboxGL.RasterSource {...rasterSourceProps}>
+              <MapboxGL.RasterLayer
+                id='stamenWatercolorLayer'
+                sourceID='stamenWatercolorSource'
+                style={{ rasterOpacity: this.state.opacity }} />
+            </MapboxGL.RasterSource>
+        </MapboxGL.MapView>
+
+        <View style={styles.slider}>
+          <Slider
+            value={this.state.opacity}
+            onValueChange={this.onOpacityChange}
+            thumbTintColor={colors.primary.blue}
+            thumbTouchSize={{ width: 44, height: 44 }}
+            maximumTrackTintColor={colors.secondary.purpleLight}
+            minimumTrackTintColor={colors.secondary.purpleDark} />
+        </View>
+      </Page>
+    );
+  }
+}
+
+export default WatercolorRasterTiles;

example/src/components/YoYo.js

@@ -5,15 +5,20 @@ import BaseExamplePropTypes from './common/BaseExamplePropTypes';
 import Page from './common/Page';
 
 import sheet from '../styles/sheet';
+import colors from '../styles/colors';
+
 import { SF_OFFICE_COORDINATE } from '../utils';
 
 const layerStyles = MapboxGL.StyleSheet.create({
+  background: {
+    backgroundColor: colors.primary.blue,
+  },
    water: {
     fillColor: MapboxGL.StyleSheet.camera({
-        1: 'green',
-        8: 'blue',
-        10: 'red',
-        18: 'yellow',
+        1: colors.secondary.green,
+        8: colors.secondary.orange,
+        10: colors.secondary.red,
+        18: colors.secondary.yellow,
     }, MapboxGL.InterpolationMode.Exponential),
   },
 });
@@ -55,6 +60,7 @@ class YoYo extends React.Component {
             styleURL={MapboxGL.StyleURL.Dark}>
 
             <MapboxGL.VectorSource>
+              <MapboxGL.BackgroundLayer id='background' style={layerStyles.background} />
               <MapboxGL.FillLayer id='water' style={layerStyles.water} />
             </MapboxGL.VectorSource>
         </MapboxGL.MapView>