Thank you in advance
everything is working fine but the marker is not rotating, please help on the issue

Something like this

Is there any way??

This library is really great and helpful to me. If I get this Info tab part It will be great

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:

I am trying to toggle keepAtCenter but it's not working, Stucked on the marker position i can't move the map

here is my code:

const [isTracking,setIsTracking] = useState(false)

<LeafletTrackingMarker position={....} icon={....} duration={1000} rotationAngle={...} rotationOrigin="center" keepAtCenter={isTrack}> 
  <Popup>
     Sample Bus Data & Speed:{bus.data.data.speed}
  </Popup>
</LeafletTrackingMarker>

 ..... onClick() {
  setIsTracking((prev)=>!prev)
}

JSX element class does not support attributes because it does not have a 'props' property.
'LeafletTrackingMarker' cannot be used as a JSX component.
Its instance type 'LeafletTrackingMarker' is not a valid JSX element.

Describe the bug
I have added the leaflet-tracking-marker to my project( which is for now a map with simple markers), and followed the same code example hosted in codesandbox link ,
But it doesn't rendering anything ( the hole map), and it showed me in the console this error :

Uncaught Error: Invalid LatLng object: (undefined, undefined)

• at new LatLng (LatLng.js:32:1)
• at Object.toLatLng [as latLng] (LatLng.js:123:1)
• at NewClass.initialize (BaseMarker.js:23:1)
• at new NewClass (Class.js:22:1)
• at createMarker (LeafletTrackingMarker.js:42:1)
• at useMutableLeafletElement (element.js:10:1)
• at useLayer (layer.js:21:1)
• at ContainerComponent (component.js:6:1)
• at renderWithHooks (react-dom.development.js:14985:1)
• at updateForwardRef (react-dom.development.js:17044:1)
  A capture of the Map.js file is attached(the tracker marker in this case is called MovingMarker in the last lines)
  Any help will be appreciated
  

Describe the bug
When a marker is defined with rotationAngle equal to zero, after updating, the marker does not use the zero value and updates the marker angle considering the position variation.

To Reproduce

1. Setup a marker with rotationAngle={0}

import { useEffect, useState } from "react";
import { LeafletTrackingMarker } from "react-leaflet-tracking-marker/src";
import PropTypes from "prop-types";

const AnimatedMarker = ({ icon, latitude, longitude, children }) => {
  const [prevPos, setPrevPos] = useState([latitude, longitude]);

  useEffect(() => {
    if (prevPos[1] !== longitude && prevPos[0] !== latitude)
      setPrevPos([latitude, longitude]);
  }, [latitude, longitude, prevPos]);

  return (
    <LeafletTrackingMarker
      icon={icon}
      position={[latitude, longitude]}
      duration={1000}
      rotationAngle={0}
      rotationOrigin="unset"
    >
      {children}
    </LeafletTrackingMarker>
  );
};

AnimatedMarker.propTypes = {
  icon: PropTypes.object.isRequired,
  latitude: PropTypes.number.isRequired,
  longitude: PropTypes.number.isRequired,
  children: PropTypes.object.isRequired,
};

export default AnimatedMarker;

2. Update the marker position

Expected behaviour
Marker must keep zero angle even after marker position update

Screenshots

I already opened a pull request fixing the problem #23

Version:
node : v18.7.0
npm : 8.15.0
react version : 17.0.2
react-leaflet : 3.2.0
leaflet : 1.7.1
react-leaflet-tracking-marker : 1.0.15

Hello good morning, i have some problem when, i build the application, when i use "npm run build" in nextjs, previously there was no error, when i build, can you help me? thank you

Hey,
when a large number of makers are used, say >1000, Leaflet cannot handle this by default and slows down quite a bit - Ref. Poor performance with many markers. I looked around a bit and one of the solutions suggested was to use Canvas - Ref. Large dataset of markers or dots in Leaflet. But that would take away the nice features that are now provided by react-leaflet-tracking-marker. It would be really nice if that solution is included in this library.

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.
I want to render more than 1000 markers on the map, and being violation issue and slow, that is why please update for this feature

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Using the import method shown in the example gives an error.
The example: import LeafletTrackingMarker from 'react-leaflet-tracking-marker'

I fixed it by importing it this way:
import { LeafletTrackingMarker } from 'react-leaflet-tracking-marker'