jku-ba-react/src/Pigeon.js

import React from "react";
import Map from "pigeon-maps";
import Marker from "pigeon-marker";
import Overlay from "pigeon-overlay";
import {longitude, latitude, mapWidth, mapHeight} from "./config/variables";
import {Button} from "reactstrap";

export default class Pigeon extends React.Component{
  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`
    }
  }

  zoomIn = () => {
    let newZoom = Math.min(this.props.mapConfig.zoom + 1, 22)
    this.props.updateMapState("zoom", newZoom)
  }

  zoomOut = () => {
    let newZoom = Math.max(this.props.mapConfig.zoom - 1, 0)
    this.props.updateMapState("zoom", newZoom)
  }

  removeMarkers = () => {
    this.props.updateMapState("path", [])
  }

  addMarker = (event) => {
    const lat = event.latLng[0]
    const lng = event.latLng[1]
    console.log("Clicked at", lat, "/", lng, event)
    let pathCopy = this.props.mapConfig.path.slice();
    pathCopy.push([lat, lng]);
    this.props.updateMapState("path", pathCopy)
    this.props.getDistance()
  }

  render(){
    const mapConfig = this.props.mapConfig;
    return (
      <div>
        <div className="map">
          <Map
            center={mapConfig.coords}
            defaultZoom={mapConfig.defaultZoom}
            zoom={mapConfig.zoom}
            width={mapWidth}
            height={mapHeight}
            attribution="Pigeon Map"
            attributionPrefix={false}
            animation={true}
            provider={this.providers["osm"]}
            dprs={[1, 2]}
            onClick={(event) => this.addMarker(event)}
          >
              {mapConfig.path.map((pos, idx) =>
                <Marker anchor={pos} key={idx}/>
              )}

              <Overlay anchor={[latitude, longitude]} offset={[120, 79]}>
                {/*<img src='pigeon.png' width={240} height={158} alt='pigeon' />*/}
              </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.props.getDistance}>Calculate Distance</Button>
          <p>
            Distanz: {Math.round(mapConfig.distance*100)/100} km
          </p>
        </div>
      </div>
    );
  }
}