diff --git a/example/src/App.js b/example/src/App.js
index d514b6e..a580a91 100644
--- a/example/src/App.js
+++ b/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 {
diff --git a/example/src/assets/grid_pattern.png b/example/src/assets/grid_pattern.png
new file mode 100644
index 0000000..3f50fc9
Binary files /dev/null and b/example/src/assets/grid_pattern.png differ
diff --git a/example/src/assets/indoor_3d_map.json b/example/src/assets/indoor_3d_map.json
new file mode 100644
index 0000000..b68876c
--- /dev/null
+++ b/example/src/assets/indoor_3d_map.json
@@ -0,0 +1,1321 @@
+{
+  "features": [
+    {
+      "type": "Feature",
+      "properties": {
+        "level": 1,
+        "name": "Bird Exhibit",
+        "height": 0,
+        "base_height": 0,
+        "color": "orange"
+      },
+      "geometry": {
+        "coordinates": [
+          [
+            [
+              -87.618312,
+              41.866282
+            ],
+            [
+              -87.61832,
+              41.866674
+            ],
+            [
+              -87.618087,
+              41.866676
+            ],
+            [
+              -87.618087,
+              41.866661
+            ],
+            [
+              -87.617423,
+              41.86667
+            ],
+            [
+              -87.617416,
+              41.8663
+            ],
+            [
+              -87.618312,
+              41.866282
+            ]
+          ]
+        ],
+        "type": "Polygon"
+      },
+      "id": "06e8fa0b3f851e3ae0e1da5fc17e111e"
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "level": 1,
+        "name": "Bird Exhibit",
+        "height": 40,
+        "base_height": 0,
+        "color": "grey"
+      },
+      "geometry": {
+        "coordinates": [
+          [
+            [
+              -87.617808,
+              41.866266
+            ],
+            [
+              -87.617806,
+              41.866293
+            ],
+            [
+              -87.617415,
+              41.866298
+            ],
+            [
+              -87.617424,
+              41.866671
+            ],
+            [
+              -87.617382,
+              41.866669
+            ],
+            [
+              -87.617371,
+              41.866274
+            ],
+            [
+              -87.617808,
+              41.866266
+            ]
+          ]
+        ],
+        "type": "Polygon"
+      },
+      "id": "08a10ab2bf15c4d14669b588062f7f08"
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "level": 1,
+        "name": "East Hallway",
+        "base_height": 0,
+        "height": 0,
+        "color": "indigo"
+      },
+      "geometry": {
+        "coordinates": [
+          [
+            [
+              -87.616704,
+              41.866141
+            ],
+            [
+              -87.616707,
+              41.866338
+            ],
+            [
+              -87.61572,
+              41.866355
+            ],
+            [
+              -87.61572,
+              41.866148
+            ],
+            [
+              -87.616704,
+              41.866141
+            ]
+          ]
+        ],
+        "type": "Polygon"
+      },
+      "id": "09ead44537d94ece576c7bc001c33e53"
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "level": 1,
+        "name": "East Entrance",
+        "base_height": 0,
+        "height": 0,
+        "color": "violet"
+      },
+      "geometry": {
+        "coordinates": [
+          [
+            [
+              -87.61544,
+              41.866149
+            ],
+            [
+              -87.615449,
+              41.866358
+            ],
+            [
+              -87.615721,
+              41.866355
+            ],
+            [
+              -87.61572,
+              41.866143
+            ],
+            [
+              -87.61544,
+              41.866149
+            ]
+          ]
+        ],
+        "type": "Polygon"
+      },
+      "id": "12251ebf764b36cf3b8c5ad42e2deb29"
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "height": 0,
+        "base_height": 0,
+        "level": 1,
+        "name": "Under the Earth",
+        "color": "red"
+      },
+      "geometry": {
+        "coordinates": [
+          [
+            [
+              -87.616701,
+              41.865816
+            ],
+            [
+              -87.616705,
+              41.866115
+            ],
+            [
+              -87.615712,
+              41.866125
+            ],
+            [
+              -87.615706,
+              41.865802
+            ],
+            [
+              -87.615936,
+              41.865801
+            ],
+            [
+              -87.615938,
+              41.865824
+            ],
+            [
+              -87.616701,
+              41.865816
+            ]
+          ]
+        ],
+        "type": "Polygon"
+      },
+      "id": "1ce4f8c186a40b9927006644e27bfd69"
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "level": 1,
+        "name": "Atrium",
+        "base_height": 0,
+        "height": 0,
+        "color": "yellow"
+      },
+      "geometry": {
+        "coordinates": [
+          [
+            [
+              -87.617365,
+              41.865799
+            ],
+            [
+              -87.6167,
+              41.865815
+            ],
+            [
+              -87.616718,
+              41.866672
+            ],
+            [
+              -87.617384,
+              41.86667
+            ],
+            [
+              -87.617365,
+              41.865799
+            ]
+          ]
+        ],
+        "type": "Polygon"
+      },
+      "id": "369f5d8865e677120b7576b1de6082eb"
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "level": 1,
+        "name": "Ancient Egypt",
+        "height": 0,
+        "base_height": 0,
+        "color": "blue"
+      },
+      "geometry": {
+        "coordinates": [
+          [
+            [
+              -87.61807,
+              41.865761
+            ],
+            [
+              -87.618299,
+              41.865758
+            ],
+            [
+              -87.618307,
+              41.866139
+            ],
+            [
+              -87.617407,
+              41.86615
+            ],
+            [
+              -87.617399,
+              41.865799
+            ],
+            [
+              -87.61807,
+              41.865789
+            ],
+            [
+              -87.61807,
+              41.865761
+            ]
+          ]
+        ],
+        "type": "Polygon"
+      },
+      "id": "3e9f198afe6d7dff01ac81c6eaa511fb"
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "level": 1,
+        "name": "West Arch",
+        "height": 40,
+        "base_height": 30,
+        "color": "grey"
+      },
+      "geometry": {
+        "coordinates": [
+          [
+            [
+              -87.617424,
+              41.86667
+            ],
+            [
+              -87.617384,
+              41.86667
+            ],
+            [
+              -87.617365,
+              41.865799
+            ],
+            [
+              -87.617405,
+              41.865799
+            ],
+            [
+              -87.617424,
+              41.86667
+            ]
+          ]
+        ],
+        "type": "Polygon"
+      },
+      "id": "402706f28b793d27c78d9615fff747f2"
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "level": 1,
+        "name": "Bird Exhibit",
+        "height": 40,
+        "base_height": 0,
+        "color": "grey"
+      },
+      "geometry": {
+        "coordinates": [
+          [
+            [
+              -87.618312,
+              41.866283
+            ],
+            [
+              -87.61797,
+              41.866288
+            ],
+            [
+              -87.617972,
+              41.866265
+            ],
+            [
+              -87.618312,
+              41.866259
+            ],
+            [
+              -87.618312,
+              41.866283
+            ]
+          ]
+        ],
+        "type": "Polygon"
+      },
+      "id": "43e1e2fc8399dee075ad59764f2a2878"
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "name": "Arch",
+        "level": 1,
+        "color": "grey",
+        "base_height": 30,
+        "height": 40
+      },
+      "geometry": {
+        "coordinates": [
+          [
+            [
+              -87.617971,
+              41.866291
+            ],
+            [
+              -87.617973,
+              41.866265
+            ],
+            [
+              -87.617805,
+              41.866267
+            ],
+            [
+              -87.617806,
+              41.866294
+            ],
+            [
+              -87.617971,
+              41.866291
+            ]
+          ]
+        ],
+        "type": "Polygon"
+      },
+      "id": "4528ad9b9264cbec65bb2e55ac0012c1"
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "level": 1,
+        "color": "grey",
+        "base_height": 30,
+        "height": 40,
+        "name": "Arch"
+      },
+      "geometry": {
+        "coordinates": [
+          [
+            [
+              -87.617979,
+              41.866167
+            ],
+            [
+              -87.617797,
+              41.866168
+            ],
+            [
+              -87.617799,
+              41.866145
+            ],
+            [
+              -87.617976,
+              41.866144
+            ],
+            [
+              -87.617979,
+              41.866167
+            ]
+          ]
+        ],
+        "type": "Polygon"
+      },
+      "id": "4be6817c3b595042c8d971eebd0c4fd3"
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "name": "Kids Zone",
+        "level": 1,
+        "base_height": 0,
+        "height": 0,
+        "color": "green"
+      },
+      "geometry": {
+        "coordinates": [
+          [
+            [
+              -87.616718,
+              41.866675
+            ],
+            [
+              -87.616709,
+              41.866371
+            ],
+            [
+              -87.615725,
+              41.866381
+            ],
+            [
+              -87.615732,
+              41.866711
+            ],
+            [
+              -87.61596,
+              41.866711
+            ],
+            [
+              -87.61596,
+              41.866688
+            ],
+            [
+              -87.616718,
+              41.866675
+            ]
+          ]
+        ],
+        "type": "Polygon"
+      },
+      "id": "5775eba03674ea1cb3550ffb38321432"
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "level": 1,
+        "color": "grey",
+        "name": "Arch",
+        "height": 40,
+        "base_height": 30
+      },
+      "geometry": {
+        "coordinates": [
+          [
+            [
+              -87.616286,
+              41.866119
+            ],
+            [
+              -87.616286,
+              41.866144
+            ],
+            [
+              -87.616089,
+              41.866149
+            ],
+            [
+              -87.616086,
+              41.86612
+            ],
+            [
+              -87.616286,
+              41.866119
+            ]
+          ]
+        ],
+        "type": "Polygon"
+      },
+      "id": "598832b1512dc9facc855c5367251531"
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "level": 1,
+        "name": "Arch",
+        "color": "grey",
+        "height": 40,
+        "base_height": 30
+      },
+      "geometry": {
+        "coordinates": [
+          [
+            [
+              -87.616287,
+              41.866343
+            ],
+            [
+              -87.616288,
+              41.866374
+            ],
+            [
+              -87.616076,
+              41.866378
+            ],
+            [
+              -87.616077,
+              41.866347
+            ],
+            [
+              -87.616287,
+              41.866343
+            ]
+          ]
+        ],
+        "type": "Polygon"
+      },
+      "id": "59ed13d4411ff5f88714d9af539788d2"
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "level": 1,
+        "color": "grey",
+        "name": "center_arch",
+        "base_height": 30,
+        "height": 40
+      },
+      "geometry": {
+        "coordinates": [
+          [
+            [
+              -87.61737,
+              41.866198
+            ],
+            [
+              -87.617372,
+              41.86624
+            ],
+            [
+              -87.616708,
+              41.866243
+            ],
+            [
+              -87.616708,
+              41.866203
+            ],
+            [
+              -87.61737,
+              41.866198
+            ]
+          ]
+        ],
+        "type": "Polygon"
+      },
+      "id": "67f8952a18dfe21ee0744a3e86bc41d8"
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "level": 1,
+        "name": "Kids Zone",
+        "height": 0,
+        "base_height": 40,
+        "color": "grey"
+      },
+      "geometry": {
+        "coordinates": [
+          [
+            [
+              -87.615719,
+              41.866354
+            ],
+            [
+              -87.615718,
+              41.866381
+            ],
+            [
+              -87.616077,
+              41.866378
+            ],
+            [
+              -87.616077,
+              41.866347
+            ],
+            [
+              -87.615719,
+              41.866354
+            ]
+          ]
+        ],
+        "type": "Polygon"
+      },
+      "id": "6bb2c92386bcf4678113d6b3e400ae3b"
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "level": 1,
+        "name": "Under the Earth",
+        "height": 40,
+        "base_height": 0,
+        "color": "grey"
+      },
+      "geometry": {
+        "coordinates": [
+          [
+            [
+              -87.616089,
+              41.866149
+            ],
+            [
+              -87.616089,
+              41.866119
+            ],
+            [
+              -87.615711,
+              41.866124
+            ],
+            [
+              -87.615713,
+              41.866147
+            ],
+            [
+              -87.616089,
+              41.866149
+            ]
+          ]
+        ],
+        "type": "Polygon"
+      },
+      "id": "844c87987089df6b9db3923f6a00e4d6"
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "level": 1,
+        "name": "Under the Earth",
+        "height": 40,
+        "base_height": 0,
+        "color": "grey"
+      },
+      "geometry": {
+        "coordinates": [
+          [
+            [
+              -87.616707,
+              41.866115
+            ],
+            [
+              -87.616286,
+              41.866119
+            ],
+            [
+              -87.616285,
+              41.866144
+            ],
+            [
+              -87.616705,
+              41.866141
+            ],
+            [
+              -87.616707,
+              41.866115
+            ]
+          ]
+        ],
+        "type": "Polygon"
+      },
+      "id": "85547a1ecdbd2ca1fdc6324aea3c6b70"
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "level": 1,
+        "name": "North Entrance",
+        "height": 0,
+        "base_height": 0,
+        "color": "grey"
+      },
+      "geometry": {
+        "coordinates": [
+          [
+            [
+              -87.617386,
+              41.86667
+            ],
+            [
+              -87.617388,
+              41.866786
+            ],
+            [
+              -87.617228,
+              41.866786
+            ],
+            [
+              -87.617226,
+              41.866848
+            ],
+            [
+              -87.616867,
+              41.866849
+            ],
+            [
+              -87.616868,
+              41.866791
+            ],
+            [
+              -87.616718,
+              41.866791
+            ],
+            [
+              -87.616718,
+              41.866672
+            ],
+            [
+              -87.617386,
+              41.86667
+            ]
+          ]
+        ],
+        "type": "Polygon"
+      },
+      "id": "91ab1ee01729c33568c7b57eb258e699"
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "level": 1,
+        "name": "Ancient Egypt",
+        "height": 40,
+        "base_height": 0,
+        "color": "grey"
+      },
+      "geometry": {
+        "coordinates": [
+          [
+            [
+              -87.617394,
+              41.865799
+            ],
+            [
+              -87.617405,
+              41.86615
+            ],
+            [
+              -87.617802,
+              41.866147
+            ],
+            [
+              -87.6178,
+              41.866167
+            ],
+            [
+              -87.617369,
+              41.866172
+            ],
+            [
+              -87.617364,
+              41.865799
+            ],
+            [
+              -87.617394,
+              41.865799
+            ]
+          ]
+        ],
+        "type": "Polygon"
+      },
+      "id": "943171d55d207024791e15294def7e8f"
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "level": 1,
+        "name": "Ancient Egypt",
+        "height": 40,
+        "base_height": 0,
+        "color": "grey"
+      },
+      "geometry": {
+        "coordinates": [
+          [
+            [
+              -87.617976,
+              41.866166
+            ],
+            [
+              -87.617976,
+              41.866143
+            ],
+            [
+              -87.618309,
+              41.866139
+            ],
+            [
+              -87.618309,
+              41.866161
+            ],
+            [
+              -87.617976,
+              41.866166
+            ]
+          ]
+        ],
+        "type": "Polygon"
+      },
+      "id": "a37230898905988cab9b72927dc99258"
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "name": "West Hallway",
+        "level": 1,
+        "base_height": 0,
+        "height": 0,
+        "color": "grey"
+      },
+      "geometry": {
+        "coordinates": [
+          [
+            [
+              -87.618309,
+              41.866161
+            ],
+            [
+              -87.618312,
+              41.86626
+            ],
+            [
+              -87.61737,
+              41.866272
+            ],
+            [
+              -87.61737,
+              41.86617
+            ],
+            [
+              -87.618309,
+              41.866161
+            ]
+          ]
+        ],
+        "type": "Polygon"
+      },
+      "id": "c7cc79da8711d746985f23a9b22c1d5e"
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "level": 1,
+        "name": "Kids Zone",
+        "height": 40,
+        "base_height": 0,
+        "color": "grey"
+      },
+      "geometry": {
+        "coordinates": [
+          [
+            [
+              -87.616286,
+              41.866343
+            ],
+            [
+              -87.616286,
+              41.866374
+            ],
+            [
+              -87.61671,
+              41.866371
+            ],
+            [
+              -87.616708,
+              41.866338
+            ],
+            [
+              -87.616286,
+              41.866343
+            ]
+          ]
+        ],
+        "type": "Polygon"
+      },
+      "id": "cfbf2aee6a73a45c12e7fc7432d6009e"
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "level": 1,
+        "name": "South Entrance",
+        "height": 0,
+        "base_height": 0,
+        "color": "teal"
+      },
+      "geometry": {
+        "coordinates": [
+          [
+            [
+              -87.617359,
+              41.865801
+            ],
+            [
+              -87.617355,
+              41.865674
+            ],
+            [
+              -87.617221,
+              41.865677
+            ],
+            [
+              -87.617219,
+              41.86559
+            ],
+            [
+              -87.616824,
+              41.865595
+            ],
+            [
+              -87.616826,
+              41.86568
+            ],
+            [
+              -87.616695,
+              41.865683
+            ],
+            [
+              -87.6167,
+              41.865813
+            ],
+            [
+              -87.617359,
+              41.865801
+            ]
+          ]
+        ],
+        "type": "Polygon"
+      },
+      "id": "d71ab89467076ad023161c37f4ff0d5f"
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "level": 1,
+        "name": "East Arch",
+        "height": 40,
+        "base_height": 30,
+        "color": "grey"
+      },
+      "geometry": {
+        "coordinates": [
+          [
+            [
+              -87.616688,
+              41.866675
+            ],
+            [
+              -87.616716,
+              41.866675
+            ],
+            [
+              -87.616699,
+              41.865814
+            ],
+            [
+              -87.616665,
+              41.865814
+            ],
+            [
+              -87.616688,
+              41.866675
+            ]
+          ]
+        ],
+        "type": "Polygon"
+      },
+      "id": "dd2baec57e4079eb65dcae5be495da62"
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "level": 1,
+        "name": "outer-walls",
+        "base_height": 0,
+        "height": 40,
+        "color": "grey"
+      },
+      "geometry": {
+        "coordinates": [
+          [
+            [
+              -87.618087,
+              41.86666
+            ],
+            [
+              -87.618087,
+              41.866674
+            ],
+            [
+              -87.618319,
+              41.866674
+            ],
+            [
+              -87.618298,
+              41.865757
+            ],
+            [
+              -87.618326,
+              41.865756
+            ],
+            [
+              -87.618347,
+              41.866693
+            ],
+            [
+              -87.618068,
+              41.866696
+            ],
+            [
+              -87.618067,
+              41.866675
+            ],
+            [
+              -87.61741,
+              41.866684
+            ],
+            [
+              -87.617416,
+              41.866802
+            ],
+            [
+              -87.617247,
+              41.866803
+            ],
+            [
+              -87.617246,
+              41.866866
+            ],
+            [
+              -87.616846,
+              41.866868
+            ],
+            [
+              -87.616848,
+              41.866807
+            ],
+            [
+              -87.61669,
+              41.866811
+            ],
+            [
+              -87.616693,
+              41.866693
+            ],
+            [
+              -87.615992,
+              41.866701
+            ],
+            [
+              -87.615992,
+              41.866729
+            ],
+            [
+              -87.615703,
+              41.866733
+            ],
+            [
+              -87.615689,
+              41.866377
+            ],
+            [
+              -87.615412,
+              41.866382
+            ],
+            [
+              -87.615411,
+              41.866122
+            ],
+            [
+              -87.615689,
+              41.866119
+            ],
+            [
+              -87.615682,
+              41.865781
+            ],
+            [
+              -87.615966,
+              41.865779
+            ],
+            [
+              -87.615969,
+              41.865798
+            ],
+            [
+              -87.616669,
+              41.865794
+            ],
+            [
+              -87.616663,
+              41.865662
+            ],
+            [
+              -87.6168,
+              41.865661
+            ],
+            [
+              -87.616796,
+              41.865571
+            ],
+            [
+              -87.61726,
+              41.865559
+            ],
+            [
+              -87.617258,
+              41.865654
+            ],
+            [
+              -87.617388,
+              41.865652
+            ],
+            [
+              -87.617395,
+              41.865778
+            ],
+            [
+              -87.618045,
+              41.865773
+            ],
+            [
+              -87.618044,
+              41.865742
+            ],
+            [
+              -87.618325,
+              41.865739
+            ],
+            [
+              -87.618326,
+              41.865758
+            ],
+            [
+              -87.61807,
+              41.865761
+            ],
+            [
+              -87.61807,
+              41.865789
+            ],
+            [
+              -87.617356,
+              41.8658
+            ],
+            [
+              -87.617356,
+              41.865672
+            ],
+            [
+              -87.617218,
+              41.865677
+            ],
+            [
+              -87.617215,
+              41.86559
+            ],
+            [
+              -87.616822,
+              41.865595
+            ],
+            [
+              -87.616827,
+              41.86568
+            ],
+            [
+              -87.616694,
+              41.865681
+            ],
+            [
+              -87.616697,
+              41.865813
+            ],
+            [
+              -87.615939,
+              41.865824
+            ],
+            [
+              -87.615937,
+              41.8658
+            ],
+            [
+              -87.615706,
+              41.865802
+            ],
+            [
+              -87.615713,
+              41.866143
+            ],
+            [
+              -87.615441,
+              41.86615
+            ],
+            [
+              -87.61545,
+              41.866357
+            ],
+            [
+              -87.615724,
+              41.866353
+            ],
+            [
+              -87.615733,
+              41.866712
+            ],
+            [
+              -87.615959,
+              41.86671
+            ],
+            [
+              -87.615959,
+              41.866688
+            ],
+            [
+              -87.616719,
+              41.866672
+            ],
+            [
+              -87.61672,
+              41.866791
+            ],
+            [
+              -87.616869,
+              41.86679
+            ],
+            [
+              -87.616868,
+              41.86685
+            ],
+            [
+              -87.617223,
+              41.866847
+            ],
+            [
+              -87.617227,
+              41.866786
+            ],
+            [
+              -87.617387,
+              41.866785
+            ],
+            [
+              -87.617383,
+              41.86667
+            ],
+            [
+              -87.618087,
+              41.86666
+            ]
+          ]
+        ],
+        "type": "Polygon"
+      },
+      "id": "ef6512f46485e27963c248bcc945c3db"
+    }
+  ],
+  "type": "FeatureCollection"
+}
\ No newline at end of file
diff --git a/example/src/components/GeoJSONSource.js b/example/src/components/GeoJSONSource.js
index 4e09620..59946c4 100644
--- a/example/src/components/GeoJSONSource.js
+++ b/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>
diff --git a/example/src/components/IndoorBuilding.js b/example/src/components/IndoorBuilding.js
new file mode 100644
index 0000000..db72408
--- /dev/null
+++ b/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;
diff --git a/example/src/components/TwoByTwo.js b/example/src/components/TwoByTwo.js
new file mode 100644
index 0000000..523db20
--- /dev/null
+++ b/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;
diff --git a/example/src/components/WatercolorRasterTiles.js b/example/src/components/WatercolorRasterTiles.js
new file mode 100644
index 0000000..5905d04
--- /dev/null
+++ b/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;
diff --git a/example/src/components/YoYo.js b/example/src/components/YoYo.js
index c014c4c..a2eea07 100644
--- a/example/src/components/YoYo.js
+++ b/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>