Leaflet Routing Machine is an easy, flexible and extensible way to add routing to a Leaflet map. Using the default is just a few lines of code to add fully functional routing, but you can still customize almost every aspect of the user interface and interactions.
Questions tagged [leaflet-routing-machine]
84 questions
2
votes
0 answers
How to show route when click on marker in leaflet routing machine?
i just started with PhoneGap and Leaflet and I'm trying to make an app. I have an origin (user's current position) and some destinations. At first I don't want to show any route, but when you click/tap on a certain marker I want to show the route…
C. Perez
- 21
- 1
2
votes
1 answer
Display a direction route on Leaflet map
how I can display a direction through Waypoints on a Leaflet map.
I used "leaflet-routing-machine" but I can not view the route
L.Routing.control({
waypoints: [
L.latLng(52.5002237, -2.94),
L.latLng(52.5002237, -0.949),
…
Mahmoud
- 868
- 11
- 27
2
votes
0 answers
custom marker is not shown react-leaflet
I have used react-leaflet for showing the map. Also i have used leaflet-routing-machine for routing. The routing is shown correctly but the marker is not overriden by car icon. I tried on both routing and react-leaflet for overriding marker using…
Serenity
- 3,884
- 6
- 44
- 87
2
votes
1 answer
How to use OSRM match api in leaflet to draw a route?
I have some gps generated data during a drive.
var routeArr = [{lng1, lat1}, {lng2,lat2}, {lng3, lat3}.....];
I want to show this generated data as actual route traveled on a Leaflet powered Openstreet map.
My naive approach is to show a polyline…
Anant
- 3,047
- 2
- 27
- 33
1
vote
1 answer
How to Use SVG Component in React Leaflet?
I converted the svg I created into a component. I'm sending color and a string or integer expression into it as props and I want to create a dynamic marker accordingly.
I want my svg icon appearing in the top left to replace the blue markers on the…
Yunus
- 123
- 1
- 1
- 11
1
vote
2 answers
Openstreetmap Itinerary
I'm working on a project and I need to display points of interest that are saved in a database.
For the itinerary, I used leaflet routing machine and nominatim.
Now I need to display those points of interest that are 5km around the route.
I found in…
Massyl
- 19
- 2
1
vote
1 answer
how to draw a route by array of points using leaflet-routing-machine?
I want to drag route from many point using leaflet and leaflet-routing-machine. I do not know How to pass all of locations into the waypoints.
import { useEffect, useState } from "react";
import L from "leaflet";
import…
ParisaN
- 1,816
- 2
- 23
- 55
1
vote
0 answers
leaflet routing machine - handle errors
How can I handle not existing route in leaflet routing-machine?
In case of error I do not want to return
chekash
- 31
- 3
1
vote
1 answer
Leaflet Routing Machine - update/redraw route
I'm new about Laflet Routing Machine (liedman) https://www.liedman.net/leaflet-routing-machine/ and I would like to update the first route calculated every 30 seconds because I would like refresh it and I don't need to make many server request.
I'll…
Francesco G.
- 679
- 3
- 13
- 32
1
vote
1 answer
leaflet routing machine - IRoute.summary.totalDistance
I am using Leaflet 1.2.0 and Leaflet Routing Machine 3.2.12.
My code is drawing the correct route on the map, yet, when i want to access the summary and the totalDistance from the summary, both are undefined. Why is that?
function createRoute(id,…
marian
- 27
- 7
1
vote
1 answer
How to call Angular function from checkbox onchange in leaflet popup html?
I am using Leaflet and I have few markers. So when hovering over a marker there is a popup that opens and in that popup, there is a checkbox. So what I need is whenever a user clicks on that checkbox it should change the popup content. So for…
H Athukorala
- 739
- 11
- 32
1
vote
1 answer
Missing properties error when using Leaflet in Angular
I am trying to use Leaflet and Leaflet Routing Machine. I used following commands to install leaflet and leaflet routing machine,
npm i leaflet
npm i --save-dev @types/leaflet
npm i leaflet-routing-machine
npm i --save-dev…
H Athukorala
- 739
- 11
- 32
1
vote
1 answer
Leaflet to calculate the distance between 3 points - Search in javascript array object
I want to subtract the distance to the Leaflette waypoint from the total distance. How can I do that?
routes: Array(1)
0:
coordinates: (379) [D, D, D, D, D, D, D, D, D, D, D, D, D, D, D, D, D, D, D, D, D, D, D, D, D, D, D, D, D, D, D, D, D, D, D, D,…
storedprocedure
- 152
- 1
- 16
1
vote
1 answer
React Leaflet Routing Machine: onClick to add Marker after all waypoints are removed fires only after second click
I followed this recommendation from the Leaflet Routing Machine regarding interactions i.e. onClicks.
With my implementation, I'm saving the waypoints in local-storage—saving the latitude and longitude obj I get from the map click, to an array…
Antonio Pavicevac-Ortiz
- 7,239
- 17
- 68
- 141
1
vote
1 answer
React useReducer: Payload is received, state not updated
I am using this article to help with using the useReducer hook.
I have created this context component because I am using the react-leaflet routing machine to create markers for the route and I'd like to save the latitude and longitude in local…
Antonio Pavicevac-Ortiz
- 7,239
- 17
- 68
- 141