12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394 |
- import React from "react";
- import ReactMapboxGl, {
- Layer,
- Feature,
- ZoomControl,
- ScaleControl,
- RotationControl,
- } from 'react-mapbox-gl';
- 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 });
- export default class Mapbox extends React.Component{
- state = {
- latitude: latitude,
- longitude: longitude,
- zoom: [15],
- path: [[longitude, latitude]],
- distance: 0,
- center: [longitude, latitude]
- }
- addMarker = (event, click) => {
- const lng = click.lngLat.lng
- const lat = click.lngLat.lat
- console.log("Clicked at", lat, "/", lng)
- let pathCopy = this.state.path.slice();
- pathCopy.push([lng, lat]);
- this.setState({path: pathCopy})
- this.getDistance()
- }
- updateMarker = (idx, event) => {
- const lng = event.lngLat.lng
- const lat = event.lngLat.lat
- console.log(lat, lng, idx)
- let pathCopy = this.state.path.slice();
- pathCopy[idx] = [lng, lat]
- this.setState({path: pathCopy})
- this.getDistance()
- }
- getDistance = () => {
- let dst = calcDistance(this.state.path)
- this.setState({distance: dst})
- }
- clearPath = () => {
- this.setState({path: [], distance: 0})
- }
- render() {
- const position = [this.state.longitude, this.state.latitude]
- return (
- <div>
- <div className="map">
- <Map
- style="mapbox://styles/mapbox/bright-v9"
- containerStyle={{
- height: mapHeight,
- width: mapWidth
- }}
- center={this.state.center}
- zoom={this.state.zoom}
- onClick={(e, c) => this.addMarker(e, c)}
- >
- <Layer type="symbol" id="marker" layout={{"icon-image": "marker-15" }}>
- {this.state.path.map((pos, idx) =>
- <Feature
- coordinates={pos}
- key={idx} draggable={true}
- onDragEnd={(e) => this.updateMarker(idx, e)}
- />
- )}
- </Layer>
- <ZoomControl position={"top-right"}/>
- <ScaleControl position={"bottom-right"}/>
- <RotationControl position={"top-right"}/>
- </Map>
- </div>
- <div className="mapInfo">
- <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>
- </div>
- </div>
- );
- }
- }
|