search

perliedman / leaflet-routing-machine

Control for routing in Leaflet
https://www.liedman.net/leaflet-routing-machine/
Other
1.08k stars 350 forks source link

Route rendering performance #603

Open Evaldas-B opened 4 years ago

Evaldas-B commented 4 years ago

Depending on the route it can take quite a while to render the route even if the route is generated. For example route from Portugal to Estonia takes ~200ms to get rendered. Quite an extreme case but still this is a viable scenario.

It doesn't seem that OSRM server is the bottleneck here because the call to the server is only made once and visibility of the route is controlled using marker.options.route.addTo(map) marker.options.route.remove()

I feel that the ideal solution would be to render the route once and control its visibility with display: none or setting blank markers with route opacity set to 0.

The problem is that the only way to control the visibility of route and markers is with addTo(map) and remove(). As far as I am aware there is no other way to control this dynamically as mentioned in #584

Edit 1 Also, there is a warning: [Violation] 'load' handler took 178ms

Update 2 Ok, my bad. So the latency is caused due to communication between the frontend app and OSRM server. Every single time I use route.addTo(map) request is sent to OSRM server. I guess the solution here is to save the route in the database and pass it along with the main marker coordinates and when it is retrieved from database save it in marker variable for repeated use. Similar behavior is mentioned in #195

Am I missing something here?

I have gutted my Vue app made a simple example with pure js.

perliedman commented 4 years ago

Hi, I'm not really sure what the use case here is? Do you mean you switch the entire control on/off by adding and removing it, or when is the route recalculated?

Evaldas-B commented 4 years ago

When mouse is over a marker the route should be displayed, when the mouse leaves the marker the route should be removed.

perliedman commented 4 years ago

Ok, sounds like something you would want to build a custom implementation for. You might want to use the L.Routing.Line class directly to do this instead of adding and removing the control. If you have an L.Routing.Line instance, adding it to or removing it from the map should be very quick.

Evaldas-B commented 4 years ago

Yeah, that makes a lot of sense. So basically what I am doing is I am sending two points from my backend to OpenRouteService and saving the response(GeoJSON) and then passing it to frontend. I am using L.Routing.Line as you mentioned. It is a lot faster because OpenRouteService is only queried once.

Thank you for your response. I enjoyed using LeafletRoutingMachine. Great job.