|
@@ -10,6 +10,7 @@ import {
|
|
import "./css/maps.css";
|
|
import "./css/maps.css";
|
|
import {calcDistance} from "./helpers/distance";
|
|
import {calcDistance} from "./helpers/distance";
|
|
import {longitude, latitude, mapWidth, mapHeight, testPath} from "./config/variables";
|
|
import {longitude, latitude, mapWidth, mapHeight, testPath} from "./config/variables";
|
|
|
|
+import {Button, Input} from 'reactstrap';
|
|
|
|
|
|
export default class Leaflet extends React.Component{
|
|
export default class Leaflet extends React.Component{
|
|
state = {
|
|
state = {
|
|
@@ -79,7 +80,7 @@ export default class Leaflet extends React.Component{
|
|
.then(data => {
|
|
.then(data => {
|
|
let pathKeyCopy = this.state.pathKeys.slice();
|
|
let pathKeyCopy = this.state.pathKeys.slice();
|
|
pathKeyCopy.push(this.state.savePathKey);
|
|
pathKeyCopy.push(this.state.savePathKey);
|
|
- this.setState({pathKeys: pathKeyCopy})
|
|
|
|
|
|
+ this.setState({pathKeys: pathKeyCopy, savePathKey: ""})
|
|
})
|
|
})
|
|
}
|
|
}
|
|
|
|
|
|
@@ -148,17 +149,17 @@ export default class Leaflet extends React.Component{
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div className="mapInfo">
|
|
<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>
|
|
|
|
|
|
- <button onClick={this.savePath}>save path</button>
|
|
|
|
- <input type="text" onChange={this.setSavePathKey} value={this.state.savePathKey}/>
|
|
|
|
|
|
+ <Input type="text" onChange={this.setSavePathKey} value={this.state.savePathKey}/>
|
|
|
|
+ <Button onClick={this.savePath}>save path</Button>
|
|
|
|
|
|
- <select name="paths" onChange={this.getPath.bind(this)}>
|
|
|
|
|
|
+ <Input type="select" name="select" id="savePath" onChange={this.getPath.bind(this)}>
|
|
{this.state.pathKeys.map((name, idx) =>
|
|
{this.state.pathKeys.map((name, idx) =>
|
|
<option value={name} key={idx}>{name}</option>
|
|
<option value={name} key={idx}>{name}</option>
|
|
)}
|
|
)}
|
|
- </select>
|
|
|
|
|
|
+ </Input>
|
|
|
|
|
|
<p>
|
|
<p>
|
|
Distanz: {Math.round(this.state.distance*100)/100} km
|
|
Distanz: {Math.round(this.state.distance*100)/100} km
|