leaflet-routing YOURS demo

app.css

#map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

div.line-mouse-marker {
  background-color: #ffffff;
  border: 2px solid black;
  border-radius: 10px;
}

app.js

/*
	Routing capability using the Leaflet framework
	Copyright (c) 2013, Turistforeningen, Hans Kristian Flaatten

	https://github.com/Turistforeningen/leaflet-routing
*/

var routing, data;

(function() {
  "use strict";
  jQuery(function($) {
    var api, apiKey, rUrl, sUrl, topo, map, snapping, inport, myRouter;

    var landscape = new L.TileLayer('http://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png', {
        maxZoom: 18,
      attribution: 'tiles &copy; <a target="_blank" href="http://www.thunderforest.com">Thunderforest</a> '
              + '(<a target="_blank" href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA 2.0</a>)'
    });

    var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 19,
      attribution: '&copy; <a target="_blank" href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    });
    
    var hiking = L.tileLayer('http://tile.waymarkedtrails.org/hiking/{z}/{x}/{y}.png', {
      maxZoom: 19,
      opacity: 0.5,
      attribution: 'overlay &copy; <a target="_blank" href="http://hiking.waymarkedtrails.org">Waymarked Trails</a> '
              + '(<a target="_blank" href="http://creativecommons.org/licenses/by-sa/3.0/de/deed.en">CC-BY-SA 3.0 DE</a>)'
    });

    map = new L.Map('map', {
      layers: [landscape, hiking]
      ,center: new L.LatLng(61.5, 8.8)
      ,zoom: 13
    });
    map.attributionControl.addAttribution(
            'data &copy; <a target="_blank" href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors '
            + '(<a target="_blank" href="http://opendatacommons.org/licenses/odbl/">ODbL</a>)');

    L.control.layers({
        'Landscape (Thunderforest)': landscape, 
        'OpenStreetMap': osm
    }, {
        'Hiking (Waymarked Trails)': hiking
    }).addTo(map);

    // Snapping Layer

    snapping = new L.geoJson(null, {
      style: {
        opacity:0
        ,clickable:false
      }
    }).addTo(map);
    
    // Routing Function
    // @todo speed up geometryToLayer()
    myRouter = function(l1, l2, cb) {
      //var req = $.getJSON(getUrl(l1, l2));
      var req = $.ajax({
        url: getUrl(l1, l2),
        dataType: 'text',
        beforeSend: function( xhr ) {
          xhr.setRequestHeader('X-Yours-client', 'https://github.com/nrenner/leaflet-routing');
        }
      });
      req.always(function(data, status) {
        if (status === 'success') {
          try {
            var layer = L.GeoJSON.geometryToLayer(JSON.parse(data));
            return cb(null, layer);
          } catch(e) {
            return cb(new Error('Invalid JSON'));
          }
        } else {
          return cb(new Error('Routing failed'));
        }
      });
    }
    
    //http://www.yournavigation.org/api/1.0/gosmore.php?format=kml&flat=52.215676&flon=5.963946&tlat=52.2573&tlon=6.1799&v=motorcar&fast=1&layer=mapnik
    var URL_TEMPLATE = 'api/1.0/gosmore.php?format=geojson&flat={flat}&flon={flon}&tlat={tlat}&tlon={tlon}&v=foot&fast=1&layer=mapnik';

    function getUrl(l1, l2) {
        //rUrl + [l1.lng, l1.lat, l2.lng, l2.lat].join(',') + '&callback=?'
        var urlParams = {
            flat: l1.lat,
            flon: l1.lng,
            tlat: l2.lat,
            tlon:l2.lng
        };
        var url = L.Util.template(URL_TEMPLATE, urlParams);
        var hash = window.location.hash;
        var proxy = hash ? hash.substr(1) : 'http://www.yournavigation.org/';
        
        return proxy + encodeURIComponent(url);
    }

    // Leaflet Routing Module
    routing = new L.Routing({
      position: 'topleft'
      ,routing: {
        router: myRouter
      }
      ,snapping: {
        layers: [snapping]
        ,sensitivity: 15
        ,vertexonly: false
      }
    });
    map.addControl(routing);
    routing.draw(true); // enable drawing mode
    
  });
}).call(this);

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Routing in Leaflet</title>
  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.css" />
  <link rel="stylesheet" href="http://simonwhitaker.github.io/github-fork-ribbon-css/gh-fork-ribbon.css" />
  <!--[if IE]>
    <link rel="stylesheet" href="http://simonwhitaker.github.io/github-fork-ribbon-css/gh-fork-ribbon.ie.css" />
  <![endif]-->
  <link rel="stylesheet" href="app.css" />
</head>
<body>
  <div id="map"></div>

  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.js?2"></script>
  <script src="http://turistforeningen.github.io/leaflet-routing/src/utils/LineUtil.Snapping.js"></script>
  <script src="http://turistforeningen.github.io/leaflet-routing/src/utils/Marker.Snapping.js"></script>
  <script src="http://turistforeningen.github.io/leaflet-routing/src/L.Routing.js"></script>
  <script src="http://turistforeningen.github.io/leaflet-routing/src/L.Routing.Storage.js"></script>
  <script src="http://turistforeningen.github.io/leaflet-routing/src/L.Routing.Draw.js"></script>
  <script src="http://turistforeningen.github.io/leaflet-routing/src/L.Routing.Edit.js"></script>
  <script src="app.js"></script>
  
  <!--
  CSS GitHub ribbon by Simon Whitaker
  https://github.com/simonwhitaker/github-fork-ribbon-css
  -->
  <div class="github-fork-ribbon-wrapper left-bottom">
    <div class="github-fork-ribbon">
      <a href="https://github.com/Turistforeningen/leaflet-routing">Fork me on GitHub</a>
    </div>
  </div>
</body>
</html>