Wrong geometry in OSRM

Question

I sent GET request

https://router.project-osrm.org/route/v1/car/polyline(gwgsIidrdF|w`s@urwK)?alternatives=3&steps=true&annotations=false&geometries=polyline&overview=simplified

polyline(gwgsIidrdF|w`s@urwK) is equivalent of coordinates [{lat: 55.75044, lon: 37.61749},{lat: 47.22165, lon: 39.70960}]

And got a response -

How it sees OSRM:

And how it sees google:

(U can try all it in OSRM and google)

The expected result has been generated by OSRM. But it does it by steps - not by geometry. If i try to draw every step in google (i would be tired) it seems correctly.

Why it is so big difference between geometry and steps?

Also I tried to use geojson instead of polyline. Seems like coordinates are correct, but I don't know how to check it.

Answer 1

Here a jsFiddle demo, which draws OSRM route service response by geometry:

When you drag and release either the start or finish marker, my Javascript code will send an HTTP GET request to the OSRM route service and then draw the received geometries:

'use strict';

function processOsrmReply(data) {

  myMap.flyToBounds(markersGroup.getBounds());

  if (data.code !== 'Ok') {
    clearMap('Error code: ' + data.code);
    return;
  }

  data.routes.forEach(function(route) {
    routesGroup.addData(route.geometry);
  });
}

function sendOsrmRequest() {
  var url = 'https://router.project-osrm.org/route/v1/car/' +
    parseFloat(startMarker.getLatLng().lng).toFixed(6) + ',' +
    parseFloat(startMarker.getLatLng().lat).toFixed(6) + ';' +
    parseFloat(finalMarker.getLatLng().lng).toFixed(6) + ',' +
    parseFloat(finalMarker.getLatLng().lat).toFixed(6) +
    '?overview=simplified' +
    '&alternatives=3' +
    '&steps=false' +
    '&annotations=false' +
    '&geometries=geojson';

  var request = new XMLHttpRequest();
  request.open('GET', url, true);
  request.onload = function() {
    if (this.status >= 200 && this.status < 400) {
      var data = JSON.parse(this.response);
      processOsrmReply(data);
    } else {
      clearMap('Error status: ' + this.status);
    }
  };
  request.send();
}

function clearMap(str = '') {
  var myStatus = document.getElementById('myStatus');
  myStatus.textContent = str;
  routesGroup.clearLayers();
}

var startPosition = [55.75044, 37.61749];
var finalPosition = [47.22165, 39.70960];

var myMap = L.map('myMap').setView(startPosition, 14);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(myMap);

var markersGroup = L.featureGroup();
myMap.addLayer(markersGroup);
var routesGroup = L.geoJSON();
myMap.addLayer(routesGroup);

var overlays = {
  'Show start and finish markers': markersGroup,
  'Show OSRM route geometry': routesGroup
};

L.control.layers(null, overlays, {
  collapsed: false
}).addTo(myMap);

var startMarker = L.marker(startPosition, {
    draggable: true,
    title: 'start'
  })
  .on('dragend', sendOsrmRequest)
  .addTo(markersGroup);

var finalMarker = L.marker(finalPosition, {
    draggable: true,
    title: 'finish'
  })
  .on('dragend', sendOsrmRequest)
  .addTo(markersGroup);

sendOsrmRequest();

html,
body {
  margin: 0;
  padding: 0;
}

#myMap {
  position: absolute;
  top: 2em;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
}

#myStatus {
  position: absolute;
  z-index: 2;
  width: 100%;
  text-align: center;
}

<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1/dist/leaflet.min.css">
<script src="https://cdn.jsdelivr.net/npm/leaflet@1/dist/leaflet-src.min.js"></script>

<div id="myStatus">Drag the 2 markers to calculate the OSRM route</div>
<div id="myMap"></div>