Navitia isochron

by Kisio Digital

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css">
<script src="https://gitcdn.xyz/repo/CanalTP/navitia/dev/documentation/slate/source/examples/jsFiddle/resources/feedback.js"></script>
<link rel="stylesheet" href="https://gitcdn.xyz/repo/CanalTP/navitia/dev/documentation/slate/source/examples/jsFiddle/resources/feedback.css">
<div id="map"></div>

CSS

body {
  margin: 0;
}

#map {
  height: 600px;
}

JavaScript

var sandboxToken = 'a61f4cd8-3007-4557-9f4c-214969369cca';

// Isochron starting point
var from = [48.846905, 2.377097];

// Limit isochron duration (required, or may trigger timeout when there is more data)
var maxDuration = 2000;

// Navitia query for this isochron
var isochronUrl = 'https://api.navitia.io/v1/coverage/sandbox/journeys?from=' + from[1] + ';' + from[0] + '&max_duration=' + maxDuration;

// Call navitia api
$.ajax({
  type: 'GET',
  url: isochronUrl,
  dataType: 'json',
  headers: {
    Authorization: 'Basic ' + btoa(sandboxToken)
  },
  success: drawIsochron,
  error: function(xhr, textStatus, errorThrown) {
    alert('Error when trying to process isochron: "' + textStatus + '", "' + errorThrown + '"');
  }
});

/*
 * Drawing isochron result on a map.
 *
 * Isochron result contains many points with their duration from starting point.
 * So here using Leaflet, each point will be represented with a color
 * showing its duration from starting point.
 */

var tiles = {
  url: 'http://www.toolserver.org/tiles/bw-mapnik/{z}/{x}/{y}.png',
  attrib: 'Navitia Isochron example © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
};

// Create a drawable map using Leaflet
var map = L.map('map')
  .setView(from, 13)
  .addLayer(new L.TileLayer(tiles.url, {
    minZoom: 0,
    maxZoom: 16,
    attribution: tiles.attrib
  }));

// Add marker to show isochron starting point
L.marker(from).addTo(map);

var geojsonLayer = null;

/**
 * Display points returned by navitia isochron, and colored red/green depending on journey duration.
 *
 * @param {Object} result
 */
function drawIsochron(result) {
  var isochron = [];

  $.each(result.journeys, function(i, journey) {
    isochron.push({
      to: [
        parseFloat(journey.to.stop_point.coord.lat),
        parseFloat(journey.to.stop_point.coord.lon)
      ],
      duration: journey.duration,
      data: journey
    });
  });

  var geojson = createGeoJsonFromIsochron(isochron);

  drawGeoJson(map,...