mapgl: draw markers as circles

src/maps/MapGL.js

@@ -108,12 +108,13 @@ export default class MapGL extends React.Component{
               source="routeSource"
               id="route"
               type="line"
-              paint={{"line-color": "#888", "line-width": 2}}
+              paint={{"line-color": "#888", "line-width": 3}}
               layout= {{"line-join": "round", "line-cap": "round"}}
             />
           </Source>
 
-          {this.state.path.map((pos, idx) =>
+          {this.state.path.map((pos, idx) => {
+            return(
             <Marker
               longitude={pos[0]}
               latitude={pos[1]}
@@ -124,11 +125,14 @@ export default class MapGL extends React.Component{
               key={idx}
               onDragEnd={(e) => this.updateMarker(idx, e)}
             >
-              <svg height={20} viewBox="0 0 24 24" style={{fill: "#343a40", stroke: "none"}}>
-                <path d={markerIcon} />
+              <svg height={20} viewBox="0 0 24 24" style={{fill: "#343a40", stroke: "none", position: "absolute", top: "3px"}}>
+                {(idx===0 || idx===this.state.path.length-1 ?
+                  (<path d={markerIcon} /> )
+                  : (<circle cx="10" cy="19" r="5"/>)
+                )}
               </svg>
             </Marker>
-          )}
+          )})}
 
             <div className="controllers">
               <GeolocateControl />