Init. Map does not function and only working on backend at the moment.

2024-03-15 22:15:20 +02:00
commit d521b9db0c
1488 changed files with 252767 additions and 0 deletions
--- a/client/index.html
+++ b/client/index.html
@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Bus Location Finder</title>
+  <style>
+    #map {
+      height: 1000px;
+      width: 100%;
+    }
+  </style>
+</head>
+<body>
+
+<h2>Bus Location Finder</h2>
+<form id="search-form">
+  <label for="bus-id">Enter Bus ID (TAK):</label>
+  <input type="text" id="bus-id" name="bus-id">
+  <button type="submit">Search</button>
+</form>
+
+<div id="map"></div>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css" />
+
+<script>
+  var map = L.map('map').setView([59.4370, 24.7536], 12);
+
+  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+  }).addTo(map);
+
+  // Function to handle form submission
+  document.getElementById('search-form').addEventListener('submit', function(event) {
+    event.preventDefault();
+    var tak = document.getElementById('bus-id').value.trim();
+    if (tak) {
+      fetch('https://transport.tallinn.ee/gps.txt')
+        .then(response => response.text())
+        .then(data => {
+          var lines = data.trim().split('\n');
+          lines.forEach(function(line) {
+            var fields = line.split(',');
+            if (fields[2] === tak) {
+              var lat = parseFloat(fields[3]);
+              var lon = parseFloat(fields[4]);
+              if (!isNaN(lat) && !isNaN(lon)) {
+                map.setView([lat, lon], 15);
+                L.marker([lat, lon]).addTo(map)
+                  .bindPopup('Bus ID (TAK): ' + tak).openPopup();
+              }
+            }
+          });
+        })
+        .catch(error => {
+          console.error('Error fetching bus data:', error);
+          alert('Error fetching bus data. Please try again later.');
+        });
+    } else {
+      alert('Please enter a Bus ID (TAK).');
+    }
+  });
+
+</script>
+
+</body>
+</html>