jku-ba-react/src/maps/Pigeon.js

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";

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]}
            animation={true}
            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>
      </div>
    );
  }
}