123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148 |
- import React from "react";
- import Map from "pigeon-maps";
- import {Marker, Overlay} from "pigeon-maps";
- import Draggable from "pigeon-draggable";
- import {longitude, latitude, mapWidth, mapHeight} from "./../config/variables";
- import {Button} from "reactstrap";
- import PathButtons from "./../PathButtons";
- import {calcDistance} from "./../helpers/distance";
- import EvaluationTable from "./../EvaluationTable";
- export default class Pigeon extends React.Component{
- constructor(props) {
- super(props)
- this.state = {
- zoom: 15,
- path: [[latitude, longitude]],
- coords: [latitude, longitude],
- defaultZoom: 15,
- distance: 0,
- }
- }
- providers = {
- osm: (x, y, z) => {
- // use 3 urls to download the tiles faster
- const s = String.fromCharCode(97 + ((x + y + z) % 3))
- return `https://${s}.tile.openstreetmap.org/${z}/${x}/${y}.png`
- },
- stamenTerrain: (x, y, z, dpr) => {
- return `https://stamen-tiles.a.ssl.fastly.net/terrain/${z}/${x}/${y}${dpr >= 2 ? '@2x' : ''}.jpg`
- }
- }
- updateState = (key, value) => {
- this.setState({[key]: value})
- this.getDistance()
- }
- zoomIn = () => {
- let newZoom = Math.min(this.state.zoom + 1, 22)
- this.setState({zoom: newZoom})
- }
- zoomOut = () => {
- let newZoom = Math.max(this.state.zoom - 1, 0)
- this.setState({zoom: newZoom})
- }
- removeMarkers = () => {
- this.setState({path: []})
- }
- addMarker = (event) => {
- const lat = event.latLng[0]
- const lng = event.latLng[1]
- let pathCopy = this.state.path.slice();
- pathCopy.push([lat, lng]);
- this.setState({path: pathCopy})
- this.getDistance()
- }
- updateMarker = (event, idx) => {
- const lat = event[0]
- const lng = event[1]
- let pathCopy = this.state.path.slice();
- pathCopy[idx] = [lat, lng];
- this.setState({path: pathCopy})
- this.getDistance()
- }
- getDistance = () => {
- let dst = calcDistance(this.state.path)
- this.setState({distance: dst})
- }
- render(){
- let testMarkers = this.props.markers
- let markers = <></>
- if (testMarkers){
- markers = this.props.markers.map((pos, idx) =>
- <Marker anchor={pos} key={idx}/>
- )
- }else{
- markers = this.state.path.map((pos, idx) =>
- <Draggable
- anchor={pos}
- key={idx}
- offset={[15, 32]}
- onDragEnd={(event) => this.updateMarker(event, idx)}
- >
- <Marker anchor={pos} key={idx} color="grey"/>
- </Draggable>
- )
- }
- return (
- <div>
- <div className="map">
- <Map
- defaultCenter={this.state.coords}
- defaultZoom={this.state.defaultZoom}
- zoom={this.state.zoom}
- width={mapWidth}
- height={mapHeight}
- attribution="Pigeon Map"
- attributionPrefix={false}
- animation={true}
- provider={this.providers["osm"]}
- dprs={[1, 2]}
- mouseEvents={true}
- onClick={(event) => this.addMarker(event)}
- >
- {markers}
- <Overlay anchor={[latitude, longitude]} offset={[120, 79]}>
- {/*<img src='pigeon.png' width={240} height={158} alt='pigeon' />*/}
- </Overlay>
- {/*<Overlay
- anchor={[latitude, longitude]}
- offset={[60, 87]}
- style={{
- clipPath:
- 'polygon(100% 0, 83% 0, 79% 15%, 0 68%, 0 78%, 39% 84%, 43% 96%, 61% 100%, 79% 90%, 69% 84%, 88% 71%, 100% 15%)',
- }}
- >
- <p style={{backgroundColor: "red"}}>test overlay</p>
- </Overlay>*/}
- </Map>
- </div>
- <div className="mapInfo">
- <Button onClick={this.zoomIn}>+</Button>
- <Button onClick={this.zoomOut}>-</Button>
- <Button onClick={this.removeMarkers}>Clear path</Button>
- <Button onClick={this.getDistance}>Calculate Distance</Button>
- <p>
- Distanz: {Math.round(this.state.distance*100)/100} km
- </p>
- <PathButtons updateState={this.updateState} path={this.state.path}/>
- </div>
- <EvaluationTable mapId="pigeon"/>
- </div>
- );
- }
- }
|