Cannot read property 'addLayer' of undefined

[arg0navt]

Cannot read property 'addLayer' of undefined

[arg0navt]

@sditcshj When I wrote this package version react-leaflet was 2.0.1, I am not sure but it look like version is not correct. Try to use old version if you can. I will try update it package on this week or next

[arg0navt]

@sditcshj What version react-leaflet and react are you use?

[sditcshj]

react-leaflet : 2.6.0
[email protected]

[sditcshj]

@arg0navt Even I am trying to react-leaflet 2.0.1, the same issue will come.

TypeError: Cannot read property 'addLayer' of undefined
at t.value (index.js:325)

Do you have any Idea about that?

[arg0navt]

@sditcshj Show your track which you setted

[sditcshj]

I am using functional component

import LeafletReactTrackPlayer from "leaflet-react-track-player";
import demo from "./demo";
import { Map, TileLayer, WMSTileLayer, Marker, Popup } from "react-leaflet";
function WMSTileLayerExample() {

const state = {
    lat: 24.4241,
    lng: 54.8478,
    zoom: 8,
    bluemarble: false,
    type: "distance",
    demo: demo,
  };
return(
<>
<Map (options)>
<WMSTileLayer (options)/>

             <LeafletReactTrackPlayer
              track={state.demo}
              optionMultyIdxFn={function(p) {
                return p.status;
              }}
              optionsMulty={[
                { color: "#b1b1b1" },
                { color: "#06a9f5" },
                { color: "#202020" },
                { color: "#D10B41" },
                { color: "#78c800" },
              ]}
              progressFormat={state.type}
              customMarker={true}
              changeCourseCustomMarker={true}
              iconCustomMarker={"/img/mech.svg"}
            />
</Map>
</>
);
}

export default WMSTileLayerExample;

[arg0navt]

@sditcshj
import demo from "./demo";
is it demo from package?

[sditcshj]

demo json from your example

[arg0navt]

@sditcshj
You can use it for example

import React from "react";
import LeafletReactTrackPlayer from "laeflet-react-track-player";
import demo from "./demo";
import { Map, TileLayer } from "react-leaflet";

export default () => {
  const state = {
    lat: 24.4241,
    lng: 54.8478,
    zoom: 8,
    bluemarble: false,
    type: "distance",
    demo: demo,
    position: [demo[demo.length - 1].lat, demo[demo.length - 1].lng],
    zoom: 14
  };
  return (
    <div className="App">
      <Map center={state.position} zoom={state.zoom}>
        <LeafletReactTrackPlayer
          track={state.demo}
          optionMultyIdxFn={function (p) {
            return p.status;
          }}
          optionsMulty={[
            { color: "#b1b1b1" },
            { color: "#06a9f5" },
            { color: "#202020" },
            { color: "#D10B41" },
            { color: "#78c800" },
          ]}
          progressFormat={state.type}
          customMarker={true}
          changeCourseCustomMarker={true}
          streamData={false}
          iconCustomMarker={"/img/mech.svg"}
        />
        <TileLayer
          attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
      </Map>
    </div>
  );
}

[sditcshj]

@arg0navt brother, the same add layer issue.

TypeError: Cannot read property 'addLayer' of undefined at t.value (index.js:325)

inside your lib/index.js (line no: 325)

this.props.leaflet.map.addLayer(finishMarker);

[arg0navt]

@sditcshj I understand, I trying to find reason, but in a example everything work. I don't know what else can influence in package in your project, I miss the big picture. I can say for sure is that it strange crash becourse also this.props.leaflet.map didn't created

[sditcshj]

I am facing the same add layer issue in the Arrowhead plugin. But I sorted out that. now only the track player plugin I am facing the issue bro

[arg0navt]

@sditcshj If you can show me what you have in this.props.leaflet maybe I help you with it

[sditcshj]

@arg0navt Hi bro, I fixed the issue. I added your leaflet-react-track-player plugin folder to my project and I import from my local folder. it is working now.

and I have 1 more doubt bro, I set the course(angle), but it's not rotated in marker. can you sort out the issue?

whether I need to add any more variables?

[arg0navt]

@sditcshj Check customMarker, customCourse they must be true.

[sditcshj]

@arg0navt Hi,
customMarker={true}
customCourse={true}
changeCourseCustomMarker={true}

and the JSON also has course value. but the angle is not working

[arg0navt]

@sditcshj show me example courses in your track

[sditcshj]

0: {status: "1", speed: 0, t: "06-09-2020 00:35:41", course: 0, lat: "25.516587", …}
1: {status: "1", speed: 0, t: "06-09-2020 00:37:41", course: 0, lat: "25.516647", …}
2: {status: "1", speed: 0, t: "06-09-2020 00:39:41", course: 0, lat: "25.516624", …}
3: {status: "1", speed: 0, t: "06-09-2020 00:41:41", course: 0, lat: "25.509056", …}
4: {status: "1", speed: 26, t: "06-09-2020 00:43:41", course: 345.72, lat: "25.517097", …}
5: {status: "1", speed: 0, t: "06-09-2020 00:44:18", course: 0, lat: "25.517144", …}
6: {status: "1", speed: 0, t: "06-09-2020 02:44:18", course: 0, lat: "25.517143", …}
7: {status: "1", speed: 0, t: "06-09-2020 04:44:18", course: 0, lat: "25.517143", …}
8: {status: "1", speed: 0, t: "06-09-2020 06:44:18", course: 0, lat: "25.517143", …}
9: {status: "1", speed: 0, t: "06-09-2020 08:09:59", course: 0, lat: "25.517144", …}
10: {status: "1", speed: 24, t: "06-09-2020 08:11:59", course: 231.8, lat: "25.510073", …}
11: {status: "1", speed: 0, t: "06-09-2020 08:12:21", course: 0, lat: "25.510046", …}
12: {status: "1", speed: 0, t: "06-09-2020 09:48:22", course: 0, lat: "25.510023", …}
13: {status: "1", speed: 0, t: "06-09-2020 09:50:22", course: 0, lat: "25.510043", …}
14: {status: "1", speed: 0, t: "06-09-2020 09:52:22", course: 0, lat: "25.511959", …}
15: {status: "2", speed: 45, t: "06-09-2020 09:54:22", course: 331.2, lat: "25.525013", …}
16: {status: "1", speed: 30, t: "06-09-2020 09:56:22", course: 161.87, lat: "25.52176", …}
17: {status: "1", speed: 0, t: "06-09-2020 09:57:39", course: 0, lat: "25.516631", …}
18: {status: "1", speed: 0, t: "06-09-2020 10:21:10", course: 0, lat: "25.516635", …}
19: {status: "1", speed: 31, t: "06-09-2020 10:23:10", course: 339.47, lat: "25.513612", …}
20: {status: "2", speed: 53, t: "06-09-2020 10:25:10", course: 330.3, lat: "25.527122", …}
21: {status: "1", speed: 0, t: "06-09-2020 10:27:10", course: 0, lat: "25.536025", …}
22: {status: "1", speed: 27, t: "06-09-2020 10:29:10", course: 98.4, lat: "25.540216", …}
23: {status: "1", speed: 0, t: "06-09-2020 10:31:10", course: 0, lat: "25.53959", …}
24: {status: "1", speed: 15, t: "06-09-2020 10:33:10", course: 177.21, lat: "25.539418", …}
25: {status: "2", speed: 68, t: "06-09-2020 10:35:10", course: 159.28, lat: "25.524619", …}
26: {status: "2", speed: 49, t: "06-09-2020 10:37:10", course: 64.75, lat: "25.524864", …}
27: {status: "2", speed: 66, t: "06-09-2020 10:39:10", course: 96.28, lat: "25.521295", …}
28: {status: "2", speed: 75, t: "06-09-2020 10:41:10", course: 103.73, lat: "25.52536", …}
29: {status: "1", speed: 0, t: "06-09-2020 10:43:10", course: 0, lat: "25.51788", …}
30: {status: "1", speed: 0, t: "06-09-2020 10:45:10", course: 0, lat: "25.517902", …}
31: {status: "1", speed: 0, t: "06-09-2020 10:47:10", course: 0, lat: "25.517887", …}
32: {status: "1", speed: 0, t: "06-09-2020 10:49:10", course: 0, lat: "25.517879", …}
33: {status: "1", speed: 0, t: "06-09-2020 10:51:10", course: 0, lat: "25.517885", …}
34: {status: "1", speed: 0, t: "06-09-2020 10:53:10", course: 0, lat: "25.51789", …}
35: {status: "1", speed: 0, t: "06-09-2020 10:55:10", course: 0, lat: "25.517898", …}
36: {status: "1", speed: 0, t: "06-09-2020 10:57:10", course: 0, lat: "25.508456", …}
37: {status: "1", speed: 0, t: "06-09-2020 10:59:10", course: 11.75, lat: "25.511024", …}
38: {status: "1", speed: 0, t: "06-09-2020 11:01:10", course: 0, lat: "25.50954", …}
39: {status: "1", speed: 0, t: "06-09-2020 11:06:20", course: 0, lat: "25.509541", …}
40: {status: "2", speed: 50, t: "06-09-2020 11:08:20", course: 18.71, lat: "25.507833", …}
41: {status: "1", speed: 0, t: "06-09-2020 11:09:26", course: 0, lat: "25.510225", …}
42: {status: "1", speed: 0, t: "06-09-2020 11:38:48", course: 0, lat: "25.510225", …}
43: {status: "1", speed: 0, t: "06-09-2020 11:40:48", course: 0, lat: "25.510218", …}
44: {status: "1", speed: 0, t: "06-09-2020 11:42:48", course: 0, lat: "25.510206", …}
45: {status: "1", speed: 0, t: "06-09-2020 11:44:48", course: 0, lat: "25.510213", …}
46: {status: "1", speed: 0, t: "06-09-2020 11:46:48", course: 0, lat: "25.510218", …}
47: {status: "1", speed: 0, t: "06-09-2020 11:48:48", course: 0, lat: "25.510208", …}
48: {status: "2", speed: 56, t: "06-09-2020 11:50:48", course: 51.99, lat: "25.515291", …}
49: {status: "2", speed: 50, t: "06-09-2020 11:52:48", course: 240.33, lat: "25.507269", …}
50: {status: "1", speed: 15, t: "06-09-2020 11:54:48", course: 263.05, lat: "25.502024", …}
51: {status: "2", speed: 58, t: "06-09-2020 11:56:48", course: 243.84, lat: "25.49771", …}
52: {status: "1", speed: 0, t: "06-09-2020 11:58:48", course: 0, lat: "25.500867", …}
53: {status: "2", speed: 65, t: "06-09-2020 12:00:48", course: 337.37, lat: "25.509618", …}
54: {status: "1", speed: 0, t: "06-09-2020 12:02:48", course: 0, lat: "25.509987", …}
55: {status: "1", speed: 0, t: "06-09-2020 12:04:44", course: 0, lat: "25.509973", …}
56: {status: "1", speed: 0, t: "06-09-2020 13:27:27", course: 0, lat: "25.509981", …}
57: {status: "3", speed: 81, t: "06-09-2020 13:29:27", course: 339.35, lat: "25.51904", …}
58: {status: "2", speed: 71, t: "06-09-2020 13:31:27", course: 162, lat: "25.519439", …}
59: {status: "1", speed: 0, t: "06-09-2020 13:33:27", course: 0, lat: "25.516854", …}
60: {status: "1", speed: 0, t: "06-09-2020 13:35:27", course: 0, lat: "25.516857", …}
61: {status: "1", speed: 0, t: "06-09-2020 13:37:27", course: 0, lat: "25.516861", …}
62: {status: "1", speed: 0, t: "06-09-2020 13:39:27", course: 0, lat: "25.516936", …}
63: {status: "1", speed: 0, t: "06-09-2020 13:40:36", course: 0, lat: "25.516594", …}
64: {status: "1", speed: 0, t: "06-09-2020 14:16:22", course: 0, lat: "25.516592", …}
65: {status: "1", speed: 0, t: "06-09-2020 14:18:22", course: 0, lat: "25.51657", …}
66: {status: "1", speed: 0, t: "06-09-2020 14:20:22", course: 0, lat: "25.516625", …}
67: {status: "2", speed: 51, t: "06-09-2020 14:22:22", course: 162.46, lat: "25.514445", …}
68: {status: "2", speed: 43, t: "06-09-2020 14:24:22", course: 159.09, lat: "25.511417", …}
69: {status: "1", speed: 0, t: "06-09-2020 14:24:59", course: 0, lat: "25.510035", …}

[arg0navt]

@sditcshj Ohhh shit, It is my fail, in first point you have 0, therefore it call false. I will fix it. Thankyou, at this moment you can set 1 on first point and it will be work

[sditcshj]

@arg0navt Hi bro, this array is generating from dynamically, my track color also has the same issue. I think maybe the array index value. I am waiting for your fix.

[arg0navt]

fixed