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;
Post a Comment for "How To Use Leaflet Routing Machine With React-leaflet 3?"