React-Leaflet example

https://github.com/PaulLeCam/react-leaflet

by Alexandre Froger

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-leaflet.js"></script>
<div id="container"></div>

CSS

.leaflet-container {
    height: 400px;
    width: 100%;
}

Babel + JSX

const React = window.React;
const { MapContainer, TileLayer, Marker, Popup } = window.ReactLeaflet;
const L = window.leaflet;

const nodePositions = [
  [51.505, -0.09], // Node 1
  [51.515, -0.1],  // Node 2
  [51.52, -0.12],  // Node 3
];

// Fonction pour interpoler entre deux positions
const interpolatePosition = (startPos, endPos, t) => {
  return [
    startPos[0] + (endPos[0] - startPos[0]) * t,
    startPos[1] + (endPos[1] - startPos[1]) * t,
  ];
};

class SimpleExample extends React.Component {
  constructor() {
    super();
    this.state = {
      lat: 51.505,
      lng: -0.09,
      zoom: 13,
    };
  }

  render() {
  const [robotPosition, setRobotPosition] = useState(nodePositions[0]);
  const [progress, setProgress] = useState(0);
  const [currentNode, setCurrentNode] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setProgress(prev => {
        if (prev >= 1) {
          setCurrentNode((prevNode) => (prevNode + 1) % (nodePositions.length - 1));
          return 0;
        }
        return prev + 0.02; // Augmente la progressivité pour la fluidité
      });
    }, 1000 / 30); // 30 fps

    return () => clearInterval(interval);
  }, []);

  useEffect(() => {
    const startPos = nodePositions[currentNode];
    const endPos = nodePositions[(currentNode + 1) % nodePositions.length];
    setRobotPosition(interpolatePosition(startPos, endPos, progress));
  }, [progress, currentNode]);

  return (
    <MapContainer center={[51.505, -0.09]} zoom={13} style={{ height: "100vh" }}>
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      />

      {/* Nodes */}
      {nodePositions.map((position, idx) => (
        <Circle key={idx} center={position} radius={50}>
          <text>{idx + 1}</text>
        </Circle>
      ))}

      {/* Edges */}
      <Polyline positions={nodePositions}...