Navitia lines

by Kisio Digital

HTML

<link rel="stylesheet" href="https://gitcdn.xyz/repo/CanalTP/navitia/dev/documentation/slate/source/examples/jsFiddle/resources/feedback.css">
<script src="https://gitcdn.xyz/repo/CanalTP/navitia/dev/documentation/slate/source/examples/jsFiddle/resources/feedback.js"></script>
<pre></pre>
<h2>Lines available:</h2>
<ul id="lines"></ul>

CSS

.line-circle {
  display: inline-block;
  border-radius: 100px;
  width: 32px;
  height: 32px;
  color: white;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 1.25em;
  text-align: center;
  margin-right: 0.5em;
  line-height: 1.5em;
  text-shadow: 0 2px 1px rgba(0, 0, 0, 0.25);
}

li {
  margin-bottom: 0.5em;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

JavaScript

// Url to retrieve lines available on the coverage
var linesUrl = 'https://api.navitia.io/v1/coverage/sandbox/lines';

// Call Navitia API
$.ajax({
  type: 'GET',
  url: linesUrl,
  dataType: 'json',
  headers: {
    Authorization: 'Basic ' + btoa('a61f4cd8-3007-4557-9f4c-214969369cca')
  },
  success: displayLines,
  error: function(xhr, textStatus, errorThrown) {
    alert('Error: ' + textStatus + ' ' + errorThrown);
  }
});

$('pre').html(linesUrl);

/**
 * Displays lines with their colors and names.
 *
 * @param {Object} navitiaResult
 */
function displayLines(navitiaResult) {
  var $ul = $('ul#lines');

  $.each(navitiaResult.lines, function(i, line) {
    var $li = $('<li>');

    var $lineCircle = $('<span>')
      .html(line.code)
      .addClass('line-circle')
      .css({
        backgroundColor: '#' + line.color
      });

    $li.html('(' + line.network.name + ' ' + line.commercial_mode.name + ') ' + line.name).prepend($lineCircle);

    $ul.append($li);
  });
}