mapgl: draw path

src/maps/MapGL.js

@@ -6,10 +6,9 @@ import {
   FullscreenControl,
   ScaleControl,
   GeolocateControl,
-//  Layer,
-//  Source,
+  Layer,
+  Source,
 } from "react-map-gl";
-//import {Polyline} from "@mapbox/polyline";
 import "./../css/maps.css";
 import mapboxToken from "./../config/mapboxToken.js";
 import {calcDistance} from "./../helpers/distance";
@@ -88,17 +87,6 @@ export default class MapGL extends React.Component{
     }
   }
 
-//  geojson = {
-//    type: 'FeatureCollection',
-//    features: [{
-//      type: 'Feature',
-//      geometry: {
-//        type: 'LineString',
-//        coordinates: this.state.path
-//      }
-//    }]
-//  }
-
   render() {
     return (
       <div>
@@ -110,23 +98,20 @@ export default class MapGL extends React.Component{
             mapStyle="mapbox://styles/mapbox/streets-v11"
             onClick={this.addMarker}
           >
-          {/*
-          <Source id="my-data" type="geojson" data={this.geojson}>
+
+          <Source
+            id="routeSource"
+            type="geojson"
+            data={{type: "LineString", coordinates: this.state.path}}
+          >
             <Layer
-              source="my-data"
-              id="point"
+              source="routeSource"
+              id="route"
               type="line"
-              paint={{
-                "line-color": "#888",
-                "line-width": 8
-              }}
-              layout= {{
-                "line-join": "round",
-                "line-cap": "round"
-              }}
+              paint={{"line-color": "#888", "line-width": 2}}
+              layout= {{"line-join": "round", "line-cap": "round"}}
             />
           </Source>
-          */}
 
           {this.state.path.map((pos, idx) =>
             <Marker