How to use coordinates to open a routermap

Question

I created a map with leaflet 0.7.7 and I add some markers and layer using geojson data. I would like to add in each marker a link to open OSRM page with starting point centered on the chosen marker. In my data_marker_layer.js I have such structure

{
      "type": "Feature",
      "properties": {
        "marker-color": "#0000ff",
        "marker-size": "medium",
        "marker-symbol": "water",
        "name": "Fontana Valle",
        "address": "Via della Valle 19 - VALLE LOMELLINA",
        "description": '<div style="width: 240px; text-align:justify;">Fontanella con acqua potabile, si trova difronte alla Piazza Corte Granda. </div><p text-align="center";><a href="http://www.mappeattive.com/wp-content/uploads/2015/11/fontanavallelomellina.jpg"><img data-id="2021"  src="http://www.mappeattive.com/wp-content/uploads/2015/11/fontanavallelomellina.jpg" alt="Fontanella Acqua Potabile" width="240" height="140" class="alignnone size-medium wp-image-2021" /></a></p>'
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          8.664894998073578,
          45.150788440748805
        ]
      }
    }

and the code map for the marker popup is i.e.:

function interaction(feature, layer){
    layer.on({
        click: function click (e){var popupContent = "<strong>" +
feature.properties.name + "</strong><br />"+feature.properties.address +"<br />";
if (feature.properties.description) {
popupContent += feature.properties.description+'GPS: '+feature.geometry.coordinates;
}
layer.bindPopup(popupContent,{maxWidth: 320});
}
    })
}

How can I write some code to add a link to "get directions" and open the OSRM router or Googlemap using the marker coordinate? I am not a developer so I don't know if can work something like the use of this.feature.geometry.coordinates

any tips or where I can look for explanations?

Answer 1

If you want to open a new page with OSRM, centered on and with starting point as the marker coordinates from your map, you would just need to find the appropriate URL to link to.

It looks like an URL template like this works:

"http://map.project-osrm.org/?z=18&center={lat}%2C{lng}&loc={lat}%2C{lng}&loc={lat}%2C{lng}&hl=en&ly=&alt=&df=&srv="

With {lat} and {lng} in decimal degrees of course.

It will center the view on your coordinates and set the start and end points as those coordinates. It looks like you have to specify the end point, and if it is the same as the start point, OSRM map will automatically zoom to max zoom (18)…

Demo: http://jsfiddle.net/ve2huzxw/109/

If you want to integrate the routing within your map, rather than redirecting to OSRM, you would probably be interested in Leaflet Routing Machine plugin.

Other possible plugins on http://leafletjs.com/plugins.html#routing

---

EDIT:

Replacing the {lat} and {lng} in the URL template to include the proper link in your popup content is trivial:

var marker = L.marker(latLng).bindPopup(
    "<strong>" + props.name + "</strong><br />" +
  props.address + "<br />" +
  (props.description ? props.description : "") +
  "GPS: " + feature.geometry.coordinates + "<br /><br />" +
  "<a href='http://map.project-osrm.org/?z=18&center=" + lat + "%2C" + lng +
  "&loc=" + lat + "%2C" + lng +
  "&loc=" + lat + "%2C" + lng +
  "&hl=en&ly=&alt=&df=&srv=' target='_blank'>Get directions from this point</a>");

Updated demo: http://jsfiddle.net/ve2huzxw/110/

Or using L.Util.template:

var marker = L.marker(latLng).bindPopup(
  "<strong>" + props.name + "</strong><br />" +
  props.address + "<br />" +
  (props.description ? props.description : "") +
  "GPS: " + feature.geometry.coordinates + "<br /><br />" +
  L.Util.template("<a href='http://map.project-osrm.org/?z=18&center={lat}%2C{lng}&loc={lat}%2C{lng}&loc={lat}%2C{lng}&hl=en&ly=&alt=&df=&srv=' target='_blank'>Get directions from this point</a>", {
    lat: lat,
    lng: lng
  }));

Updated demo: http://jsfiddle.net/ve2huzxw/111/

---

EDIT 2:

If I understand correctly, you bind the popup in your interaction function. So this is where the OSRM link should be added.

The coordinates are available in feature.geometry.coordinates as an array where item 0 is the longitude and item 1 is the latitude (as required by GeoJSON spec).

function interaction(feature, layer) {
  var props = feature.properties,
    coords = feature.geometry.coordinates;

  var popupContent = "<strong>" +
    props.name + "</strong><br />" + props.address + "<br />";
  if (props.description) {
    popupContent += props.description;
  }
  // You already access the coordinates, what is the extra difficulty to use them in the OSRM link?
  popupContent += 'GPS: ' + feature.geometry.coordinates + "<br /><br />" +
    L.Util.template("<a href='http://map.project-osrm.org/?z=18&center={lat}%2C{lng}&loc={lat}%2C{lng}&loc={lat}%2C{lng}&hl=en&ly=&alt=&df=&srv=' target='_blank'>Get directions from this point</a>", {
      lat: coords[1],
      lng: coords[0]
    });

  layer.bindPopup(popupContent, { // You can bind the popup right away, and it will automatically open when user clicks on the marker icon.
    maxWidth: 320
  });
  // In your initial code, you bind the popup only after first click on marker, so you need 2 clicks to open the popup!
};

Updated Plunker: http://plnkr.co/edit/McR01O2u8eE7gPZ8qXpI?p=info

Notes:

• In your initial code, you bind the popup on layer click, i.e. the user needs to click once on the marker icon to trigger the binding, and to click a second time to open the popup… Why not binding the popup right away? It will be ready to be opened on user first click.
• You should review how you store your data (in your mapdata file) and how you convert it into overlays. This will save you from dozens of code copy-paste and improve the maintainability of your website.
• Do not forget to properly credit OpenStreetMap in the corner of your map!