mapgl: draw: user form

src/maps/MapGL.js

@@ -13,7 +13,7 @@ import "./../css/maps.css";
 import mapboxToken from "./../config/mapboxToken.js";
 import {calcDistance} from "./../helpers/distance";
 import {longitude, latitude, mapWidth, mapHeight, markerIcon} from "./../config/variables";
-import {Button} from "reactstrap";
+import {Button, Input, Label, CustomInput, Row, Col, Container} from "reactstrap";
 import {getRoute} from "./../helpers/mapboxHelper";
 import PathButtons from "./../PathButtons";
 import {
@@ -46,6 +46,11 @@ export default class MapGL extends React.Component{
       distance: 0,
       drawModeId: null,
       drawModeHandler: null,
+      color: "rgb(189,189,189)",
+      strokeDash: "4,2",
+      strokeWidth: 2,
+      fill: "rgb(189,189,189)",
+      fillOpacity: 0.2
     }
     this.getRoute = getRoute.bind(this)
   }
@@ -56,9 +61,11 @@ export default class MapGL extends React.Component{
   }
 
   addMarker = event => {
-    const lng = event.lngLat[0]
-    const lat = event.lngLat[1]
-    this.getRoute(lng, lat);
+    if (this.state.drawModeHandler===null){
+      const lng = event.lngLat[0]
+      const lat = event.lngLat[1]
+      this.getRoute(lng, lat);
+    }
   }
 
   updateMarker = (idx, event) => {
@@ -83,20 +90,20 @@ export default class MapGL extends React.Component{
     const modeId = event.target.value===this.state.drawModeId ? null:event.target.value;
     const mode = drawModes.find((m) => m.id===modeId);
     const modeHandler = mode ? new mode.handler() : null;
-    this.setState({"drawModeid": modeId, "drawModeHandler": modeHandler });
+    this.setState({"drawModeid": modeId, "drawModeHandler": modeHandler});
   };
 
   drawToolbar = () => {
     return (
-      <div style={{ position: "absolute", top: 0, right: 0, maxWidth: "320px"}}>
-        <select onChange={this.switchDrawMode}>
-          <option value="">--Please choose a draw mode--</option>
+      <div style={{maxWidth: "320px"}}>
+        <Input type="select" onChange={this.switchDrawMode}>
+          <option value="">-</option>
             {drawModes.map((mode) => (
               <option key={mode.id} value={mode.id}>
                 {mode.text}
               </option>
             ))}
-        </select>
+        </Input>
       </div>
     )
   }
@@ -175,18 +182,18 @@ export default class MapGL extends React.Component{
             <Editor
               clickRadius={12}
               mode={this.state.drawModeHandler}
-              onSelect={(_) => {}}
+              onSelect={(_) => {console.log("on select")}}
               featureStyle={({ feature, state }) => {
                 return {
-                  stroke: "rgb(189,189,189)",
-                  strokeDasharray: "4,2",
-                  strokeWidth: 2,
-                  fill: "rgb(189,189,189)",
-                  fillOpacity: 0.1
+                  stroke: this.state.color,
+                  strokeDasharray: this.state.strokeDash,
+                  strokeWidth: this.state.strokeWidth,
+                  fill: this.state.fill,
+                  fillOpacity: this.state.fillOpacity
                 }
               }}
             />
-            {this.drawToolbar()}
+
 
             <div className="controllers">
               <GeolocateControl />
@@ -205,6 +212,54 @@ export default class MapGL extends React.Component{
             Distanz: {Math.round(this.state.distance*100)/100} km
           </p>
           <PathButtons updateState={this.updateState} path={this.state.path} switchLatLng={true}/>
+
+          <br/>
+
+
+
+          <div>
+            <Container>
+              <Row>
+                <Col xs="4">
+                  {this.drawToolbar()}
+                </Col>
+                <Col xs="2">
+                  <Label for="colorPicker">Stroke Dash</Label>
+                </Col>
+                <Col xs="6">
+                  <Input type="text" onChange={(e) => this.setState({"strokeDash": e.target.value})} name="strokeDash" id="strokeDash" placeholder="4,2"/>
+                </Col>
+              </Row>
+              <Row>
+                <Col xs="2">
+                  <Label for="colorPicker">Line Color</Label>
+                </Col>
+                <Col xs="2">
+                  <Input type="color" onChange={(e) => this.setState({"color": e.target.value})} name="color" id="colorPicker" placeholder="colorPicker"/>
+                </Col>
+                <Col xs="2">
+                  <Label for="weight">Weight</Label>
+                </Col>
+                <Col xs="6">
+                  <Input type="range" onChange={(e) => this.setState({"strokeWidth": e.target.value})} name="weight" id="weight" placeholder="weight" min="1" max="20" value={this.state.weight}/>
+                </Col>
+              </Row>
+              <Row>
+                <Col xs="2">
+                  <Label for="fillColorPicker">Fill Color</Label>
+                </Col>
+                <Col xs="2">
+                  <Input type="color" onChange={(e) => this.setState({"fill": e.target.value})} name="fillColorPicker" id="fillColorPicker" placeholder="fillColorPicker"/>
+                </Col>
+                <Col xs="2">
+                  <Label for="fillOpacity">Fill Opacity</Label>
+                </Col>
+                <Col xs="6">
+                  <Input type="range" onChange={(e) => this.setState({"fillOpacity": e.target.value})} name="fillOpacity" id="fillOpacity" placeholder="fillOpacity" min="0" max="1" step="0.1" value={this.state.fillOpacity}/>
+                </Col>
+              </Row>
+            </Container>
+          </div>
         </div>
       </div>
     );