Skip to content

Instantly share code, notes, and snippets.

View LouisaKB's full-sized avatar

LouisaKB

View GitHub Profile
@LouisaKB
LouisaKB / template.html
Created November 8, 2016 11:15
Template
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
</head>
<body onload="filter()">
<div id="sidebar" class="sidebar">
<div class="form-inline form-margin">
<div class="form-group">
@LouisaKB
LouisaKB / Script.html
Created November 8, 2016 11:35
<script type="text/javascript">
// Coordinates of the Big Ben tower in London. This will be our starting point.
var origin = [51.50072919999999, -0.12462540000001354];
var osmUrl="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
var osmTileLayer = L.tileLayer(osmUrl);
var markerLayer = L.layerGroup();
var leafletMap = L.map('map').addLayer(osmTileLayer).addLayer(markerLayer).setView(origin, 10);
</script>
@LouisaKB
LouisaKB / POI.js
Created November 8, 2016 11:37
var poi = {
"0": [51.616161269607204, -0.17662346363067627],
"1": [51.49244625930521, -0.26195526123046875],
"2": [51.37965553319897, -0.12654045850662113],
…
};
@LouisaKB
LouisaKB / applicationactions.js
Last active November 8, 2016 12:34
applicationactions
function filter() {
var travelTime = parseInt(document.getElementById("travelTime").value) * 60;
var transportMode = document.getElementById("transportMode").value;
var request = createRequest(travelTime, transportMode);
postRequest(request, "time_filter", timeFilterResponseHandler);
}
@LouisaKB
LouisaKB / request.js
Created November 8, 2016 11:40
function createRequest(travelTime, mode) {
return JSON.stringify({
app_id: "xxx",
app_key: "xxx",
points: poi,
sources: {
source1: {
coords: origin,
start_time: getMonday8Am().toISOString(),
travel_time: travelTime,
@LouisaKB
LouisaKB / postrequest.js
Created November 8, 2016 11:41
function postRequest(request, endpoint, callback) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (xhttp.readyState == 4 && xhttp.status == 200) {
callback(xhttp.responseText);
}
};
xhttp.open("POST", "https://api.traveltimeapp.com/v3/" + endpoint, true);
xhttp.send(request);
}
@LouisaKB
LouisaKB / handler.js
Created November 8, 2016 11:42
function timeFilterResponseHandler(responseText) {
var filteredPoi = filterByResponse(poi, responseText);
markerLayer.clearLayers();
drawMarker("blue")(origin);
var drawReachable = drawMarker("green");
filteredPoi.reachable.forEach(function (coords) {
drawReachable(coords);
});
@LouisaKB
LouisaKB / filter.js
Created November 8, 2016 11:43
function filterByResponse(poi, responseText) {
var responseJson = JSON.parse(responseText);
// As a response we get dictionary with reachable points.
// In request we have set it up as id: coords, so keys of the dictionary are indices of the reachable points.
var reachablePointsKeys = Object.keys(responseJson.sources.source1.points);
var unreachablePoiKeys = Object.keys(poi).filter(function(elem) {
return reachablePointsKeys.indexOf(elem) == -1;
});
@LouisaKB
LouisaKB / drawmarker.js
Created November 8, 2016 11:44
function drawMarker(color) {
return function (i) {
var icon = L.divIcon({
className: "glyphicon glyphicon-map-marker map-marker " + color
});
L.marker(i, {icon: icon}).addTo(markerLayer);
}
}
@LouisaKB
LouisaKB / display.js
Created November 8, 2016 11:44
function getTimes(responseText) {
var points = JSON.parse(responseText).sources.source1.points;
var keys = Object.keys(points);
return keys.map(function (key) {
return { name: key, time: points[key].time };
}).sort(function (a, b) {
return a.time - b.time;
});