Maplayer not exported: (deprecated) How would you resolve this?

[lysdexic-audio]

Simple routing that depends on Maplayer throws:

Attempted import error: 'MapLayer' is not exported from 'react-leaflet'.
also Attempted import error: 'withLeaflet' is not exported from 'react-leaflet'.

what do you suggest?

import { MapLayer } from "react-leaflet";
import L from "leaflet";
import "leaflet-routing-machine";
import { withLeaflet } from "react-leaflet";

class Routing extends MapLayer {
  createLeafletElement() {
    const { map } = this.props;
    let leafletElement = L.Routing.control({
      waypoints: [
          L.latLng(27.67, 85.316), 
          L.latLng(27.68, 85.321)
        ],
        lineOptions: {
            styles: [
              {
                color: "blue",
                opacity: 0.6,
                weight: 4
              }
            ]
          },
          addWaypoints: false,
          draggableWaypoints: false,
          fitSelectedRoutes: false,
          showAlternatives: false
    }).addTo(map.leafletElement);
    return leafletElement.getPlan();
  }
}
export default withLeaflet(Routing);

[silviuburceadev]

Duplicate of #818 ?

[jharris711]

MapLayer and withLeaflet are deprecated as of version 3.

Map Instance
Extending Third-Party Plugins

[lysdexic-audio]

It would be useful to have an example for routing using the most common routing add on like "leaflet-routing-machine"

I'm still at a loss as to how to implement this. I've tried adapting the answer in #818 and various other things based on what's linked here.

Can anyone help?

[jharris711]

Remember that Leaflet is handling the DOM rendering instead of React, so you would just use React Refs. Check out this demo (select 'open in new window' to see full UI): https://stackblitz.com/edit/react-leaflet-leaflet-routing-machine-demo?file=src/components/Map.jsx

import React, { useEffect, useState, useRef } from "react";
import {
  TileLayer,
  MapContainer,
  LayersControl
} from "react-leaflet";
import { Button } from "@material-ui/core";
import L from "leaflet";

// Import the routing machine JS and CSS:
import 'leaflet-routing-machine'
import 'leaflet-routing-machine/dist/leaflet-routing-machine.css'

const maps = {
  base: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
};

const Map = () => {
  // The state hook we will use to access the map instance:
  const [map, setMap] = useState(null);

  // Start-End point for the routing machine
  const [start, setStart] = useState([38.9072, -77.0369])
  const [end, setEnd] = useState([37.7749, -122.4194])

  // Routing machine ref
  const RoutingMachineRef = useRef(null)

  // Add the routing machine to the map instance:
  useEffect(() => {
    if (!map) return 
    if (map) {
      RoutingMachineRef.current = L.Routing.control({
        position: 'topleft',
        lineOptions: {
          styles: [
            {
              color: '#757de8',
            },
          ],
        },
        waypoints: [start, end],
      }).addTo(map)
    }
  }, [map])

  // Update start and end points on button click:
  const handleClick = () => {
    if (start[0] === 38.9072) {
      setStart([40.7128, -74.0060])
      setEnd([47.6062, -122.3321])
    }
    if (start[0] === 40.7128) {
      setStart([38.9072, -77.0369])
      setEnd([37.7749, -122.4194])
    }
  }

  // Set waypoints when start and end points are updated:
  useEffect(() => {
    if (RoutingMachineRef.current) { 
      RoutingMachineRef.current.setWaypoints([start, end])
    }
  }, [RoutingMachineRef, start, end])

  return (
    <>
      <Button variant='contained' color='default' onClick={handleClick}>Click To Change Waypoints</Button>
      <MapContainer
        center={[37.0902, -95.7129]}
        zoom={3}
        zoomControl={false}
        style={{ height: "100vh", width: "100%", padding: 0 }}
        // Set the map instance to state when ready:
        whenCreated={map => setMap(map)}
      >
        <LayersControl position="topright">
          <LayersControl.BaseLayer checked name="Map">
            <TileLayer
              attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
              url={maps.base}
            />
          </LayersControl.BaseLayer>
        </LayersControl>
      </MapContainer>
    </>
  );
};

export default Map;

[lysdexic-audio]

Awesome! Really detailed, thanks so much. It's been a little tricky to guess how to implement some of the changes in v3. This seems to be a lot closer to the previous method.

For anyone coming across this later there's another method here also: https://stackoverflow.com/questions/67658340/how-to-use-leaflet-routing-machine-with-react-leaflet-3/67661225#67661225