From 27a3ac8c209ee36b8e8c1bc41c9db8c5126a2ee3 Mon Sep 17 00:00:00 2001
From: Kyle Barron <barronk@mit.edu>
Date: Sun, 8 Dec 2019 20:55:11 -0700
Subject: [PATCH] Working vector layer overlay

---
 components/Map.js | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/components/Map.js b/components/Map.js
index 349953c..13106e1 100644
--- a/components/Map.js
+++ b/components/Map.js
@@ -8,6 +8,7 @@ import { point, featureCollection } from '@turf/helpers';
 export class Map extends React.Component {
   state = {
     waypoints: null,
+    nationalParkBoundariesVisible: false,
   };
 
   componentDidMount() {
@@ -83,6 +84,26 @@ export class Map extends React.Component {
               />
             </MapboxGL.ShapeSource>
           )}
+
+          {this.state.nationalParkBoundariesVisible && (
+            <MapboxGL.VectorSource
+              id="nationalParkBoundaries"
+              url="https://tiles.nst.guide/nationalpark/tile.json"
+              onPress={event =>
+                console.log(event.nativeEvent.payload.properties)
+              }
+              ref={source => {
+                this._vectorSource = source;
+              }}
+            >
+              <MapboxGL.FillLayer
+                id="nationalParkFill"
+                sourceLayerID="nationalpark"
+                style={layerStyles.nationalParkFill}
+                visibility="visible"
+              />
+            </MapboxGL.VectorSource>
+          )}
         </MapboxGL.MapView>
       </View>
     );
@@ -96,6 +117,9 @@ const layerStyles = {
   waypointCircle: {
     circleColor: 'rgb(204, 50, 50)',
   },
+  nationalParkFill: {
+    fillColor: 'rgb(0, 102, 0)',
+  },
 };
 
 const styles = StyleSheet.create({