sdjacobs · July 18, 2016 16:08
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
  <title>OTP</title>
  <meta charset="utf-8" />

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
 </head>
 <body>
  <input id="url" value="http://developer.onebusaway.org/ma-otp" /> <br>
  <b>Source: </b><span id="source"></span> <br>
  <b>Dest: </b><span id="dest"></span> <br>
  <span id="loading" ></span><br>
  <input type="button" id="clear" value="Clear"></input>
  <div id="map" style="width: 600px; height: 400px"></div>
  <div id="instructions"></div>
  <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  <script src="https://cdn.rawgit.com/jieter/Leaflet.encoded/master/Polyline.encoded.js"></script>
  <script>

    var map = L.map('map').setView([42.3876, -71.0995], 13);
    
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
      maxZoom: 18,
      attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
        '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
        'Imagery © <a href="http://mapbox.com">Mapbox</a>',
      id: 'mapbox.streets'
    }).addTo(map)

    var source = "";

    var dest = "";

    var sourceMarker, destMarker;

    var polylines = [];

    map.on('click', function(e) { 
      if (source == "") {
        source = e.latlng.lat + "," + e.latlng.lng;
        $("#source").text(source);
        sourceMarker = L.marker(e.latlng).addTo(map);
      }
      else {
        dest = e.latlng.lat + "," + e.latlng.lng;
        $("#dest").text(dest);
        destMarker = L.marker(e.latlng).addTo(map);
        route();
      }
    });

    $("#clear").click(clear);

    var transitModes = {"TRAM":1, "SUBWAY":1, "RAIL":1, "BUS":1, "FERRY":1, "CABLE_CAR":1, "GONDOLA":1, 
      "FUNICULAR":1, "TRANSIT":1, "TRAINISH":1, "BUSISH":1, "AIRPLANE":1};

    function route() {
      var url = $("#url").val() + "/otp/routers/default/plan?fromPlace=" + source + "&toPlace=" + dest;
      $("#loading").text("loading...");
      $.get(url, function(resp) {
        console.log(resp)
        
        $("#loading").text("");

        if (!resp || !(resp.plan) || !(resp.plan.itineraries)) {
          alert("no response");
          return;
        }

        resp.plan.itineraries[0].legs.forEach(function(leg) {
          console.log(leg)
          var d = leg.legGeometry.points;
          var polyline = L.Polyline.fromEncoded(d);
          
          if (transitModes[leg.mode])
            polyline.setStyle({color: "red"})
          
          polyline.addTo(map);
          polylines.push(polyline)
        })

        $("#instructions").text(JSON.stringify(resp))
      })
    }

    function clear() {
      source = "";
      dest = "";
      $("#source, #dest").text("");
      if (sourceMarker)
        map.removeLayer(sourceMarker)
      if (destMarker)
        map.removeLayer(destMarker)

      polylines.forEach(function(polyline) {
        map.removeLayer(polyline);
      })

      polylines = [];

      $("#instructions").text("")
    }

  
  </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>OTP</title>
	<meta charset="utf-8" />

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
	</head>
	<body>
	<input id="url" value="http://developer.onebusaway.org/ma-otp" /> <br>
	<b>Source: </b><span id="source"></span> <br>
	<b>Dest: </b><span id="dest"></span> <br>
	<span id="loading" ></span><br>
	<input type="button" id="clear" value="Clear"></input>
	<div id="map" style="width: 600px; height: 400px"></div>
	<div id="instructions"></div>
	<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
	<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
	<script src="https://cdn.rawgit.com/jieter/Leaflet.encoded/master/Polyline.encoded.js"></script>
	<script>

	var map = L.map('map').setView([42.3876, -71.0995], 13);

	L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
	maxZoom: 18,
	attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
	'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
	'Imagery © <a href="http://mapbox.com">Mapbox</a>',
	id: 'mapbox.streets'
	}).addTo(map)

	var source = "";

	var dest = "";

	var sourceMarker, destMarker;

	var polylines = [];

	map.on('click', function(e) {
	if (source == "") {
	source = e.latlng.lat + "," + e.latlng.lng;
	$("#source").text(source);
	sourceMarker = L.marker(e.latlng).addTo(map);
	}
	else {
	dest = e.latlng.lat + "," + e.latlng.lng;
	$("#dest").text(dest);
	destMarker = L.marker(e.latlng).addTo(map);
	route();
	}
	});

	$("#clear").click(clear);

	var transitModes = {"TRAM":1, "SUBWAY":1, "RAIL":1, "BUS":1, "FERRY":1, "CABLE_CAR":1, "GONDOLA":1,
	"FUNICULAR":1, "TRANSIT":1, "TRAINISH":1, "BUSISH":1, "AIRPLANE":1};

	function route() {
	var url = $("#url").val() + "/otp/routers/default/plan?fromPlace=" + source + "&toPlace=" + dest;
	$("#loading").text("loading...");
	$.get(url, function(resp) {
	console.log(resp)

	$("#loading").text("");

	if (!resp \|\| !(resp.plan) \|\| !(resp.plan.itineraries)) {
	alert("no response");
	return;
	}

	resp.plan.itineraries[0].legs.forEach(function(leg) {
	console.log(leg)
	var d = leg.legGeometry.points;
	var polyline = L.Polyline.fromEncoded(d);

	if (transitModes[leg.mode])
	polyline.setStyle({color: "red"})

	polyline.addTo(map);
	polylines.push(polyline)
	})

	$("#instructions").text(JSON.stringify(resp))
	})
	}

	function clear() {
	source = "";
	dest = "";
	$("#source, #dest").text("");
	if (sourceMarker)
	map.removeLayer(sourceMarker)
	if (destMarker)
	map.removeLayer(destMarker)

	polylines.forEach(function(polyline) {
	map.removeLayer(polyline);
	})

	polylines = [];

	$("#instructions").text("")
	}


	</script>
	</body>
	</html>