import React from "react";
import GoogleMapReact from "google-map-react";
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",
left: "-8",
position: "absolute"
};
const Marker = ({ text }) =>
;
export default class Google extends React.Component{
state = {
latitude: latitude,
longitude: longitude,
zoom: 15,
distance: 0,
path: testPath,
draggable: true
}
componentDidUpdate(){
this.drawPath()
}
getRoute = (lng, lat) => {
let pathCopy = this.state.path.slice();
var end = [lat, lng];
if (this.state.path.length < 1){
pathCopy.push(end)
this.setState({path: pathCopy})
} else {
var start = this.state.path[this.state.path.length-1];
var proxyurl = "https://cors-anywhere.herokuapp.com/";
var baseUrl = "https://maps.googleapis.com/maps/api/directions/json?origin="
var url = baseUrl + start[0] + "," + start[1] + "&destination=" + end[0] + "," + end[1] + "&key=" + apiKey;
var reqOptions = {
method:'GET',
mode: 'cors',
headers:{
'Access-Control-Allow-Origin':'*'
},
}
fetch(proxyurl + url, reqOptions)
.then(response => response.json())
.then(data => {
let routes = data.routes
if(routes.length > 0){
let steps = routes[0].legs[0].steps
steps.forEach(step => {
pathCopy.push([step.end_location.lat, step.end_location.lng])
})
} else{
pathCopy.push(end)
}
this.setState({path: pathCopy})
this.getDistance()
})
.catch((error) =>{
console.error(error);
});
}
}
onMarkerInteraction = (childKey, childProps, mouse) => {
this.setState({draggable: false});
}
addMarker = (event) => {
const lng = event.lng
const lat = event.lat
// let pathCopy = this.state.path.slice();
// pathCopy.push([lat, lng])
// this.setState({path: pathCopy})
this.getRoute(lng, lat);
this.getDistance()
}
updateMarker = (childKey, childProps, mouse) => {
const lng = mouse.lng
const lat = mouse.lat
console.log("new position (marker", childKey, "):", lat, lng)
let pathCopy = this.state.path.slice();
pathCopy[childKey] = [lat, lng]
this.setState({path: pathCopy, draggable: true})
this.getDistance()
}
getDistance = () => {
let dst = calcDistance(this.state.path)
this.setState({distance: dst})
}
clearPath = () => {
this.setState({path: [], distance: 0})
}
drawPath = () => {
let path = this.state.path.map(p => {
return {lat: p[0], lng: p[1]}
})
let map = this.state.map
let maps = this.state.maps
new maps.Polyline({
path: path,
geodesic: true,
strokeColor: "#212529",
strokeOpacity: 1.0,
strokeWeight: 4,
map,
});
}
handleApiLoaded = (map, maps) => {
this.setState({map: map, maps: maps})
}
render() {
const position = [this.state.latitude, this.state.longitude]
return (
this.addMarker(e, c)}
draggable={this.state.draggable}
onChildMouseDown={this.onMarkerInteraction}
onChildMouseUp={this.updateMarker}
onGoogleApiLoaded={({map, maps}) => this.handleApiLoaded(map, maps)}
>
{this.state.path.map((pos, idx) =>
this.updateMarker(idx, e)}
/>
)}
Distanz: {Math.round(this.state.distance*100)/100} km
);
}
}