use bootstrap buttons

src/Google.js

@@ -4,6 +4,7 @@ import "./css/maps.css";
 import apiKey from './config/googleApiKey.js';
 import {calcDistance} from './helpers/distance';
 import {longitude, latitude, mapWidth, mapHeight, markerIcon, testPath} from "./config/variables";
+import {Button} from "reactstrap";
 
 const svgStyle = {
   top: "-20",
@@ -130,8 +131,8 @@ export default class Google extends React.Component{
         </div>
 
         <div className="mapInfo">
-          <button onClick={this.clearPath}>Clear path</button>
-          <button onClick={this.getDistance}>Calculate Distance</button>
+          <Button onClick={this.clearPath}>Clear path</Button>
+          <Button onClick={this.getDistance}>Calculate Distance</Button>
           <p>
             Distanz: {Math.round(this.state.distance*100)/100} km
           </p>

src/MapGL.js

@@ -13,6 +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";
 
 export default class MapGL extends React.Component{
   state = {
@@ -150,8 +151,8 @@ export default class MapGL extends React.Component{
         </div>
 
         <div className="mapInfo">
-          <button onClick={this.clearPath}>Clear path</button>
-          <button onClick={this.getDistance}>Calculate Distance</button>
+          <Button onClick={this.clearPath}>Clear path</Button>
+          <Button onClick={this.getDistance}>Calculate Distance</Button>
           <p>
             Distanz: {Math.round(this.state.distance*100)/100} km
           </p>

src/Mapbox.js

@@ -9,6 +9,7 @@ import ReactMapboxGl, {
 import mapboxToken from './config/mapboxToken.js';
 import {calcDistance} from './helpers/distance';
 import {longitude, latitude, mapWidth, mapHeight} from "./config/variables";
+import {Button} from "reactstrap";
 
 const Map = ReactMapboxGl({ accessToken: mapboxToken });
 
@@ -81,8 +82,8 @@ export default class Mapbox extends React.Component{
           </Map>
         </div>
         <div className="mapInfo">
-          <button onClick={this.clearPath}>Clear path</button>
-          <button onClick={this.getDistance}>Calculate Distance</button>
+          <Button onClick={this.clearPath}>Clear path</Button>
+          <Button onClick={this.getDistance}>Calculate Distance</Button>
           <p>
             Distanz: {Math.round(this.state.distance*100)/100} km
           </p>

src/Pigeon.js

@@ -3,6 +3,7 @@ import Map from "pigeon-maps";
 import Marker from "pigeon-marker";
 import Overlay from "pigeon-overlay";
 import {longitude, latitude, mapWidth, mapHeight} from "./config/variables";
+import {Button} from "reactstrap";
 
 export default class Pigeon extends React.Component{
   providers = {
@@ -15,12 +16,12 @@ export default class Pigeon extends React.Component{
       return `https://stamen-tiles.a.ssl.fastly.net/terrain/${z}/${x}/${y}${dpr >= 2 ? '@2x' : ''}.jpg`
     }
   }
-  
+
   zoomIn = () => {
     let newZoom = Math.min(this.props.mapConfig.zoom + 1, 22)
     this.props.updateMapState("zoom", newZoom)
   }
-  
+
   zoomOut = () => {
     let newZoom = Math.max(this.props.mapConfig.zoom - 1, 0)
     this.props.updateMapState("zoom", newZoom)
@@ -69,10 +70,10 @@ export default class Pigeon extends React.Component{
         </div>
 
         <div className="mapInfo">
-          <button onClick={this.zoomIn}>+</button>
-          <button onClick={this.zoomOut}>-</button>
-          <button onClick={this.removeMarkers}>Clear path</button>
-          <button onClick={this.props.getDistance}>Calculate Distance</button>
+          <Button onClick={this.zoomIn}>+</Button>
+          <Button onClick={this.zoomOut}>-</Button>
+          <Button onClick={this.removeMarkers}>Clear path</Button>
+          <Button onClick={this.props.getDistance}>Calculate Distance</Button>
           <p>
             Distanz: {Math.round(mapConfig.distance*100)/100} km
           </p>