ReplayMap.js

// https://github.com/linghuam/Leaflet.TrackPlayBack

import React from "react";
import L from "leaflet";
import { Map, TileLayer, ZoomControl, Marker, Popup } from "react-leaflet";
import "../track-playback/src/leaflet.trackplayback/clock";
import "../track-playback/src/leaflet.trackplayback/index";
import "../track-playback/src/control.trackplayback/control.playback";
import "../track-playback/src/control.trackplayback/index";
import DrawGeoJSON from "./DrawGeoJSON";

export default class ReplayMap extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      // stores the playback object
      playback: null,
      // stores player locations from backend
      data: null,
      // stores all drawings from backend
      allGeoJSON: [],
      // stores all active drawings on the map
      activeGeoJSON: []
    };
    this.map = React.createRef();
  }

  async componentDidMount() {
    await this.fetchPlayerData();
    //await this.fetchDrawingData();
    //this.tickDrawings();
    this.replay();
  }

  componentWillReceiveProps(nextProps) {}

  // cloud game a1231e2b-aa29-494d-b687-ea2d48cc23df
  // local game wimma 314338f9-b0bb-4bf7-9554-769c7b409bce
  // local game vbox 16977b13-c419-48b4-b7d6-e7620f27bf39
  // fetch player locations from the game
  fetchPlayerData = async () => {
    await fetch(
      `${
        process.env.REACT_APP_API_URL
      }/replay/players/314338f9-b0bb-4bf7-9554-769c7b409bce`,
      {
        method: "GET"
      }
    )
      .then(async res => await res.json())
      .then(
        async res => {
          await this.setState({ data: res });
        },
        // Note: it's important to handle errors here
        // instead of a catch() block so that we don't swallow
        // exceptions from actual bugs in components.
        error => {
          console.log(error);
        }
      );
  };

  fetchDrawingData = async () => {
    await fetch(
      `${process.env.REACT_APP_API_URL}/replay/{
		"lng": 25.72588,
		"lat": 62.23147
}`,
      {