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

import React from "react";
import ReactMapboxGl, {
    Layer,
    Feature,
    ZoomControl,
    ScaleControl,
    RotationControl,
    Source,
    Marker,
} from "react-mapbox-gl";
import mapboxToken from "./../config/mapboxToken.js";
import {calcDistance} from "./../helpers/distance";
import {longitude, latitude, mapWidth, mapHeight, markerIcon} from "./../config/variables";
import {Button} from "reactstrap";
import {getRoute, mapStyles} from "./../helpers/mapboxHelper";
import PathButtons from "./../PathButtons";
import {GeoJSONLayer} from "react-mapbox-gl";

const Map = ReactMapboxGl({ accessToken: mapboxToken });

export default class Mapbox extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      latitude: latitude,
      longitude: longitude,
      zoom: [14],
      path: [[longitude, latitude], [longitude+0.003, latitude]],
      distance: 0,
      center: [longitude, latitude]
    }
    this.getRoute = getRoute.bind(this)
  }

  updateState = (key, value) => {
    this.setState({[key]: value})
    this.getDistance()
  }

  addMarker = (event, click) => {
    const lng = click.lngLat.lng
    const lat = click.lngLat.lat
    this.getRoute(lng, lat);
//    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
    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() {
    let testMarkers = this.props.markers
    let testMarkerType = this.props.markerType
    let markers = <></>
    if (testMarkers){
      if (testMarkerType === "feature"){
        markers = (
          <Layer type="symbol" id="marker" layout={{"icon-image": "marker-15"}}>
            {testMarkers.map((pos, idx) =>
              <Feature
                coordinates={pos}
                key={idx}
              />
            )}
          </Layer>
        )
      } else {
        markers = testMarkers.map((pos, idx) =>
          <Marker
            coordinates={pos}
            key={idx}
            anchor="bottom"
          >
            <svg height={15} viewBox="0 0 24 24" style={{fill: "#343a40"}}>
              <path d={markerIcon} />
            </svg>
          </Marker>
      )}
    } else {
      markers = this.state.path.map((pos, idx) =>
        <Feature
          coordinates={pos}
          key={idx}
          draggable={true}
          onDragEnd={(e) => this.updateMarker(idx, e)}
        />
      )
    }

    return (
      <div>
        <div className="map">
          <Map
            style={mapStyles.bright}
            containerStyle={{
              height: mapHeight,
              width: mapWidth
            }}
            center={this.state.center}
            zoom={this.state.zoom}
            onClick={(e, c) => this.addMarker(e, c)}
          >

            {/*<Layer type="line" layout={{'line-join': 'round', 'line-cap': 'round'}}
  paint={{"line-color": "#888", "line-width": 3}}
                source="routeSource"
              id="routeSource"
              type="line"
  data={{type: "LineString", coordinates: this.state.path}}
>
    <Feature
              source="routeSource"
              id="route"
              type="line"
      data={{type: "line", coordinates: this.state.path}}
      paint={{"line-color": "#888", "line-width": 3}}
              layout= {{"line-join": "round", "line-cap": "round"}}
    />
</Layer>*/}

          <Source
            id="routeSource"
            type="geojson"
            data={{type: "LineString", coordinates: this.state.path}}
          >
            <Layer
              source="routeSource"
              id="route"
              type="line"
              paint={{"line-color": "#888", "line-width": 3}}
              layout= {{"line-join": "round", "line-cap": "round"}}
            />
          </Source>

            {markers}

            <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>
          <PathButtons updateState={this.updateState} path={this.state.path} switchLatLng={true}/>
        </div>
      </div>
    );
  }
}