http://indyhurt.github.io/te-bike/map/index.html

1<!DOCTYPE html>
2<html>
3<head>
4	<title>Bicycle Routing</title>
5	<meta charset="utf-8">
6	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.5/leaflet.css">
7	<link rel="stylesheet" href="lrm-mapzen/leaflet.routing.mapzen.css">
8	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-geocoder-mapzen/1.4.0/leaflet-geocoder-mapzen.css">
9	<style>
10	  #map {
11		    height: 100%;
12		    width: 100%;
13		    position: absolute;
14	  }
15	</style>
16</head>
17<body>
18  <div id="map"></div>
19  

19<script src="leaflet/leaflet.js"></script>

19
20  

20<script src="https://mapzen.com/tangram/0.7.1/tangram.min.js"></script>

20
21  

21<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-routing-machine/2.6.2/leaflet-routing-machine.min.js"></script>

21
22  

22<script src="lrm-mapzen/lrm-mapzen.js"></script>

22
23  

23<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-geocoder-mapzen/1.4.0/leaflet-geocoder-mapzen.js"></script>

23
24  

24<script>
25    var map = L.map('map');
26    var geocoder = L.control.geocoder('search-DqwJuRM').addTo(map);
27    var layer = Tangram.leafletLayer({
28      scene: 'https://raw.githubusercontent.com/tangrams/refill-style/gh-pages/refill-style.yaml',
29      attribution: '| <a href="https://mapzen.com/tangram" target="_blank">Tangram</a> | <a href="http://www.openstreetmap.org/about" target="_blank">&copy; OSM contributors',
30    });
31    layer.addTo(map);
32    var control = L.Routing.control({
33      waypoints: [
34        L.latLng(44.948,-93.205),
35        L.latLng(44.951,-93.305)
36      ],
37      lineOptions: { styles: [ {color: 'FFFFFF', opacity: 0.8, weight: 12}, {color: '#2E6C97', opacity: 1, weight: 6, dashArray: '2,14'} ]},
38      geocoder: geocoder,
39      reverseWaypoints: true,
40      router: L.Routing.mapzen('valhalla-SxUZCXy', 'bicycle'),
41      formatter: new L.Routing.Mapzen.Formatter(),
42      summaryTemplate:'<div class="start">{name}</div><div class="info {transitmode}">{distance}, {time}</div>',
43      routeWhileDragging: true
44    }).addTo(map);
45
46    L.Routing.errorControl(control).addTo(map);
47    
48  </script>

48
49  

49<script>
50		function createButton(label, container) {
51	    var btn = L.DomUtil.create('button', '', container);
52	    btn.setAttribute('type', 'button');
53	    btn.innerHTML = label;
54	    return btn;
55	}
56	map.on('click', function(e) {
57	    var container = L.DomUtil.create('div'),
58	        startBtn = createButton('Starting Point', container),
59	        destBtn = createButton('Ending Point', container);
60	    L.DomEvent.on(startBtn, 'click', function() {
61	        control.spliceWaypoints(0, 1, e.latlng);
62	        map.closePopup();
63	    });
64	    L.DomEvent.on(destBtn, 'click', function() {
65	        control.spliceWaypoints(control.getWaypoints().length - 1, 1, e.latlng);
66	        map.closePopup();
67	    });    
68	    L.popup()
69	        .setContent(container)
70	        .setLatLng(e.latlng)
71	        .openOn(map);
72	});
73   </script>

73
74</body>
75</html>