git commit

.gitignore

@@ -1,3 +1,4 @@
+package-lock.json
 # OSX
 #
 .DS_Store

App.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import sharedStyles from './shared-styles';
 import {
     Platform,
     StyleSheet,
@@ -15,6 +16,8 @@ import RunInfo from './components/run-info';
 import RunInfoNumeric from './components/run-info-num';
 
 import MapView from 'react-native-maps';
+import NewButton from "./components/new-button";
+import CapturedArea from "./components/captured-area";
 const instructions = Platform.select({
   ios: 'Press Cmd+R to reload,\n' +
     'Cmd+D or shake for dev menu',
@@ -27,27 +30,42 @@ let id = 0;
 export default class App extends Component<Props> {
     constructor(props) {
         super(props);
-        this.state = { markers: [] };
-
-
 
          setInterval(() => {
-            this.distanceInfo.setState({value: Math.random() * 100});
-            this.speedInfo.setState({value: Math.random() * 15});
-            this.directionInfo.setState({value: this.directionInfo.state === 'N' ? 'NW' : 'N'});
+            // this.distanceInfo.setState({value: Math.random() * 100});
+            // this.speedInfo.setState({value: Math.random() * 15});
+            // this.directionInfo.setState({value: this.directionInfo.state === 'N' ? 'NW' : 'N'});
         }, 1000);
 
         let watchID = navigator.geolocation.watchPosition((position) => {
             this.setState({
-                markers: [
-                    ...this.state.markers, {
+                walkMarkers: [
+                    ...this.state.walkMarkers, {
                         coordinate: position.coords,
                         key: id++
                     }
                 ]
-            }, null, {distanceFilter: 1});
-        });
-        this.state = {markers: [], watchID };
+            });
+        }, null, {enableHighAccuracy: true, timeout: 20000, distanceFilter: 10});
+        this.state = {
+            walkMarkers: [],
+            captures: [
+                new CapturedArea("fanded", [
+                    {latitude: -43.5623, longitude:172.5655},
+                    {latitude: -43.5623, longitude:172.5650},
+                    {latitude: -43.5628, longitude:172.5650},
+                    {latitude: -43.5628, longitude:172.5655}
+                ], 'rgba(255,0,255, 1)', 'rgba(255,0,255, 0.2)', 53),
+
+                new CapturedArea("samded", [
+                    {latitude: -43.5663, longitude:172.5615},
+                    {latitude: -43.5663, longitude:172.5610},
+                    {latitude: -43.5668, longitude:172.5610},
+                    {latitude: -43.5668, longitude:172.5615}
+                ], 'rgba(0,0,255, 1)', 'rgba(0,0,255, 0.2)', 53)
+            ],
+            watchID 
+        };
     }
 
     componentWillUnmount() {
@@ -55,7 +73,7 @@ export default class App extends Component<Props> {
     }
 
     render() {
-
+        
         return (
             <View style ={{flex: 1}}>
                 <MapView
@@ -69,31 +87,40 @@ export default class App extends Component<Props> {
                     }}
                     // onRegionChange = {(region)=> this.addMarker((region))}
                 >
+
                     <MapView.Polyline
-                        coordinates={this.state.markers.map((marker) => marker.coordinate)}
+                        coordinates={this.state.walkMarkers.map((marker) => marker.coordinate)}
                         strokeWidth={5}
                     />
-                    {/*{this.state.markers.map((marker) => (*/}
-                        {/*<MapView.Marker coordinate = {marker.coordinate} key={marker.key} />*/}
-                    {/*))}*/}
+                    {this.state.captures.map((capture, i) => {
+                        {console.log(capture);}
+                        return <MapView.Polygon
+                            key={i}
+                            coordinates={capture.coordinates}
+                            strokeWidth={2}
+                            strokeColor={capture.strokeColor}
+                            fillColor={capture.fillColor}
+                        />
+                        }
+                    )
+                    }
                 </MapView>
+                <View style={styles.infoWrapper}>
 
-
-               <View style={styles.infoWrapper}>
-
-                   <RunInfoNumeric title = "Distance"
-                                   unit="km"
-                                   ref={(info) => this.distanceInfo = info}
-                   />
-                   <RunInfoNumeric title = "Speed"
-                                   unit="km/h"
-                                   ref={(info) => this.speedInfo = info}
-                   />
-                   <RunInfo title = "Direction"
-                            value = "NE"
-                            ref={(info) => this.directionInfo = info}
-                   />
-               </View>
+                   {/*<RunInfoNumeric title = "Distance"*/}
+                                   {/*unit="km"*/}
+                                   {/*ref={(info) => this.distanceInfo = info}*/}
+                   {/*/>*/}
+                   {/*<RunInfoNumeric title = "Speed"*/}
+                                   {/*unit="km/h"*/}
+                                   {/*ref={(info) => this.speedInfo = info}*/}
+                   {/*/>*/}
+                   {/*<RunInfo title = "Direction"*/}
+                            {/*value = "NE"*/}
+                            {/*ref={(info) => this.directionInfo = info}*/}
+                   {/*/>*/}
+                   <NewButton erase={() => {this.setState({walkMarkers: []})}}/>
+                 </View>
            </View>
     );
   }

components/captured-area.js

@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+// import sharedStyles from './shared-styles';
+// import {
+//     Platform,
+//     StyleSheet,
+//     Image,
+//     ListView,
+//     Text,
+//     ScrollView,
+//     TextInput,
+//     TouchableHighlight,
+//     View
+// } from 'react-native';
+
+export default class CapturedArea {
+    constructor(userID, coordinates, strokeColor, fillColor, area) {
+        this.userID = userID;
+        this.coordinates = coordinates;
+        this.strokeColor = strokeColor;
+        this.fillColor = fillColor;
+        this.area = area;
+    }
+}

components/new-button.js

@@ -0,0 +1,35 @@
+import React, { Component } from 'react';
+import sharedStyles from '../shared-styles';
+import {
+    TouchableHighlight,
+    Platform,
+    StyleSheet,
+    Text,
+    View
+} from 'react-native';
+
+export default class NewButton extends Component {
+    constructor(props) {
+        super(props);
+        this.erase = this.props.erase;
+        this.state = { value: this.props.value};
+    }
+
+    formatValue() {
+        return this.state.value;
+    }
+
+    render() {
+        return (
+            <View style ={[sharedStyles.runInfoWrapper, {flex: 1}]}>
+            <TouchableHighlight
+                onPress=  {() => this.erase()}
+                // style={sharedStyles.new}
+            >
+                    <Text style={{fontSize: 25, textAlign: 'center'}}>New</Text>
+            </TouchableHighlight>
+            </View>
+
+        )
+    }
+}

gpx.gpx

@@ -0,0 +1,59 @@
+<?xml version="1.0"?>
+<gpx version="1.1" creator="gpxgenerator.com">
+<wpt lat="-43.56034430559162" lon="172.56487963850645">
+    <ele>20.00</ele>
+    <time>2018-09-29T00:14:32Z</time>
+</wpt>
+<wpt lat="-43.560389009756214" lon="172.5645457034841">
+    <ele>20.00</ele>
+    <time>2018-09-29T00:14:38Z</time>
+</wpt>
+<wpt lat="-43.56057462886744" lon="172.56421847398428">
+    <ele>20.00</ele>
+    <time>2018-09-29T00:14:46Z</time>
+</wpt>
+<wpt lat="-43.56077482475481" lon="172.56412727887778">
+    <ele>20.00</ele>
+    <time>2018-09-29T00:14:51Z</time>
+</wpt>
+<wpt lat="-43.560938196226466" lon="172.56437502082076">
+    <ele>20.00</ele>
+    <time>2018-09-29T00:14:57Z</time>
+</wpt>
+<wpt lat="-43.561183094481144" lon="172.5645091312715">
+    <ele>20.00</ele>
+    <time>2018-09-29T00:15:04Z</time>
+</wpt>
+<wpt lat="-43.56154822035659" lon="172.5645983288913">
+    <ele>20.00</ele>
+    <time>2018-09-29T00:15:14Z</time>
+</wpt>
+<wpt lat="-43.56176590553912" lon="172.56466806632568">
+    <ele>20.00</ele>
+    <time>2018-09-29T00:15:20Z</time>
+</wpt>
+<wpt lat="-43.56199330797017" lon="172.56471098166992">
+    <ele>20.00</ele>
+    <time>2018-09-29T00:15:26Z</time>
+</wpt>
+<wpt lat="-43.56214685271595" lon="172.56482095223953">
+    <ele>20.00</ele>
+    <time>2018-09-29T00:15:30Z</time>
+</wpt>
+<wpt lat="-43.562273186707" lon="172.56501675349762">
+    <ele>19.00</ele>
+    <time>2018-09-29T00:15:35Z</time>
+</wpt>
+<wpt lat="-43.56249281286084" lon="172.56543786031295">
+    <ele>19.00</ele>
+    <time>2018-09-29T00:15:45Z</time>
+</wpt>
+<wpt lat="-43.56234315618805" lon="172.56567657691528">
+    <ele>19.04</ele>
+    <time>2018-09-29T00:15:51Z</time>
+</wpt>
+<wpt lat="-43.56218766834203" lon="172.56602526408722">
+    <ele>20.00</ele>
+    <time>2018-09-29T00:15:59Z</time>
+</wpt>
+</gpx>

shared-styles.js

@@ -17,6 +17,9 @@ export default StyleSheet.create({
         fontWeight: '100',
         paddingVertical: 5
 
+    },
+    new: {
+        textAlign: 'center',
+        fontSize: 16
     }
-
 })