Witam, robię stronę, w której pokazuję na mapie lokalizacje pojazdów komunikacji miejskiej, jest tam możliwość wyboru linii, nie wiem jak sprawić by po kliknięciu danego numeru wyświetlały się pojazdy o danym numerze, wcześniej wpisywałem numer, który chciałem zobaczyć klikając wybierz linię. Oto kod:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin="" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin=""></script>
<style>
#mapid {
height: 720px;
}
p {
word-wrap: break-word;
}
</style>
<title>Document</title>
</head>
<body>
<button type="button">Wybierz linie</button>
<p id="possibilities">
Linie do wyboru:
</p>
<div id="mapid"></div>
<script>
const lines = [112, 149, 169, 8, 118, 148, 268, 249, 607, 126, 132, 108, 175, 12, 210, 199, 130, 127, 295, 189, 154, 186, 122, 184, 107, 123, 179, 4, 255, 168, 166, 136, 10, 213, 207, 120, 3, 9, 2, 110, 171, 167, 113, 131, 162, 5, 256, 205, 195, 178, 143, 155, 111, 117, 158, 6, 267, 174, 7, 115, 200, 124, 116, 227, 283, 156, 157, 262, 269, 622, 658, 232, 106, 320, 606, 138, 512];
function button() {
for (var i = 0; i < lines.length; i++) {
document.getElementById("possibilities").innerHTML += "<button>" + lines[i] + "</button>";
}
}
button();
const mymap = L.map('mapid').setView([54.352024, 18.646639], 12); // tworzenie obiektu mapy, dwie pierwsze liczby to współrzędne, a trzecia to zoom
mymap.setView([54.352024, 18.646639], 12)
const attribution =
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'; // atrybucja jest potrzebna do stworzenia mapy
const tileUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';// jak wiersz wyzej
const tiles = L.tileLayer(tileUrl, { attribution });// tworzenie mapy
tiles.addTo(mymap);
const api_url = "https://ckan2.multimediagdansk.pl/gpsPositions?";
let start;
// Tworzenie obiektu do zarządzania markerami
const markers = {
_markers: [], // Przechowuje dodane markery
save: function (marker) { // Funkcja dodaje nowy marker do tablicy
this._markers.push(marker);
},
clear: function () { // Funkcja mapuje istniejące markery i usuwa każdy z mapy
this._markers.map(marker => mymap.removeLayer(marker));
this._markers = []; // Czyścimy tablicę markerów
}
}
function chooseLine() {
async function move() {
const response = await fetch(api_url);
const vehicles = await response.json();
// let results = vehicles["Vehicles"].map(a => a.Line);
// let unique = [...new Set(results)];
// document.getElementById("possibilities").innerHTML = unique;
markers.clear(); // Przed dodaniem nowych markerów na mapie, usuwamy już istniejące
let result = vehicles["Vehicles"].filter(obj => { // tworzenie tablicy obiektów - pojazdów, które mają dany nr linii
return obj.Line === line
})
console.log(result);
for (var vehicle of result) {
const marker = L.marker([vehicle["Lat"], vehicle["Lon"]]).addTo(mymap).bindPopup(vehicle["VehicleCode"]); // Tworzymy nowy marker i przypisujemy go do zmiennej
markers.save(marker); // Zapisujemy nowo dodany marker do tablicy
}
}
const line = prompt('wybierz linie');
clearInterval(start);
move();
start = setInterval(move, 25000);
}
const el = document.querySelector("p");
el.addEventListener("click", chooseLine);
</script>
</body>
</html>