Calculating driving distance between places

Question

I have managed to get an autocomplete function to a form input with Maptiler API (OSMNames) (since I find Google Maps API even more confusing).

So here comes the actual problem, I would like to get the driving distance between two places I entered with the help of the autocomplete functions in the two inputs I have created.

I am trying to do so with the OSRM (Open Source Routing Machine) API

Here are my current scripts:

<!--AUTOCOMPLETE-->
<script>
    var autocomplete = new kt.OsmNamesAutocomplete(
    'search1', 'https://geocoder.tilehosting.com/', '#My_Maptiler_API_Code');
</script>
<script>
    var autocomplete = new kt.OsmNamesAutocomplete(
    'search2', 'https://geocoder.tilehosting.com/', '#My_Maptiler_API_Code');
</script>

<!--GET INFO-->
<script>
    function loadXMLDoc() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("result").innerHTML =
            this.responseText;
        }

        if (this.readyState == 4 && this.status == 429) {
            document.getElementById("result").innerHTML =
            "Server overloaded, please try again later."
        }
    };
    xhttp.open("GET", "http://router.project-osrm.org/table/v1/driving/{longitude1},{latitude1};{longitude2},{latitude2}", true);
    xhttp.send();
    }
</script>

First, I need to get the coordinates of the places from the inputs with the help of the autocomplete function.

Currently, when the user clicks on one of the suggested places on the list, just the name item gets written in the input box. Instead, I would like to get the GPS coordinates written, not the name, so that I can use them to send the HTTP request (next step).

What is being written when I click:

What I need for the next step:

Btw, I have seen some answers in other related questions inviting to use "Nominatim". As I said, I am currently using "OSMNames", is there any difference? Should I change my geocoder?

Then, I would also need to get these coordinates in the HTTP GET request, as shown on the code.

And finally, I would like to get just one of the items from the OSRM response, the distance. Since otherwise, I would just get the entire response.

I try to avoid putting all the code here because I find it confusing when reading but should you need the rest of the code for any reason, please let me know!

Answer 1

I have created a JSFiddle demo for you, which uses Nominatim to resolve a destination position and OSRM table service to calculate the distance to it:

My impression is, that many geocoder plugins are not well maintained nowadays, so I just use jQuery to call Nominatim and then OSRM table service:

'use strict';

function processOsrmReply(data) {
  console.log(data);

  if (data.code !== 'Ok') {
    $('#myHint').text('OSRM error code: ' + data.code);
    return;
  }

  $('#myHint').text('Distance: ' + data.distances);
}

function sendOsrmRequest(startLat, startLng, endLat, endLng) {

  var osrmUrl = 'https://router.project-osrm.org/table/v1/driving/' +
    parseFloat(startLng).toFixed(6) + ',' + parseFloat(startLat).toFixed(6) + ';' +
    parseFloat(endLng).toFixed(6) + ',' + parseFloat(endLat).toFixed(6);

  var osrmParams = {
    sources: 0,
    destinations: 1,
    annotations: 'distance'
  };

  $('#myHint').text('Calculating driving distance between places...');
  $.get(osrmUrl, osrmParams, processOsrmReply);
}

var startPosition = [51.4661, 7.2491];
var myMap = L.map('myMap').setView(startPosition, 13);

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 startMarker = L.marker(startPosition)
  .bindPopup('Start: ' + startPosition)
  .addTo(myMap);

$('#myInput').autocomplete({
  source: function(request, response) {

    var nominatimUrl = 'https://nominatim.openstreetmap.org/search/';

    var nominatimParams = {
      q: request.term,
      format: 'json',
      addressdetails: 1,
      limit: 2,
      polygon_geojson: 1
    };

    $.get(nominatimUrl, nominatimParams, function(data) {
      console.log(data);

      if (data.length === 0) {
        $('#myHint').text('Nominatim returned nothing');
        return;
      }

      var autocompleteParams = data.map(n => {
        return {
          label: n.display_name,
          value: [n.lat, n.lon]
        }
      });

      response(autocompleteParams);
    });
  },
  minLength: 5,
  select: function(event, ui) {
    var finalPosition = ui.item.value;
    var finalMarker = L.marker(finalPosition)
      .bindPopup('Destination: ' + finalPosition)
      .addTo(myMap);

    var markerBounds = L.latLngBounds(startMarker.getLatLng(), finalMarker.getLatLng());
    myMap.flyToBounds(markerBounds);

    sendOsrmRequest(startPosition[0], startPosition[1], finalPosition[0], finalPosition[1]);
    return false;
  }
});

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

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

#myWidget {
  position: absolute;
  z-index: 2;
}

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

<div class="ui-widget ui-front" id="myWidget">
  <label>Enter destination: <input id="myInput"></label>

  <div id="myHint">Type in at least 5 letters!</div>
</div>

<div id="myMap"></div>

To keep my demo code short, I have hardcoded the starting position to my home city.

You could add a second jQuery UI Autocomplete input field to improve that.

The suggested solution does not require any API keys or payments and the license for my example code here is: public domain.

If you plan to run it in production, you should install your own osrm-backend and Nominatim instances.