How to Implement Open Route Service in Leaflet

Question

Can I use Open Route Service api in leaflet map? I can't find working example to show how to integrate api key on the map. Now I'm using graphhopper and it's working flawless but now it have restrictions to use up to 5 points. When I try to make waypoints via open route service I'm showing this error: Uncaught TypeError: L.Routing.openrouteservice is not a constructor My code:

  var mymap = L.map('mapid').setView([50.27264, 7.26469], 13);
  L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '© OpenStreetMap contributors and ORS'
}).addTo(this.mymap);

var control = L.Routing.control({
  waypoints: [
    L.latLng(3.102739, 101.598077),
    L.latLng(3.101861, 101.599037)
  ],
  router: new L.Routing.openrouteservice('5b3ce3597851110001cf6248e3cd48b3c44c4e529f8fac67408d4257')
  // routeWhileDragging: true
}).addTo(this.mymap);

you have indeed included the `L.Routing.OpenRouteService.js` file from [lrm-openrouteservice](https://github.com/willmorejg/lrm-openrouteservice) in your project? — Seth Lutske, Jun 29 '20 at 23:47
I installed it with npm but it doesn't work. I can't find another cdn libraries to try — T T, Jun 30 '20 at 00:01
how are you bringing it in? with an `import` statement? you can also copy the [source code](https://github.com/willmorejg/lrm-openrouteservice/blob/master/lrm-openrouteservice/L.Routing.OpenRouteService.js) into a file in your project and link that file in the html header — Seth Lutske, Jun 30 '20 at 00:53
I tried now with the source code but it gave same error. I have also included all js libraries - leaflet, routing-machine and can't see what is wrong... — T T, Jun 30 '20 at 07:01

T T · Answer 1 · 2020-06-30T09:04:41.857

I don't know does openrouteservice works with leaflet routing machine but I tried with MapBox and everything works fine. So now my map support walking directions.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Plain Leaflet API</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.css' rel='stylesheet' />
<!-- Leaflet Map -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-routing-machine/3.2.12/leaflet-routing-machine.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-routing-machine/3.2.12/leaflet-routing-machine.min.js"></script>
<!-- end Leaflet map -->
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>

<script>
L.mapbox.accessToken = 'pk.eyJ1IjoiZmFyYWRheTIiLCJhIjoiTUVHbDl5OCJ9.buFaqIdaIM3iXr1BOYKpsQ';
    
var mapboxTiles = L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/{z}/{x}/{y}?access_token=' + L.mapbox.accessToken, {
       attribution: '© <a href="https://www.mapbox.com/feedback/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
       tileSize: 512,
       zoomOffset: -1
});

var map = L.map('map')
  .addLayer(mapboxTiles)
  .setView([42.3610, -71.0587], 15);
 L.Routing.control({
                router: L.Routing.mapbox(L.mapbox.accessToken,{
                    profile : 'mapbox/walking',
                    language: 'en',
                }),
                waypoints: [
                    L.latLng(40.779625, -73.969111),
                    L.latLng(40.767949, -73.971855)
                ],
            }).addTo(map);
</script>
</body>
</html>

score 0 · Answer 2 · answered Nov 28 '20 at 15:35

This is my HTML snippet for including the stuff I need for maps and routing:

<script src="scripts/maps/leaflet.js"></script> <!-- Include Leaflet JS -->
<script src="scripts/maps/leaflet-routing-machine.js"></script>  <!-- Include the Leaflet Routing Machine -->
<script src="scripts/maps/polyline.min.js"></script> <!-- for Leaflet Routing Machine -->
<script src="scripts/maps/lodash.min.js"></script> <!-- for Leaflet Routing Machine -->
<script src="scripts/maps/corslite.js"></script> <!-- for Leaflet Routing Machine -->
<script src="scripts/maps/L.Routing.OpenRouteService.js"></script>     <!-- Include the Open Route Service for Leaflet Routing Machine -->
<script src="scripts/maps/leaflet-providers.js"></script>

Then in typescript:

        let router = (L as any).Routing.control({
            router: new (L as any).Routing.openrouteservice(orsKey),
            waypoints: [
                L.latLng(startLatitude, startLongitude),
                L.latLng(endLatitude, endLongitude)
            ],
            routeWhileDragging: false,
            show: false,
            fitSelectedRoutes: false,
            createMarker: function (i, waypoint, n) {
                return null;
            },
            lineOptions: {
                styles: [{ color: '#9f150b', opacity: 1, weight: 4 }]
            }
        });

        router.addTo(map);

Only problem is the Open route service use POST requests in the latest API. So the L.Routing.OpenRouteService.js file needs updating

" L.Routing.OpenRouteService.js file needs updating" - do you have updated version? — Tikky, Jan 15 '21 at 08:16
@Tikky - When I posted, I could not find an updated version. Try here: https://github.com/willmorejg/lrm-openrouteservice/pull/6/files — Paul Morgan, May 19 '21 at 12:04

How to Implement Open Route Service in Leaflet

2 Answers2