mapbox: draw path; clean up

src/maps/Mapbox.js

@@ -5,7 +5,6 @@ import ReactMapboxGl, {
     ZoomControl,
     ScaleControl,
     RotationControl,
-    Source,
     Marker,
 } from "react-mapbox-gl";
 import mapboxToken from "./../config/mapboxToken.js";
@@ -14,7 +13,6 @@ import {longitude, latitude, mapWidth, mapHeight, markerIcon} from "./../config/
 import {Button} from "reactstrap";
 import {getRoute, mapStyles} from "./../helpers/mapboxHelper";
 import PathButtons from "./../PathButtons";
-import {GeoJSONLayer} from "react-mapbox-gl";
 import EvaluationTable from "./../EvaluationTable";
 
 const Map = ReactMapboxGl({ accessToken: mapboxToken });
@@ -96,7 +94,8 @@ export default class Mapbox extends React.Component{
       )}
     } else {
       markers = (
-        <Layer type="symbol" id="marker" layout={{"icon-image": "marker-15"}}>
+        <Layer type="symbol" id="marker"
+          layout={{"icon-image": "marker-15", "icon-anchor": "bottom", "icon-offset": [0,3]}}>
           {this.state.path.map((pos, idx) =>
             <Feature
               coordinates={pos}
@@ -123,36 +122,12 @@ export default class Mapbox extends React.Component{
             onClick={(e, c) => this.addMarker(e, c)}
           >
 
-            {/*<Layer type="line" layout={{'line-join': 'round', 'line-cap': 'round'}}
-  paint={{"line-color": "#888", "line-width": 3}}
-                source="routeSource"
-              id="routeSource"
-              type="line"
-  data={{type: "LineString", coordinates: this.state.path}}
->
-    <Feature
-              source="routeSource"
-              id="route"
-              type="line"
-      data={{type: "line", coordinates: this.state.path}}
-      paint={{"line-color": "#888", "line-width": 3}}
-              layout= {{"line-join": "round", "line-cap": "round"}}
-    />
-</Layer>*/}
-
-          <Source
-            id="routeSource"
-            type="geojson"
-            data={{type: "LineString", coordinates: this.state.path}}
-          >
-            <Layer
-              source="routeSource"
-              id="route"
-              type="line"
+            <Layer type="line"
+              layout={{"line-join": "round", "line-cap": "round"}}
               paint={{"line-color": "#888", "line-width": 3}}
-              layout= {{"line-join": "round", "line-cap": "round"}}
-            />
-          </Source>
+            >
+                <Feature coordinates = {this.state.path}/>
+            </Layer>
 
             {markers}