J-N000
/
Potential-Energy
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

almost finished infographic

Jared Norris 8 years ago
parent
a62b6ce8ff
commit
e0a8536dd3
4 changed files with 39 additions and 19 deletions
Split View Show Diff Stats
  1. 1
    1
      VueApp/index.html
  2. 20
    6
      VueApp/src/components/ElevationGraph.vue
  3. 11
    10
      VueApp/src/components/GoogleMap.vue
  4. 7
    2
      VueApp/src/components/Main.vue

+ 1
- 1
VueApp/index.html View File 

@@ -6,6 +6,6 @@
6 6 
   </head>
7 7 
   <body>
8 8 
     <div id="app"></div>
9 
-    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDq8NHbKHAd2HE3SCtIpxq8yYVD16PzUlY&sensor=false"></script>
9 
+    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDq8NHbKHAd2HE3SCtIpxq8yYVD16PzUlY"></script>
10 10 
   </body>
11 11 
 </html>

+ 20
- 6
VueApp/src/components/ElevationGraph.vue View File 

@@ -1,5 +1,6 @@
1 1 
 <template>
2 2 
   <GChart
3 
+    v-if="chartData"
3 4 
     type="ColumnChart"
4 5 
     :data="chartData"
5 6 
     :options="chartOptions"
 
@@ -12,11 +13,16 @@
12 13 
   export default {
13 14 
     name: 'ElevationGraph',
14 15 
     components: { GChart },
16 
+    props: ['currentRoute'],
17 
+    watch: {
18 
+      currentRoute (newVal) {
19 
+        this.getPathElevation(newVal)
20 
+      }
21 
+    },
15 22 
     data () {
16 23 
       return {
17 
-        currentRoute: null,
18 24 
         elevationService: null,
19 
-        chartData: [],
25 
+        chartData: null,
20 26 
         chartOptions: {
21 27 
           chart: {
22 28 
             title: 'Elevation Report'
 
@@ -25,17 +31,25 @@
25 31 
       }
26 32 
     },
27 33 
     methods: {
28 
-      getPathElevation () {
34 
+      getPathElevation (route) {
35 
+        let path = []
36 
+        route.forEach(e => path.push({
37 
+          lat: e.lat(),
38 
+          lng: e.lng()
39 
+        }))
40 
+        console.log(path)
41 
+        // -----------------------------
29 42 
         this.chartData = []
30 43 
         this.elevationService = new google.maps.ElevationService() // eslint-disable-line no-undef
31 44 
         this.elevationService.getElevationAlongPath({
32 
-          'path': this.currentRoute,
45 
+          'path': path,
33 46 
           'samples': 256
34 
-        }, function (elevations, status) {
47 
+        }, (elevations, status) => {
35 48 
           if (status === 'OK') {
36 
-            elevations.forEach(e => this.chartData.push(['', e.elevation]))
49 
+            elevations.forEach(e => this.chartData.push(['elevation', e.elevation]))
37 50 
           }
38 51 
         })
52 
+        console.log(this.chartData)
39 53 
       }
40 54 
     }
41 55 
   }

+ 11
- 10
VueApp/src/components/GoogleMap.vue View File 

@@ -77,34 +77,35 @@
77 77 
         }
78 78 
       },
79 79 
       removeMarkers () {
80 
-        this.clearRoute()
80 
+        this.clearMap()
81 81 
         this.markers = []
82 82 
       },
83 83 
       setRoute (a, b) {
84 
-        this.clearRoute()
84 
+        this.clearMap()
85 85 
         this.directionsService = new google.maps.DirectionsService() // eslint-disable-line no-undef
86 86 
         this.directionsDisplay = new google.maps.DirectionsRenderer({ draggable: true }) // eslint-disable-line no-undef
87 87 
         this.directionsDisplay.setMap(this.$refs.gMap.$mapObject)
88 88 
         // -------------------------------------------------------
89 
-        let vm = this
90 
-        vm.directionsService.route({
89 
+        this.directionsService.route({
91 90 
           origin: a.position,
92 91 
           destination: b.position,
93 92 
           travelMode: 'DRIVING'
94 
-        }, function (response, status) {
93 
+        }, (response, status) => {
95 94 
           if (status === 'OK') {
96 
-            vm.directionsDisplay.setDirections(response)
97 
-            this.currentRoute = response
95 
+            this.directionsDisplay.setDirections(response)
96 
+            this.currentRoute = response.routes[0].overview_path
98 97 
           } else {
99 98 
             alert('Directions request failed due to ' + status)
100 99 
           }
101 100 
         })
102 101 
       },
103 
-      clearRoute () {
104 
-        if (this.directionsDisplay) this.directionsDisplay.setMap(null)
102 
+      clearMap () {
103 
+        if (this.directionsDisplay) {
104 
+          this.directionsDisplay.setMap(null)
105 
+        }
105 106 
       },
106 107 
       emitRoute () {
107 
-        /* if (this.currentRoute) */ this.$emit('updateRoute', this.currentRoute)
108 
+        if (this.currentRoute) this.$emit('updateRoute', this.currentRoute)
108 109 
         console.log('emitting route')
109 110 
       }
110 111 
     }

+ 7
- 2
VueApp/src/components/Main.vue View File 

@@ -7,7 +7,7 @@
7 7 
       <GoogleMap v-on:updateRoute="updateElevation"/>
8 8 
     </div>
9 9 
     <div class="infoGraphic">
10 
-      <ElevationGraph/>
10 
+      <ElevationGraph :currentRoute="route"/>
11 11 
     </div>
12 12 
   </div>
13 13 
 </template>
 
@@ -21,13 +21,18 @@
21 21 
     beforeMount () {
22 22 
       this.auth.login()
23 23 
     },
24 
+    data () {
25 
+      return {
26 
+        route: null
27 
+      }
28 
+    },
24 29 
     components: {
25 30 
       GoogleMap,
26 31 
       ElevationGraph
27 32 
     },
28 33 
     methods: {
29 34 
       updateElevation (route) {
30 
-        console.log(route)
35 
+        if (route) this.route = route
31 36 
       }
32 37 
     }
33 38 
   }