added different mapstyles and dropdown menu to choose a style

src/maps/Leaflet.js

@@ -15,6 +15,17 @@ import {longitude, latitude, mapWidth, mapHeight} from "./../config/variables";
 import {Button} from "reactstrap";
 import PathButtons from "./../PathButtons";
 import {CustomInput, Input, Label, Row, Col, Container} from "reactstrap";
+import mapboxToken from "./../config/mapboxToken.js";
+
+
+const mapStyles = {
+  "bright": "bright-v9",
+  "satellite": "satellite-streets-v9",
+  "light": "light-v9",
+  "dark": "dark-v9",
+  "basic": "basic-v9",
+  "outdoor": "outdoors-v10"
+}
 
 export default class Leaflet extends React.Component{
   constructor(props){
@@ -26,6 +37,7 @@ export default class Leaflet extends React.Component{
       path: [],
       distance: 0,
       drawMode: false,
+      mapStyle: "bright-v9",
       shapeOptions: {
         color: "#000",
         opacity: 1,
@@ -96,6 +108,10 @@ export default class Leaflet extends React.Component{
     }))
   }
 
+  selectMapStyle = (event) => {
+    this.setState({mapStyle: mapStyles[event.target.value]})
+  }
+
   render() {
     const position = [this.state.latitude, this.state.longitude]
     let testMarkers = this.props.markers
@@ -131,7 +147,7 @@ export default class Leaflet extends React.Component{
           >
             <TileLayer
               attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
-              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+              url={"https://api.mapbox.com/styles/v1/mapbox/" + this.state.mapStyle + "/tiles/{z}/{x}/{y}?access_token=" + mapboxToken}
             />
 
             <FeatureGroup>
@@ -161,6 +177,11 @@ export default class Leaflet extends React.Component{
         <div className="mapInfo">
           <Button onClick={this.clearPath}>Clear path</Button>
           <Button onClick={this.getDistance}>Calculate Distance</Button>
+          <Input type="select" name="selectMapStyle" id="selectMapStyle" onChange={this.selectMapStyle}>
+            {Object.keys(mapStyles).map((key, idx) => (
+              <option value={key} key={idx}>{key}</option>
+            ))}
+          </Input>
           <p>
             Distanz: {Math.round(this.state.distance*100)/100} km
           </p>