leaflet: added opacity and weight to form

src/css/maps.css

@@ -12,6 +12,7 @@
 .mapInfo{
   float: left;
   margin-bottom: 30px;
+  width: 600px;
 }
 
 .mapTestContainer{
@@ -40,6 +41,14 @@ input[type="color"]{
   margin-right: 10px;
 }
 
+.row div {
+  padding: 0px;
+}
+
+.row div .custom-switch{
+  padding-left: 3.0rem;
+}
+
 button{
   margin-right: 3px;
 }

src/maps/Leaflet.js

@@ -9,13 +9,12 @@ import {
   FeatureGroup
 } from "react-leaflet";
 import {EditControl} from "react-leaflet-draw";
-import L from "leaflet";
 import "./../css/maps.css";
 import {calcDistance} from "./../helpers/distance";
 import {longitude, latitude, mapWidth, mapHeight} from "./../config/variables";
 import {Button} from "reactstrap";
 import PathButtons from "./../PathButtons";
-import {CustomInput, Input, Label} from "reactstrap";
+import {CustomInput, Input, Label, Row, Col, Container} from "reactstrap";
 
 export default class Leaflet extends React.Component{
   constructor(props){
@@ -26,14 +25,14 @@ export default class Leaflet extends React.Component{
       zoom: 15,
       path: [],
       distance: 0,
-      drawMode: true,
+      drawMode: false,
       shapeOptions: {
         color: "#000",
         opacity: 1,
         fillColor: "#000",
         fillOpacity: 0.2,
         weight: 2,
-        smoothFactor: 50
+        smoothFactor: 20
       }
     }
   }
@@ -88,11 +87,11 @@ export default class Leaflet extends React.Component{
   }
 
   updateShapeOptions = (event, option) => {
-    let color = event.target.value
+    let value = event.target.value
     this.setState(prevState => ({
       shapeOptions: {
         ...prevState.shapeOptions,
-        [option]: color
+        [option]: value
       }
     }))
   }
@@ -166,13 +165,52 @@ export default class Leaflet extends React.Component{
             Distanz: {Math.round(this.state.distance*100)/100} km
           </p>
           <PathButtons updateState={this.updateState} path={this.state.path}/>
-
+          <br/>
           <div>
-            <CustomInput type="switch" onChange={this.switchDrawMode} id="drawMode" name="drawMode" label="draw" />
-            <Label for="colorPicker">Line Color</Label>
-            <Input type="color" onChange={(e) => this.updateShapeOptions(e, "color")} name="color" id="colorPicker" placeholder="colorPicker"/>
-            <Label for="fillColorPicker">Fill Color</Label>
-            <Input type="color" onChange={(e) => this.updateShapeOptions(e, "fillColor")} name="fillColorPicker" id="fillColorPicker" placeholder="fillColorPicker"/>
+            <Container>
+              <Row>
+                <Col xs="2">
+                  <Label for="drawMode">Draw</Label>
+                </Col>
+                <Col xs="2">
+                  <CustomInput type="switch" onChange={this.switchDrawMode} id="drawMode" name="drawMode"/>
+                </Col>
+                <Col xs="2">
+                  <Label for="weight">Weight</Label>
+                </Col>
+                <Col xs="6">
+                  <Input type="range" onChange={(e) => this.updateShapeOptions(e, "weight")} name="weight" id="weight" placeholder="weight" min="1" max="20" value={this.state.shapeOptions.weight}/>
+                </Col>
+              </Row>
+              <Row>
+                <Col xs="2">
+                  <Label for="colorPicker">Line Color</Label>
+                </Col>
+                <Col xs="2">
+                  <Input type="color" onChange={(e) => this.updateShapeOptions(e, "color")} name="color" id="colorPicker" placeholder="colorPicker"/>
+                </Col>
+                <Col xs="2">
+                  <Label for="opacity">Opacity</Label>
+                </Col>
+                <Col xs="6">
+                  <Input type="range" onChange={(e) => this.updateShapeOptions(e, "opacity")} name="opacity" id="opacity" placeholder="opacity" min="0" max="1" step="0.1" value={this.state.shapeOptions.opacity}/>
+                </Col>
+              </Row>
+              <Row>
+                <Col xs="2">
+                  <Label for="fillColorPicker">Fill Color</Label>
+                </Col>
+                <Col xs="2">
+                  <Input type="color" onChange={(e) => this.updateShapeOptions(e, "fillColor")} 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.updateShapeOptions(e, "fillOpacity")} name="fillOpacity" id="fillOpacity" placeholder="fillOpacity" min="0" max="1" step="0.1" value={this.state.shapeOptions.fillOpacity}/>
+                </Col>
+              </Row>
+            </Container>
           </div>
         </div>
       </div>