2

I am looking for way to make all the polylines between each of my markers "snap to road" rather than being a direct line drawn between point a and b. So between any two points, i would like the points to be automatically placed on the closest road (if the mark is not placed on a road) and would like a polyline produced that is along the shortest road route between the two points. I’ve just started looking into the google maps API and it seems like they have the feature, but I don't want to have to change everything I have already. Here's my code.

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { MapContainer, TileLayer, Polyline } from "react-leaflet";
import "../styles/Map.css";
import AddMarkers from "./AddMarkers";

const Map = () => {
  const markers = useSelector((state) => state.markers);

  return (
    <div className="leaflet-container">
      <MapContainer
        center={[50.868031999999996, -9]}
        zoom={20}
        scrollWheelZoom={true}
      >
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <AddMarkers />
        {markers.length > 1 && (
          <Polyline
            positions={markers.map((marker) => {
              return [marker.lat, marker.lng];
            })}
          />
        )}
      </MapContainer>
    </div>
  );
};

export default Map;
Kuda
  • 95
  • 1
  • 9
  • 1
    use [leaflet-routing-machine](https://github.com/perliedman/leaflet-routing-machine). Check out [this example integrating leaflet-routing-machine with react-leaflet](https://github.com/arjunghimire/react-leaflet-routing-machine-example), though that example uses react-leaflet v2, so you'll have to rewrite it to use V3, which is what you're using. – Seth Lutske May 03 '21 at 20:22
  • 1
    I see you've added a bounty to this. I might recommend adding some detail to your question. Do you simply need to place markers, and draw a polyline between them that follows the roads that produce the shortest drive time? Or do you need to be able to drag a marker as well, and as you drag, have that polyline comform to whatever roads are between the end marker and the dragging marker at any given instant within the drag action? I'm struggling to understand your intent, and I'd hate for your to waste your bounty – Seth Lutske May 16 '21 at 05:14
  • Thank you. I’ve add the changes @Seth Lutske – Kuda May 18 '21 at 03:22

1 Answers1

0

It seems that you might searching for: https://github.com/makinacorpus/Leaflet.Snap

This should make it possible to enables snapping of draggable markers to polylines and other layers. The Demo-Link in this Page is broken, but it's seems to be well documented in the GitHub-Page, how to use. I think you'll need to use the section Leaflet.Draw for your implementation.

Wish you good luck with getting your Map to work like expected.

suther
  • 12,600
  • 4
  • 62
  • 99