Skip to content

Instantly share code, notes, and snippets.

@gterrill
Created October 22, 2024 06:23
Show Gist options
  • Save gterrill/01b6bd2cdf2faecd6f0ce78e0540c5b5 to your computer and use it in GitHub Desktop.
Save gterrill/01b6bd2cdf2faecd6f0ce78e0540c5b5 to your computer and use it in GitHub Desktop.
Boat Moving Map
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Boat Tracking Map</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css" />
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#map {
height: 100vh;
width: 100%;
}
.info-panel {
position: absolute;
top: 10px;
right: 10px;
background: white;
padding: 10px;
border-radius: 4px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
z-index: 1000;
max-height: 300px;
overflow-y: auto;
}
.poi-list {
margin: 0;
padding: 0;
list-style: none;
}
.poi-item {
margin: 5px 0;
padding: 5px;
border-bottom: 1px solid #eee;
}
</style>
</head>
<body>
<div id="map"></div>
<div class="info-panel">
<h3>Nearby Points of Interest</h3>
<div id="poi-list" class="poi-list"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js"></script>
<script>
// Initialize map centered at a default position
const map = L.map('map').setView([25.7617, -80.1918], 13); // Miami as default
// Add OpenStreetMap tiles
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
// Custom boat icon
const boatIcon = L.divIcon({
html: '⛵',
className: 'boat-icon',
iconSize: [20, 20],
iconAnchor: [10, 10]
});
// Initialize boat marker
let boatMarker = L.marker([25.7617, -80.1918], {icon: boatIcon}).addTo(map);
// Array to store route coordinates
let routeCoordinates = [];
let routeLine;
// Sample POIs (in real application, these would come from an API)
const pointsOfInterest = [
{ name: "Marina", coords: [25.7700, -80.1850], type: "dock" },
{ name: "Fuel Station", coords: [25.7550, -80.1900], type: "fuel" },
{ name: "Restaurant", coords: [25.7650, -80.1970], type: "food" },
{ name: "Beach", coords: [25.7680, -80.1850], type: "beach" }
];
// Add POI markers
const poiMarkers = pointsOfInterest.map(poi => {
return L.marker(poi.coords)
.bindPopup(`<b>${poi.name}</b><br>Type: ${poi.type}`)
.addTo(map);
});
// Function to update boat position
function updateBoatPosition(position) {
const newLatLng = [position.coords.latitude, position.coords.longitude];
// Update boat marker position
boatMarker.setLatLng(newLatLng);
// Center map on boat
map.setView(newLatLng);
// Add coordinate to route
routeCoordinates.push(newLatLng);
// Update route line
if (routeLine) {
map.removeLayer(routeLine);
}
routeLine = L.polyline(routeCoordinates, {color: 'blue'}).addTo(map);
// Update POI distances
updatePOIDistances(newLatLng);
}
// Function to calculate distance between two points
function calculateDistance(point1, point2) {
return map.distance(point1, point2);
}
// Function to update POI distances
function updatePOIDistances(boatPosition) {
const poiListElement = document.getElementById('poi-list');
poiListElement.innerHTML = '';
pointsOfInterest
.map(poi => ({
...poi,
distance: calculateDistance(boatPosition, poi.coords)
}))
.sort((a, b) => a.distance - b.distance)
.forEach(poi => {
const listItem = document.createElement('div');
listItem.className = 'poi-item';
listItem.innerHTML = `
<strong>${poi.name}</strong><br>
Distance: ${(poi.distance / 1000).toFixed(1)} km
`;
poiListElement.appendChild(listItem);
});
}
// Simulate boat movement (in real application, this would use real GPS data)
let simulatedLat = 25.7617;
let simulatedLng = -80.1918;
setInterval(() => {
simulatedLat += (Math.random() - 0.5) * 0.001;
simulatedLng += (Math.random() - 0.5) * 0.001;
updateBoatPosition({
coords: {
latitude: simulatedLat,
longitude: simulatedLng
}
});
}, 2000);
// In a real application, you would use the Geolocation API:
// if (navigator.geolocation) {
// navigator.geolocation.watchPosition(updateBoatPosition);
// }
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment