Can you give example format data in here? im very confused about that

[galaxiarmy]

Sory ,i got an error when retrieving data, "undefined lat lng", Can you give example about format data in here? im very confused about that, thank you for your response

My Data: [ { "status": 1, "t": "180927072508000", "course": 0, "lat": 53.22376666666667, "lng": 50.745841666666664 }, { "status": 1, "t": "180927072508000", "course": 0, "lat": 53.22376666666667, "lng": 50.745841666666664 }, { "status": 1, "t": "180927072523000", "course": 114, "lat": 53.223728333333334, "lng": 50.74598666666667 }, { "status": 1, "t": "180927072529000", "course": 138, "lat": 53.223705, "lng": 50.746021666666664 }, { "status": 1, "t": "180927072538000", "course": 149, "lat": 53.22365166666667, "lng": 50.746075 }, ]

My Code:

[galaxiarmy]

can you help me? thanks

[alexandra-c]

Hello,

The data object should be what your server gives you, or if you are parsing the server data to model it as you please, that works too. The error you are getting, makes me think of two possible issues:

1. When you are calling the <AirplaneMarker {...}/> function component, you are not sending an object with a property called data. The example found in the documentation, defines a function component AirplaneMarker with one argument, which is an object with a property data. Calling AirplaneMarker should look like this:

   <AirplaneMarker data={dataObject} />

   where dataObject, looking at your data array, would be like

   const dataObject = { "status": 1, "t": "180927072508000", "course": 0, "lat": 53.22376666666667, "lng": 50.745841666666664 }

2. Your data is an array, so you should draw the AirplaneMarker for every entry in your array, one entry representing one position of the maker. Something like this:

   
   const myData = [
   { "status": 1, "t": "180927072508000", "course": 0, "lat": 53.22376666666667, "lng": 50.745841666666664 },
   { "status": 1, "t": "180927072508000", "course": 0, "lat": 53.22376666666667, "lng": 50.745841666666664 },
   { "status": 1, "t": "180927072523000", "course": 114, "lat": 53.223728333333334, "lng": 50.74598666666667 },
   { "status": 1, "t": "180927072529000", "course": 138, "lat": 53.223705, "lng": 50.746021666666664 },
   { "status": 1, "t": "180927072538000", "course": 149, "lat": 53.22365166666667, "lng": 50.746075 },
   ]

return myData.map(entry => )

[galaxiarmy]

Sory sir, why the icon comes out so much?

[galaxiarmy]

Oh, i know..can this possible with the json data? i want to build application with tracking history marker with json data, similar this library https://github.com/arg0navt/leaflet-react-track-player

[alexandra-c]

Sory sir, why the icon comes out so much?

Because you are drawing all the entries in your array at once, sorry, my previous example was misleading. Maybe this example here can help https://github.com/alexandra-c/leaflet-tracking-marker/issues/2#issuecomment-926351315

[alexandra-c]

Oh, i know..can this possible with the json data? i want to build application with tracking history marker with json data, similar this library https://github.com/arg0navt/leaflet-react-track-player

Can be done with json data, but you may need to do something like this

  useEffect(() => {
    //get the first value in your array

    // read the next value from your array at a regular interval:
    const interval = setInterval(() => {
      //get the next value
    }, 500);

  }, []);

and with some cursor, to know where you are at in your array.

You can try writing this in CodeSandbox, so maybe I can be more helpful. :)

[galaxiarmy]

Ok thank your for your response, i will try

[galaxiarmy]

Sory, i have question again, when im setInterval with postRequest, i have an error "TypeError: Cannot read properties of undefined (reading 'lat')", thank for your response, can you give me example demo data, im very confused thank you

my data: const dataStory = [ {"id": 1, "status": 1, "t": "180927072508000", "course": 0, "lat": -5.699698, "lng": 122.842375 }, {"id": 2, "status": 1, "t": "180927072508000", "course": 0, "lat": -5.694667, "lng": 122.855194 }, {"id": 3,"status": 1, "t": "180927072523000", "course": 114, "lat": -5.691121, "lng": 122.865055 }, {"id": 4, "status": 1, "t": "180927072529000", "course": 138, "lat": -5.698012, "lng": 122.883377 } ]

my code:

const [currentTrack, setCurrentTrack] = useState

[alexandra-c]

Hey @galaxiarmy, here's a working example with your data array https://codesandbox.io/s/react-leaflet-tracking-marker-example-ivlhk?file=/src/App.js

[galaxiarmy]

thank you bro..i will try

[galaxiarmy]

thank you bro...your code is awesome..this code is solved

[alexandra-c]

Sure, no problem. Happy I could help 😊

[galaxiarmy]

Sory, i have one question, how to make ship stop in last index marker not interval again..i i have code with ref clearInterval, can you help again? thank you..

const history = useRef(null);

history.current = setInterval(() => {

                             if (cursor === dataTrack.length - 1) {
                                   cursor = 0;
                                   setCurrentTrack(dataTrack[cursor]);
                                   clearInterval(history.current);
                                      // return;
                                    }                                  
                                    cursor += 1;
                                    setCurrentTrack(dataTrack[cursor]);
                                  }, 3000);
                      return () => {
                                    clearInterval(history.current);
      `

};`

[galaxiarmy]

can you help?

[alexandra-c]

Just remove the if (cursor === dataTrack.length - 1) {...} part

[galaxiarmy]

Sory sir, i have one question how to change basic speed duration with useState, example if "normal" speed duration 1000 and if "3x" speed duration 500? can some code to solved this, i have try, but have bug, i will share my code, thank you before

function ShipMarker({ data, speed }) {
  // console.log('test current track', currentTrack)
  const { lat, lng } = data
  // console.log('test data marker', data)
  const [prevPos, setPrevPos] = useState([lat, lng])

  useEffect(() => {
    // console.log('prev', prevPos[1]);
    if (prevPos[1] !== lng && prevPos[0] !== lat) setPrevPos([lat, lng])
  }, [lat, lng, prevPos])

  return <LeafletTrackingMarker icon={newicon} 
  position={[lat, lng]} previousPosition={prevPos} duration={speed} />
}

function Map() {
     const [speed, setSpeed] = useState<number>(1000);

     return (
          <ShipMarker speed={speed} data={currentTrack ?? {}} />
    )

}