瀏覽代碼

switch lat lng in path for mapbox, added path buttons

Bernadette Elena Hammerle 4 年之前
父節點
當前提交
4efc382599
共有 5 個文件被更改,包括 21 次插入5 次删除
  1. 8 1
      src/PathButtons.js
  2. 5 1
      src/helpers/dbHelpers.js
  3. 0 1
      src/helpers/mapboxHelper.js
  4. 7 1
      src/maps/MapGL.js
  5. 1 1
      src/maps/Mapbox.js

+ 8 - 1
src/PathButtons.js

@@ -23,7 +23,14 @@ export default class PathButtons extends React.Component{
   }
 
   getPath = () => {
-    fetchPaths().then(paths => this.props.updateState("path", paths[this.state.pathKey]))
+    fetchPaths().then(paths => {
+      let path = paths[this.state.pathKey]
+       console.log(paths)
+      if ("switchLatLng" in this.props){
+        path = path.map(pos => [pos[1], pos[0]])
+      }
+      this.props.updateState("path", path)
+    })
   }
 
   choosePath = (event) => {

+ 5 - 1
src/helpers/dbHelpers.js

@@ -29,10 +29,14 @@ export const fetchPaths = () => {
 
 
 export function savePathToDb(){
+  let path = this.props.path
+  if ("switchLatLng" in this.props){
+    path = path.map(pos => [pos[1], pos[0]])
+  }
   let json = JSON.stringify({
       path: {
         name: this.state.savePathKey,
-        coords: this.props.path
+        coords: path
       }
     })
   let reqOptions = {

+ 0 - 1
src/helpers/mapboxHelper.js

@@ -1,7 +1,6 @@
 import mapboxToken from "./../config/mapboxToken.js";
 
 export function getRoute(lng, lat){
-  console.log(this)
   let pathCopy = this.state.path.slice();
   var end = [lng, lat];
   if (this.state.path.length < 1){

+ 7 - 1
src/maps/MapGL.js

@@ -15,6 +15,7 @@ import {calcDistance} from "./../helpers/distance";
 import {longitude, latitude, mapWidth, mapHeight, markerIcon} from "./../config/variables";
 import {Button} from "reactstrap";
 import {getRoute} from "./../helpers/mapboxHelper";
+import PathButtons from "./../PathButtons";
 
 export default class MapGL extends React.Component{
   constructor(props){
@@ -32,10 +33,14 @@ export default class MapGL extends React.Component{
       path: [[longitude, latitude]],
       distance: 0,
     }
-
     this.getRoute = getRoute.bind(this)
   }
 
+  updateState = (key, value) => {
+    this.setState({[key]: value})
+    this.getDistance()
+  }
+
   addMarker = event => {
     const lng = event.lngLat[0]
     const lat = event.lngLat[1]
@@ -123,6 +128,7 @@ export default class MapGL extends React.Component{
           <p>
             Distanz: {Math.round(this.state.distance*100)/100} km
           </p>
+          <PathButtons updateState={this.updateState} path={this.state.path} switchLatLng={true}/>
         </div>
       </div>
     );

+ 1 - 1
src/maps/Mapbox.js

@@ -96,7 +96,7 @@ export default class Mapbox extends React.Component{
           <p>
             Distanz: {Math.round(this.state.distance*100)/100} km
           </p>
-          <PathButtons updateState={this.updateState} path={this.state.path}/>
+          <PathButtons updateState={this.updateState} path={this.state.path} switchLatLng={true}/>
         </div>
       </div>
     );