Working vector layer overlay

nst-guide · Dec 9, 2019 · 27a3ac8 · 27a3ac8
1 parent 1f3d567
commit 27a3ac8
Showing 1 changed file with 24 additions and 0 deletions.
diff --git 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({