-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindextfl.html
114 lines (101 loc) · 4.18 KB
/
indextfl.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html>
<head>
<title>TfL Strike Impact Visualization</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<style>
body, h1, h2, p, ul {
text-align: center;
}
#visualization {
height: 600px;
width: 800px;
margin: auto;
}
#timeSlider, .range {
width: 50%;
margin: auto;
display: block;
}
</style>
</head>
<body>
<h1>TfL Strike Impact Visualization</h1>
<h2>Project Overview</h2>
<p>This project aims to visualize the impact of strikes on London's public transport system, specifically focusing on the TfL (Transport for London). The goal is to highlight the economic disparity that often leads to these strikes.</p>
<h2>Progress Log</h2>
<ul>
<li>Step 1: Initial Setup</li>
<li>Step 2: API Integration</li>
<li>Step 3: Visualisation Plan</li>
<li>Step 4: Time Slider and Marker Management ( Dynamic )</li>
<li>Step 5: Added Strike logic and Heat Map ( Which will show once the good folks at TfL grants me an API key )</li>
</ul>
<div id="visualization"></div>
<!-- New Slider --> <!-- Slider might not work properly due to js dependencies -->
<div>
<span id="rangeValue">1</span>
<input class="range" type="range" name="" value="0" min="1" max="52" onchange="rangeSlide(this.value)" oninput="rangeSlide(this.value)"></input>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Initialize the map
var mymap = L.map('visualization').setView([51.505, -0.09], 13);
// Add tile layer to the map
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(mymap);
// Initialize an empty heatmap layer
var heat = L.heatLayer([], {
radius: 25,
blur: 15,
maxZoom: 17,
}).addTo(mymap);
// Time slider & markers
var timeSlider = document.getElementById('timeSlider');
var markers = [];
timeSlider.addEventListener('input', function() {
// Remove existing markers
markers.forEach(marker => mymap.removeLayer(marker));
markers = [];
var selectedTime = timeSlider.value; // Get the selected time from the slider
fetch(`https://api.tfl.gov.uk/Line/Mode/tube/Status?app_id=YOUR_APP_ID&app_key=YOUR_APP_KEY&time=${selectedTime}`)
.then(response => response.json())
.then(data => {
// Fetch logic here
});
// Fetch TfL API data
fetch('https://api.tfl.gov.uk/Line/Mode/tube/Status', {
headers: {
'Authorization': `Bearer ${yourApiKey}` // Replace 'yourApiKey' with your actual API key
}
})
.then(response => response.json())
.then(data => {
var heatData = []; // Array to hold heatmap data
data.forEach(line => {
var lat = line.lat; // Placeholders - Replace with actual data
var lon = line.lon; // Placeholders - Replace with actual data
var strikeImpact = line.strikeImpact; // Placeholders - Replace with actual data
// Update heatmap data
heatData.push([lat, lon, strikeImpact]);
// Update markers
var color = strikeImpact > 0.5 ? 'red' : 'blue'; // Color based on strike impact
var marker = L.marker([lat, lon], {icon: L.divIcon({className: 'marker-icon', html: '<div style="background-color:' + color + '"></div>'})}).addTo(mymap);
marker.bindPopup(`<b>${line.name}</b><br>Status: ${line.lineStatuses[0].statusSeverityDescription}`);
markers.push(marker);
});
// Update heatmap layer
heat.setLatLngs(heatData);
})
.catch(error => console.error('Error fetching TfL API:', error));
});
// Function for new slider
function rangeSlide(value) {
document.getElementById('rangeValue').innerHTML = value;
}
});
</script>
</body>
</html>