leaflet: let user pick the color for drawing

src/css/maps.css

@@ -34,6 +34,12 @@
   top: 2px;
 }
 
+input[type="color"]{
+  width: 50px;
+  margin-left: 5px;
+  margin-right: 10px;
+}
+
 button{
   margin-right: 3px;
 }

src/maps/Leaflet.js

@@ -15,7 +15,7 @@ import {calcDistance} from "./../helpers/distance";
 import {longitude, latitude, mapWidth, mapHeight} from "./../config/variables";
 import {Button} from "reactstrap";
 import PathButtons from "./../PathButtons";
-import {CustomInput} from "reactstrap";
+import {CustomInput, Input, Label} from "reactstrap";
 
 export default class Leaflet extends React.Component{
   constructor(props){
@@ -26,7 +26,15 @@ export default class Leaflet extends React.Component{
       zoom: 15,
       path: [],
       distance: 0,
-      drawMode: false
+      drawMode: true,
+      shapeOptions: {
+        color: "#000",
+        opacity: 1,
+        fillColor: "#000",
+        fillOpacity: 0.2,
+        weight: 2,
+        smoothFactor: 50
+      }
     }
   }
 
@@ -63,30 +71,6 @@ export default class Leaflet extends React.Component{
     this.setState({path: [], distance: 0})
   }
 
-
-  _onEdited = (e) => {
-    let numEdited = 0;
-    e.layers.eachLayer( (layer) => {
-      numEdited += 1;
-    });
-    this._onChange();
-  }
-
-  _onCreated = (e) => {
-    let type = e.layerType;
-    let layer = e.layer;
-    // Do whatever else you need to. (save to db; etc)
-    this._onChange();
-  }
-
-  _onDeleted = (e) => {
-    let numDeleted = 0;
-    e.layers.eachLayer( (layer) => {
-      numDeleted += 1;
-    });
-    this._onChange();
-  }
-
   _editableFG = null
 
   _onChange = () => {
@@ -99,10 +83,20 @@ export default class Leaflet extends React.Component{
     onChange(geojsonData);
   }
 
-  changeDrawSwitch = () => {
+  switchDrawMode = () => {
     this.setState({drawMode: !this.state.drawMode})
   }
 
+  updateShapeOptions = (event, option) => {
+    let color = event.target.value
+    this.setState(prevState => ({
+      shapeOptions: {
+        ...prevState.shapeOptions,
+        [option]: color
+      }
+    }))
+  }
+
   render() {
     const position = [this.state.latitude, this.state.longitude]
     let testMarkers = this.props.markers
@@ -136,23 +130,30 @@ export default class Leaflet extends React.Component{
             style={{width: mapWidth, height: mapHeight}}
             onClick={this.addMarker}
           >
-              <TileLayer
-                attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
-                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+            <TileLayer
+              attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+            />
+
+            <FeatureGroup>
+              <EditControl
+                position="topright"
+                onEdited={this._onEdited}
+                onCreated={this._onCreated}
+                onDeleted={this._onDeleted}
+                draw={{
+                  marker: false,
+                  circlemarker: false,
+                  polyline: {shapeOptions: this.state.shapeOptions},
+                  polygon: {shapeOptions: this.state.shapeOptions},
+                  circle: {shapeOptions: this.state.shapeOptions},
+                  rectangle: {shapeOptions: this.state.shapeOptions},
+                }}
               />
+            </FeatureGroup>
 
-              <FeatureGroup>
-                <EditControl
-                  position='topright'
-                  onEdited={this._onEdited}
-                  onCreated={this._onCreated}
-                  onDeleted={this._onDeleted}
-                  draw={{rectangle: false}}
-                />
-              </FeatureGroup>
-
-              {markers}
-              <Polyline color="grey" positions={this.state.path} />
+            {markers}
+            <Polyline color="grey" positions={this.state.path} />
 
             <ZoomControl position="bottomright" />
           </Map>
@@ -161,11 +162,18 @@ export default class Leaflet extends React.Component{
         <div className="mapInfo">
           <Button onClick={this.clearPath}>Clear path</Button>
           <Button onClick={this.getDistance}>Calculate Distance</Button>
-          <CustomInput type="switch" onChange={this.changeDrawSwitch} id="drawMode" name="drawMode" label="draw" />
           <p>
             Distanz: {Math.round(this.state.distance*100)/100} km
           </p>
           <PathButtons updateState={this.updateState} path={this.state.path}/>
+
+          <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"/>
+          </div>
         </div>
       </div>
     );