How To Use Leaflet Routing Machine With React-leaflet 3?

The old way of doing things in react-leaflet 2.8.0 was to use MapLayer and withLeaflet. But now in react-leaflet: MapLayer and withLeaflet are deprecated as of version 3. I'm try

Solution 1:

You're using createLayerComponent, but the routing machine is actually a control. Use createControlComponent.

I also recommend making this as a separate custom component, as described in the docs, rather than putting it in a useEffect. The docs are hard. Feel free to read How to extend TileLayer component in react-leaflet v3? to see if that helps in understanding how to make custom components with react-leaflet v3.

Here's how you'd do it:

import L from"leaflet";
import { createControlComponent } from"@react-leaflet/core";
import"leaflet-routing-machine";

constcreateRoutineMachineLayer = (props) => {
  const instance = L.Routing.control({
    waypoints: [
      L.latLng(33.52001088075479, 36.26829385757446),
      L.latLng(33.50546582848033, 36.29547681726967)
    ],
    ...otherOptions
  });

  return instance;
};

constRoutingMachine = createControlComponent(createRoutineMachineLayer);

exportdefaultRoutingMachine;

Working Codesandbox