`;
if (shipMarkers[ship.id]) {
shipMarkers[ship.id].setLatLng([ship.lat, ship.lng]);
shipMarkers[ship.id].getPopup().setContent(popupContent);
} else {
const marker = L.marker([ship.lat, ship.lng], { icon: cruiseIcon, rotationAngle: ship.course }).addTo(map);
marker.bindPopup(popupContent);
shipMarkers[ship.id] = marker;
const option = document.createElement('option');
option.value = ship.id;
option.textContent = ship.name;
shipSelector.appendChild(option);
}
});
}
function simulateMovement() {
mockShipData = mockShipData.map(ship => {
// Simple simulation: move ships slightly
ship.lat += (Math.random() - 0.5) * 0.1;
ship.lng += (Math.random() - 0.5) * 0.1;
return ship;
});
updateShipMarkers();
}
shipSelector.addEventListener('change', (e) => {
const selectedShipId = e.target.value;
if (selectedShipId && shipMarkers[selectedShipId]) {
const marker = shipMarkers[selectedShipId];
map.setView(marker.getLatLng(), 8);
marker.openPopup();
}
});
// Initial setup and start simulation
updateShipMarkers();
setInterval(simulateMovement, 5000); // Update every 5 seconds
});
