OSRM - Create Direction Link using current position

Question

Here's what I'm trying to do. I have two lat, lngs. One is the target or the end point, the other is a stop.

I'm trying to open a map in a browser that finds the route from a individual or the current location to the endpoint via the stop using OSRM.

I tested this link:

https://map.project-osrm.org/?z=16&center=43.411867%2C3.193932&loc=43.415569%2C3.195112&loc=43.408945%2C3.191700&hl=de&alt=0&srv=0

It's good. But I want to add a control where a user can enter their current location.

I tried to add &loc=0%2C0 as starting point.

https://map.project-osrm.org/?z=16&center=43.411867%2C3.193932&loc=0%2C0&loc=43.415569%2C3.195112&loc=43.408945%2C3.191700&hl=de&alt=0&srv=0

Now there are three control boxes. But the first control does not provide the option to enter the current position.

How can I add the possibility to enter a custom start point?

Alexander Farber · Answer 1 · 2023-05-03T09:57:46.400

Just use 3 draggable markers as in the jsFiddle demo:

The Javascript code will send a request to OSRM route service whenever you drag and release one of the markers - and draw the suggested route as a blue line on the OpenStreetMap:

'use strict';

function processOsrmReply(data) {

  myMap.flyToBounds(markersGroup.getBounds());

  if (data.code === 'Ok') {
    data.routes.forEach(function(route) {
      routesGroup.addData(route.geometry);
    });
  }
}

function sendOsrmRequest() {
  routesGroup.clearLayers();

  var url = 'https://router.project-osrm.org/route/v1/car/' +
    parseFloat(startMarker.getLatLng().lng).toFixed(6) + ',' +
    parseFloat(startMarker.getLatLng().lat).toFixed(6) + ';' +
    parseFloat(stopMarker.getLatLng().lng).toFixed(6) + ',' +
    parseFloat(stopMarker.getLatLng().lat).toFixed(6) + ';' +
    parseFloat(finalMarker.getLatLng().lng).toFixed(6) + ',' +
    parseFloat(finalMarker.getLatLng().lat).toFixed(6) +
    '?overview=simplified' +
    '&alternatives=1' +
    '&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);
    }
  };
  request.send();
}

var startPosition = [43.411867, 3.193932];
var stopPosition = [43.415569, 3.195112];
var finalPosition = [43.408945, 3.191700];

var myMap = L.map('myMap').setView(stopPosition, 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().addTo(myMap);
var routesGroup = L.geoJSON().addTo(myMap);

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

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

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

var stopMarker = L.marker(stopPosition, { draggable: true })
  .on('dragend', sendOsrmRequest)
  .bindPopup('Stop')
  .addTo(markersGroup);

var finalMarker = L.marker(finalPosition, { draggable: true })
  .on('dragend', sendOsrmRequest)
  .bindPopup('Finish')
  .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 href="https://cdn.jsdelivr.net/npm/leaflet@1/dist/leaflet.min.css" type="text/css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/leaflet@1/dist/leaflet-src.min.js"></script>

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

OSRM - Create Direction Link using current position

1 Answers1